/* ── Message action bar (copy / edit / delete) ───────────────────────────── */

.msg-actions {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.msg:hover .msg-actions {
  opacity: 1;
  pointer-events: auto;
}

.msg-user .msg-actions { justify-content: flex-end; }

.msg-timestamp {
  font-size: 0.68rem;
  color: oklch(var(--bc) / 40%);
  align-self: center;
  white-space: nowrap;
  /* push buttons to the right on user bubbles; stays left on assistant bubbles */
  margin-right: auto;
}

.msg-user .msg-timestamp {
  /* on user bubbles the bar is flex-end, so auto-margin pushes timestamp to far left */
  color: oklch(var(--pc) / 55%);
}

.msg-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
}

.msg-action-btn:hover {
  opacity: 1;
  background: oklch(var(--b3) / 30%);
}

.msg-action-delete:hover {
  color: oklch(var(--er));
  background: oklch(var(--er) / 12%);
}

@keyframes tts-spin {
  from { transform-origin: 12px 12px; transform: rotate(0deg); }
  to   { transform-origin: 12px 12px; transform: rotate(360deg); }
}
.tts-spin { animation: tts-spin 0.8s linear infinite; }

/* ── Edit-mode UX ────────────────────────────────────────────────────────── */

/* Bubble being edited — outlined so the user sees which message is active */
.msg-user.editing {
  outline: 2px solid oklch(var(--p) / 55%);
  opacity: 0.65;
}

/* Banner above footer while an edit is in progress */
#edit-banner {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: oklch(var(--p) / 12%);
  border-top: 1px solid oklch(var(--p) / 25%);
  font-size: 0.78rem;
  color: oklch(var(--p));
}
#edit-banner.visible { display: flex; }
#edit-banner span { flex: 1; }
#edit-banner button {
  background: none;
  border: none;
  cursor: pointer;
  color: oklch(var(--p));
  opacity: 0.6;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
}
#edit-banner button:hover { opacity: 1; }

/* Messages fading out during edit truncation */
.msg.removing {
  transition: opacity 0.18s ease, transform 0.18s ease;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
}

/* ── Branching ────────────────────────────────────────────────────────────── */

.msg-branch-origin {
  font-size: 0.75rem;
  opacity: 0.6;
  padding: 0.25rem 0.5rem;
  border-left: 2px solid oklch(var(--p) / 40%);
  margin-bottom: 0.5rem;
}
.msg-branch-origin a {
  color: oklch(var(--p));
  text-decoration: none;
}
.msg-branch-origin a:hover { text-decoration: underline; }

.session-branch-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
  margin-right: 0.25rem;
  flex-shrink: 0;
}
.session-branch-icon svg { width: 12px; height: 12px; }

.msg-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Sub-agent investigation block ───────────────────────────────────── */

.msg-subagent {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  background: oklch(var(--b2));
  border-left: 2px solid oklch(var(--su) / 40%);
  font-size: 0.82rem;
}

.msg-subagent.pending {
  border-left-color: oklch(var(--su) / 60%);
  opacity: 0.85;
}

.msg-subagent.done {
  border-left-color: oklch(var(--su) / 40%);
  opacity: 1;
}

.msg-subagent.error {
  border-left-color: oklch(var(--er) / 50%);
}

.subagent-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.subagent-label {
  font-weight: 600;
  color: oklch(var(--bc) / 75%);
}

.subagent-task-preview {
  color: oklch(var(--bc) / 45%);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}