/* Facebook-style continuous chat thread — PREVIEW (premium dark) */
/* Tokens align with /workspace/company/PREMIUM_DARK_UI.md */

.msg-list,
.chat-list,
.call-chat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px 12px;
  background: transparent;
}

/* Continuous thread row */
.ft-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
  padding: 1px 2px;
  animation: ft-msg-in .18s ease-out;
}
@keyframes ft-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.ft-msg.mine { flex-direction: row-reverse; }
.ft-msg.cluster { margin-top: 0; }
.ft-msg.cluster-break { margin-top: 10px; }

.ft-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fafafa;
  background: hsl(var(--ft-hue, 180) 42% 28%);
  border: 1px solid hsla(var(--ft-hue, 180), 50%, 48%, 0.45);
  box-shadow: 0 1px 0 rgb(0 0 0 / 25%);
  user-select: none;
}
.ft-msg.cluster .ft-avatar { visibility: hidden; }
.ft-msg.mine .ft-avatar {
  background: rgba(45, 212, 191, 0.22);
  border-color: rgba(45, 212, 191, 0.4);
  color: #ccfbf1;
}

.ft-col { display: flex; flex-direction: column; gap: 2px; max-width: min(82%, 420px); min-width: 0; }
.ft-msg.mine .ft-col { align-items: flex-end; }

.ft-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 4px;
  font-size: .72rem;
  color: var(--muted, #a1a1aa);
  line-height: 1.2;
}
.ft-msg.cluster .ft-meta { display: none; }
.ft-meta .ft-name {
  font-weight: 650;
  color: hsl(var(--ft-hue, 180) 70% 72%);
  font-size: .78rem;
}
.ft-msg.mine .ft-meta .ft-name { color: var(--accent, #2dd4bf); }
.ft-meta .ft-time { opacity: .85; }
.ft-meta .ft-role {
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(39, 39, 42, 0.8);
  border: 1px solid var(--border, #27272a);
  color: var(--muted, #a1a1aa);
  text-transform: lowercase;
}

/* Glass bubble */
.ft-bubble {
  position: relative;
  padding: 8px 12px;
  border-radius: 16px 16px 16px 5px;
  background: rgba(24, 24, 27, 0.72);
  border: 1px solid rgba(63, 63, 70, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 6px 18px rgb(0 0 0 / 18%);
  color: var(--text, #fafafa);
  font-size: .95rem;
  line-height: 1.4;
  word-break: break-word;
}
.ft-msg.mine .ft-bubble {
  border-radius: 16px 16px 5px 16px;
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(45, 212, 191, 0.32);
}
.ft-msg.them .ft-bubble {
  border-left: 2px solid hsla(var(--ft-hue, 180), 55%, 48%, 0.65);
}

.ft-bubble .body { margin: 0; }
.ft-bubble .subtitle,
.ft-bubble .tr {
  margin-top: 4px;
  font-size: .8rem;
  color: #7dd3fc;
  font-style: italic;
}
.ft-bubble audio {
  width: 100%;
  max-width: 260px;
  margin-top: 6px;
  height: 32px;
}
.ft-bubble .thumb,
.ft-bubble img.thumb {
  display: block;
  max-width: 220px;
  max-height: 180px;
  border-radius: 10px;
  margin-top: 6px;
}
.ft-bubble .mention { color: var(--accent, #2dd4bf); font-weight: 700; }

/* Traceable reply quote inside bubble */
.ft-reply-quote {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.ft-reply-quote:hover,
.ft-reply-quote:focus-visible {
  background: rgba(45, 212, 191, 0.12);
  outline: none;
}
.ft-rq-bar {
  flex: 0 0 3px;
  border-radius: 999px;
  background: hsl(var(--ft-reply-hue, 180) 55% 48%);
}
.ft-rq-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ft-rq-name {
  font-size: .72rem;
  font-weight: 650;
  color: hsl(var(--ft-reply-hue, 180) 70% 72%);
}
.ft-rq-snip {
  font-size: .78rem;
  color: var(--muted, #a1a1aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  opacity: 0.55;
}
.ft-msg:hover .ft-actions,
.ft-msg:focus-within .ft-actions { opacity: 1; }
.ft-reply-btn,
.msg-more {
  border: 0;
  background: transparent;
  color: var(--muted, #a1a1aa);
  font-size: .85rem;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
}
.ft-reply-btn:hover,
.msg-more:hover {
  color: var(--text, #fafafa);
  background: rgba(39, 39, 42, 0.9);
}

/* Compose reply bar */
.ft-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(24, 24, 27, 0.85);
  border: 1px solid rgba(45, 212, 191, 0.28);
  backdrop-filter: blur(10px);
}
.ft-reply-bar.hidden { display: none !important; }
.ft-reply-bar-inner {
  flex: 1;
  min-width: 0;
  border-left: 3px solid var(--accent, #2dd4bf);
  padding-left: 8px;
}
.ft-reply-bar-inner strong {
  display: block;
  font-size: .78rem;
  color: var(--accent, #2dd4bf);
}
.ft-reply-bar-inner span {
  display: block;
  font-size: .78rem;
  color: var(--muted, #a1a1aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-reply-cancel {
  border: 0;
  background: transparent;
  color: var(--muted, #a1a1aa);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 8px;
}
.ft-reply-cancel:hover { color: var(--text); background: rgba(39,39,42,.9); }

/* Jump highlight */
.ft-msg.ft-jump {
  outline: 2px solid var(--accent, #2dd4bf);
  outline-offset: 2px;
  border-radius: 12px;
  transition: outline-color .8s ease;
}

/* Soften legacy card look when ft-msg is used (override old .msg / .chat-bubble shells) */
.msg.ft-msg,
.chat-bubble.ft-msg {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
.msg.ft-msg.mine,
.chat-bubble.ft-msg.mine {
  border-color: transparent;
}

/* Call chat list: same continuous thread */
.call-chat-list .ft-msg { max-width: 100%; }
.call-chat-list .ft-col { max-width: 92%; }

@media (max-width: 480px) {
  .ft-col { max-width: 88%; }
  .ft-avatar { flex-basis: 28px; width: 28px; height: 28px; font-size: .65rem; }
}