/* reactions.css — Webmentions, interazioni ActivityPub, risposte
   dell'autore. Stessa struttura del file di default del pacchetto,
   ricolorata sui token del sito (--ink/--paper/--paper-dim/--red)
   invece della palette generica --color-*. Le pagine articolo sono
   sempre chiare (.prose-page), quindi le card delle reazioni usano
   --paper-dim come "sfondo leggermente incassato" sulla pagina
   chiara, coerente con lo stile usato altrove nel sito per gli stati
   hover/attivi. */

:root{
  --reaction-bg: var(--paper-dim);
  --reaction-border: var(--paper-dim);
  --reaction-fg-muted: rgba(18,24,31,0.65);
  --reaction-fg-faint: rgba(18,24,31,0.5);
  --reaction-link: var(--red);
}

.reactions-section {
  margin-top: 2em;
  border-top: 3px solid var(--ink);
  padding-top: 0.5em;
}

.reactions-heading {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.25em;
}

.reactions-howto {
  margin-bottom: 1em;
  font-size: 0.9em;
  color: var(--reaction-fg-muted);
}

.reactions-howto summary {
  cursor: pointer;
  color: var(--reaction-fg-faint);
  font-size: 0.85em;
  padding: 0.3em 0;
  user-select: none;
  list-style: none;
}

.reactions-howto summary::-webkit-details-marker { display: none; }

.reactions-howto summary::before {
  content: '\25B8 ';
  margin-right: 0.5em;
  display: inline-block;
  transition: transform 0.2s ease;
}

.reactions-howto[open] summary::before { transform: rotate(90deg); }
.reactions-howto summary:hover { color: var(--reaction-fg-muted); }

.reactions-howto-content { overflow: hidden; }

.reactions-howto-content-inner {
  opacity: 0.9;
  font-size: 0.9em;
  padding: 0.75em 1em;
  margin-top: 0.5em;
  background: var(--reaction-bg);
  border-radius: 1em;
  animation: slide-down 0.25s ease-out;
  border: 1px solid var(--reaction-border);
  color: var(--ink);
}

.reactions-howto-content-inner h4 { margin: 1em 0; font-family: var(--display); }
.reactions-howto-content-inner h4:first-child { margin-top: 0; }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-0.5em); }
  to { opacity: 1; transform: translateY(0); }
}

.reactions-howto-content p { margin: 0 0 0.75em 0; }
.reactions-howto-content p:last-child { margin-bottom: 0; }
.reactions-howto-ap { margin: 0; padding-left: 1.25em; }
.reactions-howto-ap li { margin-bottom: 0.4em; }
.reactions-howto-ap li:last-child { margin-bottom: 0; }

.reactions-summary {
  display: flex;
  gap: 1.25em;
  color: var(--reaction-fg-faint);
  margin-bottom: 1em;
}
.reactions-summary span { display: inline-flex; align-items: center; gap: 0.3em; }

/* Card di una singola reazione */
.reaction {
  margin-bottom: 0.5em;
  padding: 1em;
  border: 1px solid var(--reaction-border);
  border-radius: 0.6em;
  background: var(--reaction-bg);
  color: var(--ink);
  font-family: var(--body);
}

.reaction a, .reaction a:visited { color: var(--reaction-link); }

.reaction-header { display: flex; align-items: center; gap: 0.75em; }

.reaction-avatar {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--reaction-border);
  flex-shrink: 0;
  margin: 0;
}

.reaction-meta { display: flex; flex-direction: column; flex-wrap: wrap; min-width: 0; }
.reaction-meta-row { display: flex; align-items: center; gap: 1em; }
.reaction-meta-row .source-id { line-height: 0.7; }
.reaction-meta-row .source-id a { font-size: 0.8em; color: var(--reaction-fg-faint); margin: 0; }

.reaction-author { color: var(--ink); font-weight: 500; }
.reaction-author a { text-decoration: none; border-bottom: none; }
.reaction-author a:hover { text-decoration: underline; }

.author-badge { display: inline-flex; align-items: center; gap: 0.35em; }
.author-label {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  padding: 0.1em 0.45em;
  border-radius: 0.3em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.reaction-type { font-weight: 600; text-transform: capitalize; }

.reaction-reply-to { font-size: 0.85em; color: var(--reaction-fg-faint); text-decoration: none; border-bottom: none; }
.reaction-reply-to:hover { color: var(--reaction-fg-muted); }

.reaction-reply-context {
  font-size: 0.75em;
  color: var(--reaction-fg-faint);
  margin: 0.3em 0 0.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reaction-reply-context a { color: var(--reaction-fg-faint) !important; }
.reaction-reply-context a:hover { color: var(--reaction-fg-muted) !important; }

.reaction-date { font-size: 0.7em; color: var(--reaction-fg-faint); white-space: nowrap; }
.reaction-title { margin-top: 0.5em; font-size: 1.05em; }
.reaction-content { margin-top: 0.5em; line-height: 1.45em; }
.reaction-content img, .reaction-content video, .reaction-content audio { max-height: 75vh; max-width: 100%; }

.reaction-content.reaction-collapsible {
  max-height: 8em;
  overflow: hidden;
  position: relative;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}
.reaction-content.reaction-collapsible::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2em;
  background: linear-gradient(to bottom, transparent, var(--reaction-bg));
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.reaction:has(.reaction-toggle:checked) .reaction-content.reaction-collapsible { max-height: 1000em; transition: max-height 0.35s ease-in; }
.reaction:has(.reaction-toggle:checked) .reaction-content.reaction-collapsible::after { opacity: 0; }
.reaction-toggle { display: none; }
.reaction-expand {
  display: block;
  cursor: pointer;
  text-align: center;
  font-size: 0.75em;
  color: var(--reaction-fg-faint);
  padding: 0.25em 0;
  user-select: none;
}
.reaction-expand::after { content: 'show more \25BE'; }
.reaction:has(.reaction-toggle:checked) .reaction-expand::after { content: 'show less \25B4'; }

.reaction-counts { display: flex; align-items: center; margin: 0.5em 0; color: var(--reaction-fg-faint); }
.interaction-counts { display: inline-flex; gap: 1.2em; font-size: 1.05em; }

.reaction-footer { display: flex; align-items: center; gap: 1em; margin-top: 0.5em; }
.reaction-source-type { font-size: 0.65em; color: var(--reaction-fg-faint); margin-top: 0.1em; }
.reaction-source { font-size: 0.7em; color: var(--reaction-fg-faint); text-decoration: none; border-bottom: none; }
.reaction-source:hover { text-decoration: underline; }
.reaction-permalink { font-size: 0.7em; text-decoration: none; border-bottom: none; opacity: 0.5; }
.reaction-permalink:hover { opacity: 1; }

.reaction-thread { margin-bottom: 0.25em; }
.reaction-thread-nested { border-left: 1px solid var(--reaction-border); padding-left: 0.75em; }
.reaction-thread.depth-0 { margin-bottom: 0.5em; }

/* Reazioni fatte dall'autore verso l'esterno (mostrate sulla pagina sorgente) */
.author-reactions {
  width: auto; height: auto;
  margin: 1.5em 0;
  padding: 0 1em 1.5em 1em;
  font-size: 0.75em;
  border: 1px solid var(--reaction-border);
  border-radius: 0.6em;
  background: var(--reaction-bg);
  box-shadow: none;
  color: var(--ink);
}
.author-reactions h4 { text-align: left; font-size: 1.25em; font-family: var(--display); }
.author-reaction { display: flex; align-items: center; gap: 0.5em; }
.author-reaction-icon { flex-shrink: 0; }
.author-reaction a { color: var(--reaction-link); word-break: break-all; }

.author-liked-by {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 1em 0 0 -0.5em;
  padding: 0 0.5em;
  border: 1px solid var(--reaction-border);
  border-radius: 999px;
  background: var(--reaction-bg);
  font-size: 0.85em;
  color: var(--ink);
}
.author-liked-avatar { width: 20px; height: 20px; margin: 0.5em; border-radius: 999px; object-fit: cover; }

/* Griglia allegati media */
.reaction-media { margin-top: 0.75em; }
.reaction-media-grid { display: grid; gap: 0.25em; border-radius: 0.5em; overflow: hidden; }
.reaction-media-grid[data-count="1"] { grid-template-columns: 1fr; justify-items: start; }
.reaction-media-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.reaction-media-grid[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.reaction-media-grid[data-count="4"],
.reaction-media-grid:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) { grid-template-columns: 1fr 1fr; }

.reaction-media-item { display: block; width: 100%; max-height: 280px; object-fit: cover; background: var(--paper-dim); border: none; }
.reaction-media-item img, .reaction-media-item video { width: 100%; height: 100%; max-height: 280px; object-fit: cover; display: block; }

.reaction-media-grid[data-count="1"] .reaction-media-item,
.reaction-media-grid[data-count="1"] .reaction-media-item img,
.reaction-media-grid[data-count="1"] .reaction-media-item video {
  width: auto; max-width: 100%; max-height: 400px; object-fit: contain; background: transparent;
}

.reaction-media-item img {
  background: linear-gradient(135deg, var(--paper-dim) 0%, var(--paper) 50%, var(--paper-dim) 100%);
  background-size: 200% 200%;
  animation: media-placeholder-shimmer 1.5s ease-in-out infinite;
}
.reaction-media-item img[complete], .reaction-media-item img:not([loading]) { animation: none; background: none; }
@keyframes media-placeholder-shimmer { 0% { background-position: 200% 200%; } 100% { background-position: 0% 0%; } }

.reaction-media-item.reaction-media-audio { max-height: none; background: var(--paper-dim); border-radius: 0.5em; padding: 0.5em; }
.reaction-media-item.reaction-media-audio audio { width: 100%; height: 2.5em; }

.reaction-media-overflow { display: none; margin-top: 0.25em; }
.reaction-media-overflow .reaction-media-grid { border-radius: 0 0 0.5em 0.5em; }
.reaction:has(.reaction-media-toggle:checked) .reaction-media-overflow { display: block; }
.reaction-media-toggle { display: none; }
.reaction-media-expand {
  display: block;
  cursor: pointer;
  text-align: center;
  font-size: 0.75em;
  color: var(--reaction-fg-faint);
  padding: 0.35em 0;
  margin-top: 0.25em;
  user-select: none;
  background: var(--paper-dim);
  border-radius: 0.25em;
}
.reaction-media-expand:hover { color: var(--ink); }
.reaction-media-expand::after { content: attr(data-more-text); }
.reaction:has(.reaction-media-toggle:checked) .reaction-media-expand::after { content: 'show fewer \25B4'; }

@media (max-width: 480px) {
  .reaction-media-grid[data-count="2"],
  .reaction-media-grid[data-count="3"],
  .reaction-media-grid[data-count="4"],
  .reaction-media-grid:not([data-count="1"]) { grid-template-columns: 1fr; }
  .reaction-media-item, .reaction-media-item img, .reaction-media-item video { max-height: 200px; }
}