/* Message bubble footer — channel mark, phone line, then the timestamp.
 *
 * The bubble backgrounds, body colour and timestamp are deliberately untouched;
 * this only adds the meta row underneath. `--msg-muted` is set per bubble so the
 * line name sits correctly on each of the four tints.
 */

.msg-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 5px;
}

/* Left half — the hover target that reveals the full "sent over … from …" */
.msg-meta-left {
  display: inline-flex; align-items: center; min-width: 0;
  border-radius: 5px; padding: 2px 5px; margin: -2px -5px;
  cursor: default; font-size: 11px; color: var(--msg-muted, #667085);
  background: transparent; border: none;
  font-family: inherit; line-height: 1.4;
  transition: background-color .12s ease;
}
.msg-meta-left:hover,
.msg-meta-left:focus-visible { background: rgba(14, 23, 38, .06); }

.msg-chan { display: inline-flex; align-items: center; line-height: 0; }
.msg-chan svg { width: 12px; height: 12px; opacity: .95; }
.msg-sep { margin: 0 6px; opacity: .4; font-weight: 300; line-height: 1; }
.msg-line {
  font-weight: 400; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Note bubbles carry their own amber ink, so the hover tint follows it rather
   than the neutral one used on message bubbles. */
.msg-meta--note .msg-meta-left:hover,
.msg-meta--note .msg-meta-left:focus-visible { background: rgba(181, 71, 8, .10); }

/* ── Source header ────────────────────────────────────────────────────────────
 * Messages that weren't typed by hand — sent by a workflow, sent as part of an
 * SMS campaign, or queued by the scheduler — carry a strip across the top of
 * the bubble naming where they came from. The strip sits flush to the bubble's
 * top edge (negative margins cancel the bubble's own padding), so its tint is
 * set per bubble via --msg-src-bg / --msg-src-ink to stay in the same family as
 * the body underneath.
 */
.msg-src {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  margin: -10px -14px 2px; padding: 6px 12px;
  border-radius: 14px 14px 0 0;
  /* No fallbacks: both are always set inline per bubble, in the same family
     as the body tint underneath. A hard-coded default here would be a light
     colour with no dark-mode counterpart. */
  background: var(--msg-src-bg);
  color: var(--msg-src-ink);
  font-size: 11.5px; line-height: 1.4;
}
.msg-src-icon { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.msg-src-icon svg { width: 13px; height: 13px; }
.msg-src-label { font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.msg-src-sep { margin: 0 1px; opacity: .45; font-weight: 400; flex-shrink: 0; }

/* The name is the link out to the workflow / campaign / scheduled send. */
.msg-src-link {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  color: inherit; text-decoration: none; cursor: pointer;
  border-radius: 4px; padding: 1px 5px; margin: -1px -5px;
  font: inherit; background: none; border: none;
  transition: background-color .12s ease;
}
.msg-src-link:hover,
.msg-src-link:focus-visible { background: rgba(14, 23, 38, .07); text-decoration: underline; }
.msg-src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-src-link svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .7; }