/* assist-core/ui/bubbles — the generic chat-bubble taxonomy.
 *
 * Extracted from MindBalance's assistant thread; the taxonomy (user / ai /
 * typing / actions) matches NOW's bubble concept. Theming goes through the
 * custom properties below — set them from the host app's design system.
 * RTL-safe: uses logical properties only.
 */
.ac-thread {
  --ac-accent: #16697A;
  --ac-surface: #FFFFFF;
  --ac-surface-2: #F4F2ED;
  --ac-ink: #22303A;
  --ac-ink-soft: #6B7A82;
  --ac-line: rgba(0, 0, 0, 0.10);

  padding: 10px 12px 12px;
  max-block-size: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-thread-head {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: -10px; background: var(--ac-surface); padding: 4px 0;
}
.ac-thread-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 800; color: var(--ac-accent);
}
.ac-thread-close {
  border: none; background: none; color: var(--ac-ink-soft); cursor: pointer;
  inline-size: 24px; block-size: 24px; padding: 4px; border-radius: 999px; display: inline-flex;
}
.ac-thread-close:hover { color: var(--ac-ink); background: var(--ac-surface-2); }
.ac-bubble {
  max-inline-size: 85%; padding: 8px 13px; border-radius: 14px;
  font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word;
  color: var(--ac-ink);
}
.ac-bubble.is-user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--ac-accent) 14%, transparent);
  border-end-end-radius: 4px;
}
.ac-bubble.is-ai {
  align-self: flex-start;
  background: var(--ac-surface-2);
  border: 1px solid var(--ac-line);
  border-end-start-radius: 4px;
}
.ac-thread-actions {
  border: 1px solid var(--ac-line); border-radius: 12px; overflow: hidden;
  background: var(--ac-surface);
}
.ac-typing { display: inline-flex; gap: 4px; align-items: center; padding-block: 12px; }
.ac-typing span {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--ac-ink-soft); animation: ac-typing-dot 1.1s ease-in-out infinite;
}
.ac-typing span:nth-child(2) { animation-delay: 0.18s; }
.ac-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ac-typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-typing span { animation: none; opacity: 0.6; }
}

/* --- rich bubbles: confirmation / duplicates / creation draft --- */
.ac-confirm, .ac-dup, .ac-draft { max-inline-size: 95%; }
.ac-confirm-title { font-weight: 800; font-size: 0.9rem; margin-block-end: 4px; }
.ac-confirm-detail { font-size: 0.85rem; color: var(--ac-ink-soft); margin-block-end: 6px; }
.ac-confirm-actions { display: flex; gap: 8px; margin-block-start: 10px; flex-wrap: wrap; }
.ac-btn {
  border: 1px solid var(--ac-line); background: var(--ac-surface); color: var(--ac-ink);
  border-radius: 999px; padding: 6px 14px; font-size: 0.84rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.ac-btn:hover { border-color: var(--ac-accent); color: var(--ac-accent); }
.ac-btn-primary {
  background: var(--ac-accent); border-color: var(--ac-accent); color: var(--ac-surface);
}
.ac-btn-primary:hover { color: var(--ac-surface); opacity: 0.9; }
.ac-dup-list { display: flex; flex-direction: column; margin-block-start: 6px; }
.ac-dup-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; border-block-start: 1px solid var(--ac-line);
}
.ac-dup-row:first-child { border-block-start: none; }
.ac-dup-name { font-weight: 700; font-size: 0.88rem; min-inline-size: 0; }
.ac-dup-hint { display: block; font-weight: 500; font-size: 0.76rem; color: var(--ac-ink-soft); }
.ac-draft-fields { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-block-start: 6px; }
.ac-draft-label { font-size: 0.8rem; color: var(--ac-ink-soft); }
.ac-draft-value { font-size: 0.88rem; font-weight: 700; overflow-wrap: anywhere; }