/* ============================================================
   <Bubble /> — chat message vocabulary

   Three exported components share this stylesheet:
     • .bubble                — the message body itself (--user | --bot)
     • .bubble-group          — column wrapping bubble + actions, anchored
                                left for bot, right for user
     • .bubble-actions        — hover-reveal toolbar (timestamp + icons)

   Pairs with components/bubble/index.jsx. Loaded directly by every preview
   page that renders a chat thread (bubbles.html, chat.html). No tag
   selectors — paragraph, list, strong, code content is wrapped by the
   JSX <BubbleBody> walker into .bubble__paragraph / .bubble__list / etc.
   ============================================================ */

/* ---------- Bubble body ---------- */
.bubble {
  max-width: 640px;
  font:
    var(--md-sys-typescale-body-large-weight)
    var(--md-sys-typescale-body-large-size) /
    var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);
}
/* User bubble shares the composer's raised family (surface-container-high)
   so "your voice" reads as one surface across input and thread.
   surface-container-lowest was ~black in dark and vanished into the desk;
   the high container sits a clear step above `surface` in both themes. */
.bubble--user {
  padding: 11px var(--s-4-5);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}
/* Bot bubble has no surface of its own — it rides whatever's behind it.
   In the xmesh chat the thread sits on `surface` (the warm dark "desk"
   in dark theme, cream in light), so the bot bubble uses on-surface. The
   primitives flip per theme — a single rule covers both. If a host page
   puts the thread on `inverse-surface` (a card) instead, override with
   .bubble--bot { color: var(--md-sys-color-inverse-on-surface) } at the
   page level. */
.bubble--bot {
  padding: 0 var(--s-0-5);
  color: var(--md-sys-color-on-surface);
  max-width: 720px;
  background: transparent;
}

/* ---------- Bubble body content (BEM-wrapped by <BubbleBody>) ---------- */
.bubble__paragraph { margin: 0 0 0.75em; }
.bubble__paragraph:last-child { margin-bottom: 0; }

.bubble__list { margin: var(--s-1) 0 0; padding-left: var(--s-5-5); }
.bubble__list--ordered { list-style: decimal; }
.bubble__list--unordered { list-style: none; padding-left: var(--s-5-5); }
.bubble__list-item { padding-left: var(--s-1-5); margin-bottom: var(--s-1-5); }
.bubble__list--ordered .bubble__list-item::marker {
  color: var(--xm-color-on-surface-soft);
  font-variant-numeric: tabular-nums;
}
.bubble__list--unordered .bubble__list-item {
  position: relative;
  padding-left: var(--s-3-5);
  margin-bottom: var(--s-1);
}
.bubble__list--unordered .bubble__list-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--xm-color-on-surface-soft);
}

.bubble__strong { font-weight: 600; color: var(--md-sys-color-on-surface); }

/* Inline code — flat: monospaced ink shift, no chip background.
   The page can still override --xm-color-code-ink at :root for accent
   variants (see bubbles.html for the canonical override). */
.bubble__code {
  background: transparent;
  color: var(--xm-color-code-ink, oklch(0.55 0.16 25));
  padding: 0;
  border-radius: 0;
  font: 500 12.5px/1.4 var(--xm-typescale-mono-font);
}

/* ---------- Bubble group (column wrapper) ---------- */
.bubble-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1-5);
  max-width: 720px;
}
.bubble-group--user {
  align-items: flex-end;
  max-width: 640px;
}
.bubble-group--bot {
  align-items: flex-start;
}

/* ---------- Bubble actions (hover-reveal toolbar) ---------- */
.bubble-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2-5);
  padding: 0 var(--s-1);
  background: transparent;
  border: 0;
  color: var(--xm-color-on-surface-soft);
  opacity: 0;
  transform: translateY(-1px);
  transition:
    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}
.bubble-group:hover .bubble-actions,
.bubble-group:focus-within .bubble-actions {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.bubble-actions__ts {
  font: 400 12px/1 var(--xm-typescale-mono-font);
  color: var(--xm-color-on-surface-soft);
  letter-spacing: 0.02em;
}

.bubble-actions__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--xm-color-on-surface-soft);
  padding: var(--s-1);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.bubble-actions__btn:hover {
  background: color-mix(in oklch, currentColor 14%, transparent);
  color: var(--md-sys-color-on-surface);
}
.bubble-actions__btn svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Attachment chips (used when user bubble carries files) ---------- */
.bubble__atts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1-5);
  margin-bottom: var(--s-1-5);
}
.bubble__att-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
  padding: var(--s-1) var(--s-2);
  border-radius: 6px;
  background: color-mix(in oklab, currentColor 12%, transparent);
  font: 500 11px/1 var(--xm-typescale-mono-font);
}
.bubble__att-thumb {
  width: 14px; height: 14px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}