/* ========== 留言页独立样式 ========== */

.page-shell-body[data-page="comments"] {
  background:
    radial-gradient(circle at 9% 9%, rgba(255, 198, 221, 0.98), transparent 16%),
    radial-gradient(circle at 24% 10%, rgba(255, 224, 238, 0.82), transparent 19%),
    radial-gradient(circle at 82% 12%, rgba(255, 213, 230, 0.74), transparent 17%),
    radial-gradient(circle at 88% 46%, rgba(246, 222, 255, 0.46), transparent 21%),
    radial-gradient(circle at 62% 78%, rgba(255, 235, 244, 0.6), transparent 23%),
    linear-gradient(180deg, #fff8fb 0%, #fef0f6 34%, #f8e9f1 62%, #f2e2eb 100%);
  min-height: 100vh;
}

.page-shell-body[data-page="comments"]::before,
.page-shell-body[data-page="comments"]::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-shell-body[data-page="comments"]::before {
  background:
    linear-gradient(24deg, transparent 0 44%, rgba(132, 102, 109, 0.16) 44.8% 45.6%, transparent 46%) left -4% top 7% / 48% 44% no-repeat,
    linear-gradient(-20deg, transparent 0 49%, rgba(132, 102, 109, 0.12) 49.6% 50.4%, transparent 51%) left 2% top 4% / 38% 34% no-repeat,
    radial-gradient(circle at 11% 10%, rgba(255, 205, 222, 0.92) 0 2.5%, transparent 2.9%),
    radial-gradient(circle at 15% 7%, rgba(255, 227, 237, 0.98) 0 2.8%, transparent 3.25%),
    radial-gradient(circle at 19% 12%, rgba(255, 214, 230, 0.86) 0 2.45%, transparent 2.95%),
    radial-gradient(circle at 22% 8%, rgba(255, 236, 244, 0.9) 0 2.2%, transparent 2.7%),
    radial-gradient(circle at 7% 17%, rgba(255, 221, 234, 0.74) 0 2.25%, transparent 2.75%),
    radial-gradient(circle at 16% 19%, rgba(255, 212, 228, 0.7) 0 2.1%, transparent 2.6%),
    radial-gradient(circle at 12% 22%, rgba(255, 231, 239, 0.62) 0 1.9%, transparent 2.35%);
  opacity: 0.9;
}

.page-shell-body[data-page="comments"]::after {
  background:
    radial-gradient(circle at 76% 14%, rgba(255, 245, 249, 0.78), transparent 16%),
    radial-gradient(circle at 90% 22%, rgba(255, 234, 245, 0.48), transparent 12%),
    radial-gradient(circle at 18% 82%, rgba(255, 249, 252, 0.82), transparent 22%),
    repeating-radial-gradient(circle at 68% 78%, rgba(255, 215, 232, 0.13) 0 2px, rgba(255, 215, 232, 0) 2px 18px),
    repeating-radial-gradient(circle at 22% 88%, rgba(255, 226, 237, 0.12) 0 2px, rgba(255, 226, 237, 0) 2px 20px);
  opacity: 0.9;
  animation: sakuraRipple 18s ease-in-out infinite alternate;
}

.page-shell-body[data-page="comments"] .page-shell {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  padding-top: 20px;
}

.page-shell-body[data-page="comments"] .page-hero {
  display: none;
}

.page-shell-body[data-page="comments"] #page-content {
  margin-top: 0;
}

.messages-container {
  display: grid;
  gap: 20px;
}

.wish-note-tone-1 {
  --note-bg: #ffe8b8;
  --note-border: rgba(191, 144, 88, 0.26);
  --note-strong: #885d2c;
}

.wish-note-tone-2 {
  --note-bg: #ffdbe4;
  --note-border: rgba(195, 120, 141, 0.24);
  --note-strong: #9a566e;
}

.wish-note-tone-3 {
  --note-bg: #e9f2de;
  --note-border: rgba(122, 154, 109, 0.22);
  --note-strong: #5f7b53;
}

.wish-note-tone-4 {
  --note-bg: #e0ecfb;
  --note-border: rgba(108, 142, 176, 0.22);
  --note-strong: #517390;
}

.wish-note-tone-5 {
  --note-bg: #ffe7d5;
  --note-border: rgba(205, 145, 107, 0.22);
  --note-strong: #976341;
}

.wish-note-tone-6 {
  --note-bg: #f1e5f3;
  --note-border: rgba(158, 124, 164, 0.22);
  --note-strong: #785d83;
}

.wish-wall-scene,
.messages-list {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(231, 177, 204, 0.88);
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.82), transparent 20%),
    radial-gradient(circle at 82% 84%, rgba(255, 235, 244, 0.34), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 252, 0.96)),
    linear-gradient(145deg, rgba(255, 252, 254, 0.98), rgba(253, 238, 246, 0.94));
  box-shadow:
    0 28px 60px rgba(181, 123, 150, 0.18),
    0 10px 24px rgba(255, 232, 241, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.54) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.wish-wall-scene {
  padding: 24px;
}

.wish-wall-scene::before,
.wish-wall-scene::after,
.messages-list::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wish-wall-scene::before {
  background:
    radial-gradient(circle at 82% 12%, rgba(251, 220, 231, 0.62), transparent 18%),
    radial-gradient(circle at 9% 82%, rgba(252, 229, 236, 0.46), transparent 20%),
    radial-gradient(circle at 22% 14%, rgba(255, 247, 250, 0.8), transparent 18%);
}

.wish-wall-scene::after {
  background:
    linear-gradient(23deg, transparent 0 48%, rgba(140, 112, 120, 0.05) 48.6% 49.2%, transparent 49.8%) left 2% top 10% / 40% 34% no-repeat,
    radial-gradient(circle at 74% 76%, rgba(255, 230, 240, 0.16) 0 10%, transparent 11%),
    repeating-radial-gradient(circle at 74% 76%, rgba(255, 207, 226, 0.12) 0 2px, rgba(255, 207, 226, 0) 2px 18px);
  opacity: 0.78;
}

.messages-list::before {
  background:
    radial-gradient(circle at 90% 10%, rgba(250, 222, 232, 0.34), transparent 18%),
    radial-gradient(circle at 8% 88%, rgba(255, 236, 244, 0.28), transparent 20%),
    repeating-radial-gradient(circle at 18% 82%, rgba(255, 212, 230, 0.1) 0 2px, rgba(255, 212, 230, 0) 2px 20px);
}

.wish-wall-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.wish-wall-petals::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 225, 237, 0.24), transparent 11%),
    radial-gradient(circle at 34% 18%, rgba(255, 239, 245, 0.18), transparent 10%),
    radial-gradient(circle at 62% 14%, rgba(255, 226, 238, 0.2), transparent 11%),
    radial-gradient(circle at 78% 26%, rgba(255, 236, 244, 0.16), transparent 10%);
  opacity: 0.82;
}

.wish-petal {
  position: absolute;
  width: 14px;
  height: 21px;
  border-radius: 12px 12px 12px 2px;
  background: linear-gradient(180deg, rgba(255, 244, 248, 0.98), rgba(250, 197, 223, 0.94));
  box-shadow:
    inset 0 -1px 0 rgba(225, 165, 191, 0.34),
    0 8px 18px rgba(247, 190, 214, 0.24);
  opacity: 0.88;
  filter: saturate(1.05);
  animation: sakuraFloat 15s linear infinite;
}

.wish-petal-1 { top: 10%; left: 20%; animation-delay: -1s; }
.wish-petal-2 { top: 4%; left: 36%; width: 10px; height: 16px; animation-delay: -5s; }
.wish-petal-3 { top: 18%; left: 46%; animation-delay: -7s; }
.wish-petal-4 { top: 8%; right: 24%; animation-delay: -2s; }
.wish-petal-5 { top: 22%; right: 12%; width: 10px; height: 15px; animation-delay: -9s; }
.wish-petal-6 { top: 34%; left: 12%; animation-delay: -11s; }
.wish-petal-7 { top: 28%; right: 36%; animation-delay: -4s; }
.wish-petal-8 { top: 40%; right: 8%; width: 9px; height: 14px; animation-delay: -8s; }
.wish-petal-9 { top: 12%; left: 58%; width: 11px; height: 17px; animation-delay: -6s; }
.wish-petal-10 { top: 22%; left: 72%; width: 13px; height: 19px; animation-delay: -10s; }
.wish-petal-11 { top: 30%; left: 28%; width: 10px; height: 15px; animation-delay: -12s; }
.wish-petal-12 { top: 16%; right: 30%; width: 12px; height: 18px; animation-delay: -3s; }

.wish-wall-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  align-items: start;
}

.wish-wall-featured,
.message-form-section {
  min-width: 0;
}

.wish-wall-featured h3,
.message-form-head h3,
.messages-list h3 {
  margin: 0 0 16px;
  color: #3f2c25;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.danmaku-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px 14px;
  align-items: start;
  min-height: 190px;
  padding: 6px 2px 0;
}

.wish-float-card,
.message-item {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 9px;
  padding: 16px 14px 13px;
  border-radius: 16px 18px 20px 14px;
  border: 1px solid var(--note-border, rgba(132, 101, 70, 0.24));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.06) 28%),
    var(--note-bg, #f4e2b6);
  color: #3a2b1f;
  text-align: left;
  box-shadow:
    0 18px 30px rgba(141, 104, 87, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.24) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wish-float-card {
  min-height: 122px;
  transform: translate(var(--wish-lift, 0), 0) rotate(var(--wish-rotate, 0deg));
}

.wish-float-card::before,
.message-item::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 56px;
  height: 16px;
  transform: translateX(-50%) rotate(-4deg);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 4px 10px rgba(66, 47, 32, 0.08);
}

.wish-float-card:hover,
.message-item:hover {
  border-color: rgba(195, 123, 110, 0.34);
  box-shadow: 0 22px 32px rgba(75, 54, 35, 0.14);
}

.wish-float-card:hover {
  transform: translate(var(--wish-lift, 0), -6px) rotate(var(--wish-rotate, 0deg));
}

.message-item:hover {
  transform: translateY(-6px) rotate(var(--note-rotate, 0deg));
}

.message-item.is-focused {
  border-color: rgba(56, 131, 255, 0.58);
  box-shadow:
    0 24px 38px rgba(44, 84, 162, 0.22),
    0 0 0 4px rgba(143, 191, 255, 0.2);
}

.message-item.is-focused::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(91, 161, 255, 0.42);
  border-radius: 22px;
  pointer-events: none;
}

.message-thread.is-focused-thread > .message-item {
  transform: translateY(-4px) rotate(var(--note-rotate, 0deg));
}

.wish-float-pin,
.message-pin {
  display: none;
}

.wish-float-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.wish-float-author,
.msg-author {
  font-weight: 700;
  color: var(--note-strong, #81552d);
}

.wish-float-category,
.msg-owner-tag,
.msg-interaction-badge,
.msg-category {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  color: rgba(58, 43, 31, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
}

.wish-float-likes {
  margin-left: auto;
  font-size: 0.8rem;
  color: rgba(58, 43, 31, 0.76);
  font-weight: 700;
}

.wish-float-content,
.msg-content {
  margin: 0;
  line-height: 1.58;
  color: rgba(58, 43, 31, 0.88);
  word-break: break-word;
}

.wish-float-date,
.msg-date {
  font-size: 0.78rem;
  color: rgba(58, 43, 31, 0.6);
}

.message-form-section {
  position: relative;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 228, 239, 0.54), transparent 22%),
    radial-gradient(circle at 18% 100%, rgba(255, 245, 249, 0.62), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 247, 251, 0.94)),
    linear-gradient(140deg, rgba(255, 235, 244, 0.92), rgba(249, 238, 247, 0.88));
  padding: 22px 22px 20px;
  box-shadow:
    0 26px 50px rgba(194, 136, 161, 0.2),
    0 10px 22px rgba(255, 233, 242, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.48) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.message-form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(234, 162, 193, 0.96), rgba(218, 190, 242, 0.78), rgba(255, 255, 255, 0.66));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.wish-wall-scene::selection,
.messages-list::selection,
.message-form-section::selection {
  background: rgba(243, 180, 204, 0.24);
}

.message-form-head {
  margin-bottom: 16px;
}

.message-reply-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(239, 211, 203, 0.92);
  background: rgba(255, 255, 255, 0.58);
  color: #5a4339;
  font-size: 0.88rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.message-reply-banner[hidden] {
  display: none;
}

.message-reply-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.message-reply-cancel {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(245, 226, 220, 0.92);
  color: #bf6d54;
  cursor: pointer;
  font-size: 0.84rem;
}

.message-reply-return {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #8c4f5e;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
}

.message-item.is-reply-origin-focus {
  border-color: rgba(64, 140, 255, 0.62);
  box-shadow:
    0 24px 38px rgba(44, 84, 162, 0.22),
    0 0 0 4px rgba(143, 191, 255, 0.24);
}

.message-form {
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-row > * {
  min-width: 0;
}

.nickname-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.nickname-field > input {
  min-width: 0;
}

.nickname-random-btn {
  padding: 0 16px;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(242, 197, 218, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 251, 253, 0.96), rgba(255, 242, 247, 0.94));
  color: #c56f97;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 20px rgba(243, 214, 226, 0.2);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, color 0.24s ease;
}

.nickname-random-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(223, 143, 184, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 24px rgba(243, 214, 226, 0.28);
}

.message-form input[type="text"],
.message-form input[type="email"],
.message-form input[type="tel"],
.message-form textarea,
.message-form select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(242, 197, 218, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 249, 252, 0.9));
  color: #5a4439;
  font-family: inherit;
  font-size: 0.96rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 20px rgba(243, 214, 226, 0.28);
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease, background 0.24s ease;
}

.message-form input::placeholder,
.message-form textarea::placeholder {
  color: rgba(102, 81, 72, 0.72);
}

.message-form input:focus,
.message-form textarea:focus,
.message-form select:focus {
  outline: none;
  border-color: rgba(223, 143, 184, 0.82);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 4px rgba(252, 218, 235, 0.82),
    0 14px 24px rgba(243, 214, 226, 0.4);
  transform: translateY(-1px);
}

.message-form textarea {
  min-height: 160px;
  resize: vertical;
}

.message-notify-optin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(240, 204, 220, 0.92);
  background: rgba(255, 250, 253, 0.82);
  color: #5a4439;
  font-size: 0.86rem;
  width: fit-content;
  box-shadow: 0 8px 18px rgba(243, 214, 226, 0.18);
}

.message-notify-optin input {
  width: 15px;
  height: 15px;
}

.message-form-note {
  margin: -2px 0 4px;
  color: rgba(90, 68, 57, 0.78);
  font-size: 0.82rem;
  line-height: 1.7;
}

.submit-btn,
.msg-action-btn,
.msg-page-btn {
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.submit-btn {
  padding: 12px 22px;
  border: 0;
  background: linear-gradient(135deg, #f0a8bd, #d8849d 52%, #c9728d);
  color: #fff;
  cursor: pointer;
  justify-self: start;
  box-shadow: 0 14px 26px rgba(216, 132, 157, 0.3);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(216, 132, 157, 0.34);
}

.messages-list {
  padding: 24px 22px;
}

#messages-list-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 18px 14px;
  align-items: start;
}

.message-thread {
  display: grid;
  gap: 12px;
  align-content: start;
}

.msg-tree-children {
  display: grid;
  gap: 10px;
  margin-left: 14px;
  margin-top: 2px;
}

.message-item {
  transform: rotate(var(--note-rotate, 0deg));
}

.message-item.is-reply {
  margin-left: calc(var(--reply-depth, 1) * 8px);
  padding: 14px 13px 12px;
}

.message-item.is-root-card {
  padding: 15px 14px 13px;
}

.message-item-inner {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
}

.message-item-inner.is-root-layout {
  grid-template-columns: 1fr;
  gap: 8px;
}

.msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(58, 43, 31, 0.76);
}

.message-item.is-reply .msg-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.82rem;
}

.message-item-inner.is-root-layout .msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  font-size: 0.82rem;
  flex: 0 0 30px;
}

.msg-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.msg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.message-item-inner.is-root-layout .msg-header {
  gap: 8px;
}

.message-item-inner.is-root-layout .msg-main {
  gap: 7px;
}

.msg-date {
  margin-left: auto;
}

.message-item-inner.is-root-layout .msg-date {
  font-size: 0.74rem;
}

.msg-reply-target {
  display: inline;
  margin-right: 6px;
  color: rgba(73, 103, 124, 0.88);
  font-weight: 600;
}

.message-item .msg-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 7;
}

.message-item.note-size-xs .msg-content,
.message-item.note-size-reply-sm .msg-content {
  -webkit-line-clamp: 4;
}

.message-item.note-size-sm .msg-content {
  -webkit-line-clamp: 6;
}

.message-item.note-size-md .msg-content {
  -webkit-line-clamp: 8;
}

.message-item.note-size-lg .msg-content,
.message-item.note-size-xl .msg-content {
  -webkit-line-clamp: 10;
}

.message-thread.is-root.note-size-lg .msg-content {
  -webkit-line-clamp: 11;
}

.message-thread.is-root.note-size-xl .msg-content {
  -webkit-line-clamp: 12;
}

.message-thread.is-root.note-size-md .message-item {
  min-height: 224px;
}

.message-thread.is-root.note-size-lg .message-item {
  min-height: 252px;
}

.message-thread.is-root.note-size-xl .message-item {
  min-height: 282px;
}

.msg-footer {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.msg-action-btn {
  padding: 8px 12px;
  min-height: 40px;
  border: 1px solid rgba(242, 204, 219, 0.88);
  background: rgba(255, 251, 253, 0.54);
  color: rgba(58, 43, 31, 0.84);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.msg-like-btn {
  min-width: 108px;
}

.msg-reply-btn {
  min-width: 86px;
}

.msg-action-btn strong {
  min-width: 1.5em;
  text-align: center;
}

.msg-like-btn:hover,
.msg-reply-btn:hover,
.msg-page-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 132, 157, 0.4);
}

.msg-like-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.messages-pagination {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.messages-pagination[hidden] {
  display: none;
}

.msg-page-btn {
  padding: 8px 13px;
  border: 1px solid rgba(242, 204, 219, 0.88);
  background: rgba(255, 250, 252, 0.84);
  color: #5a4439;
  cursor: pointer;
}

.msg-page-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.messages-empty {
  text-align: center;
  padding: 42px 20px;
  border-radius: 18px;
  border: 1px dashed rgba(242, 204, 219, 0.88);
  background: rgba(255, 251, 253, 0.6);
  color: rgba(90, 68, 57, 0.72);
}

.note-size-xs {
  grid-column: span 2;
}

.note-size-sm {
  grid-column: span 3;
}

.note-size-md {
  grid-column: span 4;
}

.note-size-lg {
  grid-column: span 5;
}

.note-size-xl {
  grid-column: span 6;
}

.note-size-reply-sm,
.note-size-reply-md {
  width: min(100%, 240px);
}

.message-thread.is-root.note-size-xs {
  grid-column: span 2;
}

.message-thread.is-root.note-size-sm {
  grid-column: span 3;
}

.message-thread.is-root.note-size-md {
  grid-column: span 3;
}

.message-thread.is-root.note-size-lg {
  grid-column: span 4;
}

.message-thread.is-root.note-size-xl {
  grid-column: span 4;
}

.message-thread.is-root.note-size-xs .msg-footer,
.message-thread.is-root.note-size-sm .msg-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.message-item-inner.is-root-layout .msg-action-btn {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 0.84rem;
}

.message-thread.is-root.note-size-xs .msg-action-btn,
.message-thread.is-root.note-size-sm .msg-action-btn {
  min-width: 0;
  width: 100%;
  padding-inline: 10px;
  font-size: 0.85rem;
}

.message-thread.is-root.note-size-xs .msg-like-btn,
.message-thread.is-root.note-size-sm .msg-like-btn,
.message-thread.is-root.note-size-xs .msg-reply-btn,
.message-thread.is-root.note-size-sm .msg-reply-btn {
  min-width: 0;
}

@keyframes sakuraFloat {
  0% {
    transform: translate3d(0, -10px, 0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.72;
  }
  100% {
    transform: translate3d(-72px, 290px, 0) rotate(260deg);
    opacity: 0;
  }
}

@keyframes sakuraRipple {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 0.72;
  }
  100% {
    transform: scale(1.04) translate3d(-1.2%, 1%, 0);
    opacity: 0.96;
  }
}

body.dark-mode.page-shell-body[data-page="comments"] {
  background:
    radial-gradient(circle at 12% 8%, rgba(118, 79, 98, 0.78), transparent 18%),
    radial-gradient(circle at 84% 10%, rgba(96, 77, 108, 0.68), transparent 16%),
    linear-gradient(180deg, #221b20 0%, #171116 100%);
}

body.dark-mode.page-shell-body[data-page="comments"]::before {
  opacity: 0.32;
}

body.dark-mode .wish-wall-scene,
body.dark-mode .messages-list {
  border-color: rgba(255, 220, 236, 0.16);
  background:
    linear-gradient(180deg, rgba(48, 38, 45, 0.94), rgba(31, 24, 29, 0.96)),
    linear-gradient(145deg, rgba(56, 43, 51, 0.92), rgba(31, 24, 29, 0.96));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 233, 241, 0.08);
}

body.dark-mode .message-form-section {
  background:
    linear-gradient(180deg, rgba(52, 40, 48, 0.94), rgba(32, 24, 30, 0.97)),
    linear-gradient(145deg, rgba(111, 79, 97, 0.24), rgba(58, 44, 53, 0.2));
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 233, 241, 0.08);
}

body.dark-mode .message-form-section::before {
  background: linear-gradient(140deg, rgba(220, 152, 186, 0.42), rgba(154, 126, 190, 0.26), rgba(255, 255, 255, 0.08));
}

body.dark-mode .wish-float-card,
body.dark-mode .message-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 26%),
    var(--note-bg, #5d4a55);
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.dark-mode .message-item.is-focused {
  border-color: rgba(124, 178, 255, 0.68);
  box-shadow:
    0 24px 38px rgba(11, 24, 44, 0.42),
    0 0 0 4px rgba(66, 124, 214, 0.22);
}

body.dark-mode .message-item.is-reply-origin-focus {
  border-color: rgba(136, 190, 255, 0.74);
  box-shadow:
    0 24px 38px rgba(11, 24, 44, 0.42),
    0 0 0 4px rgba(74, 138, 231, 0.24);
}

body.dark-mode .wish-note-tone-1 {
  --note-bg: #7d643f;
  --note-border: rgba(255, 221, 153, 0.18);
  --note-strong: #fff0c8;
}

body.dark-mode .wish-note-tone-2 {
  --note-bg: #6f4a59;
  --note-border: rgba(255, 202, 222, 0.18);
  --note-strong: #ffdcea;
}

body.dark-mode .wish-note-tone-3 {
  --note-bg: #53644a;
  --note-border: rgba(207, 233, 193, 0.16);
  --note-strong: #e5f3db;
}

body.dark-mode .wish-note-tone-4 {
  --note-bg: #495c72;
  --note-border: rgba(199, 223, 247, 0.16);
  --note-strong: #deeeff;
}

body.dark-mode .wish-note-tone-5 {
  --note-bg: #7a5846;
  --note-border: rgba(255, 214, 186, 0.18);
  --note-strong: #ffe2cf;
}

body.dark-mode .wish-note-tone-6 {
  --note-bg: #66526d;
  --note-border: rgba(225, 205, 237, 0.18);
  --note-strong: #f0defb;
}

body.dark-mode .wish-wall-featured h3,
body.dark-mode .message-form-head h3,
body.dark-mode .messages-list h3 {
  color: #fff2f6;
}

body.dark-mode .wish-float-author,
body.dark-mode .msg-author {
  color: #fff0f5;
}

body.dark-mode .wish-float-content,
body.dark-mode .msg-content {
  color: rgba(255, 244, 248, 0.94);
}

body.dark-mode .wish-float-date,
body.dark-mode .msg-date,
body.dark-mode .msg-reply-target {
  color: rgba(255, 223, 234, 0.76);
}

body.dark-mode .wish-float-category,
body.dark-mode .msg-owner-tag,
body.dark-mode .msg-interaction-badge,
body.dark-mode .msg-category {
  background: rgba(255, 244, 249, 0.12);
  color: rgba(255, 235, 242, 0.92);
}

body.dark-mode .wish-float-likes {
  color: rgba(255, 233, 241, 0.88);
}

body.dark-mode .message-form input,
body.dark-mode .message-form textarea,
body.dark-mode .message-form select,
body.dark-mode .message-notify-optin,
body.dark-mode .message-reply-banner,
body.dark-mode .msg-action-btn,
body.dark-mode .msg-page-btn,
body.dark-mode .messages-empty {
  background: rgba(255, 247, 251, 0.08);
  border-color: rgba(255, 218, 232, 0.16);
  color: #fff0f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .message-form input::placeholder,
body.dark-mode .message-form textarea::placeholder {
  color: rgba(255, 221, 233, 0.54);
}

body.dark-mode .message-form input:focus,
body.dark-mode .message-form textarea:focus,
body.dark-mode .message-form select:focus {
  border-color: rgba(240, 173, 203, 0.56);
  background: rgba(255, 248, 251, 0.12);
  box-shadow:
    0 0 0 4px rgba(236, 167, 199, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .message-notify-optin input {
  accent-color: #f0a8bd;
}

body.dark-mode .message-form-note {
  color: rgba(255, 221, 233, 0.74);
}

body.dark-mode .nickname-random-btn {
  border-color: rgba(255, 214, 229, 0.18);
  background: rgba(255, 247, 251, 0.1);
  color: #ffd6e6;
}

body.dark-mode .nickname-random-btn:hover,
body.dark-mode .msg-action-btn:hover,
body.dark-mode .msg-page-btn:hover {
  border-color: rgba(240, 173, 203, 0.4);
  color: #fff5f8;
}

body.dark-mode .msg-like-btn:disabled {
  opacity: 1;
  color: #fff4f7;
  border-color: rgba(240, 173, 203, 0.28);
  background: rgba(240, 168, 189, 0.18);
}

@media (max-width: 980px) {
  .wish-wall-hero {
    grid-template-columns: 1fr;
  }

  .danmaku-wrapper,
  #messages-list-container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .note-size-xs,
  .note-size-sm {
    grid-column: span 2;
  }

  .note-size-md {
    grid-column: span 3;
  }

  .note-size-lg,
  .note-size-xl {
    grid-column: span 4;
  }

  .message-thread.is-root.note-size-xs {
    grid-column: span 2;
  }

  .message-thread.is-root.note-size-sm {
    grid-column: span 3;
  }
}

@media (max-width: 720px) {
  .wish-wall-scene,
  .messages-list {
    padding: 18px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .message-reply-actions {
    width: 100%;
    margin-left: 0;
  }

  .danmaku-wrapper,
  #messages-list-container {
    grid-template-columns: 1fr;
  }

  .note-size-xs,
  .note-size-sm,
  .note-size-md,
  .note-size-lg,
  .note-size-xl {
    grid-column: span 1;
  }

  .message-item-inner {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  .msg-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
  }
}

@media (max-width: 520px) {
  .wish-wall-scene,
  .messages-list,
  .message-form-section {
    padding: 14px;
    border-radius: 22px;
  }

  .wish-float-card,
  .message-item {
    padding: 14px 12px 12px;
  }

  .message-item-inner {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .msg-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.76rem;
  }

  .message-thread .message-thread-children {
    padding-left: 8px;
  }

  .msg-actions,
  .message-reply-actions {
    gap: 8px;
  }
}