/* ds-thread — lead-anchored conversation bubbles (Comms Phase 1).
   Pairs with macro ds_thread_item. Tokens-only. direction → row align; channel → bubble tint.
   Phase 2 inbound (direction='in') renders left with no change. */

.ds-thread { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; max-height: 520px; overflow-y: auto; }

.ds-thread-row { display: flex; }
.ds-thread-row--out    { justify-content: flex-end; }
.ds-thread-row--in     { justify-content: flex-start; }
.ds-thread-row--center { justify-content: center; }

.ds-thread-bubble {
  max-width: 78%; border-radius: 12px; padding: 8px 12px;
  border: 1px solid var(--border); background: var(--card);
}
.ds-thread-row--out .ds-thread-bubble    { border-bottom-right-radius: 4px; }
.ds-thread-row--in .ds-thread-bubble     { border-bottom-left-radius: 4px; }
.ds-thread-row--center .ds-thread-bubble { max-width: 90%; }

/* channel tints (DS v1.0 palette-only: sms=info, email=neutral, note/call=warning) */
.ds-thread-bubble--sms   { background: var(--info-bg);    border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.ds-thread-bubble--email { background: var(--gray-100); }
.ds-thread-bubble--note,
.ds-thread-bubble--call  { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }  /* internal */

.ds-thread-meta {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 3px;
}
.ds-thread-failed { color: var(--red); }
.ds-thread-body { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.ds-thread-time { font-size: 10px; color: var(--muted); margin-top: 3px; text-align: right; }

.ds-thread-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 12px; }

/* W9 PWA 2a: an optimistic outgoing bubble queued while offline, finalised on reconnect. */
.msg--queued .msg-bubble { opacity: .6; }
.msg-queued-tag { color: var(--warning, #A7791C); font-weight: 600; }
.msg--failed .msg-bubble { opacity: .6; box-shadow: inset 0 0 0 1px var(--error, #C4463A); }
.msg--failed .msg-queued-tag { color: var(--error, #C4463A); }