/* ==========================================================================
   ILLUSIA COMMENTS — Full Comment System Override
   Loaded on all singular pages (chapters, stories, posts).

   Overrides Fictioneer's comment UI with the Dark Editorial Observatory
   aesthetic: glass cards, amber accents, serif/mono typography hierarchy,
   shimmer lines, border progression, staggered entry.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Comment Section — Title
   ------------------------------------------------------------------------- */

/* v1.75.6: header alinhado com vocabulário `__panel-header` v1.74.5
 * (overline mono + título Playfair). Borders simplificados — antes
 * tinha 3 linhas (border-top do `.chapter__comments`, dashed do
 * `__title` herdado do Fictioneer parent, solid do `__header`). Agora
 * só o border-top do parent (separa capítulo de conversa) sobrevive. */
.fictioneer-comments__title {
  font-family: var(--ff-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--fg-100);
  letter-spacing: -.005em;
  line-height: 1.2;
  /* Override do Fictioneer parent dashed border */
  padding-bottom: 0;
  border-bottom: 0;
}

.fictioneer-comments__title span:first-child {
  color: var(--amber);
  font-family: var(--ff-mono);
  font-weight: 500;
}

/* Header — sem border-bottom (era ruído visual com o border-top do
 * `.chapter__comments` que já separa o bloco). Overline editorial
 * "CONVERSA" injetada via `::before` — mesmo vocabulário canônico do
 * `__panel-overline` (mono 3xs .3em amber-dim). */
.fictioneer-comments__header {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--space-md);
}

.fictioneer-comments__header::before {
  content: "Conversa";
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--amber-dim);
  margin-bottom: var(--space-2xs);
}

/* -------------------------------------------------------------------------
   2. Comment Card — Glass Container
   ------------------------------------------------------------------------- */

.fictioneer-comment__container {
  position: relative;
  background: linear-gradient(
    160deg,
    hsl(var(--bg-800-free) / .7) 0%,
    hsl(var(--bg-900-free) / .8) 100%
  );
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  transition:
    border-color var(--t-mid) var(--ease-std),
    box-shadow var(--t-mid) var(--ease-std);
}

/* Shimmer line — amber gradient on top edge */
.fictioneer-comment__container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .1),
    transparent
  );
  pointer-events: none;
  z-index: 1;
  border-radius: 1px;
}

/* Hover — border progression + subtle lift */
.fictioneer-comment__container:hover {
  border-color: var(--border-2);
}

/* Staggered entry animation */
.fictioneer-comment {
  animation: illusia-comment-in var(--t-slow) var(--ease-expo) both;
}

.fictioneer-comment:nth-child(1) { animation-delay: 0ms; }
.fictioneer-comment:nth-child(2) { animation-delay: 60ms; }
.fictioneer-comment:nth-child(3) { animation-delay: 120ms; }
.fictioneer-comment:nth-child(4) { animation-delay: 180ms; }
.fictioneer-comment:nth-child(n+5) { animation-delay: 240ms; }

@keyframes illusia-comment-in {
  from { opacity: 0; transform: translateY(clamp(6px, 1vw, 12px)); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   3. Comment Card — Sticky Variant
   ------------------------------------------------------------------------- */

.fictioneer-comment._sticky > .fictioneer-comment__container {
  background: linear-gradient(
    160deg,
    hsl(var(--amber-free) / .05) 0%,
    hsl(var(--bg-900-free) / .85) 100%
  );
  border-color: hsl(var(--amber-free) / .15);
}

.fictioneer-comment._sticky > .fictioneer-comment__container::before {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .2),
    transparent
  );
}

.fictioneer-comment._sticky > .fictioneer-comment__container .sticky-pin {
  color: var(--amber);
}

/* -------------------------------------------------------------------------
   4. Comment Header — Author & Meta
   ------------------------------------------------------------------------- */

/* v1.75.3: `__author` reescrito como flex container — Fictioneer parent
 * é `display: block` sem gap, então nome + badge ficavam grudados.
 * Flex + gap + align-items center resolve o aperto E o desalinhamento
 * vertical entre nome (text-sm) e badge (text-2xs com altura própria
 * por causa de border/padding nas T2-T5). */
.fictioneer-comment__author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
}

/* v1.75.4: `> span` em vez de `span` — pega só o `<span>` direto do nome,
 * não os spans aninhados na badge (`__sep`, `__roman`, `__type`) que
 * herdam `color: var(--acc)` da `.illusia-staff-badge`. A regra antiga
 * tinha specificity 0,2,0 e vencia o `color` do block canônico. */
.fictioneer-comment__author > span,
.fictioneer-comment__author > a {
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--fg-200);
  transition: color var(--t-fast) var(--ease-std);
}

.fictioneer-comment__author > a:hover {
  color: var(--amber);
}

/* v1.75.3: badges Illusia ficam mais compactas dentro do comentário.
 * Fora dele (perfil/chooser/etc) mantém o tamanho original. Reduz
 * font-size + icon sem mexer na escada estrutural T1→T5.
 *
 * v1.75.4: alturas das tiers UNIFORMES (T3=23.88 vs T5=26.04 reportadas
 * pelo usuário). Solução: `min-height` calculado + padding-y zerado +
 * line-height controlada. Border + bg ficam dentro do mesmo box-size.
 * Sub-label `__type` ganha cor explícita (herança + opacity .78 era
 * esmaecido demais — usuário reportou "sem cor"). */
.fictioneer-comment__author .illusia-staff-badge {
  box-sizing: border-box;
  min-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--text-3xs);
  line-height: 1;
}
.fictioneer-comment__author .illusia-staff-badge[data-tier="4"] {
  letter-spacing: .08em;
}
.fictioneer-comment__author .illusia-staff-badge[data-tier="5"] {
  /* Playfair italic precisa ficar legível mesmo compacto — só o
   * font-size aumenta, altura segue uniforme via `min-height`. */
  font-size: var(--text-2xs);
}
.fictioneer-comment__author .illusia-staff-badge__icon {
  width: 9px;
  height: 9px;
}
.fictioneer-comment__author .illusia-staff-badge__type {
  color: var(--acc);
  opacity: 0.95;
}

/* Date — mono, muted */
.fictioneer-comment__date {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs, 10px);
  color: var(--fg-700);
  letter-spacing: .02em;
}

/* Reply-to mention */
.fictioneer-comment__reply-to {
  color: var(--amber-dim, var(--amber));
  font-family: var(--ff-mono);
  font-size: var(--text-2xs, 10px);
}

.fictioneer-comment__info {
  font-size: var(--text-2xs, 10px);
  color: var(--fg-600);
}

/* -------------------------------------------------------------------------
   5. Comment Body — Content
   ------------------------------------------------------------------------- */

.fictioneer-comment__body {
  color: var(--fg-300);
  font-family: var(--ff-ui);
  font-size: var(--text-base);
  line-height: 1.65;
}

.fictioneer-comment__content p {
  margin-bottom: var(--space-xs);
}

.fictioneer-comment__content p:last-child {
  margin-bottom: 0;
}

.fictioneer-comment__body blockquote {
  border-left: 2px solid hsl(var(--amber-free) / .25);
  background: hsl(var(--bg-900-free) / .4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--space-xs) var(--space-sm);
  margin: var(--space-xs) 0;
  color: var(--fg-500);
  font-style: italic;
}

.fictioneer-comment__edit-note {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs, 10px);
  color: var(--fg-800);
  letter-spacing: .02em;
}

/* -------------------------------------------------------------------------
   6. Comment Footer — Actions & Quick Buttons
   ------------------------------------------------------------------------- */

.fictioneer-comment__footer {
  border-top: 1px solid hsl(var(--illusia-border-base) / .05);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
}

/* Reply link — ghost button style */
.fictioneer-comment__actions .comment-reply-link {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-500);
  transition: color var(--t-fast) var(--ease-std);
}

.fictioneer-comment__actions .comment-reply-link:hover {
  color: var(--amber);
}

/* Quick action buttons (edit, delete, flag) */
.comment-quick-button {
  color: var(--fg-700);
  transition: color var(--t-fast) var(--ease-std);
  border-radius: var(--r-sm);
}

.comment-quick-button:hover {
  color: var(--amber);
}

.comment-quick-button:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   7. Comment Form — Glass Surface
   ------------------------------------------------------------------------- */

/* Container — glass card with shimmer */
.fictioneer-respond {
  position: relative;
  background: linear-gradient(
    160deg,
    hsl(var(--bg-800-free) / .5) 0%,
    hsl(var(--bg-900-free) / .6) 100%
  );
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Shimmer on form */
.fictioneer-respond::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .08),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

/* Textarea wrapper — the element Fictioneer gives background to.
   Override its --input-background with our glass style. */
.fictioneer-respond .fictioneer-respond__form-comment {
  background: hsl(var(--bg-900-free) / .5);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  box-shadow: none;
  transition:
    border-color var(--t-fast) var(--ease-std),
    box-shadow var(--t-fast) var(--ease-std);
}

.fictioneer-respond .fictioneer-respond__form-comment:focus-within {
  border-color: var(--border-amber);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .06);
}

/* Textarea itself — transparent (background is on wrapper above) */
.fictioneer-respond__form textarea {
  background: transparent;
  color: var(--fg-200);
  font-family: var(--ff-ui);
  font-size: var(--text-base);
  border: none;
  box-shadow: none;
  outline: none;
}

/* Name / email inputs */
.fictioneer-respond .fictioneer-respond__form-identity input {
  background: hsl(var(--bg-900-free) / .5);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  color: var(--fg-200);
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  padding: .5em var(--space-sm);
  transition:
    border-color var(--t-fast) var(--ease-std),
    box-shadow var(--t-fast) var(--ease-std);
}

.fictioneer-respond .fictioneer-respond__form-identity input:focus {
  border-color: var(--border-amber);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .06);
  outline: none;
}

/* iOS: campo focado com fonte <16px dispara zoom automático da página —
 * mesma guarda do quick-search (illusia-search.css). */
@media (max-width: 767px) {
  .fictioneer-respond__form textarea,
  .fictioneer-respond .fictioneer-respond__form-identity input {
    font-size: 1rem;
  }
}

/* "Logged in as" chip — subtle right-aligned pill */
.fictioneer-respond .fictioneer-respond__form-before-form {
  justify-content: flex-end;
  margin-bottom: var(--space-2xs);
}

.fictioneer-respond .fictioneer-respond__form-before-form .left {
  flex-grow: 0;
  height: auto;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs, 10px);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fg-600);
  background: hsl(var(--bg-800-free) / .5);
  border: 1px solid hsl(var(--illusia-border-base) / .06);
  border-radius: var(--r-full);
  padding: var(--space-4xs) var(--space-xs);
}

.fictioneer-respond .fictioneer-respond__form-before-form a {
  color: var(--fg-400);
  transition: color var(--t-fast) var(--ease-std);
}

.fictioneer-respond .fictioneer-respond__form-before-form a:hover {
  color: var(--amber);
}

.fictioneer-respond .fictioneer-respond__form-before-form .logout-link {
  color: var(--fg-600);
  opacity: .7;
}

.fictioneer-respond .fictioneer-respond__form-before-form .logout-link:hover {
  color: var(--amber);
  opacity: 1;
}

/* Submit button — CTA style with amber glow */
.fictioneer-respond .fictioneer-respond__form-submit {
  font-family: var(--ff-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--text-xs);
  background: var(--amber);
  color: var(--bg-900);
  border: none;
  border-radius: var(--r-md);
  padding: .6em var(--space-md);
  box-shadow: 0 0 20px hsl(var(--amber-free) / .12);
  transition:
    box-shadow var(--t-mid) var(--ease-std),
    transform var(--t-mid) var(--ease-expo);
  cursor: pointer;
}

.fictioneer-respond .fictioneer-respond__form-submit:hover {
  box-shadow: 0 0 30px hsl(var(--amber-free) / .22);
  transform: translateY(-1px);
}

.fictioneer-respond .fictioneer-respond__form-submit:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
}

/* Comment toolbar */
.fictioneer-comment-toolbar {
  border-top: 1px solid hsl(var(--illusia-border-base) / .06);
}

.fictioneer-comment-toolbar span {
  color: var(--fg-700);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-std);
}

.fictioneer-comment-toolbar span:hover {
  color: var(--amber);
}

/* Form toggle buttons (private, notification) */
.fictioneer-respond__form-toggle label {
  color: var(--fg-600);
  transition: color var(--t-fast) var(--ease-std);
}

.fictioneer-respond__form-toggle label:hover {
  color: var(--amber);
}

/* -------------------------------------------------------------------------
   8. In-Moderation Notes
   ------------------------------------------------------------------------- */

.fictioneer-comment__in-moderation {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs, 10px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-700);
}

.fictioneer-comment__hidden-notice {
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  color: var(--fg-700);
  font-style: italic;
  padding: var(--space-sm);
}

/* -------------------------------------------------------------------------
   9. AJAX Comments Skeleton
   ------------------------------------------------------------------------- */

.comments-skeleton .shape {
  background: linear-gradient(
    90deg,
    hsl(var(--bg-800-free) / .5) 0%,
    hsl(var(--bg-700-free) / .3) 50%,
    hsl(var(--bg-800-free) / .5) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: illusia-skeleton-shimmer 1.8s var(--ease-std) infinite;
}

@keyframes illusia-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -------------------------------------------------------------------------
   10. Like Button — Base
   ------------------------------------------------------------------------- */

.illusia-like-btn,
.illusia-like-static {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: .15em .4em;
  border: none;
  background: none;
  color: var(--fg-600);
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
  user-select: none;
}

.illusia-like-static {
  cursor: default;
}

/* -------------------------------------------------------------------------
   11. Like Button — Hover & Focus
   ------------------------------------------------------------------------- */

.illusia-like-btn:hover {
  color: hsl(var(--amber-free) / .7);
  background: hsl(var(--amber-free) / .04);
}

.illusia-like-btn:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   12. Like Button — Liked State
   ------------------------------------------------------------------------- */

.illusia-like-btn._liked {
  color: var(--amber);
}

.illusia-like-btn._liked:hover {
  color: hsl(var(--amber-free) / .7);
  background: hsl(var(--amber-free) / .06);
}

.illusia-like-static {
  color: var(--amber);
}

/* -------------------------------------------------------------------------
   13. Like Count
   ------------------------------------------------------------------------- */

.illusia-like-count {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs, 10px);
  letter-spacing: .02em;
  min-width: 0;
}

.illusia-like-count:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   14. Like Pulse Animation
   ------------------------------------------------------------------------- */

@keyframes illusia-like-pulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.4); }
  50% { transform: scale(.85); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.illusia-like-btn._pulse i {
  animation: illusia-like-pulse 400ms var(--ease-expo);
}

/* -------------------------------------------------------------------------
   15. Story-Aggregated Comment Footer
   ------------------------------------------------------------------------- */

.illusia-story-comment-footer {
  display: flex;
  align-items: center;
  padding-top: var(--space-3xs);
  border-top: 1px solid hsl(var(--illusia-border-base) / .05);
  margin-top: var(--space-3xs);
}

/* -------------------------------------------------------------------------
   16. Pagination — Comment Pages
   ------------------------------------------------------------------------- */

.comments-pagination .page-numbers {
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  color: var(--fg-500);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  transition:
    color var(--t-fast) var(--ease-std),
    border-color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
}

.comments-pagination .page-numbers:hover {
  color: var(--amber);
  border-color: var(--border-amber);
  background: hsl(var(--amber-free) / .04);
}

.comments-pagination .page-numbers.current {
  color: var(--bg-900);
  background: var(--amber);
  border-color: var(--amber);
}

/* -------------------------------------------------------------------------
   17. Light Mode
   ------------------------------------------------------------------------- */

:root[data-mode="light"] .fictioneer-comment__container {
  background: linear-gradient(
    160deg,
    hsl(var(--bg-300-free) / .5) 0%,
    hsl(var(--bg-200-free) / .4) 100%
  );
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode="light"] .fictioneer-comment__container:hover {
  border-color: hsl(var(--illusia-border-base) / .16);
}

:root[data-mode="light"] .fictioneer-comment__container::before {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .15),
    transparent
  );
}

:root[data-mode="light"] .fictioneer-comment._sticky > .fictioneer-comment__container {
  border-color: hsl(var(--amber-free) / .2);
}

/* v1.75.6: regra `__header` light mode removida — `border-bottom: 0`
 * no default tornou o override de cor obsoleto. */

:root[data-mode="light"] .fictioneer-comment__author span,
:root[data-mode="light"] .fictioneer-comment__author > a {
  color: var(--fg-300);
}

:root[data-mode="light"] .fictioneer-comment__body {
  color: var(--fg-400);
}

:root[data-mode="light"] .fictioneer-comment__body blockquote {
  border-left-color: hsl(var(--amber-free) / .35);
  background: hsl(var(--bg-200-free) / .2);
}

:root[data-mode="light"] .fictioneer-comment__footer {
  border-top-color: hsl(var(--illusia-border-base) / .06);
}

:root[data-mode="light"] .fictioneer-respond {
  background: linear-gradient(
    160deg,
    hsl(var(--bg-300-free) / .3) 0%,
    hsl(var(--bg-200-free) / .25) 100%
  );
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode="light"] .fictioneer-respond::before {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .12),
    transparent
  );
}

:root[data-mode="light"] .fictioneer-respond .fictioneer-respond__form-comment {
  background: hsl(var(--bg-200-free) / .2);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode="light"] .fictioneer-respond .fictioneer-respond__form-comment:focus-within {
  border-color: hsl(var(--amber-free) / .4);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .08);
}

:root[data-mode="light"] .fictioneer-respond .fictioneer-respond__form-identity input {
  background: hsl(var(--bg-200-free) / .2);
  border-color: hsl(var(--illusia-border-base) / .1);
  color: var(--fg-300);
}

:root[data-mode="light"] .fictioneer-respond .fictioneer-respond__form-identity input:focus {
  border-color: hsl(var(--amber-free) / .4);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .08);
}

:root[data-mode="light"] .fictioneer-respond .fictioneer-respond__form-submit {
  box-shadow: 0 0 20px hsl(var(--amber-free) / .15);
}

:root[data-mode="light"] .illusia-like-btn {
  color: var(--fg-600);
}

:root[data-mode="light"] .fictioneer-respond .fictioneer-respond__form-before-form .left {
  background: hsl(var(--bg-300-free) / .25);
  border-color: hsl(var(--illusia-border-base) / .08);
}

:root[data-mode="light"] .illusia-like-btn:hover {
  color: hsl(var(--amber-free) / .8);
  background: hsl(var(--amber-free) / .06);
}

:root[data-mode="light"] .illusia-like-btn._liked {
  color: var(--amber);
}

:root[data-mode="light"] .illusia-like-static {
  color: var(--amber);
}

:root[data-mode="light"] .illusia-like-btn:focus-visible {
  outline-color: hsl(var(--amber-free) / .6);
}

:root[data-mode="light"] .illusia-story-comment-footer {
  border-top-color: hsl(var(--illusia-border-base) / .06);
}

:root[data-mode="light"] .comments-pagination .page-numbers {
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode="light"] .comments-pagination .page-numbers.current {
  background: var(--amber);
  border-color: var(--amber);
}

/* -------------------------------------------------------------------------
   18. Responsive
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) {
  .fictioneer-comment__container {
    border-radius: var(--r-md);
  }

  .fictioneer-respond {
    border-radius: var(--r-md);
  }
  /* v1.75.6: regra que reduzia title mobile foi removida — o default
   * (text-base 16px) já é discreto em qualquer viewport. */
}

/* -------------------------------------------------------------------------
   19. Reduced Motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .illusia-like-btn._pulse i {
    animation: none;
  }

  .fictioneer-comment {
    animation: none;
  }

  .fictioneer-comment__container {
    transition: none;
  }

  .fictioneer-comment__container::before {
    transition: none;
  }

  .comments-skeleton .shape {
    animation: none;
  }
}