/* Screenshare keyframe capture controls (TASK-202.03). */

.screenshare-capture {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}

.screenshare-capture__status {
  font-size: 0.85em;
  color: var(--color-text-subtle, currentColor);
}

/* Persistent, visible indicator shown only while actually capturing (SPEC
   "Capture consent and safety gates"). */
.screenshare-capture__indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-size: 0.85em;
  color: var(--color-negative, #c0392b);
}

.screenshare-capture__dot {
  width: 0.75ch;
  height: 0.75ch;
  border-radius: 50%;
  background: var(--color-negative, #c0392b);
  animation: screenshare-capture-pulse 1.4s ease-in-out infinite;
}

@keyframes screenshare-capture-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Consecutive keyframes stay first-class Messages but collapse into one calm,
   keyboard-native timeline entry. Opening the details reveals the complete
   message cards, including provenance, actions, extracted text, and permalinks. */
.screenshare-reel {
  margin-block: 0.75rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-canvas, white) 94%, currentColor);
}

.screenshare-reel__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.screenshare-reel__time {
  font-size: 0.85em;
  color: var(--color-text-subtle, currentColor);
}

.screenshare-reel__items {
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-block: 0.5rem;
}