/* Final Xinjian interaction page skin based on the 853x1844 reference. */

.diary-interaction-panel {
  background:
    #fbfcf7 url("./assets/diary-interaction/background.png")
    center center / 100% 100%
    no-repeat !important;
}

.diary-interaction-head {
  height: 6.72% !important;
  min-height: 56px !important;
  max-height: 76px !important;
  padding: 0 5.1% !important;
  flex: 0 0 6.72% !important;
  grid-template-columns: 48px minmax(0, 1fr) 100px !important;
  border-bottom: 1px solid rgb(222 226 220 / 72%) !important;
  background: rgb(255 255 255 / 97%) !important;
  box-shadow: 0 2px 8px rgb(45 55 40 / 6%) !important;
}

.diary-interaction-head strong {
  align-self: center !important;
  color: #0b0e0b !important;
  font-size: clamp(20px, 4.45vw, 38px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.diary-interaction-back {
  width: 44px !important;
  height: 44px !important;
}

.diary-interaction-back::before {
  left: 15px !important;
  top: 9px !important;
  width: 18px !important;
  height: 18px !important;
  border-left: 4px solid #101010 !important;
  border-bottom: 4px solid #101010 !important;
}

.diary-interaction-read-all {
  align-self: center !important;
  justify-self: end !important;
  color: #10691d !important;
  font-size: clamp(14px, 2.72vw, 23px) !important;
  font-weight: 740 !important;
}

.diary-interaction-hero {
  height: 12.04% !important;
  min-height: 102px !important;
  max-height: 150px !important;
  flex: 0 0 12.04% !important;
  box-sizing: border-box !important;
  padding: 5.9% 6.2% 0 !important;
  background: transparent !important;
}

.diary-interaction-hero p {
  max-width: 42% !important;
  margin: 0 0 1.3% !important;
  color: #0b6a1f !important;
  font-size: clamp(18px, 3.42vw, 29px) !important;
  font-weight: 720 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.02em !important;
}

.diary-interaction-hero span {
  color: #737574 !important;
  font-size: clamp(14px, 2.93vw, 25px) !important;
  font-weight: 540 !important;
  line-height: 1.35 !important;
}

.diary-interaction-list {
  flex: 1 1 auto !important;
  padding: 0 3.52% 2.6% !important;
  gap: clamp(10px, 1.03vh, 19px) !important;
}

.diary-interaction-message {
  padding: clamp(16px, 2.6vw, 28px) clamp(15px, 3.3vw, 28px) clamp(15px, 2.6vw, 28px) clamp(17px, 3.5vw, 30px) !important;
  grid-template-columns: clamp(46px, 8.2vw, 70px) minmax(0, 1fr) !important;
  gap: clamp(12px, 2.58vw, 22px) !important;
  border: 0 !important;
  border-radius: clamp(20px, 3.63vw, 31px) !important;
  background: rgb(255 255 255 / 84%) !important;
  box-shadow:
    0 clamp(12px, 2.34vw, 20px) clamp(24px, 5.16vw, 44px) rgb(82 92 75 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 84%) !important;
  backdrop-filter: blur(12px) !important;
}

.diary-interaction-message-avatar {
  width: clamp(46px, 8.2vw, 70px) !important;
  height: clamp(46px, 8.2vw, 70px) !important;
}

.diary-interaction-message-body {
  gap: clamp(9px, 1.52vw, 13px) !important;
}

.diary-interaction-message-top {
  grid-template-columns: minmax(0, 1fr) auto clamp(8px, 1.64vw, 14px) !important;
  gap: clamp(8px, 1.64vw, 14px) !important;
}

.diary-interaction-message-title,
.diary-interaction-message-title b {
  color: #151915 !important;
  font-size: clamp(14px, 2.23vw, 19px) !important;
  font-weight: 780 !important;
  line-height: 1.32 !important;
}

.diary-interaction-message-title strong {
  color: #08711a !important;
  font-size: clamp(15px, 2.34vw, 20px) !important;
  font-weight: 900 !important;
}

.diary-interaction-message-top time {
  color: #6f7471 !important;
  font-size: clamp(12px, 1.88vw, 16px) !important;
  font-weight: 560 !important;
}

.diary-interaction-message-dot {
  width: clamp(8px, 1.64vw, 14px) !important;
  height: clamp(8px, 1.64vw, 14px) !important;
  margin-top: clamp(4px, 0.7vw, 6px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("./assets/diary-interaction/red-dot.png") center / contain no-repeat !important;
  box-shadow: none !important;
}

.diary-interaction-message-text {
  color: #454946 !important;
  font-size: clamp(13px, 2.11vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
}

.diary-interaction-message-quote {
  padding: clamp(10px, 1.76vw, 15px) clamp(12px, 2.58vw, 22px) !important;
  gap: clamp(6px, 1.05vw, 9px) !important;
  border-radius: clamp(13px, 2.11vw, 18px) !important;
  background: rgb(247 248 245 / 76%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%) !important;
}

.diary-interaction-message-quote-meta,
.diary-interaction-message-quote-text {
  font-size: clamp(12px, 1.88vw, 16px) !important;
  font-weight: 540 !important;
  line-height: 1.45 !important;
}

.diary-interaction-message-quote-text {
  color: #2f342f !important;
  font-size: clamp(12px, 1.99vw, 17px) !important;
}

.diary-interaction-message-quote-text strong {
  margin-right: clamp(5px, 0.94vw, 8px) !important;
  color: #08711a !important;
  font-weight: 900 !important;
}

.diary-interaction-message-foot button {
  padding: 4px clamp(20px, 3.16vw, 27px) 4px 0 !important;
  color: #156f19 !important;
  font-size: clamp(13px, 1.99vw, 17px) !important;
  font-weight: 760 !important;
}

.diary-interaction-message-foot button::after {
  width: clamp(15px, 2.11vw, 18px) !important;
  height: clamp(15px, 2.11vw, 18px) !important;
  border: 0 !important;
  background: url("./assets/diary-interaction/arrow.png") center / contain no-repeat !important;
  transform: translateY(-50%) !important;
}

.diary-interaction-read-divider {
  margin: clamp(10px, 1.41vw, 12px) 2.35% -2px !important;
  color: #6f746f !important;
  font-size: clamp(12px, 1.99vw, 17px) !important;
  font-weight: 520 !important;
}

.diary-interaction-tail {
  padding: clamp(10px, 1.41vw, 12px) 0 clamp(18px, 2.81vw, 24px) !important;
  color: #767b77 !important;
  font-size: clamp(12px, 1.88vw, 16px) !important;
  font-weight: 520 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-reminder {
  min-height: 54px !important;
  padding: 9px 46px 9px 16px !important;
  grid-template-columns: 30px minmax(0, 1fr) auto 18px !important;
  border-color: rgb(207 233 197 / 92%) !important;
  border-radius: 19px !important;
  background: rgb(241 255 234 / 86%) !important;
  box-shadow:
    0 12px 24px rgb(78 116 62 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 70%) !important;
  backdrop-filter: blur(10px) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 0 !important;
  background: url("./assets/diary-interaction/interaction-reminder.png") center / contain no-repeat !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-icon::before,
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-icon::after,
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-arrow::before {
  content: none !important;
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-text {
  color: #126a20 !important;
  font-size: 16px !important;
  font-weight: 840 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-arrow {
  width: 18px !important;
  height: 18px !important;
  background: url("./assets/diary-interaction/arrow.png") center / contain no-repeat !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-dot {
  right: 15px !important;
  top: 10px !important;
  width: 11px !important;
  height: 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("./assets/diary-interaction/red-dot.png") center / contain no-repeat !important;
  box-shadow: none !important;
}

/* User-scoped correction: background covers the whole interaction screen; keep header/hero layout. */
.diary-interaction-dialog {
  background:
    #fbfcf7 url("./assets/diary-interaction/background.png")
    center center / 100% 100%
    no-repeat !important;
}

.diary-interaction-panel {
  background: transparent !important;
}

.diary-interaction-head {
  position: relative !important;
  z-index: 3 !important;
}

.diary-interaction-hero {
  position: relative !important;
  z-index: 1 !important;
}

.diary-interaction-list {
  position: relative !important;
  z-index: 1 !important;
  margin-top: -18px !important;
  padding-top: 0 !important;
}

@media (min-width: 581px) {
  .diary-interaction-list {
    margin-top: -24px !important;
  }
}

/* Final correction: first reply card starts below the subtitle, cards match the design and never overlap. */
.diary-interaction-hero {
  height: auto !important;
  min-height: 172px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding: 36px 6.2% 22px !important;
  box-sizing: border-box !important;
}

.diary-interaction-hero p {
  max-width: 46% !important;
  margin: 0 0 10px !important;
}

.diary-interaction-hero span {
  display: block !important;
  margin: 0 !important;
}

.diary-interaction-list {
  margin-top: 0 !important;
  padding: 0 3.52% 28px !important;
  gap: 18px !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.diary-interaction-message {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 22px 28px 22px 30px !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
  border-radius: 30px !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow:
    0 18px 38px rgb(82 92 75 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 88%) !important;
}

.diary-interaction-message-avatar {
  width: 70px !important;
  height: 70px !important;
}

.diary-interaction-message-body {
  min-width: 0 !important;
  gap: 13px !important;
}

.diary-interaction-message-top {
  grid-template-columns: minmax(0, 1fr) auto 14px !important;
  gap: 12px !important;
  align-items: start !important;
}

.diary-interaction-message-title,
.diary-interaction-message-title b {
  font-size: 19px !important;
  line-height: 1.32 !important;
  white-space: nowrap !important;
}

.diary-interaction-message-title strong {
  font-size: 20px !important;
}

.diary-interaction-message-top time {
  font-size: 16px !important;
  line-height: 1.32 !important;
}

.diary-interaction-message-dot {
  width: 14px !important;
  height: 14px !important;
  margin-top: 5px !important;
}

.diary-interaction-message-text {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.52 !important;
  white-space: normal !important;
}

.diary-interaction-message-quote {
  overflow: hidden !important;
  min-height: 70px !important;
  padding: 14px 22px !important;
  gap: 8px !important;
  border-radius: 18px !important;
  background: rgb(247 248 245 / 82%) !important;
}

.diary-interaction-message-quote-meta,
.diary-interaction-message-quote-text {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.diary-interaction-message-quote-text {
  font-size: 17px !important;
}

.diary-interaction-message-foot {
  display: flex !important;
  justify-content: flex-end !important;
  margin: -2px 0 0 !important;
}

.diary-interaction-message-foot button {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.diary-interaction-read-divider {
  margin: 14px 20px -2px !important;
}

@media (max-width: 580px) {
  .diary-interaction-hero {
    min-height: 154px !important;
    padding: 30px 24px 18px !important;
  }

  .diary-interaction-hero p {
    max-width: 48% !important;
    margin-bottom: 8px !important;
  }

  .diary-interaction-list {
    margin-top: 0 !important;
    padding: 0 14px 22px !important;
    gap: 12px !important;
  }

  .diary-interaction-message {
    padding: 16px 15px 15px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    border-radius: 20px !important;
    background: rgb(255 255 255 / 92%) !important;
  }

  .diary-interaction-message-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .diary-interaction-message-title,
  .diary-interaction-message-title b {
    font-size: 14px !important;
  }

  .diary-interaction-message-title strong {
    font-size: 15px !important;
  }

  .diary-interaction-message-top time {
    font-size: 12px !important;
  }

  .diary-interaction-message-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .diary-interaction-message-text {
    font-size: 13px !important;
  }

  .diary-interaction-message-quote {
    min-height: 50px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  .diary-interaction-message-quote-meta,
  .diary-interaction-message-quote-text {
    font-size: 12px !important;
  }

  .diary-interaction-message-foot button {
    font-size: 13px !important;
  }
}

/* Final requested layout: card list starts at the red-line position and flows normally. */
.diary-interaction-list {
  display: flex !important;
  flex-direction: column !important;
  align-content: initial !important;
  align-items: stretch !important;
  margin-top: 0 !important;
  padding: 0 30px 28px !important;
  gap: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.diary-interaction-message {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 232px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 22px !important;
  overflow: visible !important;
  padding: 24px 28px 22px 30px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow:
    0 18px 38px rgb(82 92 75 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 88%) !important;
  backdrop-filter: blur(12px) !important;
}

.diary-interaction-message-avatar {
  width: 70px !important;
  height: 70px !important;
  flex: 0 0 70px !important;
}

.diary-interaction-message-body {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  overflow: visible !important;
}

.diary-interaction-message-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 14px !important;
  align-items: start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.diary-interaction-message-title,
.diary-interaction-message-title b {
  overflow: hidden !important;
  color: #151915 !important;
  font-size: 19px !important;
  font-weight: 780 !important;
  line-height: 1.32 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diary-interaction-message-title strong {
  color: #08711a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.diary-interaction-message-top time {
  color: #6f7471 !important;
  font-size: 16px !important;
  font-weight: 560 !important;
  line-height: 1.32 !important;
  white-space: nowrap !important;
}

.diary-interaction-message-dot {
  width: 14px !important;
  height: 14px !important;
  margin-top: 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("./assets/diary-interaction/red-dot.png") center / contain no-repeat !important;
  box-shadow: none !important;
}

.diary-interaction-message-text {
  overflow: visible !important;
  margin: 0 !important;
  color: #454946 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.52 !important;
  white-space: normal !important;
  text-overflow: initial !important;
}

.diary-interaction-message-quote {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 78px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 14px 22px !important;
  border-radius: 18px !important;
  background: rgb(247 248 245 / 84%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%) !important;
}

.diary-interaction-message-quote-meta,
.diary-interaction-message-quote-text {
  display: block !important;
  overflow: hidden !important;
  font-size: 16px !important;
  font-weight: 540 !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diary-interaction-message-quote-text {
  color: #2f342f !important;
  font-size: 17px !important;
}

.diary-interaction-message-quote-text strong {
  margin-right: 8px !important;
  color: #08711a !important;
  font-weight: 900 !important;
}

.diary-interaction-message-foot {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: -2px 0 0 !important;
}

.diary-interaction-message-foot button {
  position: relative !important;
  padding: 4px 27px 4px 0 !important;
  color: #156f19 !important;
  font-size: 17px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}

.diary-interaction-message-foot button::after {
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  background: url("./assets/diary-interaction/arrow.png") center / contain no-repeat !important;
  transform: translateY(-50%) !important;
}

.diary-interaction-read-divider {
  display: block !important;
  width: auto !important;
  margin: 14px 20px -2px !important;
  color: #6f746f !important;
  font-size: 17px !important;
  font-weight: 520 !important;
  line-height: 1.4 !important;
}

@media (max-width: 580px) {
  .diary-interaction-hero {
    min-height: 132px !important;
    padding: 30px 24px 8px !important;
  }

  .diary-interaction-list {
    padding: 0 14px 22px !important;
    gap: 12px !important;
  }

  .diary-interaction-message {
    min-height: 164px !important;
    padding: 16px 15px 15px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    border-radius: 20px !important;
  }

  .diary-interaction-message-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .diary-interaction-message-body {
    gap: 9px !important;
  }

  .diary-interaction-message-top {
    grid-template-columns: minmax(0, 1fr) auto 8px !important;
    gap: 8px !important;
  }

  .diary-interaction-message-title,
  .diary-interaction-message-title b {
    font-size: 14px !important;
  }

  .diary-interaction-message-title strong {
    font-size: 15px !important;
  }

  .diary-interaction-message-top time {
    font-size: 12px !important;
  }

  .diary-interaction-message-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .diary-interaction-message-text {
    font-size: 13px !important;
  }

  .diary-interaction-message-quote {
    min-height: 58px !important;
    padding: 10px 12px !important;
    gap: 5px !important;
    border-radius: 13px !important;
  }

  .diary-interaction-message-quote-meta,
  .diary-interaction-message-quote-text {
    font-size: 12px !important;
  }

  .diary-interaction-message-foot button {
    font-size: 13px !important;
  }

  .diary-interaction-read-divider {
    margin: 10px 20px -2px !important;
    font-size: 12px !important;
  }
}

/* Tiny polish requested: smaller back arrow, larger unread dot, detail link lifted, smaller detail arrow. */
.diary-interaction-back {
  width: 36px !important;
  height: 36px !important;
}

.diary-interaction-back::before {
  left: 13px !important;
  top: 9px !important;
  width: 13px !important;
  height: 13px !important;
  border-left-width: 3px !important;
  border-bottom-width: 3px !important;
}

.diary-interaction-message-dot {
  width: 16px !important;
  height: 16px !important;
}

.diary-interaction-message-foot {
  margin-top: -8px !important;
}

.diary-interaction-message-foot button {
  padding-right: 22px !important;
}

.diary-interaction-message-foot button::after {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 580px) {
  .diary-interaction-back {
    width: 34px !important;
    height: 34px !important;
  }

  .diary-interaction-back::before {
    left: 12px !important;
    top: 9px !important;
    width: 12px !important;
    height: 12px !important;
    border-left-width: 3px !important;
    border-bottom-width: 3px !important;
  }

  .diary-interaction-message-dot {
    width: 10px !important;
    height: 10px !important;
  }

  .diary-interaction-message-foot {
    margin-top: -6px !important;
  }

  .diary-interaction-message-foot button {
    padding-right: 18px !important;
  }

  .diary-interaction-message-foot button::after {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Final alignment polish: center the title and align unread dots with time text. */
.diary-interaction-head {
  position: relative !important;
}

.diary-interaction-head strong {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: max-content !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.diary-interaction-read-all {
  grid-column: 3 !important;
  justify-self: end !important;
  position: relative !important;
  z-index: 2 !important;
}

.diary-interaction-message-top {
  align-items: center !important;
}

.diary-interaction-message-dot {
  align-self: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 0 !important;
}

@media (max-width: 580px) {
  .diary-interaction-message-dot {
    width: 12px !important;
    height: 12px !important;
    margin-top: 0 !important;
  }
}