/*
 * Waline is limited to article pages by Aurora's #comments mount point.
 * Colors inherit the blog's shared day/night palette so seasonal backgrounds
 * can change independently without another comment-theme implementation.
 */
#comments {
  scroll-margin-top: 6rem;
}

#comments > div {
  border: 1px solid var(--shayu-xiaowo-line) !important;
  background: var(--shayu-xiaowo-panel) !important;
  background-image: none !important;
  box-shadow: 0 8px 20px -8px var(--shayu-xiaowo-panel-shadow) !important;
  backdrop-filter: blur(8px) saturate(108%);
}

#waline {
  --waline-font-size: 1rem;
  --waline-theme-color: #8d735e;
  --waline-active-color: #705744;
  --waline-color: var(--shayu-xiaowo-text);
  --waline-light-grey: var(--shayu-xiaowo-text-faint);
  --waline-dark-grey: var(--shayu-xiaowo-text-secondary);
  --waline-border-color: var(--shayu-xiaowo-line);
  --waline-bg-color: transparent;
  --waline-bg-color-light: var(--shayu-xiaowo-hover);
  --waline-bg-color-hover: var(--shayu-xiaowo-hover);
  --waline-disable-bg-color: var(--shayu-xiaowo-hover);
  --waline-disable-color: var(--shayu-xiaowo-text-faint);
  --waline-bq-color: var(--shayu-xiaowo-hover);
  --waline-info-bg-color: var(--shayu-xiaowo-hover);
  --waline-info-color: var(--shayu-xiaowo-text-secondary);
  color: var(--shayu-xiaowo-text);
}

body.theme-light #waline {
  --waline-theme-color: #785f4d;
  --waline-active-color: #5d4636;
}

body.theme-dark #waline {
  --waline-theme-color: #d4ae8f;
  --waline-active-color: #ecc6a8;
}

#waline .wl-panel,
#waline .wl-card {
  border-color: var(--shayu-xiaowo-line);
  background: transparent;
  box-shadow: none;
}

#waline .wl-header,
#waline .wl-editor,
#waline .wl-input,
#waline .wl-textarea {
  color: var(--shayu-xiaowo-text);
}

#waline a,
#waline button,
#waline input,
#waline textarea {
  transition: color 180ms ease, border-color 180ms ease,
    background-color 180ms ease;
}

@media (max-width: 639px) {
  #comments > div {
    backdrop-filter: blur(6px) saturate(105%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #waline a,
  #waline button,
  #waline input,
  #waline textarea {
    transition: none;
  }
}