/* ============================================================================
   X-ray mode (community#39) — L2 system panel, L1 inspector drawer, the
   per-message head chips, and the event DAG. The visible toggle is the
   header's .xrayButton (Header.css); this file styles only x-ray's own
   surfaces. Consumes the design-system tokens in index.css exclusively, so
   light/dark theming is automatic. Restrained blueprint cues only: dashed
   borders and a faint dotted grid on the DAG canvas — the app must stay a
   usable app while x-ray is on.
   ========================================================================= */

/* ---- Shared bits --------------------------------------------------------- */

.xrayMono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ---- X-ray on: every message bubble is an inspect target ------------------
   The chat components carry no x-ray wiring. What they leave is
   `data-entity-id` + `data-collection` on each bubble, and `.xrayOn` on the
   document root while the mode is on (xray/inspect.rs sets both ends). These
   rules are the whole of the app-side hover treatment.

   The attribute pair is doing double duty here: it names the bubble AND it
   buys the specificity to beat the components' own `.ankurah-chat
   .messageBubble` rules, which are injected after this stylesheet loads. */

.xrayOn [data-entity-id][data-collection] {
  cursor: zoom-in;
}

/* The prose cursor yields while x-ray is on: the WHOLE bubble is the inspect
   target, and zoom-in is the mode's affordance. Cursor is inherited, so the
   explicit cursors inside the bubble (.messageText's text, and the default on
   the (edited) suffix and co-edit badge — spans, so the bubble's button/a
   click exemption doesn't apply to them) need x-ray-scoped overrides. */
.xrayOn [data-entity-id][data-collection] .messageText,
.xrayOn [data-entity-id][data-collection] .messageEdited,
.xrayOn [data-entity-id][data-collection] .coEditBadge {
  cursor: zoom-in;
}

/* Hover = a translucent amber wash over the whole bubble. The inset shadow
   composites OVER the bubble's own background, so it reads as a highlight
   in both themes rather than replacing the theme color.
   Carries `.messageBubble` for the same reason the outline below does: the
   components set a box-shadow on an own bubble being edited, at four classes,
   from a sheet injected after this one — so four here would lose the wash on
   exactly the message a reader is most likely to be hovering. */
.xrayOn .messageBubble[data-entity-id][data-collection]:hover {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--unread-bg) 22%, transparent);
}

/* Multi-tip head = live concurrency: a persistent dashed amber outline —
   outline vs wash keeps "concurrent" and "hovered" visually distinct. The
   class is put on and taken off by xray/inspect.rs, which follows each
   visible entity's head clock.
   THE SELECTOR IS LONG ON PURPOSE. The components set a SOLID outline while a
   message is being edited, in two rules — one for any bubble and one for the
   reader's OWN, which is four classes — and their sheet is injected after this
   file loads, so a tie goes to them. A message that is both being edited and
   concurrent would then show the wrong outline, and on own messages the longer
   of the two rules made the first attempt at this tie as well. Five carries
   both. */
.xrayOn .messageBubble[data-entity-id][data-collection].xrayConcurrent,
.xrayOn .messageBubble[data-entity-id][data-collection].xrayConcurrent:hover {
  outline: 1.5px dashed var(--unread-bg);
  outline-offset: 2px;
}

.xraySelectAll {
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}

.xrayTitle {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.xrayClose {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  font-size: 18px;
  line-height: 1;
  color: var(--text-3);
}

.xrayClose:hover {
  background: var(--surface-3);
  color: var(--text);
}

.xrayChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.xrayChipOk {
  border-color: var(--ok);
  color: var(--ok);
}

.xrayChipCollection {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.xrayMetaLabel {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  flex: none;
  min-width: 84px;
}

.xrayFaint {
  color: var(--text-faint);
}

.xrayValueRow {
  align-items: flex-start;
}

.xrayValue {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.xrayStateNote {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.xrayError {
  color: var(--danger);
}

.xrayStateNote.xrayError {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}

.xrayRefused {
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
}

.xrayMiniButton {
  padding: 0 6px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.xrayMiniButton:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* ---- L2 system panel (non-blocking right slide-over) --------------------- */

.xrayPanel {
  position: fixed;
  top: 64px;
  right: 12px;
  bottom: 64px;
  z-index: 55;
  width: min(400px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  animation: xraySlideIn var(--t-med) var(--ease);
}

@keyframes xraySlideIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.xrayPanelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.xrayPanelHeaderDragging {
  cursor: grabbing;
}

.xrayPanelSub {
  margin: 2px 0 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.xrayPanelBody {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.xrayCard {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.xrayCardTitle {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 650;
}

.xrayCardSub {
  margin: -4px 0 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.xrayDetailRow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* ---- Inspect-an-entity input row ----------------------------------------- */

.xrayInspectRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.xrayInspectSelect,
.xrayInspectInput {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font-size: var(--fs-sm);
}

.xrayInspectInput {
  flex: 1;
  min-width: 160px;
}

.xrayInspectInput:focus,
.xrayInspectSelect:focus {
  border-color: var(--focus);
  outline: none;
}

.xrayInspectGo {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.xrayInspectGo:hover {
  background: var(--primary-hover);
}

/* ---- Connection card ------------------------------------------------------ */

.xrayConnState {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.xrayConnOk {
  color: var(--ok);
}

.xrayConnBad {
  color: var(--danger);
}

.xrayConnLog {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xrayConnLogList {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xrayConnLogRow {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-2);
  padding: 2px 0;
  border-bottom: 1px dotted var(--border);
}

.xrayConnLogRow:last-child {
  border-bottom: none;
}

/* ---- Queries card ---------------------------------------------------------- */

.xrayQueryRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.xrayQueryHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.xrayQueryLabel {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.xraySelection {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  overflow-x: auto;
  white-space: nowrap;
}

.xrayQueryStats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---- Feed card -------------------------------------------------------------- */

.xrayFeedList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.xrayFeedRow {
  width: 100%;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  text-align: left;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-xs);
  color: var(--text-2);
  animation: xrayFeedIn 500ms var(--ease);
}

@keyframes xrayFeedIn {
  from {
    box-shadow: 0 0 0 2px var(--edit-glow);
  }
  to {
    box-shadow: none;
  }
}

.xrayFeedRow:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.xrayFeedRowStatic {
  cursor: default;
  color: var(--text-faint);
}

.xrayFeedTime {
  color: var(--text-faint);
}

.xrayKind {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  padding: 0 5px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
}

.xrayKind-add {
  color: var(--ok);
  border-color: var(--ok);
}

.xrayKind-update {
  color: var(--link);
  border-color: var(--link);
}

.xrayKind-remove {
  color: var(--danger);
  border-color: var(--danger);
}

.xrayKind-initial {
  color: var(--text-faint);
}

.xrayFeedSummary {
  color: var(--text);
}

.xrayFeedQuery {
  color: var(--text-faint);
  font-style: italic;
}

.xrayFeedEvents {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xrayFeedEvent {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border);
}

.xrayFeedParent {
  color: var(--text-faint);
}

.xrayFeedOps {
  color: var(--text-3);
}

/* ---- L1 inspector drawer ------------------------------------------------------ */

/* Above the user-detail sidebar (900) — the drawer is modal (scrim), and the
   sidebar is the one surface that leaves the chat clickable underneath, so
   click-to-inspect can open this while it's up. Below context menus (1000). */
.xrayDrawerScrim {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgb(16 40 36 / 25%);
  display: flex;
  justify-content: flex-end;
  animation: xrayFade var(--t-med) var(--ease);
}

@keyframes xrayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.xrayDrawer {
  width: min(560px, 100vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px dashed var(--border-strong);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  animation: xraySlideIn var(--t-med) var(--ease);
}

.xrayDrawerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.xrayDrawerSub {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.xrayDrawerBody {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.xrayMetaRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.xrayHeadChips {
  display: inline-flex;
  gap: 4px;
}

/* Multi-tip head = live concurrency: tint the chips with the unread amber. */
.xrayHeadConcurrent .xrayChip {
  background: var(--unread-bg);
  color: var(--unread-text);
  border-color: var(--unread-bg);
}

.xrayConcurrencyNote {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.xrayProvenance {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.xrayFootnote {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  border-top: 1px dotted var(--border);
  padding-top: var(--sp-2);
}

.xrayDetail {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.xrayDetailHint {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.xrayDetailOps {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.xrayBackendTag {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ---- The DAG ---------------------------------------------------------------------- */

.xrayDagWrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--surface);
}

.xrayDag {
  display: block;
}

.xrayEdge {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.6;
  opacity: 0.65;
}

.xrayNode {
  cursor: pointer;
}

.xrayNode circle {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 2;
  transition: stroke var(--t-fast) var(--ease);
}

.xrayNode:hover circle {
  stroke: var(--link);
}

/* Creation event: mint fill + sprout (ankura!) mark. */
.xrayNodeCreate circle {
  fill: var(--accent);
  stroke: var(--evergreen);
}

.xraySprout {
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Current head tips: the edit-ring mint. */
.xrayNodeTip circle {
  stroke: var(--edit-ring);
  stroke-width: 3;
}

/* Events fetched from a peer (vs local): dashed outline. */
.xrayNodeFetched circle {
  stroke-dasharray: 3 2;
}

.xrayNodeSelected circle {
  stroke: var(--focus);
  stroke-width: 3;
  filter: drop-shadow(0 0 4px var(--edit-glow));
}

.xrayNodeLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-3);
}

.xrayNodeOps {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-faint);
}

.xrayDagNote {
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

/* ---- Small screens ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .xrayPanel {
    top: 60px;
    right: 8px;
    left: 8px;
    bottom: 72px;
    width: auto;
  }

  .xrayDrawer {
    width: 100vw;
  }
}

/* prefers-reduced-motion: index.css already zeroes all animation durations. */