.javen_guestbook_container {
  display: block !important;
  max-width: 980px !important;
  padding-top: 26px !important;
  padding-bottom: 46px !important;
}

.javen_guestbook_hero,
.javen_guestbook_panel {
  border: 1px solid rgba(127, 158, 204, .2);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 45px rgba(83, 121, 180, .12);
  backdrop-filter: blur(18px);
  border-radius: 30px;
}

.javen_guestbook_hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}

.javen_guestbook_hero::before,
.javen_guestbook_hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.javen_guestbook_hero::before {
  width: 160px;
  height: 160px;
  right: -48px;
  top: -68px;
  background: rgba(112, 178, 255, .24);
}

.javen_guestbook_hero::after {
  width: 110px;
  height: 110px;
  left: 18%;
  bottom: -70px;
  background: rgba(255, 192, 203, .25);
}

.javen_guestbook_eyebrow {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  margin-bottom: 12px;
  color: #4f8cff;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(79, 140, 255, .12);
}

.javen_guestbook_hero h1 {
  margin: 0 0 10px;
  color: #243044;
  font-size: 32px;
  letter-spacing: -.02em;
}

.javen_guestbook_hero p,
.javen_guestbook_panel__head p,
.javen_guestbook_form__foot span {
  margin: 0;
  color: #7a879a;
  line-height: 1.8;
}

.javen_guestbook_hero__bubble {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 38px;
  background: linear-gradient(135deg, #f7fbff, #edf5ff);
  border: 1px solid rgba(79, 140, 255, .18);
  box-shadow: inset 0 -8px 18px rgba(79, 140, 255, .07);
}

.javen_guestbook_hero__bubble strong {
  color: #4f8cff;
  font-size: 30px;
  line-height: 1;
}

.javen_guestbook_hero__bubble span {
  margin-top: 8px;
  color: #7a879a;
  font-size: 13px;
}

.javen_guestbook_panel {
  padding: 26px;
  margin-bottom: 18px;
}

.javen_guestbook_panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.javen_guestbook_panel__head h2 {
  margin: 0;
  color: #243044;
  font-size: 22px;
}

.javen_guestbook_form {
  display: grid;
  gap: 18px;
}

.javen_guestbook_form label,
.javen_guestbook_textarea {
  display: grid;
  gap: 8px;
}

.javen_guestbook_form label > span,
.javen_guestbook_picker_title {
  color: #445066;
  font-weight: 700;
}

.javen_guestbook_form input,
.javen_guestbook_form textarea,
.javen_guestbook_replyform textarea {
  width: 100%;
  border: 1px solid rgba(127, 158, 204, .25);
  background: rgba(255, 255, 255, .9);
  color: #243044;
  border-radius: 18px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.javen_guestbook_form input {
  height: 46px;
  padding: 0 16px;
}

.javen_guestbook_form textarea,
.javen_guestbook_replyform textarea {
  min-height: 128px;
  padding: 14px 16px;
  resize: vertical;
}

.javen_guestbook_form input:focus,
.javen_guestbook_form textarea:focus,
.javen_guestbook_replyform textarea:focus {
  border-color: rgba(79, 140, 255, .7);
  box-shadow: 0 0 0 4px rgba(79, 140, 255, .12);
  background: #fff;
}

.javen_guestbook_avatar_picker,
.javen_guestbook_emoji_picker {
  display: grid;
  gap: 12px;
}

.javen_guestbook_avatar_tabs,
.javen_guestbook_emoji_tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.javen_guestbook_avatar_tabs button,
.javen_guestbook_emoji_tabs button,
.javen_guestbook_avatar_choice,
.javen_guestbook_emoji_group button,
.javen_guestbook_form__foot button,
.javen_guestbook_actionbar button,
.javen_guestbook_replyform button {
  border: 0;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}

.javen_guestbook_avatar_tabs button,
.javen_guestbook_emoji_tabs button {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(79, 140, 255, .08);
  color: #5d6b82;
  font-weight: 700;
}

.javen_guestbook_avatar_tabs button.active,
.javen_guestbook_emoji_tabs button.active {
  background: #4f8cff;
  color: #fff;
  box-shadow: 0 10px 22px rgba(79, 140, 255, .18);
}

.javen_guestbook_avatar_group,
.javen_guestbook_emoji_group {
  display: none;
}

.javen_guestbook_avatar_group.active {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.javen_guestbook_avatar_choice {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 104px;
  padding: 12px 8px;
  border-radius: 22px;
  background: rgba(248, 251, 255, .9);
  color: #536176;
  border: 1px solid rgba(127, 158, 204, .18);
}

.javen_guestbook_avatar_choice:hover,
.javen_guestbook_avatar_choice.active {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 12px 24px rgba(83, 121, 180, .12);
  color: #4f8cff;
  border-color: rgba(79, 140, 255, .32);
}

.javen_guestbook_avatar_choice span:last-child {
  font-size: 12px;
}

.javen_guestbook_avatar {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -10px 18px rgba(255, 255, 255, .42), 0 10px 22px rgba(83, 121, 180, .13);
}

.javen_guestbook_avatar::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
}

.javen_guestbook_avatar__emoji {
  position: relative;
  z-index: 1;
  font-size: 25px;
}

.javen_guestbook_avatar--cartoon { background: linear-gradient(135deg, #fff4b8, #ffc5dc); }
.javen_guestbook_avatar--anime { background: linear-gradient(135deg, #d7ecff, #ffd6f3); }
.javen_guestbook_avatar--sketch { background: linear-gradient(135deg, #f4f7fb, #dfe7f1); }
.javen_guestbook_avatar--animal { background: linear-gradient(135deg, #e8ffe8, #d8f0ff); }
.javen_guestbook_avatar--pixel { background: linear-gradient(135deg, #e7dcff, #c8f6ff); }
.javen_guestbook_avatar--robot { background: linear-gradient(135deg, #dfe7ff, #eef3ff); }

.javen_guestbook_emoji_group.active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.javen_guestbook_emoji_group button {
  min-width: 42px;
  height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  background: rgba(248, 251, 255, .95);
  color: #445066;
  font-size: 16px;
  border: 1px solid rgba(127, 158, 204, .18);
}

.javen_guestbook_emoji_group button:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 10px 20px rgba(83, 121, 180, .1);
}

.javen_guestbook_form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.javen_guestbook_form__foot button,
.javen_guestbook_replyform button[type="submit"] {
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: #4f8cff;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(79, 140, 255, .22);
}

.javen_guestbook_form__foot button:hover,
.javen_guestbook_replyform button[type="submit"]:hover {
  transform: translateY(-2px);
}

.javen_guestbook_list {
  display: grid;
  gap: 14px;
}

.javen_guestbook_item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(127, 158, 204, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
}

.javen_guestbook_item.is-hidden {
  opacity: .68;
  background: rgba(249, 250, 252, .78);
}

.javen_guestbook_item.is-reply {
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 14px;
  margin-top: 12px;
  border-radius: 20px;
  background: rgba(247, 251, 255, .82);
}

.javen_guestbook_item.is-reply .javen_guestbook_avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

.javen_guestbook_item.is-reply .javen_guestbook_avatar__emoji {
  font-size: 22px;
}

.javen_guestbook_item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.javen_guestbook_item__meta strong {
  color: #263247;
  font-size: 15px;
}

.javen_guestbook_item__meta time {
  color: #9aa6b6;
  font-size: 12px;
}

.javen_guestbook_item__meta .is-owner,
.javen_guestbook_item__meta .is-waiting {
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.javen_guestbook_item__meta .is-owner {
  color: #fff;
  background: #4f8cff;
}

.javen_guestbook_item__meta .is-waiting {
  color: #9b6a19;
  background: #fff0c7;
}

.javen_guestbook_item__content {
  color: #3a4658;
  line-height: 1.9;
  word-break: break-word;
}

.javen_guestbook_item__content img.owo_image {
  width: 28px;
  height: 28px;
  vertical-align: -7px;
}

.javen_guestbook_children {
  margin-top: 10px;
  padding-left: 2px;
}

.javen_guestbook_actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.javen_guestbook_actionbar form {
  display: inline-flex;
}

.javen_guestbook_actionbar button,
.javen_guestbook_replyform button {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #526177;
  background: rgba(79, 140, 255, .08);
  font-size: 12px;
  font-weight: 700;
}

.javen_guestbook_actionbar button:hover,
.javen_guestbook_replyform button:hover {
  background: rgba(79, 140, 255, .16);
}

.javen_guestbook_actionbar .danger {
  color: #e5484d;
  background: rgba(229, 72, 77, .09);
}

.javen_guestbook_replyform {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(247, 251, 255, .86);
  border: 1px dashed rgba(79, 140, 255, .25);
}

.javen_guestbook_replyform.active {
  display: grid;
  gap: 10px;
}

.javen_guestbook_replyform textarea {
  min-height: 86px;
  border-radius: 14px;
}

.javen_guestbook_replyform__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.javen_guestbook_empty,
.javen_guestbook_closed {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: #8290a4;
  background: rgba(248, 251, 255, .86);
  border-radius: 22px;
  border: 1px dashed rgba(127, 158, 204, .26);
}

html[data-night="night"] .javen_guestbook_hero,
html[data-night="night"] .javen_guestbook_panel,
html[data-night="night"] .javen_guestbook_item,
html[data-night="night"] .javen_guestbook_item.is-reply,
html[data-night="night"] .javen_guestbook_form input,
html[data-night="night"] .javen_guestbook_form textarea,
html[data-night="night"] .javen_guestbook_replyform textarea {
  background: rgba(28, 34, 48, .78);
  border-color: rgba(160, 180, 210, .16);
}

html[data-night="night"] .javen_guestbook_hero h1,
html[data-night="night"] .javen_guestbook_panel__head h2,
html[data-night="night"] .javen_guestbook_item__meta strong,
html[data-night="night"] .javen_guestbook_item__content,
html[data-night="night"] .javen_guestbook_form input,
html[data-night="night"] .javen_guestbook_form textarea,
html[data-night="night"] .javen_guestbook_replyform textarea {
  color: #edf4ff;
}

@media (max-width: 768px) {
  .javen_guestbook_container {
    padding: 18px 14px 34px !important;
  }

  .javen_guestbook_hero,
  .javen_guestbook_panel {
    border-radius: 24px;
    padding: 20px;
  }

  .javen_guestbook_hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .javen_guestbook_hero h1 {
    font-size: 26px;
  }

  .javen_guestbook_hero__bubble {
    width: 100%;
    height: auto;
    min-height: 76px;
    border-radius: 22px;
  }

  .javen_guestbook_panel__head,
  .javen_guestbook_form__foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .javen_guestbook_form__foot button {
    width: 100%;
  }

  .javen_guestbook_avatar_group.active {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .javen_guestbook_avatar_choice {
    min-height: 96px;
  }

  .javen_guestbook_item,
  .javen_guestbook_item.is-reply {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
  }

  .javen_guestbook_avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .javen_guestbook_avatar__emoji {
    font-size: 22px;
  }

  .javen_guestbook_children {
    margin-left: -48px;
  }
}

/* v6.5 留言板：访客默认昵称、游客回复、隐藏 Guestbook 标识 */
.javen_guestbook_composer__head {
  align-items: center;
}

.javen_guestbook_toggle {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f8cff, #7cc8ff);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(79, 140, 255, .22);
  transition: transform .18s, box-shadow .18s, opacity .18s;
}

.javen_guestbook_toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(79, 140, 255, .28);
}

.javen_guestbook_composer.is-collapsed {
  padding-bottom: 22px;
}

.javen_guestbook_composer.is-collapsed .javen_guestbook_panel__head {
  margin-bottom: 0;
}

.javen_guestbook_composer.is-collapsed .javen_guestbook_form {
  display: none;
}

.javen_guestbook_avatar_groups,
.javen_guestbook_emoji_groups {
  max-height: 300px;
  overflow: auto;
  padding: 2px 4px 6px 2px;
}

.javen_guestbook_avatar_group.active {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.javen_guestbook_emoji_group.active {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.javen_guestbook_emoji_group button {
  min-width: 0;
  height: auto;
  min-height: 68px;
  padding: 8px 6px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
}

.javen_guestbook_emoji_preview {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(79, 140, 255, .08);
  font-size: 21px;
  line-height: 1;
}

.javen_guestbook_emoji_name {
  max-width: 100%;
  color: #6b778b;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.javen_guestbook_item__content {
  white-space: normal;
}

html[data-night="night"] .javen_guestbook_toggle {
  background: linear-gradient(135deg, #5a8dff, #65d5ff);
}

html[data-night="night"] .javen_guestbook_emoji_preview {
  background: rgba(120, 170, 255, .16);
}

html[data-night="night"] .javen_guestbook_emoji_name {
  color: #b9c5d8;
}

@media (max-width: 768px) {
  .javen_guestbook_composer__head {
    align-items: stretch;
  }

  .javen_guestbook_toggle {
    width: 100%;
  }

  .javen_guestbook_avatar_group.active {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .javen_guestbook_emoji_group.active {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .javen_guestbook_avatar_groups,
  .javen_guestbook_emoji_groups {
    max-height: 360px;
  }
}


/* v6.5：访客回复和默认昵称 */
.javen_guestbook_actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.javen_guestbook_actionbar form {
  display: inline-flex;
}

.javen_guestbook_replyform--guest {
  gap: 10px;
}

.javen_guestbook_replyform--guest input {
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
}

.javen_guestbook_replyform--guest textarea {
  min-height: 86px;
}

/* v6.6: 放大留言板头像图标，让图标尽量铺满头像框 */
.javen_guestbook_avatar {
  width: 60px !important;
  height: 60px !important;
  border-radius: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.javen_guestbook_avatar::before {
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.52), rgba(255,255,255,.16) 46%, rgba(255,255,255,0) 72%) !important;
}

.javen_guestbook_avatar__emoji {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 42px !important;
  line-height: 1 !important;
  transform: scale(1.08) !important;
  transform-origin: center !important;
  text-align: center !important;
}

.javen_guestbook_avatar_choice {
  min-height: 116px !important;
}

.javen_guestbook_avatar_choice .javen_guestbook_avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 24px !important;
}

.javen_guestbook_avatar_choice .javen_guestbook_avatar__emoji {
  font-size: 46px !important;
}

.javen_guestbook_item {
  grid-template-columns: 66px minmax(0, 1fr) !important;
}

.javen_guestbook_item.is-reply {
  grid-template-columns: 56px minmax(0, 1fr) !important;
}

.javen_guestbook_item.is-reply .javen_guestbook_avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 20px !important;
}

.javen_guestbook_item.is-reply .javen_guestbook_avatar__emoji {
  font-size: 38px !important;
}

@media (max-width: 768px) {
  .javen_guestbook_avatar_group.active {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .javen_guestbook_avatar_choice {
    min-height: 108px !important;
    padding: 10px 6px !important;
  }

  .javen_guestbook_avatar_choice .javen_guestbook_avatar {
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
  }

  .javen_guestbook_avatar_choice .javen_guestbook_avatar__emoji {
    font-size: 42px !important;
  }

  .javen_guestbook_item,
  .javen_guestbook_item.is-reply {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .javen_guestbook_avatar,
  .javen_guestbook_item.is-reply .javen_guestbook_avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 20px !important;
  }

  .javen_guestbook_avatar__emoji,
  .javen_guestbook_item.is-reply .javen_guestbook_avatar__emoji {
    font-size: 39px !important;
  }

  .javen_guestbook_children {
    margin-left: -58px !important;
  }
}


/* v6.7: 头像选择列表收敛为小尺寸，当前选中头像显示在昵称旁边 */
.javen_guestbook_namebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 116px !important;
  gap: 12px !important;
  align-items: end !important;
}

.javen_guestbook_namebar__field {
  min-width: 0 !important;
}

.javen_guestbook_selected_avatar {
  height: 74px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(127, 158, 204, .18) !important;
  border-radius: 18px !important;
  background: rgba(248, 251, 255, .92) !important;
  display: grid !important;
  grid-template-columns: 1fr 46px !important;
  align-items: center !important;
  gap: 8px !important;
}

.javen_guestbook_selected_avatar > span {
  color: #7b8798 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.javen_guestbook_selected_avatar__box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.javen_guestbook_selected_avatar .javen_guestbook_avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 17px !important;
}

.javen_guestbook_selected_avatar .javen_guestbook_avatar__emoji {
  font-size: 34px !important;
  transform: scale(1.05) !important;
}

.javen_guestbook_avatar_groups {
  padding: 2px !important;
}

.javen_guestbook_avatar_group.active {
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
  gap: 8px !important;
}

.javen_guestbook_avatar_choice {
  min-height: 76px !important;
  padding: 7px 5px !important;
  border-radius: 16px !important;
  gap: 5px !important;
}

.javen_guestbook_avatar_choice .javen_guestbook_avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
}

.javen_guestbook_avatar_choice .javen_guestbook_avatar__emoji {
  font-size: 30px !important;
  transform: scale(1.04) !important;
}

.javen_guestbook_avatar_choice span:last-child {
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
  .javen_guestbook_namebar {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 10px !important;
  }

  .javen_guestbook_selected_avatar {
    height: 70px !important;
    grid-template-columns: 1fr 42px !important;
    padding: 8px !important;
  }

  .javen_guestbook_selected_avatar > span {
    font-size: 11px !important;
  }

  .javen_guestbook_selected_avatar .javen_guestbook_avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
  }

  .javen_guestbook_selected_avatar .javen_guestbook_avatar__emoji {
    font-size: 31px !important;
  }

  .javen_guestbook_avatar_group.active {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
    gap: 7px !important;
  }

  .javen_guestbook_avatar_choice {
    min-height: 70px !important;
    padding: 6px 4px !important;
    border-radius: 14px !important;
  }

  .javen_guestbook_avatar_choice .javen_guestbook_avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }

  .javen_guestbook_avatar_choice .javen_guestbook_avatar__emoji {
    font-size: 28px !important;
  }
}

/* v6.9: 留言墙优先展示，写留言后置；分页、随机头像、回复默认折叠和手机端适配 */
.javen_guestbook_panel#javen-guestbook-list {
  margin-bottom: 18px !important;
}

.javen_guestbook_pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(127, 158, 204, .22);
}

.javen_guestbook_pagination a,
.javen_guestbook_pagination span {
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #526177;
  background: rgba(79, 140, 255, .08);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.javen_guestbook_pagination a:hover,
.javen_guestbook_pagination .active {
  color: #fff;
  background: linear-gradient(135deg, #4f8cff, #7cc8ff);
  box-shadow: 0 10px 22px rgba(79, 140, 255, .18);
}

.javen_guestbook_pagination .disabled,
.javen_guestbook_pagination .ellipsis {
  color: #9aa7b8;
  background: rgba(127, 158, 204, .08);
  box-shadow: none;
}

.javen_guestbook_selected_avatar__box.is-random {
  width: 46px;
  height: 46px;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(79, 140, 255, .12), rgba(255, 198, 229, .18));
  border: 1px dashed rgba(79, 140, 255, .32);
}

.javen_guestbook_random_avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
}

.javen_guestbook_children_toggle {
  margin-top: 12px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  color: #4f75b6;
  background: rgba(79, 140, 255, .09);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s, transform .18s, color .18s;
}

.javen_guestbook_children_toggle:hover {
  color: #fff;
  background: #4f8cff;
  transform: translateY(-1px);
}

.javen_guestbook_children.is-collapsed {
  display: none !important;
}

.javen_guestbook_children:not(.is-collapsed) {
  display: grid;
  gap: 10px;
}

.javen_guestbook_replyform--guest input::placeholder,
.javen_guestbook_form input::placeholder {
  color: #9aa7b8;
}

html[data-night="night"] .javen_guestbook_pagination a,
html[data-night="night"] .javen_guestbook_pagination span,
html[data-night="night"] .javen_guestbook_children_toggle,
html[data-night="night"] .javen_guestbook_selected_avatar__box.is-random {
  background: rgba(120, 170, 255, .13);
  border-color: rgba(160, 180, 210, .18);
  color: #c5d2e8;
}

html[data-night="night"] .javen_guestbook_pagination a:hover,
html[data-night="night"] .javen_guestbook_pagination .active,
html[data-night="night"] .javen_guestbook_children_toggle:hover {
  color: #fff;
  background: linear-gradient(135deg, #5a8dff, #65d5ff);
}

@media (max-width: 768px) {
  .javen_guestbook_panel#javen-guestbook-list {
    margin-bottom: 14px !important;
  }

  .javen_guestbook_pagination {
    gap: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .javen_guestbook_pagination a,
  .javen_guestbook_pagination span {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    flex: 0 0 auto;
  }

  .javen_guestbook_children_toggle {
    width: 100%;
    height: 34px;
  }

  .javen_guestbook_children:not(.is-collapsed) {
    margin-top: 10px;
    padding-left: 0;
  }

  .javen_guestbook_children .javen_guestbook_item.is-reply {
    border-radius: 18px !important;
  }

  .javen_guestbook_selected_avatar__box.is-random {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .javen_guestbook_random_avatar {
    font-size: 25px;
  }
}

@media (max-width: 420px) {
  .javen_guestbook_container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .javen_guestbook_panel,
  .javen_guestbook_hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .javen_guestbook_namebar {
    grid-template-columns: 1fr !important;
  }

  .javen_guestbook_selected_avatar {
    width: 100% !important;
    grid-template-columns: 1fr 44px !important;
  }
}


/* v7.0: 管理员置顶与博主留言编辑 */
.javen_guestbook_item.is-pinned {
  border-color: rgba(255, 171, 0, .38) !important;
  background: linear-gradient(180deg, rgba(255, 251, 235, .92), rgba(255, 255, 255, .78)) !important;
  box-shadow: 0 18px 40px rgba(255, 179, 64, .12), 0 14px 32px rgba(83, 121, 180, .08) !important;
}

.javen_guestbook_item__meta .is-pinned-badge {
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #9a5a00;
  background: #fff1c2;
  font-size: 12px;
  font-weight: 800;
}

.javen_guestbook_actionbar .pin {
  color: #9a5a00;
  background: rgba(255, 183, 77, .18);
}

.javen_guestbook_actionbar .muted {
  color: #7b8798;
  background: rgba(127, 158, 204, .10);
}

.javen_guestbook_editform {
  border-style: solid;
  background: rgba(255, 251, 243, .86);
}

.javen_guestbook_editform__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 10px;
}

.javen_guestbook_editform label {
  display: grid;
  gap: 6px;
  color: #566274;
  font-size: 12px;
  font-weight: 800;
}

.javen_guestbook_editform input,
.javen_guestbook_editform select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(127, 158, 204, .25);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: #243044;
  outline: none;
}

.javen_guestbook_editform textarea {
  min-height: 96px;
}

html[data-night="night"] .javen_guestbook_item.is-pinned,
html[data-night="night"] .javen_guestbook_editform {
  background: rgba(44, 38, 30, .78) !important;
  border-color: rgba(255, 190, 90, .24) !important;
}

html[data-night="night"] .javen_guestbook_editform input,
html[data-night="night"] .javen_guestbook_editform select {
  background: rgba(28, 34, 48, .86);
  color: #edf4ff;
  border-color: rgba(160, 180, 210, .16);
}

@media (max-width: 768px) {
  .javen_guestbook_editform__grid {
    grid-template-columns: 1fr;
  }

  .javen_guestbook_actionbar button,
  .javen_guestbook_actionbar form {
    flex: 0 0 auto;
  }
}

/* v7.1: 留言头像和名字同一行；正文另起一行靠左；昵称后展示设备/浏览器；时间左侧展示 IP 信息 */
.javen_guestbook_item,
.javen_guestbook_item.is-reply {
  display: block !important;
  grid-template-columns: none !important;
}

.javen_guestbook_item__head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.javen_guestbook_item__headmain {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.javen_guestbook_item__avatar {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.javen_guestbook_item__body {
  margin-top: 12px !important;
  width: 100% !important;
}

.javen_guestbook_item__meta {
  margin-bottom: 4px !important;
  gap: 7px !important;
  line-height: 1.35 !important;
}

.javen_guestbook_item__meta strong {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 42vw !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.javen_guestbook_agent_group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.javen_guestbook_agent {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(79, 140, 255, .09) !important;
  border: 1px solid rgba(79, 140, 255, .12) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.javen_guestbook_item__submeta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  color: #94a0b2 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.javen_guestbook_item__submeta time,
.javen_guestbook_ip_location {
  color: inherit !important;
  font-size: inherit !important;
}

.javen_guestbook_ip_location {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: 100% !important;
}

.javen_guestbook_ip_location::before {
  content: '📍';
  font-size: 12px;
  line-height: 1;
}

.javen_guestbook_item__content {
  margin-top: 0 !important;
  padding-left: 0 !important;
  color: #344154 !important;
  line-height: 1.92 !important;
  text-align: left !important;
}

.javen_guestbook_item.is-reply .javen_guestbook_item__body {
  margin-top: 10px !important;
}

.javen_guestbook_children {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

html[data-night="night"] .javen_guestbook_agent {
  background: rgba(120, 170, 255, .14) !important;
  border-color: rgba(160, 180, 210, .16) !important;
}

html[data-night="night"] .javen_guestbook_item__submeta {
  color: #aebbd0 !important;
}

html[data-night="night"] .javen_guestbook_item__content {
  color: #edf4ff !important;
}

@media (max-width: 768px) {
  .javen_guestbook_item__head {
    gap: 10px !important;
    align-items: center !important;
  }

  .javen_guestbook_item__meta {
    gap: 6px !important;
  }

  .javen_guestbook_item__meta strong {
    max-width: 38vw !important;
    font-size: 14px !important;
  }

  .javen_guestbook_agent {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  .javen_guestbook_item__submeta {
    gap: 6px !important;
    font-size: 11px !important;
  }

  .javen_guestbook_item__body {
    margin-top: 10px !important;
  }

  .javen_guestbook_children {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 420px) {
  .javen_guestbook_item__meta strong {
    max-width: 32vw !important;
  }

  .javen_guestbook_item__submeta {
    display: grid !important;
    gap: 3px !important;
  }
}

/* v7.2: 管理员编辑留言时支持自定义头像链接 */
.javen_guestbook_avatar--custom {
  background: rgba(248, 251, 255, .96) !important;
}

.javen_guestbook_avatar--custom::before {
  display: none !important;
}

.javen_guestbook_avatar__img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.javen_guestbook_editform__avatarurl {
  margin-top: -2px;
}

.javen_guestbook_editform__avatarurl input {
  font-size: 12px;
}

html[data-night="night"] .javen_guestbook_editform__avatarurl input {
  background: rgba(28, 34, 48, .86);
  color: #edf4ff;
  border-color: rgba(160, 180, 210, .16);
}