/* FloorTalk chat bubbles: text-app style (George via Boss, Oct 7 2026). PREVIEW first; UI only.
   Layers on chat-thread.css (Oct 5 continuous thread) for channels, DMs, walkie text and in-call chat.
   chat-bubbles.js adds .ft-cb to each thread list and the run classes (.ft-first / .ft-last), day dividers,
   time stamps and the sent/read mark. Every rule here is scoped under .ft-cb / .ft-cb-compose so it
   wins over chat-thread.css without !important. Tokens follow PREMIUM_DARK_UI.md.
   Light tokens apply under html[data-theme="light"] (FloorTalk itself is dark-only today). */

.ft-cb,
.ft-cb-compose,
.ft-cb-emoji-pop {
  --cb-mine-bg: #0f766e;          /* teal-700: white text 5.47:1 (AA). Plain --accent with white is 1.9:1 */
  --cb-mine-ink: #ffffff;
  --cb-them-bg: #2a2a30;
  --cb-them-ink: #fafafa;
  --cb-surface: #0c0c0e;
  --cb-stamp: #a1a1aa;
  --cb-day-bg: #1f1f23;
  --cb-day-ink: #d4d4d8;
  --cb-name-l: 74%;
  --cb-name-s: 70%;
  --cb-tr: #7dd3fc;
  --cb-quote-them: rgba(255, 255, 255, 0.07);
  --cb-quote-mine: rgba(0, 0, 0, 0.22);
  --cb-field-bg: #1f1f23;
  --cb-field-border: #3f3f46;
  --cb-icon: #d4d4d8;
  --cb-icon-hover: rgba(255, 255, 255, 0.08);
  --cb-pop-bg: #1f1f23;
  --cb-radius: 20px;
  --cb-tight: 6px;
}
html[data-theme="light"] .ft-cb,
html[data-theme="light"] .ft-cb-compose,
html[data-theme="light"] .ft-cb-emoji-pop {
  --cb-them-bg: #e4e4e7;
  --cb-them-ink: #18181b;
  --cb-surface: #fafafa;
  --cb-stamp: #52525b;
  --cb-day-bg: #e4e4e7;
  --cb-day-ink: #3f3f46;
  --cb-name-l: 30%;
  --cb-name-s: 65%;
  --cb-tr: #0e7490;
  --cb-quote-them: rgba(0, 0, 0, 0.06);
  --cb-field-bg: #ffffff;
  --cb-field-border: #d4d4d8;
  --cb-icon: #3f3f46;
  --cb-icon-hover: rgba(0, 0, 0, 0.06);
  --cb-pop-bg: #ffffff;
}

/* ---------- thread surface ---------- */
.ft-cb.ft-thread {
  gap: 0;
  padding: 8px 12px 10px;
  background: var(--cb-surface);
  border-radius: 16px;
  color: var(--cb-them-ink);
  overscroll-behavior: contain;
}
#chat-list.ft-cb { max-height: none; min-height: 240px; }
.call-chat-list.ft-cb { font-size: 16px; }

/* ---------- rows / runs ---------- */
.ft-cb .ft-msg { padding: 0; gap: 8px; align-items: flex-start; margin-top: 2px; }
.ft-cb .ft-msg.ft-first { margin-top: 12px; }
.ft-cb > .ft-day + .ft-msg.ft-first { margin-top: 2px; }
.ft-cb .ft-msg.cluster-break, .ft-cb .ft-msg.cluster { margin-bottom: 0; }

.ft-cb .ft-col { max-width: min(78%, 520px); gap: 0; }
.ft-cb .ft-msg.mine .ft-col { align-items: flex-end; }
.ft-cb .ft-cb-line { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.ft-cb .ft-msg.mine .ft-cb-line { flex-direction: row-reverse; }

/* avatar + name: group chats only, first bubble of each run, other people only */
.ft-cb .ft-avatar { flex: 0 0 32px; width: 32px; height: 32px; font-size: 12px; margin-top: 18px; }
.ft-cb .ft-msg.mine .ft-avatar { display: none; }
.ft-cb .ft-msg.them .ft-avatar { visibility: hidden; }
.ft-cb.ft-cb-group .ft-msg.them.ft-first .ft-avatar { visibility: visible; }
.ft-cb.ft-cb-dm .ft-msg .ft-avatar { display: none; }

.ft-cb .ft-msg .ft-meta { display: none; }
.ft-cb.ft-cb-group .ft-msg.them.ft-first .ft-meta { display: flex; padding: 0 12px 3px; }
.ft-cb .ft-meta .ft-time,
.ft-cb .ft-meta .ft-actions { display: none; }
.ft-cb .ft-meta .ft-name {
  font-size: 13px; font-weight: 650;
  color: hsl(var(--ft-hue, 180) var(--cb-name-s) var(--cb-name-l));
}
.ft-cb .ft-meta .ft-role { font-size: 11px; color: var(--cb-stamp); background: transparent; }

/* ---------- bubbles ---------- */
.ft-cb .ft-bubble {
  padding: 9px 14px;
  font-size: max(16px, 1rem);
  line-height: 1.45;
  color: var(--cb-them-ink);
  background: var(--cb-them-bg);
  border: 0;
  border-radius: var(--cb-radius);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ft-cb .ft-msg.them .ft-bubble { border-left: 0; }
.ft-cb .ft-msg.mine .ft-bubble { background: var(--cb-mine-bg); color: var(--cb-mine-ink); border: 0; }

/* stacking: tight inside a run, tail only on the last bubble */
.ft-cb .ft-msg.them.ft-first .ft-bubble { border-radius: var(--cb-radius) var(--cb-radius) var(--cb-radius) var(--cb-tight); }
.ft-cb .ft-msg.them:not(.ft-first) .ft-bubble { border-radius: var(--cb-tight) var(--cb-radius) var(--cb-radius) var(--cb-tight); }
.ft-cb .ft-msg.them.ft-last .ft-bubble { border-bottom-left-radius: 4px; }
.ft-cb .ft-msg.mine.ft-first .ft-bubble { border-radius: var(--cb-radius) var(--cb-radius) var(--cb-tight) var(--cb-radius); }
.ft-cb .ft-msg.mine:not(.ft-first) .ft-bubble { border-radius: var(--cb-radius) var(--cb-tight) var(--cb-tight) var(--cb-radius); }
.ft-cb .ft-msg.mine.ft-last .ft-bubble { border-bottom-right-radius: 4px; }
.ft-cb .ft-msg.ft-last .ft-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 14px;
  pointer-events: none;
}
.ft-cb .ft-msg.mine.ft-last .ft-bubble::after {
  right: -7px;
  background: var(--cb-mine-bg);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 9.5px, #000 10px);
  mask: radial-gradient(circle at 100% 0, transparent 9.5px, #000 10px);
}
.ft-cb .ft-msg.them.ft-last .ft-bubble::after {
  left: -7px;
  background: var(--cb-them-bg);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 9.5px, #000 10px);
  mask: radial-gradient(circle at 0 0, transparent 9.5px, #000 10px);
}

.ft-cb .ft-bubble .body { margin: 0; white-space: pre-wrap; }
.ft-cb .ft-bubble .body:empty,
.ft-cb .ft-bubble .ft-cb-ph { display: none; }
.ft-cb .ft-bubble .muted { color: inherit; opacity: .8; }
.ft-cb .ft-bubble .subtitle,
.ft-cb .ft-bubble .tr { font-size: 14px; line-height: 1.4; color: var(--cb-tr); margin-top: 4px; }
.ft-cb .ft-msg.mine .ft-bubble .subtitle,
.ft-cb .ft-msg.mine .ft-bubble .tr { color: rgba(255, 255, 255, 0.88); }
.ft-cb .ft-bubble .mention { color: hsl(174 72% 40%); font-weight: 700; }
html:not([data-theme="light"]) .ft-cb .ft-msg.them .ft-bubble .mention { color: #5eead4; }
.ft-cb .ft-msg.mine .ft-bubble .mention { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }

/* photos sit inside the bubble */
.ft-cb .ft-bubble img.thumb {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  margin: 6px 0 0;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(127, 127, 127, 0.15);
}
.ft-cb .ft-bubble.ft-cb-media-only { padding: 4px; }
.ft-cb .ft-bubble.ft-cb-media-only img.thumb { margin: 0; border-radius: 16px; }
.ft-cb .ft-bubble audio { display: block; width: 240px; max-width: 100%; margin-top: 6px; height: 36px; }

/* reply-to: quoted snippet inside the bubble */
.ft-cb .ft-reply-quote { margin: 2px 0 6px; padding: 6px 10px 6px 8px; border-radius: 12px; background: var(--cb-quote-them); }
.ft-cb .ft-msg.mine .ft-reply-quote { background: var(--cb-quote-mine); }
.ft-cb .ft-rq-name { font-size: 13px; color: hsl(var(--ft-reply-hue, 180) var(--cb-name-s) var(--cb-name-l)); }
.ft-cb .ft-rq-snip { font-size: 14px; color: inherit; opacity: .85; }
.ft-cb .ft-msg.mine .ft-rq-name { color: #ffffff; }
.ft-cb .ft-msg.mine .ft-rq-bar { background: rgba(255, 255, 255, 0.85); }
.ft-cb .ft-reply-quote:hover,
.ft-cb .ft-reply-quote:focus-visible { background: rgba(45, 212, 191, 0.16); outline: 2px solid var(--accent, #2dd4bf); outline-offset: 1px; }

/* reply / ⋯ : quiet until hover, focus or tap */
.ft-cb .ft-cb-line { position: relative; }
.ft-cb .ft-cb-line > .ft-actions {          /* beside the bubble without taking bubble width */
  position: absolute; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity .12s; white-space: nowrap; z-index: 2;
}
.ft-cb .ft-msg.them .ft-cb-line > .ft-actions { left: calc(100% + 4px); }
.ft-cb .ft-msg.mine .ft-cb-line > .ft-actions { right: calc(100% + 4px); }
.ft-cb .ft-msg:hover .ft-cb-line > .ft-actions,
.ft-cb .ft-msg:focus-within .ft-cb-line > .ft-actions,
.ft-cb .ft-msg.ft-tapped .ft-cb-line > .ft-actions { opacity: 1; }
.ft-cb .ft-reply-btn, .ft-cb .msg-more { min-width: 32px; min-height: 32px; font-size: 16px; color: var(--cb-stamp); }
.ft-cb .ft-reply-btn:hover, .ft-cb .msg-more:hover { color: var(--cb-them-ink); background: var(--cb-icon-hover); }

/* time under the last bubble of a run (or the tapped one); sent/read under my latest */
.ft-cb .ft-stamp {
  display: none;
  gap: 6px;
  align-items: center;
  padding: 3px 12px 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--cb-stamp);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ft-cb .ft-msg.ft-last .ft-stamp,
.ft-cb .ft-msg.ft-tapped .ft-stamp,
.ft-cb .ft-msg.ft-cb-latest-mine .ft-stamp { display: flex; }
.ft-cb .ft-msg.mine .ft-stamp { justify-content: flex-end; }
.ft-cb .ft-msg:not(.ft-last):not(.ft-tapped) .ft-stamp .ft-cb-time { display: none; }
.ft-cb .ft-receipt { font-weight: 600; }
.ft-cb .ft-receipt.read { color: var(--cb-mine-bg); }
html:not([data-theme="light"]) .ft-cb .ft-receipt.read { color: #5eead4; }
.ft-cb .ft-cb-via { font-style: italic; }

/* day divider */
.ft-cb > .ft-day { display: flex; justify-content: center; margin: 16px 0 6px; pointer-events: none; }
.ft-cb > .ft-day:first-child { margin-top: 4px; }
.ft-cb > .ft-day > span {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  padding: 4px 12px; border-radius: 999px;
  background: var(--cb-day-bg); color: var(--cb-day-ink);
}

/* jump highlight stays */
.ft-cb .ft-msg.ft-jump { outline-offset: 3px; border-radius: 22px; }

/* optional glass style (Channels screen toggle): others go translucent; own bubbles stay solid for AA */
html.ft-chat-glass .ft-cb .ft-msg.them .ft-bubble {
  background: rgba(42, 42, 48, 0.62);
  border: 1px solid rgba(82, 82, 91, 0.45);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
html.ft-chat-glass .ft-cb .ft-msg.mine .ft-bubble { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.18); }
html.ft-chat-glass .ft-cb .ft-msg.them.ft-last .ft-bubble::after { background: rgba(42, 42, 48, 0.62); }
html.ft-chat-glass[data-theme="light"] .ft-cb .ft-msg.them .ft-bubble { background: rgba(228, 228, 231, 0.7); border-color: rgba(161, 161, 170, 0.35); }
html.ft-chat-glass[data-theme="light"] .ft-cb .ft-msg.them.ft-last .ft-bubble::after { background: rgba(228, 228, 231, 0.7); }
.ft-cb-glass-toggle { white-space: nowrap; }

/* ---------- composer ---------- */
.ft-cb-compose.text-compose { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
#chat-thread .ft-cb-compose {
  position: sticky;
  bottom: calc(var(--ft-cb-obst, calc(var(--nav-h, 68px) + var(--safe-bottom, 0px))) + 6px);   /* JS measures the bottom bar */
  z-index: 6;
  padding: 6px 0;
  background: var(--bg, #0a0a0b);
}
.ft-cb-compose .ft-cb-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 0 4px;
  border-radius: 24px;
  background: var(--cb-field-bg);
  border: 1px solid var(--cb-field-border);
}
.ft-cb-compose .ft-cb-field:focus-within { border-color: var(--accent, #2dd4bf); box-shadow: 0 0 0 1px var(--accent, #2dd4bf); }
.ft-cb-compose .ft-cb-field input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 46px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cb-them-ink);
  font-size: 16px;               /* >=16px also stops iOS zoom-on-focus */
  outline: none;
  box-shadow: none;
}
.ft-cb-compose .ft-cb-field input::placeholder { color: var(--cb-stamp); opacity: 1; }
.ft-cb-compose .ft-cb-icon,
.ft-cb-compose label.ft-cb-icon.btn {
  flex: 0 0 40px;
  width: 40px; height: 40px; min-height: 40px;
  display: inline-grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cb-icon);
  cursor: pointer;
}
.ft-cb-compose .ft-cb-icon:hover,
.ft-cb-compose .ft-cb-icon:focus-visible { background: var(--cb-icon-hover); outline: none; }
.ft-cb-compose .ft-cb-icon:focus-visible { box-shadow: 0 0 0 2px var(--accent, #2dd4bf); }
.ft-cb-compose svg { width: 22px; height: 22px; display: block; }
.ft-cb-compose .ft-cb-send.btn,
.ft-cb-compose .ft-cb-mic {
  flex: 0 0 48px;
  width: 48px; height: 48px; min-height: 48px;
  display: inline-grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cb-mine-bg);
  color: #ffffff;
  box-shadow: none;
}
.ft-cb-compose .ft-cb-send.btn:focus-visible,
.ft-cb-compose .ft-cb-mic:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; }
.ft-cb-compose .ft-cb-mic.on { background: #b91c1c; }
.ft-cb-compose.ft-cb-has-mic.ft-cb-empty .ft-cb-send { display: none; }
.ft-cb-compose.ft-cb-has-mic:not(.ft-cb-empty) .ft-cb-mic { display: none; }
.ft-cb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ft-cb-emoji-pop {
  position: fixed;
  z-index: 1200;
  display: grid;
  grid-template-columns: repeat(6, 44px);
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: var(--cb-pop-bg);
  border: 1px solid var(--cb-field-border);
  box-shadow: 0 16px 40px rgb(0 0 0 / 35%);
}
.ft-cb-emoji-pop.hidden { display: none; }
.ft-cb-emoji-pop button { width: 44px; height: 44px; font-size: 24px; line-height: 1; border-radius: 10px; }
.ft-cb-emoji-pop button:hover,
.ft-cb-emoji-pop button:focus-visible { background: var(--cb-icon-hover); outline: none; box-shadow: 0 0 0 2px var(--accent, #2dd4bf); }

/* ---------- thread header: the title gets the room; buttons go icon-only on phones ---------- */
#chat-thread.ft-cb-head > .row:first-child #chat-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px;
}
#chat-thread.ft-cb-head[data-ft-private="1"] #chat-title::before { content: "🔒 "; font-size: 14px; }
#chat-thread.ft-cb-head .ft-cb-tr-ico { display: none; }
/* 1:1 DM: header = the other person (avatar + name), no channel-style "DM · …" title */
.ft-cb-dm-head { display: none; }
#chat-thread[data-ft-conv="dm"] #chat-title { display: none; }
#chat-thread[data-ft-conv="dm"] .ft-cb-dm-head { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; }
.ft-cb-dm-head .ft-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 13px; }
.ft-cb-dm-head .ft-cb-dm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 650; }
@media (max-width: 600px) {
  #chat-thread.ft-cb-head .ft-cb-hide-sm,
  #chat-thread.ft-cb-head .ft-cb-tr-word { display: none; }
  #chat-thread.ft-cb-head .ft-cb-tr-ico { display: inline; }
  #chat-thread.ft-cb-head > .row:first-child .btn { min-width: 44px; padding: 8px 10px; }
}

/* Members (supervisors / channel admins): collapsed panel under the header */
#chat-admin.ft-cb-members { margin: 0; padding: 8px 12px; }
#chat-admin.ft-cb-members > h3 { margin: 0; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 28px; }
#chat-admin.ft-cb-members > h3::after { content: "▸"; color: var(--muted, #a1a1aa); }
#chat-admin.ft-cb-members.open > h3::after { content: "▾"; }
#chat-admin.ft-cb-members:not(.open) > :not(h3) { display: none; }
#chat-admin.ft-cb-members > h3:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; border-radius: 6px; }

/* ---------- light theme: messaging surfaces only ---------- */
html[data-theme="light"] #chat-thread .ft-cb-compose { background: #fafafa; }

/* ---------- iPad / wide ---------- */
@media (min-width: 768px) {
  .ft-cb .ft-col { max-width: min(70%, 560px); }
  .ft-cb .ft-bubble img.thumb { width: 320px; max-height: 380px; }
  .ft-cb.ft-thread { padding: 10px 18px 12px; }
}
@media (max-width: 480px) {
  .ft-cb .ft-col { max-width: 82%; }
  .ft-cb .ft-avatar { flex-basis: 28px; width: 28px; height: 28px; font-size: 11px; margin-top: 18px; }
}

/* ---------- reduced motion: no bubble animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .ft-cb .ft-msg { animation: none !important; }
  .ft-cb .ft-msg.ft-jump { transition: none; }
  .ft-cb .ft-cb-line > .ft-actions { transition: none; }
}