/* ==========================================================================
   message-actions.css — Orcheum CANONICAL assistant-message action row
   --------------------------------------------------------------------------
   ONE reusable action row for an assistant answer: feedback + copy +
   regenerate, plus the References / Sources control. Source of truth: Figma
   "action bar+sources" (464:1129) — Left Actions Bar (464:1115) + Sources
   (464:1114).

   The assistant message owns where this row is placed (host/component
   boundary, Constitution 6.2); the row owns its buttons, states, and wiring.
   Actions are real controls bound to events — never dead icons. The References
   control is a stateful toggle whose pressed state reflects inline-source
   visibility, and it is simply not rendered when a message has no sources.
   Depends on sources.css for shared tokens (--src-*). ========================= */

.oc-msg-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-sans);
}

/* left cluster — feedback / copy / regenerate */
.oc-msg-actions__group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* icon action — resting state is bare icon (no chrome); a subtle wash + darker
   ink appear on hover/focus so the row stays quiet until reached for (8.2). */
.oc-actbtn {
  width: 15px;
  height: 15px;
  padding: 5px;
  margin: -5px;
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--src-ink, #61686b);
  cursor: pointer;
  transition: background var(--duration-fast, 0.16s) var(--ease-standard, ease),
              color var(--duration-fast, 0.16s) var(--ease-standard, ease);
}
.oc-actbtn svg { width: 15px; height: 15px; display: block; }
.oc-actbtn:hover { background: var(--src-wash, rgba(50, 47, 47, 0.06)); color: var(--color-foreground, #24252d); }
.oc-actbtn:focus-visible { outline: none; box-shadow: var(--src-focus-ring); }
.oc-actbtn:disabled { opacity: 0.4; cursor: default; }

/* pressed feedback (thumbs) — the chosen thumb fills and darkens */
.oc-actbtn.is-active { color: var(--color-foreground, #24252d); }
.oc-actbtn.is-active svg { fill: currentColor; }

/* copy → transient "copied" affordance (icon swaps to a check) */
.oc-actbtn.is-copied { color: var(--color-foreground, #24252d); }

/* regenerate — one-shot rotation on activation (semantic: work restarts) */
.oc-actbtn.is-spinning svg { animation: oc-act-spin 0.5s var(--ease-standard, ease); }
@keyframes oc-act-spin { to { transform: rotate(-360deg); } }

/* ===================== References / Sources toggle ====================== */
.oc-src-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 2px 9px 1px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--src-toggle-bg, #eeeeeb);
  color: #000;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 20.286px;
  cursor: pointer;
  transition: background var(--duration-fast, 0.16s) var(--ease-standard, ease),
              opacity var(--duration-fast, 0.16s) var(--ease-standard, ease);
}
.oc-src-toggle:hover { background: var(--src-pill-bg-hover, #dcdedb); }
.oc-src-toggle:focus-visible { outline: none; box-shadow: var(--src-focus-ring); }
.oc-src-toggle:disabled,
.oc-src-toggle.is-disabled { opacity: 0.4; cursor: default; }

.oc-src-toggle__label { white-space: nowrap; }

/* the switch: a dark disc overlapping a mint disc (mint = on, grey = off) */
.oc-src-toggle__switch {
  position: relative;
  width: 21px;
  height: 12px;
  flex: 0 0 auto;
}
.oc-src-toggle__disc {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background var(--duration-base, 0.22s) var(--ease-standard, ease);
}
.oc-src-toggle__disc--front { left: 0; z-index: 1; background: var(--color-foreground, #24252d); }
.oc-src-toggle__disc--back { right: 0; background: var(--src-toggle-accent, #c3e8d0); }
.oc-src-toggle[aria-pressed="false"] .oc-src-toggle__disc--back { background: var(--src-toggle-off, #cbcec9); }

/* ============================ Responsive =============================== */
@media (max-width: 420px) {
  .oc-msg-actions { row-gap: 12px; }
}