/* The detail panel. Same glass and the same monospace as the stats panel on
   the other side of the viewport, because they are two readings of one thing
   and a second visual language would say otherwise.

   Every selector is under .detail: this file is loaded beside style.css and
   must not have an opinion about anything it did not build. */

.detail {
  position: fixed;
  top: 70px;
  left: 12px;
  bottom: 46px;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  font: 13px/1.5 var(--mono);
  color: var(--ink);
  /* Above the canvas, below the tooltip, which is the pointer's own feedback
     and has to survive being over the panel. */
  z-index: 4;
}

/* The panel is a flex column, and `display: flex` would otherwise win over
   the hidden attribute and leave a closed panel on screen. */
.detail[hidden] { display: none; }

.detail-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

/* The operator's colour, the same hue their agents are drawn in on the
   canvas, so the panel and the picture agree about whose agent this is. */
.detail-swatch {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 2px;
  flex: none;
}

.detail-heading { min-width: 0; flex: 1; }
.detail-name { font-weight: normal; color: var(--ink); word-break: break-all; }
.detail-operator { color: var(--ink-dim); word-break: break-all; }

.detail-close {
  flex: none;
  padding: 2px 8px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
}
.detail-close:hover { color: var(--ink); }

/* The whole body scrolls as one. A panel with four independently scrolling
   regions is a puzzle, and only the scrobble list is ever long. */
.detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

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

.detail-caption {
  margin: 0;
  font-size: 13px;
  font-weight: normal;
  color: var(--ink-dim);
}

.detail-sub { color: var(--ink-dim); opacity: 0.8; }
.detail-line { color: var(--ink-dim); }

/* A caption with its copy button pushed to the far end, so a value that
   wraps to three lines wraps under nothing. */
.detail-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.detail-value {
  display: block;
  /* Selectable and breakable: a DID is one long unbreakable-looking token and
     the point of putting it here is that it can leave. */
  user-select: text;
  word-break: break-all;
  color: var(--ink);
  font: inherit;
}

.detail-copy-button {
  flex: none;
  padding: 1px 7px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
}
.detail-copy-button:hover { color: var(--accent); }

.detail-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  color: var(--ink-dim);
}
.detail-sep { color: var(--line); }
.detail-hop { color: var(--ink-dim); }
.detail-hop-here { color: var(--ink); }

.detail-work { color: var(--accent); word-break: break-word; }
.detail-work-alone { color: var(--ink-dim); }

.detail-scrobbles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-scrobble {
  display: flex;
  align-items: baseline;
  gap: 6px;
  /* Never shrink, for the same reason the stream list does not: a run of
     short lines squeezed under their own line height overprints. */
  flex: none;
}
.detail-emoji { flex: none; width: 1.3em; }
.detail-said {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-age {
  flex: none;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.detail-effort { flex: none; color: var(--ink-dim); opacity: 0.7; }

.detail-quiet { color: var(--ink-dim); }
.detail-quiet[hidden] { display: none; }

/* An agent whose account has been deleted while the panel was open. The
   identity and the URIs stay readable — they are the reason somebody would
   still be looking — and the frame says the thing is over. */
.detail-gone { border-color: rgba(224, 160, 143, 0.4); }
.detail-gone .detail-name { color: var(--warn); }

/* Hidden with the other panels rather than stacked on top of the canvas: at
   this width there is no canvas left to put one beside. */
@media (max-width: 1100px) {
  .detail { display: none; }
}