/*
 * Cyber Crayon v4 — Guestbook page
 *
 * Site-wide comment feed + decorative sticker wall (`.lc-guestbook-wall` /
 * `.lc-sticker`).
 */

.lc-guestbook-layout {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Wrapper is a plain pass-through — the distinct card is the inner
   .lc-comments-tech__respond (shared with article comments). */
.lc-guestbook-form-wrap {
  scroll-margin-top: calc(var(--lc-navbar-h, 72px) + 1.5rem);
}

.lc-guestbook-form-wrap .lc-comments-tech {
  margin: 0;
  padding: 0;
  border: none;
}

/* v4 — pill button in the page header meta ("我要留言") */
.lc-guestbook-page .lc-button,
.lc-page-header__meta .lc-button {
  border: none;
  border-radius: var(--lc-radius-pill);
  box-shadow: var(--lc-shadow-soft);
  text-transform: none;
}

.lc-page-header__meta .lc-button:hover,
.lc-page-header__meta .lc-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--lc-shadow-card-hover);
}

.lc-page-header__meta .lc-button:active {
  transform: translateY(0);
}

/* Feed column */
.lc-guestbook-feed {
  min-width: 0;
}

.lc-guestbook-feed__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sticker wall — recent messages as rotated rounded chips */
.lc-guestbook-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.lc-sticker {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--lc-border-divider);
  border-top-width: 3px;
  border-radius: var(--lc-radius-card);
  background: var(--lc-surface-container-lowest);
  box-shadow: var(--lc-shadow-card);
  color: inherit;
  text-align: left;
  transform: rotate(var(--sticker-rot, 0deg));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lc-sticker:hover,
.lc-sticker:focus-visible {
  box-shadow: var(--lc-shadow-card-hover);
}

.lc-sticker:focus-visible {
  outline: 2px solid var(--lc-primary);
  outline-offset: 2px;
}

.lc-sticker--lime {
  border-top-color: var(--lc-cyber-lime);
}

.lc-sticker--pink {
  border-top-color: var(--lc-neon-pink);
}

.lc-sticker--purple {
  border-top-color: var(--lc-electric-purple);
}

.lc-sticker--blue {
  border-top-color: var(--lc-spray-can-blue);
}

.lc-sticker__author {
  font-family: var(--lc-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lc-primary);
}

.lc-sticker__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--lc-on-surface-variant);
}

.lc-comment-feed__item--depth-1 .lc-comment-tech__avatar-wrap {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 0;
}

.lc-avatar--40 {
  width: 2.5rem;
  height: 2.5rem;
}

.lc-avatar--40 .lc-avatar__fallback {
  font-size: 0.875rem;
}

.lc-comment-feed__item.is-highlighted .lc-comment-tech__body,
.lc-comment-thread.is-highlighted > .lc-comment-feed__item .lc-comment-tech__body,
.lc-comment-thread.is-highlighted .lc-comment-thread__children .lc-comment-feed__item.is-highlighted .lc-comment-tech__body,
.lc-comment-thread__children .lc-comment-feed__item.is-highlighted .lc-comment-tech__body {
  outline: 3px solid var(--lc-cyber-lime);
  outline-offset: 2px;
}

.lc-guestbook-feed .lc-pagination {
  margin-top: 1.5rem;
}

/* Feed item — source row */
.lc-comment-feed__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.lc-comment-feed__type {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.15rem 0.45rem;
  border-radius: var(--lc-radius-pill);
  font-family: var(--lc-font-mono);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lc-comment-feed__type--post {
  background: var(--lc-electric-purple);
  color: #fff;
}

.lc-comment-feed__type--page {
  background: var(--lc-spray-can-blue);
  color: #fff;
}

.lc-comment-feed__type--guestbook {
  background: var(--lc-neon-pink);
  color: #fff;
}

.lc-comment-feed__type--unknown {
  background: var(--lc-surface-container-high);
  color: var(--lc-on-surface-variant);
}

.lc-comment-feed__source-link {
  min-width: 0;
  font-family: var(--lc-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lc-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-comment-feed__source-link:hover,
.lc-comment-feed__source-link:focus-visible {
  color: var(--lc-electric-purple);
  text-decoration: underline;
}

.lc-comment-feed__source-missing {
  font-family: var(--lc-font-mono);
  font-size: 0.75rem;
  color: var(--lc-on-surface-variant);
}

html[data-lc-color-scheme="dark"] .lc-comment-feed__type--post,
html[data-lc-color-scheme="dark"] .lc-comment-feed__type--page,
html[data-lc-color-scheme="dark"] .lc-comment-feed__type--guestbook {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .lc-sticker {
    transition: none;
  }
}

@media (max-width: 767px) {
  .lc-comment-feed__source-link {
    white-space: normal;
  }
}