/* The look the 3D town's cards and the chat share: the frame, the name plate, the chosen reply with its pixel cursor,
   and the end marker. The town's own rules (harbor.css) and the chat's (widget.css) place them. */

/* The frame: the accent line, a gap, and a hairline inside it. */
:is(.cw3-card, .cw3-talk),
.centaur-widget .cw-action.is-approval,
.centaur-widget[data-centaur-page] .cw-panel {
  border: 1px solid var(--brand-accent);
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 3px var(--bg-primary), inset 0 0 0 4px var(--border-color);
}

/* A name on a dark plate: the whiteboard dialog's title and Centaur in the chat. */
.cp-wb-name,
.centaur-widget[data-centaur-page] .cw-name {
  padding: 0.15em 0.45em;
  border: 1px solid var(--brand-primary-light);
  background: var(--bg-primary);
  letter-spacing: 0.08em;
}

/* The chosen reply: accent text on a raised row, a pixel cursor before it. The current conversation wears the cursor too. */
.centaur-widget .cw-starter:is(.is-on, :focus-visible) {
  outline: none;
  background: var(--bg-dark-subtle);
  color: var(--brand-accent);
}
.centaur-widget .cw-starter:is(.is-on, :focus-visible)::before {
  content: "";
  position: absolute;
  top: calc(0.675em + 5px - 5px);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--brand-accent);
}

/* A small down triangle that blinks slowly. */
.centaur-widget .cw-more {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--brand-accent);
  animation: centaur-end 1.6s steps(1) infinite;
}
@keyframes centaur-end { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .centaur-widget .cw-more { animation: none; }
}