/* ── Reflection hints ─────────────────────────────────────────────────────────
   Quiet, muted annotations beneath memory cards showing semantic connections
   to older recordings. Designed to inform without distracting.              */

.reflection-hint {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid #374151;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.4;
  /* Fade in so hints don't pop in jarringly when they load */
  animation: reflection-fade-in 0.4s ease both;
}

@keyframes reflection-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.reflection-hint-icon {
  flex-shrink: 0;
  color: #4b5563;
  font-size: 0.75rem;
}

.reflection-hint-text {
  flex: 1;
  min-width: 0;
  /* Allow up to 2 lines — snippets become readable; CSS truncates cleanly beyond */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.reflection-hint-view {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 0.2rem;
  font-size: 0.75rem;
  color: #6b7280;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reflection-hint-view:hover {
  color: #9ca3af;
}

.reflection-hint-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 0.2rem;
  font-size: 0.85rem;
  color: #4b5563;
  cursor: pointer;
  line-height: 1;
}

.reflection-hint-dismiss:hover {
  color: #9ca3af;
}

@media (prefers-reduced-motion: reduce) {
  .reflection-hint { animation: none; }
}