:root {
  color-scheme: light;
  --app-bg: #ededed;
  --list-bg: #ffffff;
  --nav-bg: #ededed;
  --bar-bg: #f7f7f7;
  --line: #dcdcdc;
  --line-soft: #eeeeee;
  --text: #111111;
  --subtle: #9a9a9a;
  --green: #95ec69;
  --wechat-green: #07c160;
  --bubble-white: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  background: #cfd0d4;
  color: var(--text);
  font-family: "MiSans", "MiSans VF", "MI Lan Pro", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1220px) {
  body {
    display: block;
    width: 1220px;
    min-height: 2598px;
    margin: 0 auto;
    padding: 0;
    overflow: auto;
  }

  .phone-shell {
    transform: scale(2.10708);
    transform-origin: top left;
    box-shadow: none;
  }
}

/* Final chat density correction: closer to normal WeChat, not enlarged mode */
.screen-chat .message-viewport {
  padding: 26px 12px 12px 16px !important;
}

.screen-chat .time-divider {
  margin: 24px 0 20px !important;
  font-size: 15px !important;
  color: #a9a9a9 !important;
}

.screen-chat .message-row {
  gap: 11px !important;
  margin: 14px 0 !important;
}

.screen-chat .message-row.user {
  gap: 10px !important;
  margin-right: 0 !important;
}

.screen-chat .message-row .avatar {
  width: 43px !important;
  height: 43px !important;
  border-radius: 5px !important;
}

.screen-chat .bubble {
  max-width: 360px !important;
  min-height: 42px !important;
  padding: 8px 12px 9px !important;
  font-size: 18px !important;
  line-height: 1.48 !important;
  border-radius: 5px !important;
  letter-spacing: 0 !important;
}

.screen-chat .message-row.assistant .bubble::before,
.screen-chat .message-row.user .bubble::after {
  top: 15px !important;
  width: 10px !important;
  height: 10px !important;
}

.screen-chat .message-row.assistant .bubble::before {
  left: -5px !important;
}

.screen-chat .message-row.user .bubble::after {
  right: -5px !important;
}

/* Align long assistant bubbles with the user's right bubble column */
.screen-chat .message-row.assistant .bubble {
  max-width: 455px !important;
}

.screen-chat .message-row.user .bubble {
  max-width: calc(100% - 136px) !important;
}

/* Real phone usage inside WeChat browser */
@media (max-width: 580px) {
  body {
    overflow: hidden !important;
    background: #ededed !important;
  }

  .phone-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .screen-chat .system-status {
    display: none !important;
  }

  .screen-chat .wechat-nav {
    height: 60px !important;
    flex-basis: 60px !important;
  }

  .screen-chat .wechat-nav h1 {
    padding-bottom: 11px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
  }

  .screen-chat .back-control {
    padding: 0 0 10px 17px !important;
  }

  .screen-chat .back-mark {
    width: 18px !important;
    height: 18px !important;
    border-left-width: 2px !important;
    border-bottom-width: 2px !important;
  }

  .screen-chat .back-badge {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }

  .screen-chat .more-icon {
    margin: 0 18px 12px 0 !important;
  }

  .screen-chat .message-viewport {
    padding: 14px 12px 10px 14px !important;
  }

  .screen-chat .time-divider {
    margin: 18px 0 16px !important;
    font-size: 13px !important;
  }

  .screen-chat .message-row {
    gap: 10px !important;
    margin: 12px 0 !important;
  }

  .screen-chat .message-row.user {
    gap: 10px !important;
  }

  .screen-chat .message-row .avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 5px !important;
  }

  .screen-chat .bubble {
    max-width: 306px !important;
    min-height: 38px !important;
    padding: 7px 11px 8px !important;
    font-size: 18px !important;
    line-height: 1.42 !important;
    border-radius: 5px !important;
  }

  .screen-chat .message-row.assistant .bubble {
    max-width: calc(100% - 124px) !important;
  }

  .screen-chat .message-row.user .bubble {
    max-width: calc(100% - 124px) !important;
  }

  .screen-chat .message-row.assistant .bubble::before,
  .screen-chat .message-row.user .bubble::after {
    top: 15px !important;
    width: 9px !important;
    height: 9px !important;
  }

  .screen-chat .message-row.assistant .bubble::before {
    left: -5px !important;
  }

  .screen-chat .message-row.user .bubble::after {
    right: -5px !important;
  }

  .screen-chat .composer {
    min-height: 58px !important;
    grid-template-columns: 38px 1fr 28px 38px 38px !important;
    gap: 7px !important;
    padding: 6px 10px max(7px, env(safe-area-inset-bottom)) !important;
  }

  .screen-chat .composer input {
    height: 42px !important;
    padding: 0 36px 0 10px !important;
    font-size: 18px !important;
    line-height: 42px !important;
  }

  .screen-chat .round-tool {
    width: 38px !important;
    height: 38px !important;
  }

  .screen-chat .mini-tool {
    width: 28px !important;
    height: 38px !important;
  }
}

/* Final alignment pass, must stay last */
.screen-chat .message-viewport {
  padding: 26px 12px 12px 16px !important;
}

.screen-chat .message-row {
  gap: 12px !important;
  margin: 15px 0 !important;
  align-items: flex-start !important;
}

.screen-chat .message-row.user {
  gap: 12px !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

.screen-chat .message-row .avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 6px !important;
}

.screen-chat .bubble {
  box-sizing: border-box !important;
  max-width: 340px !important;
  min-height: 46px !important;
  padding: 8px 12px 10px !important;
  font-size: 21px !important;
  line-height: 1.46 !important;
  border-radius: 5px !important;
  letter-spacing: 0 !important;
}

.screen-chat .message-row.assistant .bubble::before,
.screen-chat .message-row.user .bubble::after {
  top: 17px !important;
  width: 10px !important;
  height: 10px !important;
}

/* Final chat column alignment: assistant long bubbles end near the composer smile icon */
.screen-chat .message-row.assistant .bubble {
  max-width: calc(100% - 128px) !important;
}

.screen-chat .message-row.user .bubble {
  max-width: 340px !important;
}

/* Final chat column alignment: assistant long bubbles end at the user's bubble column */
.screen-chat .message-row.assistant .bubble {
  max-width: calc(100% - 128px) !important;
}

.screen-chat .message-row.user .bubble {
  max-width: 340px !important;
}

/* Final alignment pass: bigger avatars, stable bubble columns, about 14-15 Chinese chars per line */
.screen-chat .message-viewport {
  padding: 26px 12px 12px 16px !important;
}

.screen-chat .message-row {
  gap: 12px !important;
  margin: 15px 0 !important;
  align-items: flex-start !important;
}

.screen-chat .message-row.user {
  gap: 12px !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

.screen-chat .message-row .avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 6px !important;
}

.screen-chat .bubble {
  box-sizing: border-box !important;
  max-width: 340px !important;
  min-height: 46px !important;
  padding: 8px 12px 10px !important;
  font-size: 21px !important;
  line-height: 1.46 !important;
  border-radius: 5px !important;
  letter-spacing: 0 !important;
}

.screen-chat .message-row.assistant .bubble::before,
.screen-chat .message-row.user .bubble::after {
  top: 17px !important;
  width: 10px !important;
  height: 10px !important;
}

button,
input,
textarea {
  font: inherit;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

input,
textarea {
  border: 0;
  outline: 0;
}

.phone-shell {
  position: relative;
  width: min(100vw, 430px);
  height: min(100vh, 932px);
  min-height: 680px;
  overflow: hidden;
  background: var(--app-bg);
  box-shadow: 0 18px 70px rgb(0 0 0 / 22%);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--app-bg);
}

.screen.is-active {
  display: flex;
}

.system-status {
  height: 46px;
  flex: 0 0 46px;
  padding: 16px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--nav-bg);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
}

.network {
  font-size: 12px;
  font-weight: 800;
  margin-left: 1px;
}

.status-link {
  position: relative;
  width: 20px;
  height: 14px;
}

.status-link::before,
.status-link i {
  content: "";
  position: absolute;
  width: 10px;
  height: 7px;
  border: 2px solid #222;
  border-radius: 8px;
  transform: rotate(22deg);
}

.status-link::before {
  left: 1px;
  top: 2px;
  border-right-color: transparent;
}

.status-link i {
  right: 1px;
  top: 4px;
  border-left-color: transparent;
}

.status-mute {
  position: relative;
  width: 16px;
  height: 15px;
}

.status-mute::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: 6px;
  background: #222;
  clip-path: polygon(0 25%, 48% 25%, 100% 0, 100% 100%, 48% 75%, 0 75%);
}

.status-mute::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 1px;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: #222;
  transform: rotate(45deg);
}

.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}

.signal-bars i {
  width: 3px;
  background: #111;
  display: block;
}

.signal-bars i:nth-child(1) {
  height: 5px;
}

.signal-bars i:nth-child(2) {
  height: 7px;
}

.signal-bars i:nth-child(3) {
  height: 10px;
}

.signal-bars i:nth-child(4) {
  height: 13px;
}

.battery {
  position: relative;
  width: 25px;
  height: 13px;
  border: 2px solid #111;
  border-radius: 2px;
  margin-left: 2px;
}

.battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 2px;
  height: 4px;
  background: #111;
  border-radius: 0 2px 2px 0;
}

.battery i {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 15px;
  height: 5px;
  background: #111;
}

.wechat-nav {
  height: 84px;
  flex: 0 0 84px;
  display: grid;
  align-items: end;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

.wechat-nav h1 {
  margin: 0;
  padding-bottom: 15px;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
}

.list-nav {
  grid-template-columns: 70px 1fr 92px;
}

.list-nav h1 {
  grid-column: 2;
}

.nav-actions {
  grid-column: 3;
  padding: 0 16px 10px 0;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.nav-icon {
  position: relative;
  width: 34px;
  height: 34px;
}

.search-icon::before,
.search-mini::before {
  content: "";
  position: absolute;
  border: 3px solid #111;
  border-radius: 50%;
}

.search-icon::before {
  left: 5px;
  top: 4px;
  width: 18px;
  height: 18px;
}

.search-icon::after,
.search-mini::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 3px;
  background: #111;
  border-radius: 2px;
  transform: rotate(45deg);
}

.search-icon::after {
  left: 22px;
  top: 24px;
}

.plus-icon::before,
.plus-icon::after,
.plus-tool::before,
.plus-tool::after {
  content: "";
  position: absolute;
  background: #111;
  border-radius: 2px;
}

.plus-icon::before {
  left: 6px;
  top: 15px;
  width: 22px;
  height: 3px;
}

.plus-icon::after {
  left: 15px;
  top: 6px;
  width: 3px;
  height: 22px;
}

.search-box {
  height: 44px;
  margin: 8px 12px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  background: #ffffff;
  color: #b3b3b3;
  font-size: 16px;
}

.search-mini {
  position: relative;
  width: 18px;
  height: 18px;
}

.search-mini::before {
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-width: 2px;
  border-color: #b3b3b3;
}

.search-mini::after {
  left: 12px;
  top: 13px;
  width: 7px;
  height: 2px;
  background: #b3b3b3;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  background: var(--list-bg);
}

.chat-row {
  width: 100%;
  min-height: 82px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  position: relative;
  text-align: left;
}

.chat-row::after {
  content: "";
  position: absolute;
  left: 80px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-soft);
}

.chat-row:active {
  background: #eeeeee;
}

.avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.avatar-ai,
.avatar-me {
  background:
    radial-gradient(circle at 30% 28%, #ffbd62 0 12%, transparent 13%),
    radial-gradient(circle at 70% 22%, #12446d 0 15%, transparent 16%),
    linear-gradient(135deg, #23587d, #6aa890 55%, #f0b85b);
}

.avatar-me::after {
  content: "我";
  position: absolute;
  right: 5px;
  bottom: 4px;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

.avatar-file {
  background: #12c766;
}

.avatar-file::before {
  content: "";
  width: 29px;
  height: 21px;
  background: #fff;
  clip-path: polygon(0 0, 58% 0, 68% 26%, 100% 26%, 100% 100%, 0 100%);
}

.avatar-blue {
  background: #188de7;
}

.avatar-blue::before {
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
}

.avatar-grid {
  background:
    linear-gradient(90deg, transparent 48%, rgb(255 255 255 / 60%) 49% 51%, transparent 52%),
    linear-gradient(transparent 48%, rgb(255 255 255 / 60%) 49% 51%, transparent 52%),
    linear-gradient(135deg, #455ccf, #f7a64e);
}

.avatar-brown {
  background:
    radial-gradient(circle at 46% 48%, #7a5334 0 24%, transparent 25%),
    radial-gradient(circle at 38% 38%, #3f2c20 0 5%, transparent 6%),
    radial-gradient(circle at 55% 38%, #3f2c20 0 5%, transparent 6%),
    radial-gradient(circle at 63% 32%, #9bb2bd 0 18%, transparent 19%),
    linear-gradient(135deg, #c18b4d 0%, #8a5a32 54%, #49301f 100%);
}

.chat-row.unread .avatar::after,
.tab-chat::after {
  content: attr(data-count);
  position: absolute;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fa5151;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
}

.chat-row.unread .avatar::after {
  right: -12px;
  top: -10px;
}

.chat-main {
  min-width: 0;
}

.chat-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.ai-badge {
  display: none;
  place-items: center;
  min-width: 25px;
  height: 19px;
  padding: 0 4px;
  border-radius: 3px;
  background: #d2d2d2;
  color: #555;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}

.chat-preview {
  margin-top: 7px;
  color: #a7a7a7;
  font-size: 15px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-time {
  align-self: start;
  padding-top: 8px;
  color: #a9a9a9;
  font-size: 14px;
  white-space: nowrap;
}

.tabbar {
  height: 82px;
  flex: 0 0 82px;
  padding: 6px 0 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: var(--bar-bg);
}

.tab {
  display: grid;
  grid-template-rows: 35px 20px;
  place-items: center;
  color: #111;
  font-size: 15px;
  line-height: 1;
}

.tab.is-active {
  color: var(--wechat-green);
}

.tab-glyph {
  position: relative;
  width: 34px;
  height: 34px;
}

.tab-chat {
  width: 36px;
  height: 31px;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 42% 55%, currentColor 0 54%, transparent 55%),
    radial-gradient(ellipse at 66% 40%, currentColor 0 43%, transparent 44%);
}

.tab-chat::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 4px;
  width: 9px;
  height: 7px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 10% 100%);
}

.tab-chat::after {
  right: -8px;
  top: -4px;
  color: #fff;
}

.tab-chat {
  color: var(--wechat-green);
}

.tab-contacts::before,
.tab-me::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 1px;
  width: 13px;
  height: 13px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
}

.tab-contacts::after,
.tab-me::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 24px;
  height: 13px;
  border: 2.5px solid currentColor;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 0;
}

.tab-contacts {
  transform: translateX(-3px);
  background:
    linear-gradient(currentColor, currentColor) 27px 14px / 9px 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) 27px 20px / 9px 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) 27px 26px / 7px 2.5px no-repeat;
}

.tab-compass {
  width: 31px;
  height: 31px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
}

.tab-compass::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 10px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(100% 0, 62% 100%, 0 72%);
  transform: rotate(36deg);
}

.tab-me {
  width: 32px;
}

.chat-nav {
  grid-template-columns: 86px 1fr 74px;
}

.chat-nav h1 {
  grid-column: 2;
  white-space: nowrap;
}

.back-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-nav .back-control {
  padding: 0 0 10px 17px;
}

.back-mark {
  width: 18px;
  height: 18px;
  border-left: 3px solid #111;
  border-bottom: 3px solid #111;
  transform: rotate(45deg);
}

.back-badge {
  min-width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dfdfdf;
  font-size: 18px;
  line-height: 1;
}

.more-icon {
  justify-self: end;
  margin: 0 18px 8px 0;
}

.more-icon::before,
.more-icon::after {
  content: "";
}

.more-icon,
.more-icon::before,
.more-icon::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #111;
}

.more-icon {
  box-shadow: -12px 0 0 #111, 12px 0 0 #111;
  align-self: end;
}

.message-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 12px 12px;
  background: var(--app-bg);
  scrollbar-width: none;
}

.message-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.time-divider {
  margin: 18px 0 15px;
  text-align: center;
  color: #aaa;
  font-size: 16px;
}

.message-load-earlier {
  width: fit-content;
  max-width: min(86%, 320px);
  margin: 4px auto 18px;
  padding: 8px 15px 9px;
  display: grid;
  gap: 3px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 74%);
  color: #5d675f;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgb(210 218 211 / 72%), 0 8px 18px rgb(60 72 58 / 8%);
}

.message-load-earlier strong {
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.message-load-earlier span {
  color: #8b938d;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}

.message-load-earlier:active {
  transform: scale(.98);
  background: rgb(250 252 249 / 90%);
}

.message-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 10px 0;
}

.message-row .avatar {
  width: 43px;
  height: 43px;
  border-radius: 4px;
}

.message-row.user {
  justify-content: flex-end;
  padding-right: 0;
  margin-right: 2px !important;
}

.message-row.user .avatar {
  order: 2;
}

.bubble {
  position: relative;
  max-width: calc(100% - 104px);
  min-height: 39px;
  padding: 8px 11px 8px;
  border-radius: 5px;
  background: var(--bubble-white);
  color: #111;
  font-size: 18px;
  line-height: 1.42;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 0 rgb(0 0 0 / 2%);
}

.message-row.assistant .bubble::before,
.message-row.user .bubble::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.message-row.assistant .bubble::before {
  left: -5px;
  background: var(--bubble-white);
}

.message-row.user .bubble {
  background: var(--green);
}

.message-row.user .bubble::after {
  right: -5px;
  background: var(--green);
}

.typing-bubble {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 58px;
  height: 39px;
}

.typing-bubble i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8b8b8;
  animation: typing 1.1s infinite ease-in-out;
}

.typing-bubble i:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-bubble i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.composer {
  min-height: 73px;
  flex: 0 0 auto;
  padding: 9px 14px max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 39px 1fr 0 39px 39px;
  gap: 9px;
  align-items: center;
  border-top: 1px solid #d6d6d6;
  background: var(--bar-bg);
}

.composer input {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 10px;
  border-radius: 3px;
  background: #ffffff;
  font-size: 20px;
}

.round-tool {
  position: relative;
  width: 38px;
  height: 38px;
  border: 2px solid #111;
  border-radius: 50%;
}

.voice-tool::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 11px;
  width: 6px;
  height: 12px;
  border: 3px solid #111;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

.voice-tool::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  width: 4px;
  height: 20px;
  background: #111;
  border-radius: 2px;
  box-shadow: 6px 5px 0 -1px #111;
}

.mini-tool {
  position: relative;
  width: 0;
  height: 0;
  justify-self: end;
  right: 37px;
  z-index: 2;
}

.mic-tool::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -14px;
  width: 8px;
  height: 17px;
  border: 3px solid #6b6b6b;
  border-radius: 10px;
}

.mic-tool::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -2px;
  width: 18px;
  height: 16px;
  border: 3px solid #6b6b6b;
  border-top: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 16px 16px;
}

.mic-tool {
  color: #6b6b6b;
}

.mic-tool i {
  position: absolute;
  left: 4px;
  top: 12px;
  width: 3px;
  height: 7px;
  background: #6b6b6b;
  border-radius: 3px;
  display: block;
}

.smile-tool::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #111;
  box-shadow: 12px 0 0 #111;
}

.smile-tool::after {
  content: "";
  position: absolute;
  left: 9px;
  bottom: 9px;
  width: 16px;
  height: 8px;
  border-bottom: 3px solid #111;
  border-radius: 0 0 15px 15px;
}

.plus-tool::before {
  left: 9px;
  top: 16px;
  width: 17px;
  height: 3px;
}

.plus-tool::after {
  left: 16px;
  top: 9px;
  width: 3px;
  height: 17px;
}

.composer.has-text {
  grid-template-columns: 39px 1fr 0 39px 54px;
}

.composer.has-text .plus-tool {
  width: 54px;
  border: 0;
  border-radius: 5px;
  background: var(--wechat-green);
  color: #fff;
  font-size: 16px;
}

.composer.has-text .plus-tool::before {
  content: "发送";
  position: static;
  width: auto;
  height: auto;
  background: transparent;
}

.composer.has-text .plus-tool::after {
  display: none;
}

.profile-drawer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  background: var(--app-bg);
}

.profile-drawer.is-open {
  display: block;
}

.drawer-sheet {
  height: 100%;
  overflow-y: auto;
  background: var(--app-bg);
}

.drawer-head {
  height: 88px;
  padding: 46px 16px 0;
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--nav-bg);
}

.drawer-head h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.drawer-back {
  padding-left: 2px;
}

.identity-grid {
  margin-top: 10px;
  padding: 18px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: #fff;
}

.identity-card {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #555;
  font-size: 14px;
}

.identity-card input {
  display: none;
}

.avatar-xl {
  width: 68px;
  height: 68px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  display: block;
}

.form-section {
  margin-top: 10px;
  background: #fff;
}

.form-section label {
  min-height: 54px;
  padding: 12px 16px;
  display: grid;
  gap: 9px;
  border-bottom: 1px solid var(--line-soft);
  color: #111;
  font-size: 16px;
}

.form-section input,
.form-section textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  background: #f7f7f7;
  font-size: 15px;
  color: #222;
  resize: vertical;
}

.section-title {
  padding: 14px 16px 8px;
  display: grid;
  gap: 3px;
}

.section-title small {
  color: #999;
}

.memory-list {
  display: grid;
}

.memory-item {
  min-height: 46px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line-soft);
  color: #333;
  font-size: 14px;
}

.memory-item button {
  color: #777;
}

.memory-form {
  padding: 12px 16px 16px;
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
}

.memory-form input {
  height: 40px;
}

.memory-form button,
.drawer-actions button {
  border-radius: 5px;
  background: var(--wechat-green);
  color: #fff;
  font-weight: 600;
}

.drawer-actions {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.drawer-actions button {
  height: 44px;
}

.drawer-actions button:last-child {
  background: #fff;
  color: #e64340;
}

/* Chat settings redesign: keep the original inputs/data binding, restyle as a soft green card page. */
.profile-drawer {
  background:
    radial-gradient(circle at 12% 16%, rgb(126 200 98 / 16%), transparent 28%),
    radial-gradient(circle at 88% 4%, rgb(126 200 98 / 22%), transparent 18%),
    linear-gradient(180deg, #fbfdf8 0%, #f4f8f1 100%) !important;
}

.drawer-sheet {
  padding: 0 0 24px !important;
  background: transparent !important;
  scrollbar-width: none !important;
}

.drawer-sheet::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.drawer-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  height: 96px !important;
  padding: 0 !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-bottom: 0 !important;
  background:
    url("./assets/backgrounds/profile/settings-header.png") center top / 100% auto no-repeat !important;
  backdrop-filter: none !important;
}

.identity-grid,
.drawer-sheet > .form-section,
.drawer-actions {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.drawer-head h2 {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  margin: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  pointer-events: none !important;
}

.drawer-head h2::before {
  content: none !important;
}

.drawer-head h2::after {
  content: none !important;
}

.drawer-back {
  position: absolute !important;
  left: 11px !important;
  top: 21px !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
}

.drawer-back .back-mark {
  opacity: 0 !important;
}

.drawer-head > span {
  position: absolute !important;
  right: 18px !important;
  top: 24px !important;
  min-width: 120px !important;
  height: 48px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.drawer-head > span::before {
  content: none !important;
}

.identity-grid,
.form-section,
.drawer-actions {
  position: relative !important;
  border: 1px solid rgb(98 160 83 / 10%) !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / 86%) !important;
  box-shadow: 0 14px 34px rgb(33 64 28 / 7%) !important;
}

.identity-grid {
  min-height: 245px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  padding: 76px 48px 28px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 34px !important;
}

.identity-grid::before {
  content: "头像设置\A选择你喜欢的头像" !important;
  white-space: pre !important;
  position: absolute !important;
  left: 34px !important;
  top: 14px !important;
  color: #0f1f18 !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  font-weight: 800 !important;
}

.identity-grid::after {
  content: "更换头像" !important;
  position: absolute !important;
  right: 28px !important;
  top: 20px !important;
  min-width: 112px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgb(56 168 43 / 22%) !important;
  border-radius: 999px !important;
  color: #2f9b24 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.identity-card {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  color: #17231c !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.identity-card .avatar-xl {
  width: 78px !important;
  height: 78px !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 22px rgb(37 67 31 / 12%) !important;
}

.identity-card > span:last-child {
  font-size: 0 !important;
}

.identity-card:first-child > span:last-child::after {
  content: "AI 头像" !important;
  font-size: 17px !important;
}

.identity-card:last-child > span:last-child::after {
  content: "我的头像" !important;
  font-size: 17px !important;
}

.drawer-sheet > .form-section:nth-of-type(2),
.drawer-sheet > .form-section:nth-of-type(3) {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

.drawer-sheet > .form-section:nth-of-type(2) {
  display: grid !important;
  gap: 14px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.drawer-sheet > .form-section:nth-of-type(2) label,
.drawer-sheet > .form-section:nth-of-type(3) {
  padding: 28px !important;
  border: 1px solid rgb(98 160 83 / 10%) !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / 88%) !important;
  box-shadow: 0 14px 34px rgb(33 64 28 / 7%) !important;
}

.form-section label {
  min-height: auto !important;
  display: grid !important;
  gap: 16px !important;
  border-bottom: 0 !important;
  color: #142018 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
}

.drawer-sheet > .form-section:nth-of-type(2) label > span,
.section-title strong {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #142018 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.drawer-sheet > .form-section:nth-of-type(2) label > span::before,
.section-title strong::before {
  content: "" !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 7px 18px 7px 18px !important;
  background: linear-gradient(135deg, #82ca69, #2e9d23) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%) !important;
  transform: rotate(-16deg) !important;
}

.drawer-sheet > .form-section:nth-of-type(2) label:nth-child(1) > span::after {
  content: "角色的称呼，会在聊天中展示" !important;
}

.drawer-sheet > .form-section:nth-of-type(2) label:nth-child(2) > span::after {
  content: "设定角色的背景、性格、关系等信息" !important;
}

.drawer-sheet > .form-section:nth-of-type(2) label:nth-child(3) > span::after {
  content: "设定角色的说话方式和语言习惯" !important;
}

.drawer-sheet > .form-section:nth-of-type(2) label > span::after,
.section-title small {
  color: #7d848c !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

.form-section input,
.form-section textarea,
.memory-form input {
  width: 100% !important;
  border: 1px solid rgb(64 159 48 / 18%) !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 72%) !important;
  color: #182119 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%) !important;
}

#agentName,
#persona,
#style {
  font-weight: 400 !important;
}

.form-section input {
  height: 48px !important;
}

.form-section textarea {
  min-height: 158px !important;
  resize: vertical !important;
}

#style {
  min-height: 138px !important;
}

.section-title {
  padding: 0 0 14px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.section-title small {
  grid-column: 1 / -1 !important;
  margin-left: 36px !important;
}

.section-title::after {
  content: "查看示例 >" !important;
  color: #2f9b24 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.memory-list {
  display: grid !important;
  border: 1px solid rgb(64 159 48 / 16%) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgb(255 255 255 / 64%) !important;
}

.memory-item {
  min-height: 42px !important;
  padding: 10px 14px !important;
  border-top: 0 !important;
  color: #303b33 !important;
  font-size: 15px !important;
}

.memory-form {
  padding: 12px 0 0 !important;
  grid-template-columns: 1fr 76px !important;
  gap: 10px !important;
  border-top: 0 !important;
}

.memory-form button {
  height: 42px !important;
  border: 1px solid rgb(56 168 43 / 22%) !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 80%) !important;
  color: #2f9b24 !important;
  font-size: 16px !important;
}

.drawer-actions {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.drawer-actions button {
  min-height: 64px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.drawer-actions button:first-child {
  order: 2 !important;
  border: 0 !important;
  background: linear-gradient(135deg, #57bd47, #218f17) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px rgb(44 151 28 / 22%) !important;
}

.drawer-actions button:last-child {
  order: 1 !important;
  border: 1px solid #2e9d23 !important;
  background: rgb(255 255 255 / 82%) !important;
  color: #2e9d23 !important;
  box-shadow: none !important;
}

.drawer-actions::after {
  content: "设定仅影响当前聊天，不会影响其他对话" !important;
  grid-column: 1 / -1 !important;
  color: #7b827d !important;
  text-align: center !important;
  font-size: 13px !important;
}

@media (max-width: 580px) {
  .drawer-sheet {
    padding: 0 0 22px !important;
  }

  .identity-grid,
  .drawer-sheet > .form-section,
  .drawer-actions {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .drawer-head {
    height: 96px !important;
    grid-template-columns: 50px 1fr 106px !important;
  }

  .drawer-head h2::before {
    font-size: 31px !important;
  }

  .drawer-head h2::after {
    font-size: 15px !important;
  }

  .drawer-head > span {
    min-width: 100px !important;
    height: 42px !important;
  }

  .drawer-head > span::before {
    font-size: 14px !important;
  }

  .identity-grid {
    min-height: 220px !important;
    padding: 72px 36px 24px !important;
  }

  .identity-grid::before {
    left: 28px !important;
    top: 12px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .identity-grid::after {
    right: 22px !important;
    top: 18px !important;
    min-width: 98px !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  .drawer-sheet > .form-section:nth-of-type(2) label,
  .drawer-sheet > .form-section:nth-of-type(3) {
    padding: 24px !important;
  }

  .drawer-sheet > .form-section:nth-of-type(2) label > span,
  .section-title strong {
    font-size: 20px !important;
  }

  .drawer-actions {
    gap: 14px !important;
  }
}

@media (max-width: 520px) {
  body {
    display: block;
    background: var(--app-bg);
  }

  .phone-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    box-shadow: none;
  }
}

@media (max-width: 380px) {
  .bubble {
    max-width: calc(100% - 96px);
    font-size: 17px;
  }

  .composer {
    grid-template-columns: 38px 1fr 26px 38px 38px;
    gap: 7px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .round-tool {
    width: 37px;
    height: 37px;
  }

  .chat-name {
    font-size: 19px;
  }
}

/* 用真实截图替换底部 Tab */
.tabbar {
  height: 82px;
  flex: 0 0 82px;
  padding: 0;
  background: #f7f7f7 url("./assets/backgrounds/message/wechat-tabbar.png") center center / 100% 100% no-repeat;
  border-top: 1px solid #dcdcdc;
}

.tab {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.tab-glyph,
.tab span {
  display: none;
}

/* Tabbar image override: real screenshot file */
.tabbar {
  height: 82px !important;
  flex: 0 0 82px !important;
  padding: 0 !important;
  border-top: 1px solid #dcdcdc !important;
  background: #f7f7f7 url("./assets/backgrounds/message/wechat-tabbar-real.png") center center / 100% 100% no-repeat !important;
}

.tab {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
}

.tab-glyph,
.tab span {
  display: none !important;
}

.tab-chat::after {
  display: none !important;
}

/* List nav image override: real 575x69 screenshot */
.screen-list .list-nav {
  width: 575px !important;
  height: 69px !important;
  flex: 0 0 69px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  align-items: stretch !important;
  border-bottom: 0 !important;
  background: #ededed url("./assets/backgrounds/message/wechat-list-nav-real.png") center center / 575px 69px no-repeat !important;
}

.screen-list .list-nav h1 {
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.screen-list .list-nav .nav-actions {
  grid-column: 2 !important;
  padding: 0 !important;
  gap: 0 !important;
  height: 69px !important;
  align-items: stretch !important;
}

.screen-list .list-nav .nav-icon {
  width: 60px !important;
  height: 69px !important;
  opacity: 0 !important;
}

.screen-list > .system-status {
  display: none !important;
}

.screen-chat > .system-status {
  display: none !important;
}

.screen-list .search-box {
  display: none !important;
}

/* Chat nav image override: real 575x72 screenshot with live centered name */
.screen-chat .chat-nav {
  position: relative !important;
  width: 575px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 112px 1fr 92px !important;
  align-items: stretch !important;
  border-bottom: 0 !important;
  background: #ededed url("./assets/backgrounds/message/wechat-chat-nav-real.png") center center / 575px 72px no-repeat !important;
}

.screen-chat .chat-nav h1 {
  grid-column: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 72px !important;
  font-weight: 500 !important;
  color: #111 !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

.screen-chat .chat-nav .ai-badge {
  display: none !important;
}

.screen-chat .chat-nav .back-control,
.screen-chat .chat-nav .more-icon {
  opacity: 0 !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen-chat .chat-nav .back-control {
  grid-column: 1 !important;
}

.screen-chat .chat-nav .more-icon {
  grid-column: 3 !important;
  width: 92px !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* Last mobile list override: full-width WeChat list on real phones */
@media (max-width: 580px) {
  .phone-shell {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    transform: none !important;
    transform-origin: top left !important;
    box-shadow: none !important;
  }

  .phone-shell.is-chat-mode {
    width: 579px !important;
    height: var(--mobile-layout-height, 1233px) !important;
    min-height: var(--mobile-layout-height, 1233px) !important;
    transform: scale(var(--mobile-scale, 1)) !important;
  }

  .phone-shell.is-list-mode .screen-list {
    width: 100vw !important;
    height: 100dvh !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav {
    width: 100vw !important;
    height: 12vw !important;
    flex: 0 0 12vw !important;
    margin: 0 !important;
    background-size: 100% 100% !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav .nav-actions,
  .phone-shell.is-list-mode .screen-list .list-nav .nav-icon {
    height: 12vw !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list {
    flex: 1 1 auto !important;
    width: 100vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row {
    min-height: clamp(74px, 19.2vw, 86px) !important;
    padding: clamp(10px, 2.7vw, 14px) clamp(14px, 4vw, 18px) !important;
    grid-template-columns: clamp(46px, 12.3vw, 52px) minmax(0, 1fr) clamp(64px, 18vw, 78px) !important;
    gap: clamp(11px, 3.4vw, 15px) !important;
    background: #ffffff !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row::after {
    left: 19.5vw !important;
    right: 0 !important;
    background: #eeeeee !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row .avatar {
    width: clamp(46px, 12.3vw, 52px) !important;
    height: clamp(46px, 12.3vw, 52px) !important;
    border-radius: clamp(5px, 1.4vw, 7px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-name {
    font-size: clamp(18px, 4.9vw, 21px) !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-preview {
    margin-top: clamp(5px, 1.6vw, 8px) !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.2 !important;
    color: #a7a7a7 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-time {
    padding-top: clamp(4px, 1.4vw, 8px) !important;
    font-size: clamp(13px, 3.7vw, 15px) !important;
    line-height: 1.2 !important;
    color: #a9a9a9 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row.unread .avatar::after {
    width: clamp(20px, 5.4vw, 24px) !important;
    height: clamp(21px, 5.6vw, 25px) !important;
    min-width: clamp(20px, 5.4vw, 24px) !important;
    right: clamp(-10px, -2.3vw, -8px) !important;
    top: clamp(-9px, -2.2vw, -7px) !important;
    background-size: 100% 100% !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar {
    width: 100vw !important;
    height: 10.476vw !important;
    min-height: 10.476vw !important;
    flex: 0 0 10.476vw !important;
    margin: 0 !important;
    background-image: none !important;
    border-top: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 10.476vw !important;
  }
}

/* Final fixed tabbar: one base screenshot plus a movable active highlight. */
.screen-list .tabbar {
  position: relative !important;
  width: 575px !important;
  height: 70px !important;
  min-height: 70px !important;
  flex: 0 0 70px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  display: block !important;
  gap: 0 !important;
  border-top: 0 !important;
  background-color: #f7f7f7 !important;
  background-image: none !important;
  overflow: hidden !important;
}

.screen-list .tabbar .tabbar-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 112% !important;
  height: 112% !important;
  display: block !important;
  object-fit: fill !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  transform: translate(-50%, -50%) translateZ(0) !important;
  z-index: 0 !important;
}

.screen-list .tabbar .tabbar-highlight {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: inset(0 76.5% 0 6.5%) !important;
  pointer-events: none !important;
  transform: none !important;
  transition: clip-path 0.18s ease !important;
  z-index: 1 !important;
}

.screen-list .tabbar[data-active-tab="2"] .tabbar-highlight {
  clip-path: inset(0 52.8% 0 29.4%) !important;
}

.screen-list .tabbar[data-active-tab="3"] .tabbar-highlight {
  clip-path: inset(0 29.6% 0 52.1%) !important;
}

.screen-list .tabbar[data-active-tab="4"] .tabbar-highlight {
  clip-path: inset(0 6.6% 0 75.3%) !important;
}

.screen-list .tabbar .tabbar-active-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 112% !important;
  height: 112% !important;
  display: block !important;
  object-fit: fill !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  transform: translate(-50%, -50%) translateZ(0) !important;
}

.screen-list .tabbar .tab {
  position: absolute !important;
  top: 0 !important;
  display: block !important;
  width: 25% !important;
  height: 70px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.screen-list .tabbar .tab:nth-of-type(1) {
  left: 0 !important;
}

.screen-list .tabbar .tab:nth-of-type(2) {
  left: 25% !important;
}

.screen-list .tabbar .tab:nth-of-type(3) {
  left: 50% !important;
}

.screen-list .tabbar .tab:nth-of-type(4) {
  left: 75% !important;
}

.screen-list .tabbar .tab-glyph,
.screen-list .tabbar .tab span,
.screen-list .tabbar .tab-chat::after {
  display: none !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .tabbar {
    width: 100vw !important;
    height: 12.174vw !important;
    min-height: 12.174vw !important;
    flex: 0 0 12.174vw !important;
    margin: 0 !important;
    background-image: none !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tabbar-highlight {
    height: 100% !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 12.174vw !important;
  }
}

/* Mobile list page: use the real phone width, keep chat-page scaling separate */
@media (max-width: 580px) {
  .phone-shell {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    transform: none !important;
    transform-origin: top left !important;
    box-shadow: none !important;
  }

  .phone-shell.is-chat-mode {
    width: 579px !important;
    height: var(--mobile-layout-height, 1233px) !important;
    min-height: var(--mobile-layout-height, 1233px) !important;
    transform: scale(var(--mobile-scale, 1)) !important;
  }

  .phone-shell.is-list-mode .screen-list {
    width: 100vw !important;
    height: 100dvh !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav {
    width: 100vw !important;
    height: 12vw !important;
    flex: 0 0 12vw !important;
    margin: 0 !important;
    background-size: 100% 100% !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav .nav-actions,
  .phone-shell.is-list-mode .screen-list .list-nav .nav-icon {
    height: 12vw !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar {
    width: 100vw !important;
    height: 13.739vw !important;
    flex: 0 0 13.739vw !important;
    margin: 0 !important;
    background-size: 100% 100% !important;
    border-top: 1px solid #dcdcdc !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list {
    flex: 1 1 auto !important;
    width: 100vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row {
    min-height: clamp(74px, 19.2vw, 86px) !important;
    padding: clamp(10px, 2.7vw, 14px) clamp(14px, 4vw, 18px) !important;
    grid-template-columns: clamp(46px, 12.3vw, 52px) minmax(0, 1fr) clamp(64px, 18vw, 78px) !important;
    gap: clamp(11px, 3.4vw, 15px) !important;
    background: #ffffff !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row::after {
    left: 19.5vw !important;
    right: 0 !important;
    background: #eeeeee !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row .avatar {
    width: clamp(46px, 12.3vw, 52px) !important;
    height: clamp(46px, 12.3vw, 52px) !important;
    border-radius: clamp(5px, 1.4vw, 7px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-name {
    font-size: clamp(18px, 4.9vw, 21px) !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-preview {
    margin-top: clamp(5px, 1.6vw, 8px) !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.2 !important;
    color: #a7a7a7 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-time {
    padding-top: clamp(4px, 1.4vw, 8px) !important;
    font-size: clamp(13px, 3.7vw, 15px) !important;
    line-height: 1.2 !important;
    color: #a9a9a9 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row.unread .avatar::after {
    width: clamp(20px, 5.4vw, 24px) !important;
    height: clamp(21px, 5.6vw, 25px) !important;
    min-width: clamp(20px, 5.4vw, 24px) !important;
    right: clamp(-10px, -2.3vw, -8px) !important;
    top: clamp(-9px, -2.2vw, -7px) !important;
    background-size: 100% 100% !important;
  }
}

/* Pixel-aligned phone size for the 575x79 tabbar screenshot */
@media (min-width: 580px) {
  .phone-shell {
    width: 579px !important;
    height: 1233px !important;
    min-height: 1233px !important;
  }

  .tabbar {
    width: 575px !important;
    height: 79px !important;
    flex: 0 0 79px !important;
    margin: 0 2px !important;
    background-size: 575px 79px !important;
  }
}

/* Hide accidental horizontal overflow above the real tabbar image */
.screen-list,
.chat-list {
  overflow-x: hidden !important;
}

.chat-row {
  grid-template-columns: 54px minmax(0, 1fr) 70px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.chat-main,
.chat-line,
.chat-name,
.chat-preview {
  min-width: 0 !important;
  max-width: 100% !important;
}

.chat-time {
  justify-self: end !important;
}

/* Use the supplied unread badge image on chat-list avatars */
.chat-row.unread .avatar::after {
  content: "" !important;
  width: 31px !important;
  height: 32px !important;
  min-width: 31px !important;
  padding: 0 !important;
  right: -13px !important;
  top: -11px !important;
  border-radius: 0 !important;
  background: transparent url("./assets/icons/status/unread-badge-2.png") center center / 31px 32px no-repeat !important;
}

.chat-row.unread .avatar {
  overflow: visible !important;
}

/* Chat composer image override */
@media (min-width: 580px) {
  .screen-chat .composer {
    width: 575px !important;
    height: 79px !important;
    min-height: 79px !important;
    flex: 0 0 79px !important;
    margin: 0 2px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 62px 1fr 50px 52px 52px !important;
    gap: 0 !important;
    border-top: 1px solid #dcdcdc !important;
    background: #f7f7f7 url("./assets/backgrounds/message/wechat-composer-real.png/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87.png") center center / 575px 79px no-repeat !important;
  }

  .screen-chat .composer > button,
  .screen-chat .composer > input {
    opacity: 0 !important;
    height: 79px !important;
    min-width: 0 !important;
  }

  .screen-chat .composer #messageInput {
    opacity: 0 !important;
    cursor: text !important;
  }
}

/* Real WeChat chat-page typography and spacing pass */
.screen-chat {
  background: #ededed !important;
}

.screen-chat .system-status,
.screen-chat .wechat-nav {
  background: #ededed !important;
}

.screen-chat .system-status {
  height: 50px !important;
  flex-basis: 50px !important;
  padding: 17px 31px 0 !important;
}

.screen-chat .wechat-nav {
  height: 78px !important;
  flex-basis: 78px !important;
}

.screen-chat .wechat-nav h1 {
  padding-bottom: 17px !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.screen-chat .back-control {
  padding: 0 0 14px 22px !important;
}

.screen-chat .back-mark {
  width: 22px !important;
  height: 22px !important;
  border-left-width: 3px !important;
  border-bottom-width: 3px !important;
}

.screen-chat .back-badge {
  min-width: 33px !important;
  height: 33px !important;
  font-size: 18px !important;
  background: #e2e2e2 !important;
}

.screen-chat .more-icon {
  margin: 0 27px 18px 0 !important;
}

.message-viewport {
  padding: 22px 8px 16px 17px !important;
  background: #ededed !important;
}

.time-divider {
  margin: 25px 0 20px !important;
  color: #aaa !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.message-row {
  gap: 18px !important;
  margin: 17px 0 !important;
}

.message-row .avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 6px !important;
}

.bubble {
  max-width: 470px !important;
  min-height: 58px !important;
  padding: 12px 18px 14px !important;
  border-radius: 5px !important;
  font-size: 32px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  letter-spacing: 0 !important;
  color: #151515 !important;
}

.message-row.assistant .bubble::before,
.message-row.user .bubble::after {
  top: 21px !important;
  width: 14px !important;
  height: 14px !important;
}

.message-row.assistant .bubble::before {
  left: -6px !important;
}

.message-row.user .bubble::after {
  right: -6px !important;
}

.message-row.user .bubble {
  background: #95ec69 !important;
}

.wechat-scrollbar {
  position: absolute;
  right: 3px;
  top: 0;
  width: 5px;
  height: 80px;
  border-radius: 999px;
  background: rgb(0 0 0 / 34%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.18s ease;
}

.screen-chat.is-scrolling .wechat-scrollbar {
  opacity: 1;
}

@media (max-width: 580px) {
  .screen-chat .wechat-nav h1 {
    font-size: 22px !important;
  }

  .message-viewport {
    padding-left: 12px !important;
    padding-right: 7px !important;
  }

  .message-row {
    gap: 12px !important;
  }

  .message-row .avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .bubble {
    max-width: 340px !important;
    font-size: 21px !important;
  }
}

/* Keep the real text input usable over the composer screenshot */
@media (min-width: 580px) {
  .screen-chat .composer > button {
    opacity: 0 !important;
  }

  .screen-chat .composer > input,
  .screen-chat .composer #messageInput {
    opacity: 1 !important;
    height: 52px !important;
    align-self: center !important;
    background: transparent !important;
    color: #111 !important;
    caret-color: #07c160 !important;
    padding: 0 48px 0 24px !important;
    font-size: 20px !important;
    line-height: 52px !important;
    cursor: text !important;
  }

  .screen-chat .composer > input::placeholder {
    color: transparent !important;
  }
}

/* Target pass based on 滚动栏.jpg */
.screen-chat .message-viewport {
  padding: 74px 28px 20px 34px !important;
}

.screen-chat .time-divider {
  margin: 54px 0 46px !important;
  font-size: 28px !important;
  color: #adadad !important;
}

.screen-chat .message-row {
  gap: 34px !important;
  margin: 42px 0 !important;
}

.screen-chat .message-row.user {
  gap: 26px !important;
  margin-right: 0 !important;
}

.screen-chat .message-row .avatar {
  width: 82px !important;
  height: 82px !important;
  border-radius: 8px !important;
}

.screen-chat .bubble {
  max-width: 845px !important;
  min-height: 80px !important;
  padding: 18px 30px 22px !important;
  font-size: 42px !important;
  line-height: 1.48 !important;
  border-radius: 8px !important;
}

.screen-chat .message-row.assistant .bubble::before,
.screen-chat .message-row.user .bubble::after {
  top: 31px !important;
  width: 22px !important;
  height: 18px !important;
}

.screen-chat .message-row.assistant .bubble::before {
  left: -8px !important;
}

.screen-chat .message-row.user .bubble::after {
  right: -8px !important;
}

@media (max-width: 580px) {
  .screen-chat .message-viewport {
    padding: 35px 13px 10px 16px !important;
  }

  .screen-chat .time-divider {
    margin: 26px 0 22px !important;
    font-size: 13px !important;
  }

  .screen-chat .message-row {
    gap: 16px !important;
    margin: 20px 0 !important;
  }

  .screen-chat .message-row.user {
    gap: 12px !important;
    margin-right: 0 !important;
  }

  .screen-chat .message-row .avatar {
    width: 39px !important;
    height: 39px !important;
    border-radius: 4px !important;
  }

  .screen-chat .bubble {
    max-width: 300px !important;
    min-height: 38px !important;
    padding: 9px 14px 10px !important;
    font-size: 20px !important;
    line-height: 1.48 !important;
    border-radius: 4px !important;
  }

  .screen-chat .message-row.assistant .bubble::before,
  .screen-chat .message-row.user .bubble::after {
    top: 15px !important;
    width: 9px !important;
    height: 9px !important;
  }
}

/* Final override: normal WeChat chat density */
.screen-chat .message-viewport {
  padding: 26px 12px 12px 16px !important;
}

.screen-chat .time-divider {
  margin: 24px 0 20px !important;
  font-size: 15px !important;
  color: #a9a9a9 !important;
}

.screen-chat .message-row {
  gap: 11px !important;
  margin: 14px 0 !important;
}

.screen-chat .message-row.user {
  gap: 10px !important;
  margin-right: 0 !important;
}

.screen-chat .message-row .avatar {
  width: 43px !important;
  height: 43px !important;
  border-radius: 5px !important;
}

.screen-chat .bubble {
  max-width: 360px !important;
  min-height: 42px !important;
  padding: 8px 12px 9px !important;
  font-size: 18px !important;
  line-height: 1.48 !important;
  border-radius: 5px !important;
  letter-spacing: 0 !important;
}

.screen-chat .message-row.assistant .bubble::before,
.screen-chat .message-row.user .bubble::after {
  top: 15px !important;
  width: 10px !important;
  height: 10px !important;
}

.screen-chat .message-row.assistant .bubble::before {
  left: -5px !important;
}

.screen-chat .message-row.user .bubble::after {
  right: -5px !important;
}

/* Final alignment pass, must stay last */
.screen-chat .message-viewport {
  padding: 26px 12px 12px 16px !important;
}

.screen-chat .message-row {
  gap: 12px !important;
  margin: 15px 0 !important;
  align-items: flex-start !important;
}

.screen-chat .message-row.user {
  gap: 12px !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

.screen-chat .message-row .avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 6px !important;
}

.screen-chat .bubble {
  box-sizing: border-box !important;
  max-width: 340px !important;
  min-height: 52px !important;
  padding: 9px 13px 11px !important;
  font-size: 25px !important;
  line-height: 1.42 !important;
  border-radius: 5px !important;
  letter-spacing: 0 !important;
}

.screen-chat .message-row.assistant .bubble::before,
.screen-chat .message-row.user .bubble::after {
  top: 20px !important;
  width: 11px !important;
  height: 11px !important;
}

/* Final chat column alignment: assistant long bubbles end near the composer smile icon */
.screen-chat .message-row.assistant .bubble {
  max-width: calc(100% - 136px) !important;
}

.screen-chat .message-row.user .bubble {
  max-width: calc(100% - 136px) !important;
}

/* Final mobile override: render the desktop layout, then scale it to the phone */
@media (max-width: 580px) {
  body {
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    background: #ededed !important;
  }

  .phone-shell {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 579px !important;
    height: var(--mobile-layout-height, 1233px) !important;
    min-height: var(--mobile-layout-height, 1233px) !important;
    transform: scale(var(--mobile-scale, 1)) !important;
    transform-origin: top left !important;
    box-shadow: none !important;
  }

  .screen-chat .system-status {
    display: none !important;
    height: 0 !important;
    flex-basis: 0 !important;
    padding: 0 !important;
  }

  .screen-chat .wechat-nav {
    height: 78px !important;
    flex-basis: 78px !important;
  }

  .screen-chat .wechat-nav h1 {
    padding-bottom: 17px !important;
    font-size: 24px !important;
    font-weight: 500 !important;
  }

  .screen-chat .back-control {
    padding: 0 0 14px 22px !important;
  }

  .screen-chat .back-mark {
    width: 22px !important;
    height: 22px !important;
    border-left-width: 3px !important;
    border-bottom-width: 3px !important;
  }

  .screen-chat .back-badge {
    min-width: 33px !important;
    height: 33px !important;
    font-size: 18px !important;
  }

  .screen-chat .more-icon {
    margin: 0 27px 18px 0 !important;
  }

  .screen-chat .message-viewport {
    padding: 26px 12px 12px 16px !important;
  }

  .screen-chat .time-divider {
    margin: 24px 0 20px !important;
    font-size: 15px !important;
  }

  .screen-chat .message-row {
    gap: 12px !important;
    margin: 15px 0 !important;
  }

  .screen-chat .message-row.user {
    gap: 12px !important;
    justify-content: flex-end !important;
  }

  .screen-chat .message-row .avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 6px !important;
  }

  .screen-chat .bubble {
    box-sizing: border-box !important;
    max-width: 340px !important;
    min-height: 52px !important;
    padding: 9px 13px 11px !important;
    font-size: 25px !important;
    line-height: 1.42 !important;
    border-radius: 5px !important;
    letter-spacing: 0 !important;
  }

  .screen-chat .message-row.assistant .bubble {
    max-width: calc(100% - 136px) !important;
  }

  .screen-chat .message-row.user .bubble {
    max-width: calc(100% - 136px) !important;
  }

  .screen-chat .message-row.assistant .bubble::before,
  .screen-chat .message-row.user .bubble::after {
    top: 20px !important;
    width: 11px !important;
    height: 11px !important;
  }

  .screen-chat .message-row.assistant .bubble::before {
    left: -5px !important;
  }

  .screen-chat .message-row.user .bubble::after {
    right: -5px !important;
  }

  .screen-chat .composer {
    width: 575px !important;
    height: 79px !important;
    min-height: 79px !important;
    flex: 0 0 79px !important;
    margin: 0 2px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 62px 1fr 50px 52px 52px !important;
    gap: 0 !important;
    border-top: 1px solid #dcdcdc !important;
    background: #f7f7f7 url("./assets/backgrounds/message/wechat-composer-real.png/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87.png") center center / 575px 79px no-repeat !important;
  }

  .screen-chat .composer > button {
    opacity: 0 !important;
    height: 79px !important;
    min-width: 0 !important;
  }

  .screen-chat .composer input {
    opacity: 1 !important;
    height: 52px !important;
    min-width: 0 !important;
    align-self: center !important;
    background: transparent !important;
    color: #111 !important;
    caret-color: #07c160 !important;
    padding: 0 48px 0 24px !important;
    font-size: 20px !important;
    line-height: 52px !important;
    cursor: text !important;
  }

  .screen-chat .composer input::placeholder {
    color: transparent !important;
  }
}

/* Final chat nav real image override */
.screen-chat .chat-nav {
  position: relative !important;
  width: 575px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 112px 1fr 92px !important;
  align-items: stretch !important;
  border-bottom: 0 !important;
  background: #ededed url("./assets/backgrounds/message/wechat-chat-nav-real.png") center center / 575px 72px no-repeat !important;
}

.screen-chat .chat-nav h1 {
  grid-column: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 72px !important;
  font-weight: 500 !important;
  color: #111 !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

.screen-chat .chat-nav .ai-badge {
  display: none !important;
}

.screen-chat .chat-nav .back-control,
.screen-chat .chat-nav .more-icon {
  opacity: 0 !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen-chat .chat-nav .back-control {
  grid-column: 1 !important;
}

.screen-chat .chat-nav .more-icon {
  grid-column: 3 !important;
  width: 92px !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* Last mobile list override: full-width WeChat list on real phones */
@media (max-width: 580px) {
  .phone-shell {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    transform: none !important;
    transform-origin: top left !important;
    box-shadow: none !important;
  }

  .phone-shell.is-chat-mode {
    width: 579px !important;
    height: var(--mobile-layout-height, 1233px) !important;
    min-height: var(--mobile-layout-height, 1233px) !important;
    transform: scale(var(--mobile-scale, 1)) !important;
  }

  .phone-shell.is-list-mode .screen-list {
    width: 100vw !important;
    height: 100dvh !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav {
    width: 100vw !important;
    height: 12vw !important;
    flex: 0 0 12vw !important;
    margin: 0 !important;
    background-size: 100% 100% !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav .nav-actions,
  .phone-shell.is-list-mode .screen-list .list-nav .nav-icon {
    height: 12vw !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list {
    flex: 1 1 auto !important;
    width: 100vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row {
    min-height: clamp(74px, 19.2vw, 86px) !important;
    padding: clamp(10px, 2.7vw, 14px) clamp(14px, 4vw, 18px) !important;
    grid-template-columns: clamp(46px, 12.3vw, 52px) minmax(0, 1fr) clamp(64px, 18vw, 78px) !important;
    gap: clamp(11px, 3.4vw, 15px) !important;
    background: #ffffff !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row::after {
    left: 19.5vw !important;
    right: 0 !important;
    background: #eeeeee !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row .avatar {
    width: clamp(46px, 12.3vw, 52px) !important;
    height: clamp(46px, 12.3vw, 52px) !important;
    border-radius: clamp(5px, 1.4vw, 7px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-name {
    font-size: clamp(18px, 4.9vw, 21px) !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-preview {
    margin-top: clamp(5px, 1.6vw, 8px) !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.2 !important;
    color: #a7a7a7 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-time {
    padding-top: clamp(4px, 1.4vw, 8px) !important;
    font-size: clamp(13px, 3.7vw, 15px) !important;
    line-height: 1.2 !important;
    color: #a9a9a9 !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row.unread .avatar::after {
    width: clamp(20px, 5.4vw, 24px) !important;
    height: clamp(21px, 5.6vw, 25px) !important;
    min-width: clamp(20px, 5.4vw, 24px) !important;
    right: clamp(-10px, -2.3vw, -8px) !important;
    top: clamp(-9px, -2.2vw, -7px) !important;
    background-size: 100% 100% !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar {
    width: 100vw !important;
    height: 8.233vw !important;
    min-height: 8.233vw !important;
    flex: 0 0 8.233vw !important;
    margin: 0 !important;
    background-size: 100vw 8.233vw !important;
    border-top: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 8.233vw !important;
  }
}

/* Last tabbar scale lock: keep the fixed base screenshot ratio. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .tabbar {
    height: 12.174vw !important;
    min-height: 12.174vw !important;
    flex: 0 0 12.174vw !important;
    background-image: none !important;
    background-size: auto !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tabbar-highlight {
    height: 8.7vw !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 12.174vw !important;
  }
}

/* Custom original UI image overrides. */
.screen-list .tabbar {
  width: 575px !important;
  height: 46px !important;
  min-height: 46px !important;
  flex: 0 0 46px !important;
  margin: 0 2px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.screen-list .tabbar .tabbar-image,
.screen-list .tabbar .tabbar-active-image {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateZ(0) !important;
  object-fit: fill !important;
}

.screen-list .tabbar .tabbar-highlight {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.screen-list .tabbar .tab {
  height: 46px !important;
}

.screen-list .tabbar[data-active-tab="1"] .tabbar-highlight {
  clip-path: inset(0 84.5% 0 4.8%) !important;
}

.screen-list .tabbar[data-active-tab="2"] .tabbar-highlight {
  clip-path: inset(0 59.4% 0 29.2%) !important;
}

.screen-list .tabbar[data-active-tab="3"] .tabbar-highlight {
  clip-path: inset(0 33.8% 0 54.6%) !important;
}

.screen-list .tabbar[data-active-tab="4"] .tabbar-highlight {
  clip-path: inset(0 9.1% 0 79.1%) !important;
}

.screen-chat .chat-nav {
  width: 575px !important;
  height: 61px !important;
  flex: 0 0 61px !important;
  margin: 0 2px !important;
  grid-template-columns: 104px 1fr 126px !important;
  border-bottom: 0 !important;
  background: #fff url("./assets/backgrounds/message/custom-chat-top.png") center center / 575px 61px no-repeat !important;
}

.screen-chat .chat-nav h1 {
  opacity: 0 !important;
}

.screen-chat .chat-nav .back-control,
.screen-chat .chat-nav .more-icon {
  height: 61px !important;
  opacity: 0 !important;
}

.screen-chat .chat-nav .more-icon {
  width: 126px !important;
}

.screen-chat .composer {
  width: 575px !important;
  height: 46px !important;
  min-height: 46px !important;
  flex: 0 0 46px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 72px 1fr 0 58px 62px !important;
  gap: 0 !important;
  border-top: 0 !important;
  background: #fff url("./assets/backgrounds/message/custom-composer.png") center center / 575px 46px no-repeat !important;
}

.screen-chat .composer > button {
  opacity: 0 !important;
  height: 46px !important;
  min-width: 0 !important;
}

.screen-chat .composer .mini-tool {
  width: 0 !important;
  overflow: hidden !important;
}

.screen-chat .composer #messageInput {
  opacity: 1 !important;
  height: 32px !important;
  align-self: center !important;
  min-width: 0 !important;
  background: transparent !important;
  color: #111 !important;
  caret-color: #54c878 !important;
  padding: 0 12px !important;
  font-size: 18px !important;
  line-height: 32px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .tabbar {
    width: 100vw !important;
    height: 8vw !important;
    min-height: 8vw !important;
    flex: 0 0 8vw !important;
    margin: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 8vw !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav {
    height: 61px !important;
    flex-basis: 61px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer {
    height: 46px !important;
    min-height: 46px !important;
    flex-basis: 46px !important;
  }
}

/* Final comfort scale for the custom original UI bars. */
.screen-list .tabbar {
  height: 60px !important;
  min-height: 60px !important;
  flex: 0 0 60px !important;
}

.screen-list .tabbar .tab {
  height: 60px !important;
}

.screen-chat .chat-nav {
  height: 78px !important;
  flex: 0 0 78px !important;
  background-size: 575px 78px !important;
}

.screen-chat .chat-nav .back-control,
.screen-chat .chat-nav .more-icon {
  height: 78px !important;
}

.screen-chat .composer {
  height: 60px !important;
  min-height: 60px !important;
  flex: 0 0 60px !important;
  background-size: 575px 60px !important;
}

.screen-chat .composer > button {
  height: 60px !important;
}

.screen-chat .composer #messageInput {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 19px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .tabbar {
    height: 10.435vw !important;
    min-height: 10.435vw !important;
    flex: 0 0 10.435vw !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 10.435vw !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav {
    height: 78px !important;
    flex-basis: 78px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer {
    height: 60px !important;
    min-height: 60px !important;
    flex-basis: 60px !important;
  }
}

/* Final custom UI image polish: keep the matching top and composer bars as one set. */
:root {
  --custom-chat-bar-width: 575px;
  --custom-chat-bar-height: 78px;
}

.screen-chat {
  background: #eef0ee !important;
}

.screen-chat .message-viewport {
  background: #eef0ee !important;
  padding-top: 24px !important;
}

.screen-chat .chat-nav {
  position: relative !important;
  width: var(--custom-chat-bar-width) !important;
  height: var(--custom-chat-bar-height) !important;
  flex: 0 0 var(--custom-chat-bar-height) !important;
  margin: 0 2px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 112px 1fr 136px !important;
  align-items: stretch !important;
  border: 0 !important;
  background: transparent url("./assets/backgrounds/message/custom-chat-top.png") center center / var(--custom-chat-bar-width) var(--custom-chat-bar-height) no-repeat !important;
}

.screen-chat .chat-nav h1,
.screen-chat .chat-nav .ai-badge {
  opacity: 0 !important;
  pointer-events: none !important;
}

.screen-chat .chat-nav .back-control,
.screen-chat .chat-nav .more-icon {
  height: var(--custom-chat-bar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}

.screen-chat .chat-nav .back-control {
  grid-column: 1 !important;
}

.screen-chat .chat-nav .more-icon {
  grid-column: 3 !important;
  width: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.screen-chat .composer,
.screen-chat .composer.has-text {
  width: var(--custom-chat-bar-width) !important;
  height: var(--custom-chat-bar-height) !important;
  min-height: var(--custom-chat-bar-height) !important;
  flex: 0 0 var(--custom-chat-bar-height) !important;
  margin: 0 2px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 72px 1fr 0 58px 62px !important;
  gap: 0 !important;
  align-items: stretch !important;
  border: 0 !important;
  background: transparent url("./assets/backgrounds/message/custom-composer.png") center center / var(--custom-chat-bar-width) var(--custom-chat-bar-height) no-repeat !important;
}

.screen-chat .composer > button {
  height: var(--custom-chat-bar-height) !important;
  min-width: 0 !important;
  opacity: 0 !important;
}

.screen-chat .composer .mini-tool {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.screen-chat .composer #messageInput {
  align-self: center !important;
  width: 100% !important;
  height: 50px !important;
  min-width: 0 !important;
  padding: 0 14px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #151515 !important;
  caret-color: #36c568 !important;
  font-size: 20px !important;
  line-height: 50px !important;
  opacity: 1 !important;
}

.screen-chat .composer #messageInput::placeholder {
  color: rgb(165 169 172 / 86%) !important;
}

.screen-list .chat-list,
.phone-shell.is-list-mode .screen-list .chat-row {
  background: #fbfbfa !important;
}

.screen-list .chat-row::after {
  background: #eeeeeb !important;
}

@media (max-width: 580px) {
  .phone-shell.is-chat-mode .screen-chat .chat-nav,
  .phone-shell.is-chat-mode .screen-chat .composer {
    width: var(--custom-chat-bar-width) !important;
    height: var(--custom-chat-bar-height) !important;
    min-height: var(--custom-chat-bar-height) !important;
    flex-basis: var(--custom-chat-bar-height) !important;
    margin: 0 2px !important;
    background-size: var(--custom-chat-bar-width) var(--custom-chat-bar-height) !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-control,
  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon,
  .phone-shell.is-chat-mode .screen-chat .composer > button {
    height: var(--custom-chat-bar-height) !important;
  }
}

/* Screenshot-style chat page: one full-page visual, with real controls layered above it. */
:root {
  --chat-page-width: 579px;
  --chat-page-height: 1252px;
  --chat-nav-hit-height: 90px;
  --chat-composer-hit-height: 105px;
}

.screen-chat {
  background: transparent !important;
}

@media (min-width: 581px) {
  .screen-chat {
    background:
      transparent url("./assets/backgrounds/message/custom-chat-page.png") center top / var(--chat-page-width) var(--chat-page-height) no-repeat !important;
  }
}

.phone-shell.is-chat-mode {
  width: var(--chat-page-width) !important;
  height: var(--chat-page-height) !important;
  min-height: var(--chat-page-height) !important;
}

.screen-chat > .system-status {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
}

.screen-chat .chat-nav {
  width: var(--chat-page-width) !important;
  height: var(--chat-nav-hit-height) !important;
  min-height: var(--chat-nav-hit-height) !important;
  flex: 0 0 var(--chat-nav-hit-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: 116px 1fr 154px !important;
  border: 0 !important;
  background: transparent !important;
}

.screen-chat .chat-nav h1,
.screen-chat .chat-nav .ai-badge {
  opacity: 1 !important;
  pointer-events: none !important;
}

.screen-chat .chat-nav h1 {
  position: absolute !important;
  left: 52% !important;
  top: 25px !important;
  width: 220px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #1d1d1f !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
}

.screen-chat .chat-nav .ai-badge {
  display: none !important;
}

.screen-chat .chat-nav .back-control,
.screen-chat .chat-nav .more-icon {
  height: var(--chat-nav-hit-height) !important;
  opacity: 0 !important;
}

.screen-chat .message-viewport {
  flex: 1 1 auto !important;
  background: transparent !important;
  padding: 8px 18px 18px 18px !important;
}

.screen-chat .composer,
.screen-chat .composer.has-text {
  width: var(--chat-page-width) !important;
  height: var(--chat-composer-hit-height) !important;
  min-height: var(--chat-composer-hit-height) !important;
  flex: 0 0 var(--chat-composer-hit-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: 88px 1fr 0 54px 66px !important;
  gap: 0 !important;
  align-items: start !important;
  border: 0 !important;
  background: transparent !important;
}

.screen-chat .composer > button {
  height: 76px !important;
  min-width: 0 !important;
  opacity: 0 !important;
}

.screen-chat .composer .mini-tool {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.screen-chat .composer #messageInput {
  align-self: start !important;
  width: 100% !important;
  height: 36px !important;
  margin-top: 39px !important;
  padding: 0 12px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #151515 !important;
  caret-color: #38c76a !important;
  font-size: 18px !important;
  line-height: 36px !important;
  opacity: 1 !important;
}

.screen-chat .composer #messageInput::placeholder {
  color: rgb(165 169 172 / 86%) !important;
}

@media (max-width: 580px) {
  .phone-shell.is-chat-mode {
    width: var(--chat-page-width) !important;
    height: var(--mobile-layout-height, var(--chat-page-height)) !important;
    min-height: var(--mobile-layout-height, var(--chat-page-height)) !important;
  }

  .phone-shell.is-chat-mode .screen-chat {
    background:
      transparent url("./assets/backgrounds/message/custom-chat-page-clean-mobile.jpg") center top / var(--chat-page-width) var(--chat-page-height) no-repeat !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav {
    width: var(--chat-page-width) !important;
    height: var(--chat-nav-hit-height) !important;
    min-height: var(--chat-nav-hit-height) !important;
    flex-basis: var(--chat-nav-hit-height) !important;
    margin: 0 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer,
  .phone-shell.is-chat-mode .screen-chat .composer.has-text {
    width: var(--chat-page-width) !important;
    height: var(--chat-composer-hit-height) !important;
    min-height: var(--chat-composer-hit-height) !important;
    flex-basis: var(--chat-composer-hit-height) !important;
    margin: 0 !important;
  }
}

/* Final requested polish: align typed text and make user bubbles soft sky blue. */
.screen-chat .message-row.user .bubble {
  background: var(--bubble-white) !important;
  color: #101820 !important;
}

.screen-chat .message-row.user .bubble::after {
  background: #aaf777ad !important;
}

.screen-chat .chat-nav h1 {
  top: 25px !important;
}

/* Final micro-alignment requested in screenshot review. */
.screen-chat .chat-nav h1 {
  left: 50% !important;
  top: 16px !important;
}

.screen-chat .composer #messageInput {
  margin-top: 33px !important;
}

/* Hard lock: center the friend name exactly above the built-in "在线" text. */
.screen-chat .chat-nav h1 {
  position: absolute !important;
  left: 294px !important;
  right: auto !important;
  top: 22px !important;
  width: 140px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
  font-size: 20px !important;
  line-height: 26px !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
}

/* Final bubble shape: rounded chat cards like the supplied reference. */
.screen-chat .bubble {
  box-sizing: border-box !important;
  border-radius: 24px 8px 24px 8px !important;
}

.screen-chat .message-row.assistant .bubble {
  border: 1.5px solid #D7CCEE !important;
  border-radius: 24px 8px 24px 8px !important;
}

.screen-chat .message-row.user .bubble {
  border: 1.5px solid #BFE8C7 !important;
  border-radius: 24px 8px 24px 8px !important;
}

.screen-chat .message-row.assistant .bubble::before,
.screen-chat .message-row.user .bubble::after {
  top: auto !important;
  bottom: 7px !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 0 0 0 12px !important;
  box-shadow: none !important;
  transform: none !important;
}

.screen-chat .message-row.assistant .bubble::before {
  left: -7px !important;
  right: auto !important;
  background: var(--bubble-white) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
}

.screen-chat .message-row.user .bubble::after {
  display: none !important;
}

/* Keep the latest message closer to the floating composer. */
.screen-chat .message-viewport {
  padding-bottom: 4px !important;
}

/* Final list page skin: use the supplied main-page screenshot as the frame,
   while keeping the original chat rows real and clickable. */
:root {
  --list-page-width: 579px;
  --list-page-height: 1252px;
  --list-content-top: 244px;
  --list-content-bottom: 124px;
  --list-side-gap: 22px;
  --list-card-height: 123px;
  --list-card-gap: 11px;
}

@media (min-width: 1220px) {
  body {
    min-height: 2640px !important;
  }
}

.phone-shell.is-list-mode {
  width: var(--list-page-width) !important;
  height: var(--list-page-height) !important;
  min-height: var(--list-page-height) !important;
  background: #f8faf5 !important;
}

.phone-shell.is-list-mode .screen-list {
  width: var(--list-page-width) !important;
  height: var(--list-page-height) !important;
  background: #f8faf5 !important;
  overflow: hidden !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page {
  background: #f8faf5 !important;
}

@media (min-width: 581px) {
  .phone-shell.is-list-mode .screen-list {
    background:
      #f8faf5 url("./assets/backgrounds/message/custom-list-page.png") center top / var(--list-page-width) var(--list-page-height) no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page {
    background:
      #f8faf5 url("./assets/backgrounds/profile/me-page-background.png") center top / var(--list-page-width) var(--list-page-height) no-repeat !important;
  }
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list {
    background:
      #f8faf5 url("./assets/backgrounds/message/custom-list-page-mobile.jpg") center top / var(--list-page-width) var(--list-page-height) no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page {
    background:
      #f8faf5 url("./assets/backgrounds/profile/me-page-background.png") center top / var(--list-page-width) var(--list-page-height) no-repeat !important;
  }
}

.phone-shell.is-list-mode .screen-list > .system-status,
.phone-shell.is-list-mode .screen-list .list-nav,
.phone-shell.is-list-mode .screen-list .search-box {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .chat-list {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--list-content-top) !important;
  bottom: var(--list-content-bottom) !important;
  width: auto !important;
  flex: none !important;
  padding: 0 var(--list-side-gap) 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background:
    linear-gradient(180deg, rgb(249 251 246 / 94%) 0%, rgb(250 251 248 / 97%) 72%, rgb(249 250 247 / 96%) 100%) !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .chat-list {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .chat-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.phone-shell.is-list-mode .screen-list .chat-row {
  width: 100% !important;
  height: var(--list-card-height) !important;
  min-height: var(--list-card-height) !important;
  max-width: none !important;
  margin: 0 0 var(--list-card-gap) !important;
  padding: 0 22px !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 70px !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: visible !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 34px rgb(62 90 55 / 7%) !important;
  text-align: left !important;
}

.phone-shell.is-list-mode .screen-list .chat-row::after {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .chat-row:active {
  transform: scale(0.992) !important;
  background: #fbfdf8 !important;
}

.phone-shell.is-list-mode .screen-list .chat-row .avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgb(42 67 38 / 10%) !important;
}

.phone-shell.is-list-mode .screen-list .chat-main {
  min-width: 0 !important;
  align-self: center !important;
}

.phone-shell.is-list-mode .screen-list .chat-line {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.phone-shell.is-list-mode .screen-list .chat-name {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #111111 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list .chat-preview {
  display: block !important;
  max-width: 100% !important;
  margin-top: 11px !important;
  overflow: hidden !important;
  color: #8f929c !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list .chat-time {
  justify-self: end !important;
  align-self: start !important;
  padding-top: 35px !important;
  color: #9ca0aa !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list .chat-row.unread .avatar::after {
  content: attr(data-count) !important;
  position: absolute !important;
  right: -418px !important;
  top: 18px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #78cf56, #43b937) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 12px rgb(70 185 57 / 22%) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar {
  position: absolute !important;
  left: 22px !important;
  right: auto !important;
  bottom: 22px !important;
  width: 535px !important;
  height: 82px !important;
  min-height: 82px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  z-index: 4 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tabbar-image,
.phone-shell.is-list-mode .screen-list .tabbar .tabbar-highlight,
.phone-shell.is-list-mode .screen-list .tabbar .tabbar-active-image {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab {
  position: absolute !important;
  top: 0 !important;
  height: 82px !important;
  min-height: 82px !important;
  display: block !important;
  opacity: 0 !important;
  z-index: 2 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) {
  left: 0 !important;
  width: 33.333% !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(2) {
  left: 33.333% !important;
  width: 33.333% !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) {
  left: 66.666% !important;
  width: 33.334% !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
  display: none !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    transform: none !important;
  }

  .phone-shell.is-list-mode .screen-list {
    width: 100vw !important;
    height: 100dvh !important;
    background-size: 100vw auto !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list {
    top: 42.14vw !important;
    bottom: 21.42vw !important;
    padding: 0 3.8vw 4.15vw !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row {
    height: 21.24vw !important;
    min-height: 21.24vw !important;
    margin-bottom: 1.9vw !important;
    padding: 0 3.8vw !important;
    grid-template-columns: 13.13vw minmax(0, 1fr) 12.09vw !important;
    border-radius: 4.84vw !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row .avatar {
    width: 10.02vw !important;
    height: 10.02vw !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-name {
    font-size: clamp(16px, 3.8vw, 22px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-preview {
    margin-top: 1.9vw !important;
    font-size: clamp(13px, 3.11vw, 18px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-time {
    padding-top: 6.04vw !important;
    font-size: clamp(13px, 3.11vw, 18px) !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar {
    left: 3.8vw !important;
    bottom: 3.8vw !important;
    width: 92.4vw !important;
    height: 14.16vw !important;
    min-height: 14.16vw !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 14.16vw !important;
    min-height: 14.16vw !important;
  }
}

/* Final chat avatar shape: keep chat-page message avatars circular like the main page. */
.screen-chat .message-row .avatar {
  border-radius: 50% !important;
}

.screen-chat .message-row.user .avatar {
  box-shadow:
    0 0 0 4px #D7CCEE,
    0 6px 16px rgb(121 93 153 / 12%) !important;
}

.screen-chat .message-row.assistant .avatar {
  box-shadow:
    0 0 0 4px #BFE8C7,
    0 6px 16px rgb(88 150 99 / 12%) !important;
}

/* Mobile-only fit: keep desktop untouched, but fit screenshot-based UI into the phone viewport. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list {
    background-size: 100vw 100dvh !important;
    background-position: center top !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page {
    background-size: 100vw 100dvh !important;
    background-position: center top !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list {
    top: 19.49dvh !important;
    bottom: 9.9dvh !important;
    padding: 0 3.8vw 2dvh !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row {
    height: 9.82dvh !important;
    min-height: 9.82dvh !important;
    margin-bottom: 0.88dvh !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row .avatar {
    width: min(10.02vw, 5.2dvh) !important;
    height: min(10.02vw, 5.2dvh) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-time {
    padding-top: 2.8dvh !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar {
    bottom: 1.76dvh !important;
    height: 6.55dvh !important;
    min-height: 6.55dvh !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 6.55dvh !important;
    min-height: 6.55dvh !important;
  }

  .phone-shell.is-chat-mode .screen-chat {
    background-size: var(--chat-page-width) var(--mobile-layout-height, var(--chat-page-height)) !important;
    background-position: center top !important;
  }

  .phone-shell.is-chat-mode .screen-chat .message-viewport {
    padding-bottom: calc(4px + var(--mobile-keyboard-offset, 0px)) !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer,
  .phone-shell.is-chat-mode .screen-chat .composer.has-text {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: var(--mobile-keyboard-offset, 0px) !important;
    width: var(--chat-page-width) !important;
    height: var(--chat-composer-hit-height) !important;
    min-height: var(--chat-composer-hit-height) !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 88px 1fr 0 54px 66px !important;
    gap: 0 !important;
    align-items: start !important;
    border: 0 !important;
    background:
      transparent url("./assets/backgrounds/message/custom-composer.png") center bottom / var(--chat-page-width) var(--chat-composer-hit-height) no-repeat !important;
    z-index: 12 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer > button {
    height: var(--chat-composer-hit-height) !important;
    min-width: 0 !important;
    opacity: 0 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer #messageInput {
    height: 42px !important;
    margin-top: 36px !important;
    line-height: 42px !important;
  }
}

/* Clickable profile fields layered over the screenshot-based chat/me pages. */
.visually-hidden {
  position: fixed !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.screen-list .profile-edit-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

.screen-list .profile-avatar-button,
.screen-list .profile-signature-button {
  position: absolute !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.screen-list .profile-avatar-button {
  left: 33px !important;
  top: 48px !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 4px rgb(255 255 255 / 86%),
    0 8px 20px rgb(58 82 55 / 12%) !important;
  overflow: hidden !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .profile-avatar-button {
  z-index: 7 !important;
  background-color: #ffffff !important;
  box-shadow:
    0 0 0 5px #ffffff,
    0 8px 20px rgb(58 82 55 / 12%) !important;
}

.screen-list .profile-signature-button {
  left: 126px !important;
  top: 95px !important;
  width: 286px !important;
  height: 36px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgb(248 250 244 / 86%), rgb(248 250 244 / 68%)) !important;
  color: #71757c !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 36px !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  backdrop-filter: blur(3px) !important;
}

.screen-list .profile-avatar-button:focus-visible,
.screen-list .profile-signature-button:focus-visible,
.screen-chat .message-row .editable-avatar:focus-visible {
  outline: 2px solid rgb(69 190 74 / 72%) !important;
  outline-offset: 3px !important;
}

.screen-chat .message-row .editable-avatar {
  cursor: pointer !important;
}

@media (max-width: 580px) {
  .screen-list .profile-avatar-button {
    left: 5.7vw !important;
    top: 3.83dvh !important;
    width: 13.13vw !important;
    height: 13.13vw !important;
    box-shadow:
      0 0 0 0.7vw rgb(255 255 255 / 86%),
      0 1.38vw 3.45vw rgb(58 82 55 / 12%) !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .profile-avatar-button {
    box-shadow:
      0 0 0 0.86vw #ffffff,
      0 1.38vw 3.45vw rgb(58 82 55 / 12%) !important;
  }

  .screen-list .profile-signature-button {
    left: 21.76vw !important;
    top: 7.59dvh !important;
    width: 49.4vw !important;
    height: clamp(24px, 2.88dvh, 36px) !important;
    padding: 0 2.07vw !important;
    font-size: clamp(13px, 3.11vw, 18px) !important;
    line-height: clamp(24px, 2.88dvh, 36px) !important;
  }
}

/* Final mobile-only keyboard behavior:
   closed = use the full chat screenshot input bar, open = float the real input above keyboard. */
@media (max-width: 580px) {
  .phone-shell.is-chat-mode {
    --chat-composer-hit-height: 105px;
    --chat-composer-visual-height: 62px;
    --chat-composer-icons-height: 56px;
    --chat-keyboard-toolbar-lift: 68px;
    --chat-composer-action-height: 54px;
    --chat-composer-keyboard-base-height: 62px;
    --chat-composer-mask-gap: 18px;
    --chat-input-extra-height: 0px;
  }

  .phone-shell.is-chat-mode .screen-chat .message-viewport {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    padding-bottom: 10px !important;
  }

  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .message-viewport {
    padding-bottom: 0 !important;
  }

  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .message-row:last-child {
    margin-bottom: 0 !important;
  }

  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer,
  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer.has-text {
    height: calc(var(--chat-composer-keyboard-base-height) + var(--chat-input-extra-height, 0px) + var(--chat-composer-mask-gap)) !important;
    min-height: calc(var(--chat-composer-keyboard-base-height) + var(--chat-input-extra-height, 0px) + var(--chat-composer-mask-gap)) !important;
    flex-basis: calc(var(--chat-composer-keyboard-base-height) + var(--chat-input-extra-height, 0px) + var(--chat-composer-mask-gap)) !important;
    background: transparent !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer,
  .phone-shell.is-chat-mode .screen-chat .composer.has-text {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: calc(var(--chat-composer-hit-height) + var(--chat-input-extra-height, 0px)) !important;
    min-height: calc(var(--chat-composer-hit-height) + var(--chat-input-extra-height, 0px)) !important;
    flex: 0 0 calc(var(--chat-composer-hit-height) + var(--chat-input-extra-height, 0px)) !important;
    background: transparent !important;
    z-index: 3 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer > button {
    height: var(--chat-composer-hit-height) !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer #sendButton {
    position: absolute !important;
    right: 8px !important;
    bottom: 3px !important;
    width: 70px !important;
    height: 58px !important;
    min-width: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 5 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer #messageInput {
    height: 42px !important;
    margin-top: 36px !important;
    line-height: 42px !important;
  }

  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer::before,
  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer.has-text::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--chat-composer-keyboard-base-height) + var(--chat-input-extra-height, 0px)) !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 31px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer::after,
  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer.has-text::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--chat-composer-icons-height) !important;
    background:
      url("./assets/icons/chat/input-composer-icons-clean.png") center bottom / var(--chat-page-width) var(--chat-composer-icons-height) no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer #messageInput,
  .phone-shell.is-chat-mode:not(.is-input-focused):not(.is-keyboard-open) .screen-chat .composer.has-text #messageInput {
    position: absolute !important;
    left: 88px !important;
    right: 128px !important;
    bottom: 14px !important;
    width: auto !important;
    margin-top: 0 !important;
    padding-top:10px !important;
    box-sizing: border-box !important;
    font-size: 26px !important;
    line-height: 28px !important;
    z-index: 2 !important;
  }

  .phone-shell.is-chat-mode.is-input-focused,
  .phone-shell.is-chat-mode.is-keyboard-open {
    height: var(--mobile-layout-height, var(--chat-page-height)) !important;
    min-height: var(--mobile-layout-height, var(--chat-page-height)) !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .screen-chat,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat {
    height: var(--mobile-layout-height, var(--chat-page-height)) !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .screen-chat .message-viewport,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat .message-viewport {
    height: max(
      180px,
      calc(
        var(--mobile-layout-height, var(--chat-page-height))
        - var(--chat-nav-hit-height)
        - var(--chat-composer-keyboard-base-height)
        - var(--chat-input-extra-height, 0px)
        - var(--mobile-keyboard-offset, 0px)
        - var(--chat-keyboard-toolbar-lift)
      )
    ) !important;
    flex: 0 0 max(
      180px,
      calc(
        var(--mobile-layout-height, var(--chat-page-height))
        - var(--chat-nav-hit-height)
        - var(--chat-composer-keyboard-base-height)
        - var(--chat-input-extra-height, 0px)
        - var(--mobile-keyboard-offset, 0px)
        - var(--chat-keyboard-toolbar-lift)
      )
    ) !important;
    padding-bottom: 10px !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .screen-chat .composer,
  .phone-shell.is-chat-mode.is-input-focused .screen-chat .composer.has-text,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat .composer,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat .composer.has-text {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: calc(var(--mobile-keyboard-offset, 0px) + var(--chat-keyboard-toolbar-lift)) !important;
    height: calc(var(--chat-composer-keyboard-base-height) + var(--chat-input-extra-height, 0px)) !important;
    min-height: calc(var(--chat-composer-keyboard-base-height) + var(--chat-input-extra-height, 0px)) !important;
    flex: none !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 31px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%) !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .screen-chat .composer::after,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat .composer::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--chat-composer-icons-height) !important;
    background:
      url("./assets/icons/chat/input-composer-icons-clean.png") center bottom / var(--chat-page-width) var(--chat-composer-icons-height) no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .screen-chat .composer > button,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat .composer > button {
    height: var(--chat-composer-action-height) !important;
    align-self: end !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .screen-chat .composer #sendButton,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat .composer #sendButton {
    position: absolute !important;
    right: 8px !important;
    bottom: 3px !important;
    width: 70px !important;
    height: 58px !important;
    min-width: 70px !important;
    z-index: 5 !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .screen-chat .composer #messageInput,
  .phone-shell.is-chat-mode.is-keyboard-open .screen-chat .composer #messageInput {
    position: absolute !important;
    left: 88px !important;
    right: 128px !important;
    width: auto !important;
    bottom: 14px !important;
    height: 34px !important;
    margin-top: 0 !important;
    font-size: 26px !important;
    line-height: 28px !important;
    overflow-y: auto !important;
    z-index: 2 !important;
  }
}

/* Use a textarea for WeChat-like wrapping instead of the old single-line input. */
.screen-chat .composer #messageInput {
  display: block !important;
  resize: none !important;
  overflow-y: auto !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-family: inherit !important;
  text-align: left !important;
  appearance: none !important;
}

.screen-chat .composer #messageInput::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* Add-person page: use the provided original UI screenshot as the visual layer. */
.list-add-person-button {
  position: absolute !important;
  right: 4.2% !important;
  top: 5.5% !important;
  width: 12% !important;
  height: 7.8% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  z-index: 8 !important;
}

.screen-list.is-me-page .list-add-person-button {
  display: none !important;
}

.phone-shell.is-add-person-mode {
  width: var(--list-page-width) !important;
  height: var(--list-page-height) !important;
  min-height: var(--list-page-height) !important;
  background: #f8faf5 !important;
}

.phone-shell.is-add-person-mode .screen-add-person {
  width: var(--list-page-width) !important;
  height: var(--list-page-height) !important;
  overflow: hidden !important;
  background: #f8faf5 !important;
}

@media (min-width: 581px) {
  .phone-shell.is-add-person-mode .screen-add-person {
    background:
      #f8faf5 url("./assets/backgrounds/character/create-role-page-bg.png") center top / 100% 100% no-repeat !important;
  }
}

@media (max-width: 580px) {
  .phone-shell.is-add-person-mode .screen-add-person {
    background:
      #f8faf5 url("./assets/backgrounds/character/create-role-page-bg.png") center top / 100% 100% no-repeat !important;
  }
}

.add-person-form {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
}

.add-person-back,
.add-person-create,
.add-person-avatar,
.add-person-prompt-generate,
.add-person-gender {
  position: absolute !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  cursor: pointer !important;
}

.add-person-back {
  left: 2.8% !important;
  top: 2.5% !important;
  width: 9.5% !important;
  height: 5.8% !important;
}

.add-person-create {
  left: 3.6% !important;
  right: auto !important;
  top: 90.2% !important;
  width: 92.8% !important;
  height: 5.2% !important;
  border-radius: 999px !important;
}

.add-person-avatar {
  left: 7.4% !important;
  top: 10.1% !important;
  width: 23.4% !important;
  height: 11.0% !important;
  border-radius: 50% !important;
  overflow: visible !important;
}

.add-person-avatar input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.add-person-avatar-preview {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  border-radius: 50% !important;
  background: center center / cover no-repeat !important;
  box-shadow: 0 8px 24px rgb(64 90 54 / 12%) !important;
}

.add-person-avatar-preview.has-image {
  display: block !important;
}

.add-person-name,
.add-person-intro {
  position: absolute !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #161c16 !important;
  font-family: inherit !important;
  box-shadow: none !important;
  appearance: none !important;
  z-index: 2 !important;
}

.add-person-name {
  left: 45.2% !important;
  top: 11.4% !important;
  width: 31.5% !important;
  height: 4.4% !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.add-person-intro {
  left: 38.7% !important;
  top: 21.6% !important;
  width: 54.1% !important;
  height: 15.2% !important;
  resize: none !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  overflow-y: auto !important;
}

.add-person-name::placeholder,
.add-person-intro::placeholder,
.add-person-prompt::placeholder {
  color: #8d90a8 !important;
  opacity: 1 !important;
}

.add-person-name-counter {
  position: absolute !important;
  right: 6.5% !important;
  top: 12.1% !important;
  color: #8d90a8 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.add-person-counter {
  position: absolute !important;
  right: 10% !important;
  top: 35.1% !important;
  color: #8d90a8 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: block !important;
}

.add-person-prompt {
  position: absolute !important;
  left: 10.4% !important;
  top: 45.5% !important;
  width: 70.8% !important;
  height: 3.9% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #161c16 !important;
  font-family: inherit !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  appearance: none !important;
  z-index: 2 !important;
}

.add-person-prompt-generate {
  right: 6.6% !important;
  top: 44.5% !important;
  width: 10.2% !important;
  height: 5.3% !important;
  border-radius: 50% !important;
}

.add-person-prompt-generate.is-loading {
  pointer-events: none !important;
}

.add-person-preview {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.add-person-preview-text {
  position: absolute !important;
  left: 30.9% !important;
  width: 55% !important;
  margin: 0 !important;
  color: #161b2c !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
  white-space: pre-line !important;
  letter-spacing: 0.01em !important;
}

.add-person-preview-personality {
  top: 58.2% !important;
}

.add-person-preview-relationship {
  top: 65.0% !important;
}

.add-person-preview-style {
  top: 71.9% !important;
}

.add-person-preview-opening {
  top: 79.2% !important;
}

.add-person-preview-edit {
  position: absolute !important;
  right: 7.1% !important;
  width: 6.2% !important;
  height: 4.7% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.add-person-preview-edit-personality {
  top: 57.5% !important;
}

.add-person-preview-edit-relationship {
  top: 64.4% !important;
}

.add-person-preview-edit-chatStyle {
  top: 71.3% !important;
}

.add-person-preview-edit-opening {
  top: 78.4% !important;
}

.add-person-genders {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.add-person-gender {
  top: 0 !important;
  width: 31.5% !important;
  height: 100% !important;
  border-radius: 999px !important;
}

.add-person-gender:nth-child(1) {
  left: 0 !important;
}

.add-person-gender:nth-child(2) {
  left: 34.3% !important;
}

.add-person-gender:nth-child(3) {
  left: 68.7% !important;
}

.add-person-gender.is-selected {
  border: 1px solid rgb(85 190 69 / 70%) !important;
  box-shadow: inset 0 0 0 1px rgb(85 190 69 / 18%) !important;
}

@media (max-width: 580px) {
  .phone-shell.is-add-person-mode {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .phone-shell.is-add-person-mode .screen-add-person {
    width: 100vw !important;
    height: 216.18vw !important;
    min-height: 216.18vw !important;
    overflow: hidden !important;
    background-size: 100% auto !important;
  }

  .add-person-name {
    font-size: clamp(18px, 4vw, 23px) !important;
  }

  .add-person-name-counter,
  .add-person-counter {
    font-size: clamp(17px, 3.8vw, 22px) !important;
  }

  .add-person-intro {
    font-size: clamp(15px, 3.25vw, 18px) !important;
  }

  .add-person-prompt {
    font-size: clamp(15px, 3.55vw, 19px) !important;
  }

  .add-person-preview-text {
    font-size: clamp(14px, 3.45vw, 17px) !important;
    line-height: 1.55 !important;
  }
}

/* Create role flow: step 1 only. The old controls stay in the DOM for later steps, but are hidden here. */
.phone-shell.is-add-person-mode .screen-add-person {
  background:
    radial-gradient(circle at 15% 18%, rgb(103 160 74 / 8%) 0 13%, transparent 32%),
    radial-gradient(circle at 86% 86%, rgb(103 160 74 / 7%) 0 15%, transparent 34%),
    linear-gradient(180deg, #fbfcf8 0%, #f8faf4 58%, #fbfcf8 100%) !important;
}

.phone-shell.is-add-person-mode .add-person-create,
.phone-shell.is-add-person-mode .add-person-avatar,
.phone-shell.is-add-person-mode .add-person-name,
.phone-shell.is-add-person-mode .add-person-intro,
.phone-shell.is-add-person-mode .add-person-counter,
.phone-shell.is-add-person-mode .add-person-genders,
.phone-shell.is-add-person-mode .add-person-name-counter,
.phone-shell.is-add-person-mode .add-person-prompt,
.phone-shell.is-add-person-mode .add-person-prompt-generate,
.phone-shell.is-add-person-mode .add-person-preview {
  display: none !important;
  pointer-events: none !important;
}

.add-person-step-form {
  color: #171d17 !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif !important;
}

.add-person-step-shell {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  padding: 0 5.8% !important;
}

.add-person-back {
  left: 3.4% !important;
  top: 3.0% !important;
  width: 8.2% !important;
  height: 4.9% !important;
  z-index: 10 !important;
}

.add-person-back::before {
  content: "" !important;
  position: absolute !important;
  left: 42% !important;
  top: 50% !important;
  width: 15px !important;
  height: 15px !important;
  border-left: 2.5px solid #111711 !important;
  border-bottom: 2.5px solid #111711 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  border-radius: 1px !important;
}

.add-person-step-header {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 3.15% !important;
  height: 4.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.add-person-step-header h1 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #111711 !important;
}

.add-person-step-count {
  position: absolute !important;
  right: 5.8% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #2f8b23 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.add-person-progress {
  position: absolute !important;
  left: 19.5% !important;
  right: 19.5% !important;
  top: 9.2% !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 0 !important;
  height: 18px !important;
}

.add-person-progress::before,
.add-person-progress::after {
  content: "" !important;
  position: absolute !important;
  left: 8.333% !important;
  right: 8.333% !important;
  top: 50% !important;
  height: 3px !important;
  border-radius: 99px !important;
  transform: translateY(-50%) !important;
}

.add-person-progress::before {
  background: #dfe7dc !important;
}

.add-person-progress::after {
  background: linear-gradient(90deg, #72bd4a, #3b9828) !important;
  transform: translateY(-50%) scaleX(0) !important;
  transform-origin: left center !important;
}

.add-person-step-shell[data-step="2"] .add-person-progress::after {
  transform: translateY(-50%) scaleX(0.2) !important;
}

.add-person-step-shell[data-step="3"] .add-person-progress::after {
  transform: translateY(-50%) scaleX(0.4) !important;
}

.add-person-step-shell[data-step="4"] .add-person-progress::after {
  transform: translateY(-50%) scaleX(0.6) !important;
}

.add-person-step-shell[data-step="5"] .add-person-progress::after {
  transform: translateY(-50%) scaleX(0.8) !important;
}

.add-person-step-shell[data-step="6"] .add-person-progress::after {
  transform: translateY(-50%) scaleX(1) !important;
}

.add-person-progress span {
  position: relative !important;
  z-index: 1 !important;
  width: 14px !important;
  height: 14px !important;
  border: 3px solid #f9fbf5 !important;
  border-radius: 50% !important;
  background: #e0e4df !important;
  box-shadow: 0 2px 8px rgb(75 92 65 / 12%) !important;
}

.add-person-progress .is-active {
  background: linear-gradient(180deg, #72bd4a, #3a9828) !important;
}

.add-person-step-one,
.add-person-step-two,
.add-person-step-three,
.add-person-step-four,
.add-person-step-five {
  position: absolute !important;
  left: 5.8% !important;
  right: 5.8% !important;
  top: 15.4% !important;
  bottom: 5.2% !important;
}

.add-person-step-one[hidden],
.add-person-step-two[hidden],
.add-person-step-three[hidden],
.add-person-step-four[hidden],
.add-person-step-five[hidden] {
  display: none !important;
}

.add-person-step-one h2,
.add-person-step-two h2,
.add-person-step-three h2,
.add-person-step-four h2,
.add-person-step-five h2 {
  margin: 0 !important;
  color: #172016 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.add-person-step-one p,
.add-person-step-two p,
.add-person-step-three p,
.add-person-step-four p,
.add-person-step-five p {
  margin: 12px 0 0 !important;
  color: #7b8279 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.add-person-step-five {
  top: 15.1% !important;
}

.meet-scene-input-wrap {
  position: relative !important;
  display: block !important;
  margin-top: 22px !important;
}

.meet-scene-input-wrap input {
  width: 100% !important;
  height: 56px !important;
  box-sizing: border-box !important;
  padding: 0 96px 0 18px !important;
  border: 1px solid rgb(223 227 219 / 72%) !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 84%) !important;
  box-shadow: 0 12px 26px rgb(68 82 60 / 6%) !important;
  color: #2a3228 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  outline: none !important;
}

.meet-scene-input-wrap input::placeholder {
  color: #9ba39a !important;
}

.meet-scene-input-wrap > span {
  position: absolute !important;
  right: 16px !important;
  top: 12px !important;
  color: #a1a89e !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.meet-scene-random {
  position: absolute !important;
  right: 15px !important;
  bottom: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 18px !important;
  border: 0 !important;
  background: transparent !important;
  color: #9ca59a !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.meet-scene-random::after {
  content: "" !important;
  width: 13px !important;
  height: 13px !important;
  background:
    conic-gradient(from 40deg, transparent 0 65deg, #55a83e 66deg 320deg, transparent 321deg) !important;
  border-radius: 50% !important;
  -webkit-mask: radial-gradient(circle, transparent 0 45%, #000 47%) !important;
  mask: radial-gradient(circle, transparent 0 45%, #000 47%) !important;
}

.opening-story-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 34px !important;
}

.opening-story-head h3 {
  margin: 0 !important;
  color: #1c241a !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.opening-story-refresh {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  color: #2b3329 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.opening-story-refresh::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  background:
    conic-gradient(from 30deg, transparent 0 70deg, #2f362d 71deg 320deg, transparent 321deg) !important;
  border-radius: 50% !important;
  -webkit-mask: radial-gradient(circle, transparent 0 45%, #000 47%) !important;
  mask: radial-gradient(circle, transparent 0 45%, #000 47%) !important;
}

.opening-story-card {
  position: relative !important;
  box-sizing: border-box !important;
  min-height: 224px !important;
  margin-top: 12px !important;
  padding: 23px 28px 42px !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 88% 84%, rgb(174 224 152 / 30%) 0 17%, transparent 44%),
    linear-gradient(180deg, rgb(239 249 235 / 88%), rgb(245 252 242 / 82%)) !important;
  color: #2f372e !important;
  box-shadow: 0 16px 34px rgb(81 133 59 / 8%) !important;
}

.opening-story-card p {
  margin: 0 0 8px !important;
  color: #384036 !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
  font-weight: 600 !important;
}

.opening-story-card .opening-story-title {
  margin-bottom: 10px !important;
  color: #1f281d !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.opening-story-play {
  position: absolute !important;
  right: 18px !important;
  bottom: 16px !important;
  width: 28px !important;
  height: 28px !important;
  border: 1.5px solid rgb(92 178 66 / 58%) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 88%) !important;
  cursor: pointer !important;
}

.opening-story-play::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 8px solid #55a83e !important;
  transform: translate(-36%, -50%) !important;
}

.add-person-step-four {
  top: 12.8% !important;
  padding-bottom: 70px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.add-person-step-four::-webkit-scrollbar {
  display: none !important;
}

.profile-avatar-uploader {
  position: relative !important;
  display: block !important;
  width: 132px !important;
  height: 132px !important;
  margin: 0 auto 24px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

.profile-avatar-uploader input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.profile-avatar-preview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border: 4px solid rgb(211 239 202 / 92%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 42%, rgb(226 244 219 / 78%) 0 28%, transparent 29%),
    linear-gradient(180deg, rgb(250 253 248 / 96%), rgb(240 249 236 / 86%)) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: 0 16px 34px rgb(82 145 55 / 12%) !important;
}

.profile-avatar-preview.has-image {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.profile-avatar-camera {
  position: absolute !important;
  right: 6px !important;
  bottom: 10px !important;
  width: 36px !important;
  height: 36px !important;
  border: 2px solid #79bd5e !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow: 0 8px 18px rgb(74 122 49 / 16%) !important;
}

.profile-avatar-camera::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: 14px !important;
  height: 10px !important;
  border: 2px solid #2b3329 !important;
  border-radius: 3px !important;
  transform: translate(-50%, -50%) !important;
}

.profile-avatar-camera::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: 5px !important;
  height: 5px !important;
  border: 2px solid #2b3329 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.profile-field {
  display: block !important;
  margin-top: 18px !important;
}

.profile-field-label {
  display: block !important;
  margin: 0 0 9px !important;
  color: #1c241a !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

.profile-input-wrap,
.profile-textarea-wrap {
  position: relative !important;
  display: block !important;
}

.profile-input-wrap input,
.profile-textarea-wrap textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgb(222 226 218 / 94%) !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 74%) !important;
  color: #1b2319 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: 0 10px 22px rgb(69 84 60 / 4%) !important;
}

.profile-input-wrap input {
  height: 42px !important;
  padding: 0 58px 0 14px !important;
}

.profile-textarea-wrap textarea {
  height: 158px !important;
  resize: none !important;
  padding: 14px 14px 28px !important;
  line-height: 1.45 !important;
}

.profile-input-wrap input::placeholder,
.profile-textarea-wrap textarea::placeholder {
  color: #9aa19a !important;
}

.profile-input-wrap span,
.profile-textarea-wrap span {
  position: absolute !important;
  right: 12px !important;
  color: #8f968d !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.profile-input-wrap span {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.profile-textarea-wrap span {
  right: 13px !important;
  bottom: 12px !important;
}

.profile-gender-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.profile-gender {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  height: 42px !important;
  border: 1px solid rgb(222 226 218 / 94%) !important;
  border-radius: 11px !important;
  background: rgb(255 255 255 / 72%) !important;
  color: #2a3028 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.profile-gender span {
  font-size: 19px !important;
  line-height: 1 !important;
}

.profile-gender[data-gender="女"] span {
  color: #f06f8d !important;
}

.profile-gender[data-gender="男"] span {
  color: #68a8ef !important;
}

.profile-gender.is-selected {
  padding-right: 30px !important;
  border-color: rgb(83 176 65 / 78%) !important;
  background: rgb(241 250 236 / 84%) !important;
  color: #287d22 !important;
}

.profile-gender.is-selected::after {
  content: "" !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #55a83e !important;
  transform: translateY(-50%) !important;
}

.profile-gender.is-selected::before {
  content: "" !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  z-index: 1 !important;
  width: 7px !important;
  height: 4px !important;
  border-left: 1.8px solid #fff !important;
  border-bottom: 1.8px solid #fff !important;
  transform: translateY(-62%) rotate(-45deg) !important;
}

.profile-intro-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 9px !important;
}

.profile-intro-head .profile-field-label {
  margin: 0 !important;
}

.profile-ai-intro-button {
  height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid rgb(83 176 65 / 70%) !important;
  border-radius: 999px !important;
  background: rgb(248 255 245 / 88%) !important;
  color: #4aa134 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.personality-tags {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
  margin-top: 28px !important;
}

.personality-tag {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  border: 1.5px solid transparent !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: 0 12px 26px rgb(73 91 61 / 5%) !important;
  color: #2a3028 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
}

.personality-tag.is-selected {
  justify-content: center !important;
  padding-right: 34px !important;
  border-color: rgb(83 176 65 / 78%) !important;
  background: rgb(241 250 236 / 88%) !important;
  color: #287d22 !important;
  box-shadow: 0 12px 26px rgb(73 154 45 / 10%) !important;
}

.personality-tag.is-selected::after {
  content: "" !important;
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #55a83e !important;
  transform: translateY(-50%) !important;
}

.personality-tag.is-selected::before {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  z-index: 1 !important;
  width: 7px !important;
  height: 4px !important;
  border-left: 1.8px solid #fff !important;
  border-bottom: 1.8px solid #fff !important;
  transform: translateY(-62%) rotate(-45deg) !important;
}

.personality-tag-custom {
  color: #697066 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.personality-selected-count {
  display: block !important;
  margin-top: 16px !important;
  color: #333b31 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.relation-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 28px !important;
}

.relation-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  height: 76px !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border: 1.5px solid rgb(221 225 218 / 90%) !important;
  border-radius: 19px !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow: 0 12px 28px rgb(73 91 61 / 5%) !important;
  color: #1c261b !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.relation-card.is-selected {
  border-color: rgb(83 164 58 / 78%) !important;
  background:
    linear-gradient(180deg, rgb(244 251 240 / 92%), rgb(255 255 255 / 82%)),
    #fff !important;
  box-shadow: 0 16px 34px rgb(75 157 52 / 11%) !important;
}

.relation-card::after {
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  border: 1.5px solid #d1d8ce !important;
  background: rgb(255 255 255 / 74%) !important;
}

.relation-card.is-selected::after {
  border-color: #58a73d !important;
  background: #58a73d !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

.relation-card:active {
  transform: none !important;
}

.relation-icon {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  background:
    var(--relation-icon) center / 34px 34px no-repeat,
    rgb(244 249 239 / 95%) !important;
}

.relation-title {
  display: block !important;
  min-width: 0 !important;
  padding-right: 18px !important;
  color: #1b251a !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.creation-mode-list {
  display: grid !important;
  gap: 28px !important;
  margin-top: 42px !important;
}

.creation-mode-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  height: 118px !important;
  min-height: 118px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px 22px !important;
  border: 1.5px solid rgb(221 225 218 / 88%) !important;
  border-radius: 17px !important;
  background: rgb(255 255 255 / 76%) !important;
  box-shadow: 0 16px 34px rgb(73 91 61 / 5%) !important;
  color: #172016 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.creation-mode-card.is-selected {
  border-color: rgb(86 168 61 / 70%) !important;
  background:
    linear-gradient(90deg, rgb(241 249 236 / 88%) 0%, rgb(255 255 255 / 76%) 72%),
    rgb(255 255 255 / 78%) !important;
  box-shadow: 0 18px 38px rgb(76 157 52 / 10%) !important;
}

.creation-mode-card:active {
  transform: none !important;
}

.creation-mode-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background-color: #edf7e9 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 45px 45px !important;
}

.creation-mode-icon-ai {
  background-image: url("./assets/icons/profile/create-mode-ai.png") !important;
}

.creation-mode-icon-custom {
  background-image: url("./assets/icons/profile/create-mode-custom.png") !important;
}

.creation-mode-copy {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.creation-mode-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #182018 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

.creation-mode-title em {
  display: inline-flex !important;
  align-items: center !important;
  height: 23px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #e7f4df !important;
  color: #4e9a35 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.creation-mode-desc {
  color: #6e756c !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

.creation-mode-check {
  width: 29px !important;
  height: 29px !important;
  border-radius: 50% !important;
  border: 2px solid #d1d7cf !important;
  background: rgb(255 255 255 / 62%) !important;
  justify-self: end !important;
}

.creation-mode-card.is-selected .creation-mode-check {
  position: relative !important;
  border-color: #58a73d !important;
  background: #58a73d !important;
}

.creation-mode-card.is-selected .creation-mode-check::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 7px !important;
  width: 10px !important;
  height: 6px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) !important;
}

.add-person-next-step {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 54px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #5fb244 0%, #389628 100%) !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 14px 28px rgb(64 154 40 / 18%) !important;
  cursor: pointer !important;
}

.add-person-next-step:active {
  transform: translateY(1px) !important;
  box-shadow: 0 8px 18px rgb(64 154 40 / 14%) !important;
}

@media (max-width: 580px) {
  .phone-shell.is-add-person-mode .screen-add-person {
    background-size: cover !important;
  }

  .add-person-step-header h1 {
    font-size: clamp(18px, 4.2vw, 22px) !important;
  }

  .add-person-step-count {
    font-size: clamp(16px, 3.9vw, 20px) !important;
  }

  .add-person-progress {
    left: 17.5% !important;
    right: 17.5% !important;
    gap: 0 !important;
    top: 9.4% !important;
  }

  .add-person-progress span {
    width: 12px !important;
    height: 12px !important;
    border-width: 2.5px !important;
  }

  .add-person-step-one,
  .add-person-step-two,
  .add-person-step-three,
  .add-person-step-four,
  .add-person-step-five {
    top: 15.6% !important;
  }

  .add-person-step-four {
    top: 13.2% !important;
    padding-bottom: 62px !important;
  }

  .add-person-step-one h2,
  .add-person-step-two h2,
  .add-person-step-three h2,
  .add-person-step-four h2,
  .add-person-step-five h2 {
    font-size: clamp(18px, 4.5vw, 22px) !important;
  }

  .add-person-step-one p,
  .add-person-step-two p,
  .add-person-step-three p,
  .add-person-step-four p,
  .add-person-step-five p {
    margin-top: 10px !important;
    font-size: clamp(13px, 3.35vw, 16px) !important;
  }

  .add-person-step-five {
    top: 15.2% !important;
  }

  .meet-scene-input-wrap {
    margin-top: 18px !important;
  }

  .meet-scene-input-wrap input {
    height: 50px !important;
    padding-left: 15px !important;
    padding-right: 90px !important;
    font-size: clamp(13px, 3.45vw, 16px) !important;
  }

  .meet-scene-input-wrap > span {
    right: 13px !important;
    top: 10px !important;
    font-size: 12px !important;
  }

  .meet-scene-random {
    right: 12px !important;
    bottom: 8px !important;
    font-size: 12px !important;
  }

  .opening-story-head {
    margin-top: 28px !important;
  }

  .opening-story-head h3 {
    font-size: clamp(15px, 3.9vw, 18px) !important;
  }

  .opening-story-refresh {
    font-size: clamp(12px, 3.3vw, 15px) !important;
  }

  .opening-story-card {
    min-height: 205px !important;
    padding: 19px 22px 38px !important;
  }

  .opening-story-card p {
    margin-bottom: 6px !important;
    font-size: clamp(12px, 3.2vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .opening-story-card .opening-story-title {
    font-size: clamp(13px, 3.45vw, 16px) !important;
  }

  .profile-avatar-uploader {
    width: clamp(104px, 27vw, 132px) !important;
    height: clamp(104px, 27vw, 132px) !important;
    margin-bottom: 18px !important;
  }

  .profile-avatar-camera {
    width: 32px !important;
    height: 32px !important;
  }

  .profile-field {
    margin-top: 15px !important;
  }

  .profile-field-label {
    margin-bottom: 8px !important;
    font-size: clamp(13px, 3.25vw, 15px) !important;
  }

  .profile-input-wrap input,
  .profile-gender {
    height: 39px !important;
  }

  .profile-input-wrap input,
  .profile-textarea-wrap textarea {
    font-size: clamp(12px, 3.1vw, 14px) !important;
  }

  .profile-textarea-wrap textarea {
    height: 142px !important;
    padding-top: 12px !important;
  }

  .profile-gender-list {
    gap: 10px !important;
  }

  .profile-ai-intro-button {
    height: 25px !important;
    padding: 0 10px !important;
    font-size: clamp(11px, 2.9vw, 13px) !important;
  }

  .personality-tags {
    gap: 10px 12px !important;
    margin-top: 22px !important;
  }

  .personality-tag {
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }

  .personality-tag.is-selected {
    padding-right: 28px !important;
  }

  .personality-tag.is-selected::after {
    right: 9px !important;
    width: 16px !important;
    height: 16px !important;
  }

  .personality-tag.is-selected::before {
    right: 14px !important;
  }

  .personality-tag-custom {
    font-size: clamp(12px, 3.15vw, 15px) !important;
  }

  .personality-selected-count {
    margin-top: 12px !important;
    font-size: clamp(12px, 3.1vw, 15px) !important;
  }

  .relation-grid {
    gap: 11px !important;
    margin-top: 22px !important;
  }

  .relation-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    height: 68px !important;
    padding: 10px 12px !important;
    border-radius: 17px !important;
  }

  .relation-card::after {
    right: 10px !important;
    top: 10px !important;
    width: 15px !important;
    height: 15px !important;
  }

  .relation-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background-size: 31px 31px, auto !important;
  }

  .relation-title {
    padding-right: 16px !important;
    font-size: clamp(14px, 3.75vw, 18px) !important;
  }

  .creation-mode-list {
    gap: 22px !important;
    margin-top: 34px !important;
  }

  .creation-mode-card {
    grid-template-columns: 62px minmax(0, 1fr) 30px !important;
    height: 104px !important;
    min-height: 104px !important;
    padding: 17px 18px !important;
    border-radius: 15px !important;
  }

  .creation-mode-icon {
    width: 50px !important;
    height: 50px !important;
    background-size: 39px 39px !important;
  }

  .creation-mode-title {
    gap: 8px !important;
    font-size: clamp(16px, 4vw, 20px) !important;
  }

  .creation-mode-title em {
    height: 20px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .creation-mode-desc {
    font-size: clamp(12px, 3.1vw, 15px) !important;
    line-height: 1.48 !important;
  }

  .creation-mode-check {
    width: 25px !important;
    height: 25px !important;
  }

  .creation-mode-card.is-selected .creation-mode-check::before {
    left: 7px !important;
    top: 6px !important;
  }

  .add-person-next-step {
    height: 49px !important;
    border-radius: 12px !important;
    font-size: clamp(15px, 3.8vw, 18px) !important;
  }
}

.emoji-panel {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: calc(var(--chat-composer-hit-height, 78px) + 12px) !important;
  max-height: 222px !important;
  padding: 12px !important;
  border: 1px solid rgb(215 204 238 / 72%) !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 14px 36px rgb(34 32 48 / 16%) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  z-index: 36 !important;
}

.emoji-panel[hidden] {
  display: none !important;
}

.emoji-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) !important;
  gap: 8px !important;
  max-height: 198px !important;
  overflow-y: auto !important;
  padding: 1px !important;
  -webkit-overflow-scrolling: touch !important;
}

.emoji-button {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgb(191 232 199 / 46%) !important;
  border-radius: 14px !important;
  background: rgb(248 253 249 / 92%) !important;
  color: #1c1f1d !important;
  font: inherit !important;
  font-size: 25px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.emoji-button:active {
  transform: scale(0.96) !important;
  background: rgb(232 247 235 / 96%) !important;
}

.emoji-empty {
  grid-column: 1 / -1 !important;
  padding: 18px 0 !important;
  color: #8d90a8 !important;
  font-size: 15px !important;
  text-align: center !important;
}

@media (max-width: 580px) {
  .phone-shell.is-chat-mode .emoji-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--chat-composer-hit-height, 105px) + 8px) !important;
    max-height: 34vh !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .phone-shell.is-chat-mode.is-input-focused .emoji-panel,
  .phone-shell.is-chat-mode.is-keyboard-open .emoji-panel {
    bottom: calc(
      var(--mobile-keyboard-offset, 0px)
      + var(--chat-keyboard-toolbar-lift, 0px)
      + var(--chat-composer-keyboard-base-height, 62px)
      + var(--chat-input-extra-height, 0px)
      + 8px
    ) !important;
  }

  .phone-shell.is-chat-mode .emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)) !important;
    gap: 7px !important;
    max-height: calc(34vh - 22px) !important;
  }

  .phone-shell.is-chat-mode .emoji-button {
    min-height: 38px !important;
    border-radius: 13px !important;
    font-size: 24px !important;
  }
}

/* Component list/me redesign: replace screenshot pages with real UI over the leaf background. */
.phone-shell.is-list-mode,
.phone-shell.is-list-mode .screen-list,
.phone-shell.is-list-mode .screen-list.is-me-page {
  background:
    #fafbf7 url("./assets/backgrounds/character/ui-soft-leaf-bg.png") center top / 100% 100% no-repeat !important;
}

.phone-shell.is-list-mode .screen-list {
  overflow: hidden !important;
}

.phone-shell.is-list-mode .screen-list > .system-status,
.phone-shell.is-list-mode .screen-list .list-nav,
.phone-shell.is-list-mode .screen-list .search-box {
  display: flex !important;
}

.phone-shell.is-list-mode .screen-list > .system-status {
  height: 44px !important;
  flex: 0 0 44px !important;
  padding: 15px 28px 0 !important;
  background: transparent !important;
  color: #172016 !important;
  border: 0 !important;
  z-index: 3 !important;
}

.phone-shell.is-list-mode .screen-list .list-nav {
  position: relative !important;
  height: 76px !important;
  flex: 0 0 76px !important;
  display: grid !important;
  grid-template-columns: 92px 1fr 112px !important;
  align-items: end !important;
  background: transparent !important;
  border: 0 !important;
  z-index: 3 !important;
}

.phone-shell.is-list-mode .screen-list .list-nav h1 {
  grid-column: 2 !important;
  margin: 0 !important;
  padding-bottom: 21px !important;
  color: #172016 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
}

.phone-shell.is-list-mode .screen-list .list-nav .nav-actions {
  grid-column: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 17px !important;
  padding: 0 24px 14px 0 !important;
}

.phone-shell.is-list-mode .screen-list .list-nav .nav-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 58%) !important;
  box-shadow: 0 8px 24px rgb(71 97 61 / 8%) !important;
}

.phone-shell.is-list-mode .screen-list .search-icon::before {
  left: 9px !important;
  top: 8px !important;
  width: 14px !important;
  height: 14px !important;
  border-width: 2px !important;
  border-color: #172016 !important;
}

.phone-shell.is-list-mode .screen-list .search-icon::after {
  left: 23px !important;
  top: 24px !important;
  width: 8px !important;
  height: 2px !important;
  background: #172016 !important;
}

.phone-shell.is-list-mode .screen-list .plus-icon::before {
  left: 10px !important;
  top: 18px !important;
  width: 18px !important;
  height: 2.5px !important;
  background: #172016 !important;
}

.phone-shell.is-list-mode .screen-list .plus-icon::after {
  left: 18px !important;
  top: 10px !important;
  width: 2.5px !important;
  height: 18px !important;
  background: #172016 !important;
}

.phone-shell.is-list-mode .screen-list .search-box {
  position: relative !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  margin: 0 28px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgb(225 231 222 / 78%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 72%) !important;
  color: #90978d !important;
  font-size: 17px !important;
  box-shadow: 0 12px 28px rgb(74 94 61 / 5%) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 3 !important;
}

.phone-shell.is-list-mode .screen-list .search-mini::before {
  border-color: #9aa296 !important;
}

.phone-shell.is-list-mode .screen-list .search-mini::after {
  background: #9aa296 !important;
}

.phone-shell.is-list-mode .screen-list .chat-list {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 190px !important;
  bottom: 104px !important;
  width: auto !important;
  flex: none !important;
  display: block !important;
  padding: 0 26px 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  z-index: 2 !important;
}

.phone-shell.is-list-mode .screen-list .chat-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.phone-shell.is-list-mode .screen-list .chat-row {
  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;
  max-width: none !important;
  margin: 0 0 13px !important;
  padding: 0 18px !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) 66px !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 1px solid rgb(230 235 227 / 74%) !important;
  border-radius: 26px !important;
  background: rgb(255 255 255 / 76%) !important;
  box-shadow: 0 14px 34px rgb(67 91 54 / 7%) !important;
  text-align: left !important;
  backdrop-filter: blur(10px) !important;
  opacity: 1 !important;
}

.phone-shell.is-list-mode .screen-list .chat-row::after {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .chat-row:active {
  transform: none !important;
  background: rgb(248 253 244 / 86%) !important;
}

.phone-shell.is-list-mode .screen-list .chat-row .avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 92%),
    0 6px 16px rgb(49 73 43 / 10%) !important;
}

.phone-shell.is-list-mode .screen-list .chat-main {
  min-width: 0 !important;
  align-self: center !important;
}

.phone-shell.is-list-mode .screen-list .chat-line {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.phone-shell.is-list-mode .screen-list .chat-name {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #151b14 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list .chat-preview {
  display: block !important;
  max-width: 100% !important;
  margin-top: 9px !important;
  overflow: hidden !important;
  color: #858d82 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list .chat-time {
  justify-self: end !important;
  align-self: start !important;
  padding-top: 29px !important;
  color: #9ba298 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list .chat-row.unread .avatar::after {
  right: -6px !important;
  top: -6px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #58b840 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .chat-list {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page::before {
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  top: 128px !important;
  height: 132px !important;
  border: 1px solid rgb(230 235 227 / 78%) !important;
  border-radius: 30px !important;
  background: rgb(255 255 255 / 72%) !important;
  box-shadow: 0 18px 44px rgb(67 91 54 / 8%) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page::after {
  content: "好友\\A群聊\\A角色\\A个人资料\\A设置\\A关于我们" !important;
  white-space: pre !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  top: 292px !important;
  padding: 6px 28px !important;
  border: 1px solid rgb(230 235 227 / 78%) !important;
  border-radius: 28px !important;
  background: rgb(255 255 255 / 72%) !important;
  color: #172016 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 64px !important;
  box-shadow: 0 18px 44px rgb(67 91 54 / 7%) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 1 !important;
}

.phone-shell.is-list-mode .screen-list .profile-edit-layer {
  z-index: 6 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .profile-edit-layer {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .profile-avatar-button {
  left: 54px !important;
  top: 158px !important;
  width: 78px !important;
  height: 78px !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 5px #ffffff,
    0 8px 22px rgb(58 82 55 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .profile-signature-button {
  left: 154px !important;
  top: 177px !important;
  width: 330px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #6f776c !important;
  font-size: 18px !important;
  line-height: 42px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar {
  position: absolute !important;
  left: 26px !important;
  right: 26px !important;
  bottom: 18px !important;
  width: auto !important;
  height: 78px !important;
  min-height: 78px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 8px 8px 6px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  overflow: visible !important;
  border: 1px solid rgb(229 235 225 / 82%) !important;
  border-radius: 27px !important;
  background: rgb(255 255 255 / 80%) !important;
  box-shadow: 0 18px 42px rgb(62 89 51 / 10%) !important;
  backdrop-filter: blur(14px) !important;
  z-index: 8 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tabbar-image,
.phone-shell.is-list-mode .screen-list .tabbar .tabbar-highlight,
.phone-shell.is-list-mode .screen-list .tabbar .tabbar-active-image {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 37px 18px !important;
  place-items: center !important;
  gap: 2px !important;
  opacity: 1 !important;
  color: #8e9490 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
  display: grid !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab.is-active {
  color: #42a82f !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab-glyph {
  width: 31px !important;
  height: 31px !important;
  display: block !important;
  position: relative !important;
  background: center center / contain no-repeat !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab-glyph::before,
.phone-shell.is-list-mode .screen-list .tabbar .tab-glyph::after {
  display: none !important;
  content: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-message-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1).is-active .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-message-green.png") !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(2) .tab-glyph,
.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-leaf-green.png") !important;
  filter: grayscale(1) opacity(0.56) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(2).is-active .tab-glyph,
.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3).is-active .tab-glyph {
  filter: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-me-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4).is-active .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-me-green.png") !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode,
  .phone-shell.is-list-mode .screen-list,
  .phone-shell.is-list-mode .screen-list.is-me-page {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    background-size: 100vw 100dvh !important;
    background-position: center top !important;
  }

  .phone-shell.is-list-mode .screen-list > .system-status {
    height: 40px !important;
    flex-basis: 40px !important;
    padding: 13px 20px 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav {
    height: 66px !important;
    flex-basis: 66px !important;
    grid-template-columns: 70px 1fr 92px !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav h1 {
    padding-bottom: 18px !important;
    font-size: clamp(20px, 5.1vw, 25px) !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav .nav-actions {
    gap: 12px !important;
    padding: 0 17px 12px 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .list-nav .nav-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .phone-shell.is-list-mode .screen-list .search-box {
    height: 43px !important;
    flex-basis: 43px !important;
    margin: 0 18px 18px !important;
    border-radius: 16px !important;
    font-size: clamp(14px, 3.55vw, 17px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-list {
    top: 167px !important;
    bottom: 91px !important;
    padding: 0 16px 16px !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row {
    height: 88px !important;
    min-height: 88px !important;
    margin-bottom: 10px !important;
    padding: 0 14px !important;
    grid-template-columns: 60px minmax(0, 1fr) 58px !important;
    border-radius: 22px !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-row .avatar {
    width: 49px !important;
    height: 49px !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-name {
    font-size: clamp(16px, 4.1vw, 20px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-preview {
    margin-top: 7px !important;
    font-size: clamp(12px, 3.25vw, 15px) !important;
  }

  .phone-shell.is-list-mode .screen-list .chat-time {
    padding-top: 25px !important;
    font-size: clamp(11px, 2.85vw, 13px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page::before {
    left: 18px !important;
    right: 18px !important;
    top: 118px !important;
    height: 118px !important;
    border-radius: 25px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page::after {
    left: 18px !important;
    right: 18px !important;
    top: 266px !important;
    padding: 4px 22px !important;
    border-radius: 24px !important;
    font-size: clamp(16px, 4vw, 19px) !important;
    line-height: 56px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .profile-avatar-button {
    left: 42px !important;
    top: 146px !important;
    width: 66px !important;
    height: 66px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .profile-signature-button {
    left: 124px !important;
    top: 162px !important;
    width: calc(100vw - 166px) !important;
    height: 38px !important;
    font-size: clamp(14px, 3.55vw, 18px) !important;
    line-height: 38px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar {
    left: 16px !important;
    right: 16px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 7px 7px 6px !important;
    border-radius: 24px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    grid-template-rows: 34px 17px !important;
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab-glyph {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Final tabbar correction: three fixed PNG icons, same positions on list and me pages. */
.phone-shell.is-list-mode .screen-list > .system-status {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar {
  position: absolute !important;
  left: 26px !important;
  right: 26px !important;
  bottom: 18px !important;
  width: auto !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  border: 1px solid rgb(228 234 225 / 86%) !important;
  border-radius: 27px !important;
  background: rgb(255 255 255 / 86%) !important;
  box-shadow: 0 18px 42px rgb(62 89 51 / 11%) !important;
  backdrop-filter: blur(14px) !important;
  z-index: 20 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tabbar-image,
.phone-shell.is-list-mode .screen-list .tabbar .tabbar-highlight,
.phone-shell.is-list-mode .screen-list .tabbar .tabbar-active-image {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab {
  position: absolute !important;
  top: 0 !important;
  width: 58px !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 0 !important;
  display: block !important;
  opacity: 1 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  z-index: 2 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) {
  left: 30px !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(2) {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
  display: block !important;
  right: 30px !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab span:not(.tab-glyph) {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab-glyph {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 31px !important;
  height: 31px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab-glyph::before,
.phone-shell.is-list-mode .screen-list .tabbar .tab-glyph::after {
  display: none !important;
  content: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .tabbar .tab:nth-of-type(1) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-message-green.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .tabbar .tab:nth-of-type(1) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-message-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-leaf-green.png") !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .tabbar .tab:nth-of-type(4) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-me-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .tabbar .tab:nth-of-type(4) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-me-green.png") !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .tabbar {
    left: 16px !important;
    right: 16px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    height: 72px !important;
    min-height: 72px !important;
    border-radius: 24px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    width: 54px !important;
    height: 72px !important;
    min-height: 72px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) {
    left: 22px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
    right: 22px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab-glyph {
    width: 29px !important;
    height: 29px !important;
  }
}

/* Final final tabbar alignment: 3 PNG icons at equal centers, leaf always green. */
.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) {
  left: 16.6667% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
  left: 83.3333% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) .tab-glyph,
.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3).is-active .tab-glyph,
.phone-shell.is-list-mode .screen-list.is-me-page .tabbar .tab:nth-of-type(3) .tab-glyph {
  background-image: url("./assets/icons/tabbar/tab-leaf-green.png") !important;
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) {
    left: 16.6667% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
    left: 83.3333% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Match the reference tabbar spacing and remove the gap above the tabbar. */
.phone-shell.is-list-mode .screen-list .chat-list {
  bottom: 96px !important;
  padding-bottom: 0 !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) {
  left: 22% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
  left: 78% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .chat-list {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px) !important;
    padding-bottom: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(1) {
    left: 22% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(3) {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab:nth-of-type(4) {
    left: 78% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Character home page redesign. Bottom tabbar intentionally left untouched. */
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .list-nav {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .list-add-person-button {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .home-hero,
.phone-shell.is-list-mode .screen-list.is-me-page .today-plot-card {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-hero {
  position: absolute !important;
  left: 44px !important;
  right: 44px !important;
  top: 42px !important;
  height: 96px !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) 58px !important;
  align-items: center !important;
  gap: 18px !important;
  z-index: 6 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-avatar-ring {
  width: 74px !important;
  height: 74px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 5px #ffffff,
    0 8px 24px rgb(73 95 61 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-profile-copy {
  min-width: 0 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-name-line {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-name-line strong {
  color: #151b14 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-name-line span {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ffd966, #ffb84d) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-profile-copy p {
  margin: 12px 0 0 !important;
  overflow: hidden !important;
  color: #757d75 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background:
    rgb(255 255 255 / 88%) url("./assets/icons/ui/home-plus-green.png") center center / 27px 27px no-repeat !important;
  box-shadow: 0 12px 30px rgb(75 100 62 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-box {
  position: absolute !important;
  left: 36px !important;
  right: 36px !important;
  top: 166px !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow: 0 14px 36px rgb(70 91 57 / 7%) !important;
  backdrop-filter: blur(14px) !important;
  z-index: 5 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-box > span:not(.search-mini):not(.search-placeholder) {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-placeholder {
  display: inline !important;
  color: #9aa29a !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-mini {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  background: url("./assets/icons/ui/home-search-green.png") center center / contain no-repeat !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-mini::before,
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-mini::after {
  display: none !important;
  content: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card {
  position: absolute !important;
  left: 36px !important;
  right: 36px !important;
  top: 258px !important;
  height: 76px !important;
  padding: 0 18px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 82px !important;
  align-items: center !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 80%) !important;
  box-shadow: 0 12px 34px rgb(70 91 57 / 7%) !important;
  text-align: left !important;
  z-index: 5 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-gift {
  width: 43px !important;
  height: 43px !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 50% 30%, #ffd972 0 8px, transparent 9px),
    linear-gradient(90deg, transparent 43%, #ffd972 44% 56%, transparent 57%),
    linear-gradient(#ffb84c, #ffcf62) !important;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 42%) !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy strong {
  color: #69b94a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy span {
  overflow: hidden !important;
  color: #53604f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-action {
  justify-self: end !important;
  min-width: 72px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #59b640 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card i {
  position: absolute !important;
  right: 18px !important;
  top: -5px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ff4f6d !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
  top: 358px !important;
  bottom: 96px !important;
  padding: 0 12px 0 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card {
  height: 108px !important;
  min-height: 108px !important;
  margin-bottom: 12px !important;
  padding: 0 18px !important;
  grid-template-columns: 66px minmax(0, 1fr) 34px 62px !important;
  border-radius: 18px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .avatar {
  width: 58px !important;
  height: 58px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-name {
  font-size: 18px !important;
  font-weight: 800 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 18px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #e9f6df !important;
  color: #63b645 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status i {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
  background: url("./assets/icons/status/status-online-green.png") center center / contain no-repeat !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags {
  display: flex !important;
  gap: 8px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags span {
  height: 22px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 7px !important;
  background: #eaf6df !important;
  color: #5ca743 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-preview {
  margin-top: 8px !important;
  color: #4d554c !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-heart {
  align-self: start !important;
  justify-self: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 28px !important;
  background: url("./assets/icons/me/affinity-heart-pink.png") center center / contain no-repeat !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-affinity {
  align-self: center !important;
  justify-self: end !important;
  color: #b4aeb7 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  text-align: right !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-affinity strong {
  color: #ff6f9b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-hero {
    left: 24px !important;
    right: 24px !important;
    top: 24px !important;
    height: 82px !important;
    grid-template-columns: 60px minmax(0, 1fr) 46px !important;
    gap: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-avatar-ring {
    width: 58px !important;
    height: 58px !important;
    box-shadow:
      0 0 0 4px #ffffff,
      0 7px 18px rgb(73 95 61 / 12%) !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-name-line strong {
    font-size: 19px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-profile-copy p {
    margin-top: 9px !important;
    font-size: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
    width: 43px !important;
    height: 43px !important;
    background-size: 22px 22px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-box {
    left: 18px !important;
    right: 18px !important;
    top: 128px !important;
    height: 52px !important;
    padding: 0 22px !important;
    border-radius: 24px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-placeholder {
    font-size: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-mini {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card {
    left: 18px !important;
    right: 18px !important;
    top: 198px !important;
    height: 64px !important;
    grid-template-columns: 44px minmax(0, 1fr) 68px !important;
    gap: 10px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-gift {
    width: 36px !important;
    height: 36px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy strong,
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy span,
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-action {
    font-size: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-action {
    min-width: 58px !important;
    height: 28px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
    top: 284px !important;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px) !important;
    padding: 0 8px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card {
    height: 96px !important;
    min-height: 96px !important;
    margin-bottom: 10px !important;
    padding: 0 12px !important;
    grid-template-columns: 56px minmax(0, 1fr) 24px 48px !important;
    border-radius: 16px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-name {
    font-size: 16px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status {
    height: 17px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags span {
    height: 19px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-preview {
    margin-top: 6px !important;
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-heart {
    width: 15px !important;
    height: 15px !important;
    margin-top: 25px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-affinity {
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-affinity strong {
    font-size: 13px !important;
  }
}

/* Home icon size tweaks: keep PNG aspect ratio, only enlarge the rendered image boxes. */
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
  background:
    rgb(255 255 255 / 88%) url("./assets/icons/ui/home-plus-green.png") center center / 36px auto no-repeat !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-mini {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  background: url("./assets/icons/ui/home-search-green.png") center center / contain no-repeat !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card {
  top: 242px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
    background:
      rgb(255 255 255 / 88%) url("./assets/icons/ui/home-plus-green.png") center center / 30px auto no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-mini {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card {
    top: 188px !important;
  }
}

/* Home micro-alignment: keep provided PNGs, tighten plot/list gap, align search text. */
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
  background-image: url("./assets/icons/ui/home-plus-green.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 32px auto !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-placeholder {
  position: relative !important;
  top: -2px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
  top: 342px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
    background-image: url("./assets/icons/ui/home-plus-green.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 26px auto !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-placeholder {
    top: -2px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
    top: 272px !important;
  }
}

/* Final home polish: larger provided plus PNG, vertical affinity block. */
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
  width: 54px !important;
  height: 54px !important;
  background-image: url("./assets/icons/ui/home-plus-green.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 42px auto !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card {
  grid-template-columns: 66px minmax(0, 1fr) 72px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-heart {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 20px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-affinity {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: center !important;
  margin-top: 47px !important;
  width: 64px !important;
  text-align: center !important;
  line-height: 1.32 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
    width: 43px !important;
    height: 43px !important;
    background-size: 36px auto !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card {
    grid-template-columns: 56px minmax(0, 1fr) 52px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-heart {
    width: 15px !important;
    height: 15px !important;
    margin-top: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-affinity {
    margin-top: 40px !important;
    width: 48px !important;
    line-height: 1.28 !important;
  }
}

/* Move home search, plot card and first character card upward together. */
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-box {
  top: 148px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card {
  top: 220px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
  top: 320px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-box {
    top: 114px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card {
    top: 174px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
    top: 254px !important;
  }
}

/* Step 4 profile card redesign. */
.add-person-step-four {
  top: 13.1% !important;
  bottom: 5.1% !important;
  padding-bottom: 66px !important;
}

.add-person-step-four > h2 {
  margin-top: 0 !important;
  font-size: 27px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.add-person-step-four > p {
  margin-top: 14px !important;
  color: #6f766d !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

.profile-info-card {
  box-sizing: border-box !important;
  margin-top: 30px !important;
  padding: 28px 28px 30px !important;
  border: 1px solid rgb(221 228 216 / 76%) !important;
  border-radius: 25px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: 0 18px 44px rgb(62 82 55 / 8%) !important;
}

.profile-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #111911 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.profile-card-bar {
  width: 7px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: url("./assets/icons/profile/profile-icon-bar.png") center / contain no-repeat !important;
}

.profile-avatar-uploader {
  width: 232px !important;
  height: 232px !important;
  margin: 28px auto 18px !important;
}

.profile-avatar-ring {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 9px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow:
    0 0 0 1px rgb(216 232 209 / 78%),
    0 18px 42px rgb(84 125 67 / 13%) !important;
}

.profile-avatar-preview {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 42%, rgb(225 243 217 / 88%) 0 19%, transparent 20%),
    linear-gradient(180deg, rgb(249 253 247 / 96%), rgb(238 249 233 / 86%)) !important;
  box-shadow: none !important;
}

.profile-avatar-preview.has-image {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.profile-avatar-camera {
  right: 4px !important;
  bottom: 30px !important;
  z-index: 3 !important;
  width: 58px !important;
  height: 58px !important;
  border: 2px solid rgb(90 173 66 / 72%) !important;
  background:
    #fff url("./assets/icons/profile/profile-camera-green.png") center / 33px 33px no-repeat !important;
  box-shadow: 0 12px 28px rgb(64 121 45 / 18%) !important;
}

.profile-avatar-camera::before,
.profile-avatar-camera::after {
  content: none !important;
}

.profile-avatar-hint {
  margin: 0 0 24px !important;
  color: #8d948b !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

.profile-info-row {
  display: grid !important;
  grid-template-columns: 168px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 18px 0 !important;
  border-top: 1px solid rgb(223 227 220 / 88%) !important;
}

.profile-intro-row {
  align-items: start !important;
}

.profile-row-head {
  display: inline-flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-width: 0 !important;
}

.profile-row-icon {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.profile-row-icon-name {
  background-image: url("./assets/icons/profile/profile-icon-name.png") !important;
}

.profile-row-icon-gender {
  background-image: url("./assets/icons/profile/profile-icon-gender.png") !important;
}

.profile-row-icon-intro {
  background-image: url("./assets/icons/profile/profile-icon-intro.png") !important;
}

.profile-field-label {
  margin: 0 !important;
  color: #141c13 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.profile-input-wrap input,
.profile-textarea-wrap textarea {
  border: 1px solid rgb(216 220 213 / 92%) !important;
  border-radius: 16px !important;
  background: rgb(255 255 255 / 82%) !important;
  color: #151d14 !important;
  box-shadow: 0 10px 24px rgb(69 84 60 / 4%) !important;
}

.profile-input-wrap input {
  height: 52px !important;
  padding: 0 66px 0 20px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.profile-input-wrap span,
.profile-textarea-wrap span {
  color: #777f74 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.profile-gender-list {
  gap: 24px !important;
}

.profile-gender {
  height: 58px !important;
  gap: 18px !important;
  border: 1px solid rgb(221 225 219 / 94%) !important;
  border-radius: 17px !important;
  background: rgb(255 255 255 / 76%) !important;
  color: #1d251b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.profile-gender-icon {
  width: 27px !important;
  height: 27px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.profile-gender-icon-female {
  background-image: url("./assets/icons/profile/profile-icon-female.png") !important;
}

.profile-gender-icon-male {
  background-image: url("./assets/icons/profile/profile-icon-male.png") !important;
}

.profile-gender span {
  font-size: 0 !important;
}

.profile-gender.is-selected {
  padding-right: 38px !important;
  border-color: rgb(82 176 64 / 76%) !important;
  background: rgb(247 253 244 / 78%) !important;
}

.profile-gender.is-selected::after {
  right: 17px !important;
  width: 23px !important;
  height: 23px !important;
}

.profile-gender.is-selected::before {
  right: 24px !important;
  width: 8px !important;
  height: 5px !important;
}

.profile-textarea-wrap textarea {
  height: 190px !important;
  padding: 20px 20px 34px !important;
  font-size: 18px !important;
  line-height: 1.72 !important;
  font-weight: 500 !important;
}

.profile-ai-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-left: 186px !important;
  margin-top: 18px !important;
}

.profile-ai-intro-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  height: 58px !important;
  padding: 0 22px !important;
  border: 1.5px solid rgb(84 174 63 / 42%) !important;
  border-radius: 15px !important;
  background: rgb(255 255 255 / 72%) !important;
  color: #3c9b2d !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.profile-action-icon {
  width: 24px !important;
  height: 24px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.profile-action-icon-generate {
  background-image: url("./assets/icons/profile/profile-icon-generate.png") !important;
}

.profile-action-icon-refresh {
  background-image: url("./assets/icons/profile/profile-icon-refresh.png") !important;
}

.profile-ai-tip {
  position: relative !important;
  margin: 22px 0 0 186px !important;
  padding-left: 28px !important;
  color: #8b9388 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.profile-ai-tip::before {
  content: "💡" !important;
  position: absolute !important;
  left: 0 !important;
  top: -1px !important;
  font-size: 17px !important;
}

@media (max-width: 580px) {
  .add-person-step-four {
    top: 13.2% !important;
    padding-bottom: 62px !important;
  }

  .add-person-step-four > h2 {
    font-size: clamp(23px, 6.2vw, 29px) !important;
  }

  .add-person-step-four > p {
    margin-top: 10px !important;
    font-size: clamp(15px, 4vw, 18px) !important;
  }

  .profile-info-card {
    margin-top: 22px !important;
    padding: 22px 20px 24px !important;
    border-radius: 21px !important;
  }

  .profile-card-title {
    gap: 11px !important;
    font-size: clamp(18px, 4.7vw, 22px) !important;
  }

  .profile-card-bar {
    width: 6px !important;
    height: 24px !important;
  }

  .profile-avatar-uploader {
    width: clamp(170px, 45vw, 220px) !important;
    height: clamp(170px, 45vw, 220px) !important;
    margin: 22px auto 14px !important;
  }

  .profile-avatar-ring {
    padding: 8px !important;
  }

  .profile-avatar-camera {
    right: 0 !important;
    bottom: 26px !important;
    width: clamp(46px, 11.5vw, 58px) !important;
    height: clamp(46px, 11.5vw, 58px) !important;
    background-size: clamp(26px, 6.8vw, 33px) clamp(26px, 6.8vw, 33px) !important;
  }

  .profile-avatar-hint {
    margin-bottom: 20px !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
  }

  .profile-info-row {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 15px 0 !important;
  }

  .profile-row-head {
    gap: 9px !important;
  }

  .profile-row-icon {
    width: clamp(20px, 5.3vw, 26px) !important;
    height: clamp(20px, 5.3vw, 26px) !important;
  }

  .profile-field-label {
    font-size: clamp(16px, 4.2vw, 19px) !important;
  }

  .profile-input-wrap input {
    height: 44px !important;
    padding-left: 14px !important;
    padding-right: 52px !important;
    border-radius: 13px !important;
    font-size: clamp(14px, 3.7vw, 18px) !important;
  }

  .profile-input-wrap span,
  .profile-textarea-wrap span {
    font-size: 12px !important;
  }

  .profile-gender-list {
    gap: 11px !important;
  }

  .profile-gender {
    height: 44px !important;
    gap: 10px !important;
    border-radius: 13px !important;
    font-size: clamp(14px, 3.8vw, 18px) !important;
  }

  .profile-gender-icon {
    width: clamp(19px, 5vw, 27px) !important;
    height: clamp(19px, 5vw, 27px) !important;
  }

  .profile-gender.is-selected {
    padding-right: 28px !important;
  }

  .profile-gender.is-selected::after {
    right: 9px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .profile-gender.is-selected::before {
    right: 14px !important;
  }

  .profile-textarea-wrap textarea {
    height: 148px !important;
    padding: 14px 14px 30px !important;
    border-radius: 14px !important;
    font-size: clamp(13px, 3.5vw, 17px) !important;
    line-height: 1.62 !important;
  }

  .profile-ai-actions {
    gap: 12px !important;
    margin-left: 96px !important;
    margin-top: 14px !important;
  }

  .profile-ai-intro-button {
    height: 46px !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: clamp(13px, 3.55vw, 18px) !important;
  }

  .profile-action-icon {
    width: clamp(18px, 4.8vw, 24px) !important;
    height: clamp(18px, 4.8vw, 24px) !important;
  }

  .profile-ai-tip {
    margin-left: 96px !important;
    margin-top: 16px !important;
    padding-left: 22px !important;
    font-size: clamp(11px, 3.1vw, 15px) !important;
  }
}

/* Step 4 fine tuning: larger icons, tighter rows, intro below the label. */
.add-person-step-four {
  padding-bottom: 92px !important;
}

.add-person-step-four .add-person-step-four-next {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 6 !important;
}

.profile-info-card {
  margin-bottom: 8px !important;
}

.profile-card-bar {
  width: 10px !important;
  height: 34px !important;
}

.profile-row-icon {
  width: 34px !important;
  height: 34px !important;
}

.profile-gender-icon {
  width: 34px !important;
  height: 34px !important;
}

.profile-action-icon {
  width: 32px !important;
  height: 32px !important;
}

.profile-avatar-camera {
  width: 64px !important;
  height: 64px !important;
  background-size: 38px 38px !important;
}

.profile-info-row {
  grid-template-columns: 130px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.profile-name-row .profile-input-wrap,
.profile-gender-row .profile-gender-list {
  margin-left: -6px !important;
}

.profile-gender-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.profile-gender {
  min-width: 0 !important;
}

.profile-intro-row {
  display: block !important;
}

.profile-intro-row .profile-row-head {
  display: inline-flex !important;
  margin-bottom: 14px !important;
}

.profile-intro-row .profile-textarea-wrap {
  display: block !important;
  width: 100% !important;
}

.profile-ai-actions {
  margin-left: 0 !important;
  margin-top: 18px !important;
}

.profile-ai-tip {
  margin-left: 0 !important;
}

@media (max-width: 580px) {
  .add-person-step-four {
    padding-bottom: 88px !important;
  }

  .profile-info-card {
    padding-bottom: 22px !important;
  }

  .profile-card-bar {
    width: 8px !important;
    height: 29px !important;
  }

  .profile-row-icon {
    width: clamp(25px, 6.5vw, 34px) !important;
    height: clamp(25px, 6.5vw, 34px) !important;
  }

  .profile-gender-icon {
    width: clamp(25px, 6.5vw, 34px) !important;
    height: clamp(25px, 6.5vw, 34px) !important;
  }

  .profile-action-icon {
    width: clamp(23px, 6vw, 32px) !important;
    height: clamp(23px, 6vw, 32px) !important;
  }

  .profile-avatar-camera {
    width: clamp(52px, 13vw, 64px) !important;
    height: clamp(52px, 13vw, 64px) !important;
    background-size: clamp(30px, 7.6vw, 38px) clamp(30px, 7.6vw, 38px) !important;
  }

  .profile-info-row {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .profile-name-row .profile-input-wrap,
  .profile-gender-row .profile-gender-list {
    margin-left: -4px !important;
  }

  .profile-gender {
    height: 48px !important;
  }

  .profile-intro-row {
    display: block !important;
  }

  .profile-intro-row .profile-row-head {
    margin-bottom: 12px !important;
  }

  .profile-textarea-wrap textarea {
    width: 100% !important;
    height: 160px !important;
  }

  .profile-ai-actions {
    margin-left: 0 !important;
    gap: 14px !important;
  }

  .profile-ai-tip {
    margin-left: 0 !important;
    padding-left: 23px !important;
  }
}

/* Step 4 button alignment: keep the button outside the scrollable card content. */
.add-person-step-four {
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.add-person-step-four-scroll {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 72px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 18px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.add-person-step-four-scroll::-webkit-scrollbar {
  display: none !important;
}

.add-person-step-four-scroll > h2 {
  margin: 0 !important;
  color: #111711 !important;
  font-size: 27px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.add-person-step-four-scroll > p {
  margin: 14px 0 0 !important;
  color: #6f766d !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}

.add-person-step-four .add-person-step-four-next {
  bottom: 0 !important;
}

.add-person-step-four .profile-info-card {
  margin-bottom: 0 !important;
}

@media (max-width: 580px) {
  .add-person-step-four-scroll {
    bottom: 64px !important;
    padding-bottom: 18px !important;
  }

  .add-person-step-four-scroll > h2 {
    font-size: clamp(23px, 6.2vw, 29px) !important;
  }

  .add-person-step-four-scroll > p {
    margin-top: 10px !important;
    font-size: clamp(15px, 4vw, 18px) !important;
  }
}

/* Step 5 story style additions. */
.meet-scene-random::after,
.opening-story-refresh::before {
  background: url("./assets/icons/profile/profile-icon-refresh.png") center / contain no-repeat !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.meet-scene-random::after {
  width: 15px !important;
  height: 15px !important;
}

.opening-story-refresh::before {
  width: 18px !important;
  height: 18px !important;
}

.story-style-section {
  margin-top: 28px !important;
}

.story-style-section h3 {
  margin: 0 0 14px !important;
  color: #1c241a !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.story-style-section h3 span {
  color: #4b5548 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.story-style-tags {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.story-style-tag {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: 0 10px 22px rgb(68 82 60 / 5%) !important;
  color: #2d352b !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.story-style-tag.is-selected {
  padding-right: 30px !important;
  border-color: rgb(84 174 63 / 26%) !important;
  background: rgb(235 249 228 / 88%) !important;
  color: #2f9326 !important;
}

.story-style-tag.is-selected::after {
  content: "" !important;
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #55a83e !important;
  transform: translateY(-50%) !important;
}

.story-style-tag.is-selected::before {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  z-index: 1 !important;
  width: 7px !important;
  height: 4px !important;
  border-left: 1.8px solid #fff !important;
  border-bottom: 1.8px solid #fff !important;
  transform: translateY(-62%) rotate(-45deg) !important;
}

@media (max-width: 580px) {
  .story-style-section {
    margin-top: 22px !important;
  }

  .story-style-section h3 {
    margin-bottom: 12px !important;
    font-size: clamp(15px, 3.9vw, 18px) !important;
  }

  .story-style-section h3 span {
    font-size: clamp(12px, 3.2vw, 15px) !important;
  }

  .story-style-tags {
    gap: 9px !important;
  }

  .story-style-tag {
    height: 36px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: clamp(12px, 3.15vw, 15px) !important;
  }

  .story-style-tag.is-selected {
    padding-right: 25px !important;
  }

  .story-style-tag.is-selected::after {
    right: 7px !important;
    width: 15px !important;
    height: 15px !important;
  }

  .story-style-tag.is-selected::before {
    right: 11px !important;
  }
}

/* Step 5 size tuning: larger scene controls and more story styles. */
.add-person-step-five {
  overflow-y: auto !important;
  padding-bottom: 76px !important;
  scrollbar-width: none !important;
}

.add-person-step-five::-webkit-scrollbar {
  display: none !important;
}

.meet-scene-input-wrap {
  margin-top: 26px !important;
}

.meet-scene-input-wrap input {
  height: 66px !important;
  padding: 0 134px 0 22px !important;
  border-radius: 13px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.meet-scene-input-wrap > span {
  right: 18px !important;
  top: 13px !important;
  font-size: 15px !important;
}

.meet-scene-random {
  right: 17px !important;
  bottom: 12px !important;
  gap: 7px !important;
  height: 22px !important;
  color: #7d867b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.meet-scene-random::after {
  width: 19px !important;
  height: 19px !important;
}

.opening-story-refresh {
  gap: 9px !important;
  height: 32px !important;
  font-size: 16px !important;
}

.opening-story-refresh::before {
  width: 23px !important;
  height: 23px !important;
}

.story-style-tags {
  gap: 12px 13px !important;
}

.story-style-tag {
  height: 42px !important;
  font-size: 15px !important;
}

.story-style-tag-custom {
  color: #5f6a5a !important;
}

@media (max-width: 580px) {
  .add-person-step-five {
    padding-bottom: 70px !important;
  }

  .meet-scene-input-wrap {
    margin-top: 22px !important;
  }

  .meet-scene-input-wrap input {
    height: 58px !important;
    padding-left: 18px !important;
    padding-right: 118px !important;
    border-radius: 11px !important;
    font-size: clamp(15px, 4vw, 18px) !important;
  }

  .meet-scene-input-wrap > span {
    right: 14px !important;
    top: 11px !important;
    font-size: 13px !important;
  }

  .meet-scene-random {
    right: 13px !important;
    bottom: 10px !important;
    gap: 6px !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }

  .meet-scene-random::after {
    width: 17px !important;
    height: 17px !important;
  }

  .opening-story-refresh {
    gap: 7px !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
  }

  .opening-story-refresh::before {
    width: 20px !important;
    height: 20px !important;
  }

  .story-style-tags {
    gap: 9px !important;
  }

  .story-style-tag {
    height: 37px !important;
    font-size: clamp(12px, 3.15vw, 15px) !important;
  }
}

/* Home character state display: only the content area to the right of avatars. */
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-main {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  min-width: 0 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-line {
  display: block !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-name {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  height: 25px !important;
  margin-top: 8px !important;
  padding: 0 12px 0 10px !important;
  border-radius: 999px !important;
  background: rgb(232 247 225 / 92%) !important;
  color: #43a13a !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status i {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  background: var(--status-icon) center / contain no-repeat !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="pink"] {
  background: rgb(255 231 239 / 92%) !important;
  color: #f25589 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="purple"] {
  background: rgb(239 231 255 / 92%) !important;
  color: #8a63e8 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="blue"] {
  background: rgb(231 241 255 / 92%) !important;
  color: #5793df !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="orange"] {
  background: rgb(255 240 224 / 92%) !important;
  color: #ee8a2e !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-preview {
  display: block !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  color: #697066 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags {
  display: flex !important;
  gap: 7px !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags span {
  height: 21px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #edf0ee !important;
  color: #7a8278 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags span:first-child {
  background: #e9f6df !important;
  color: #5ca743 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status {
    gap: 5px !important;
    height: 22px !important;
    margin-top: 6px !important;
    padding: 0 10px 0 8px !important;
    font-size: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status i {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-preview {
    margin-top: 6px !important;
    font-size: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags {
    gap: 5px !important;
    margin-top: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-tags span {
    height: 18px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}

/* Step 6 final review page. */
.add-person-step-six {
  position: absolute !important;
  left: 5.8% !important;
  right: 5.8% !important;
  top: 13.8% !important;
  bottom: 3.4% !important;
  color: #111711 !important;
}

.add-person-step-six[hidden] {
  display: none !important;
}

.review-scroll {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 92px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 0 16px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.review-scroll::-webkit-scrollbar {
  display: none !important;
}

.review-card {
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 0 15px !important;
  padding: 24px 58px 24px 30px !important;
  border-radius: 19px !important;
  background: rgb(255 255 255 / 90%) !important;
  box-shadow: 0 15px 36px rgb(72 88 64 / 9%) !important;
}

.review-card-arrow {
  position: absolute !important;
  right: 25px !important;
  top: 50% !important;
  width: 15px !important;
  height: 15px !important;
  border-right: 3px solid #b8bdb5 !important;
  border-top: 3px solid #b8bdb5 !important;
  border-radius: 1px !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

.review-hero-card {
  min-height: 132px !important;
  align-items: center !important;
}

.review-avatar-ring {
  display: grid !important;
  place-items: center !important;
  width: 92px !important;
  height: 92px !important;
  flex: 0 0 92px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 5px #fff, 0 10px 24px rgb(63 87 55 / 13%) !important;
}

.review-avatar {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  background: url("./assets/avatars/legacy/erciyuan.png") center / cover no-repeat !important;
}

.review-hero-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.review-name-line {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.review-name-line strong {
  display: block !important;
  max-width: 58% !important;
  overflow: hidden !important;
  color: #090e08 !important;
  font-size: 28px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.review-gender-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 50% !important;
  background: rgb(255 226 235 / 92%) url("./assets/icons/ui/ui-female.png") center / 23px 23px no-repeat !important;
}

.review-gender-icon[data-gender="male"] {
  background-image: url("./assets/icons/ui/ui-male.png") !important;
  background-color: rgb(228 242 255 / 92%) !important;
}

.review-name-edit {
  width: 35px !important;
  height: 35px !important;
  flex: 0 0 35px !important;
  border: 0 !important;
  background: url("./assets/icons/ui/ui-pencil-green.png") center / contain no-repeat !important;
  cursor: pointer !important;
}

.review-hero-tags,
.review-status-chips,
.review-personality-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.review-hero-tags {
  margin-top: 20px !important;
}

.review-hero-tags span,
.review-personality-tags span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  border-radius: 13px !important;
  background: rgb(232 247 225 / 94%) !important;
  color: #238d21 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.review-hero-tags span + span {
  background: rgb(255 232 236 / 95%) !important;
  color: #f05b72 !important;
}

.review-section-icon {
  width: 45px !important;
  height: 45px !important;
  flex: 0 0 45px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.review-icon-heart {
  background-image: url("./assets/icons/ui/ui-heart-pink.png") !important;
}

.review-icon-status {
  background-image: url("./assets/icons/ui/ui-my-green.png") !important;
}

.review-icon-tags {
  background-image: url("./assets/icons/ui/ui-tag-green.png") !important;
}

.review-icon-intro {
  background-image: url("./assets/icons/ui/ui-book-green.png") !important;
}

.review-icon-opening {
  background-image: url("./assets/icons/ui/ui-generate-green.png") !important;
}

.review-section-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.review-section-main h3 {
  margin: 0 !important;
  color: #151b14 !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

.review-section-main p {
  margin: 18px 0 0 !important;
  color: #3f453d !important;
  font-size: 18px !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
}

.review-affinity-card .review-section-main p {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px 32px !important;
  align-items: baseline !important;
  font-size: 18px !important;
}

.review-affinity-card strong {
  color: #3f453d !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

.review-affinity-card em {
  color: #ff456c !important;
  font-size: 22px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.review-status-card {
  cursor: pointer !important;
}

.review-status-chips {
  margin-top: 18px !important;
}

.review-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgb(255 232 240 / 94%) !important;
  color: #ff4b78 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.review-status-pill span {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  background: var(--status-icon) center / contain no-repeat !important;
}

.review-status-pill strong {
  font: inherit !important;
}

.review-status-pill-soft {
  background: rgb(231 244 255 / 94%) !important;
  color: #3296e9 !important;
}

.review-status-pill-gold {
  background: rgb(255 247 224 / 94%) !important;
  color: #f5a716 !important;
}

.review-status-library {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: -3px 0 15px !important;
  padding: 16px !important;
  border-radius: 19px !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: inset 0 0 0 1px rgb(230 235 226 / 80%), 0 12px 28px rgb(72 88 64 / 7%) !important;
}

.review-status-library[hidden] {
  display: none !important;
}

.review-status-option {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  background: rgb(247 250 245 / 90%) !important;
  cursor: pointer !important;
  text-align: left !important;
}

.review-status-option.is-selected {
  border-color: rgb(71 164 52 / 34%) !important;
  background: rgb(235 249 228 / 95%) !important;
}

.review-status-option-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  background: var(--status-icon) center / contain no-repeat !important;
}

.review-status-option-copy {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.review-status-option-copy strong {
  overflow: hidden !important;
  color: #141a13 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.review-status-option-copy em {
  overflow: hidden !important;
  color: #70806b !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-style: normal !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.review-tags-card .review-section-main h3,
.review-intro-card .review-section-main h3,
.review-opening-card .review-section-main h3 {
  margin-bottom: 18px !important;
}

.review-personality-tags span {
  min-height: 32px !important;
  padding: 0 16px !important;
  font-size: 17px !important;
}

.review-intro-card,
.review-opening-card {
  align-items: flex-start !important;
  cursor: pointer !important;
}

.review-intro-card .review-card-arrow,
.review-opening-card .review-card-arrow {
  top: 58% !important;
}

.review-intro-card p,
.review-opening-card p {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.review-create-button {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  height: 66px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #55af3e, #2e9428) !important;
  box-shadow: 0 16px 28px rgb(52 137 39 / 24%) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.review-create-button span {
  width: 34px !important;
  height: 34px !important;
  background: url("./assets/icons/ui/ui-generate-green.png") center / contain no-repeat !important;
  filter: brightness(0) invert(1) !important;
}

.review-create-tip {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  color: #9b9f99 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.review-create-tip::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 16px !important;
  margin-right: 9px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(#9b9f99 0 0) center 58% / 9px 7px no-repeat,
    radial-gradient(circle at 50% 22%, transparent 0 6px, #9b9f99 6.5px 8px, transparent 8.5px) !important;
  vertical-align: -2px !important;
}

@media (max-width: 580px) {
  .add-person-step-six {
    top: 13.2% !important;
    bottom: 3.2% !important;
  }

  .review-scroll {
    bottom: 78px !important;
  }

  .review-card {
    gap: 13px !important;
    margin-bottom: 11px !important;
    padding: 18px 42px 18px 18px !important;
    border-radius: 16px !important;
  }

  .review-hero-card {
    min-height: 108px !important;
  }

  .review-avatar-ring {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
    box-shadow: 0 0 0 4px #fff, 0 9px 20px rgb(63 87 55 / 12%) !important;
  }

  .review-avatar {
    width: 64px !important;
    height: 64px !important;
  }

  .review-name-line {
    gap: 9px !important;
  }

  .review-name-line strong {
    max-width: 56% !important;
    font-size: clamp(21px, 5.6vw, 28px) !important;
  }

  .review-gender-icon {
    width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
    background-size: 18px 18px !important;
  }

  .review-name-edit {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }

  .review-hero-tags {
    gap: 8px !important;
    margin-top: 13px !important;
  }

  .review-hero-tags span,
  .review-personality-tags span {
    min-height: 26px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: clamp(13px, 3.45vw, 17px) !important;
  }

  .review-section-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .review-section-main h3 {
    font-size: clamp(17px, 4.5vw, 21px) !important;
  }

  .review-section-main p {
    margin-top: 12px !important;
    font-size: clamp(14px, 3.65vw, 18px) !important;
    line-height: 1.48 !important;
  }

  .review-affinity-card .review-section-main p {
    gap: 8px 18px !important;
  }

  .review-affinity-card strong,
  .review-affinity-card em {
    font-size: clamp(17px, 4.5vw, 22px) !important;
  }

  .review-status-chips {
    gap: 7px !important;
    margin-top: 13px !important;
  }

  .review-status-pill {
    gap: 5px !important;
    min-height: 27px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: clamp(12px, 3.3vw, 16px) !important;
  }

  .review-status-pill span {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }

  .review-status-library {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-bottom: 11px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .review-status-option {
    min-height: 54px !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
  }

  .review-status-option-icon {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .review-status-option-copy strong {
    font-size: 14px !important;
  }

  .review-status-option-copy em {
    font-size: 12px !important;
  }

  .review-card-arrow {
    right: 19px !important;
    width: 11px !important;
    height: 11px !important;
    border-width: 2.5px !important;
  }

  .review-tags-card .review-section-main h3,
  .review-intro-card .review-section-main h3,
  .review-opening-card .review-section-main h3 {
    margin-bottom: 12px !important;
  }

  .review-create-button {
    bottom: 29px !important;
    gap: 11px !important;
    height: 52px !important;
    border-radius: 14px !important;
    font-size: clamp(22px, 5.7vw, 28px) !important;
  }

  .review-create-button span {
    width: 25px !important;
    height: 25px !important;
  }

  .review-create-tip {
    font-size: clamp(12px, 3.2vw, 16px) !important;
  }
}

/* Step 6 compact card group tuning. */
.add-person-step-six .review-scroll {
  bottom: 92px !important;
  padding: 0 0 22px !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 91%) !important;
  box-shadow: 0 16px 34px rgb(72 88 64 / 7%) !important;
}

.add-person-step-six .review-card {
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.add-person-step-six .review-card::after {
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 0 !important;
  height: 1px !important;
  background: rgb(225 229 221 / 88%) !important;
}

.add-person-step-six .review-card:first-child {
  border-radius: 18px 18px 0 0 !important;
}

.add-person-step-six .review-card:last-of-type {
  border-radius: 0 0 18px 18px !important;
}

.add-person-step-six .review-card:last-of-type::after {
  display: none !important;
}

.add-person-step-six .review-name-edit {
  width: 25px !important;
  height: 25px !important;
  flex-basis: 25px !important;
}

@media (max-width: 580px) {
  .add-person-step-six .review-scroll {
    bottom: 78px !important;
    padding-bottom: 20px !important;
    border-radius: 16px !important;
  }

  .add-person-step-six .review-card {
    margin: 0 !important;
  }

  .add-person-step-six .review-card::after {
    left: 20px !important;
    right: 20px !important;
  }

  .add-person-step-six .review-name-edit {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }
}

/* Step 5 editable opening story. */
.opening-story-card p[contenteditable="true"] {
  cursor: text !important;
  outline: none !important;
}

.opening-story-card p[contenteditable="true"]:focus {
  text-shadow: 0 0 0 #2f372e !important;
}

/* Character list card layout: status beside name, description, time note, relation and unread badge. */
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card {
  height: 108px !important;
  min-height: 108px !important;
  margin-bottom: 12px !important;
  padding: 0 14px 0 16px !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) 112px !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid rgb(242 238 245 / 86%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 90%) !important;
  box-shadow: 0 12px 26px rgb(92 75 101 / 6%) !important;
  backdrop-filter: blur(12px) !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .avatar {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 96%),
    0 7px 16px rgb(67 55 72 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card.unread .avatar::after {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-main {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  min-width: 0 !important;
  padding-right: 8px !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-line {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-name {
  display: block !important;
  flex: 0 1 auto !important;
  max-width: 112px !important;
  overflow: hidden !important;
  color: #1d2028 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #e7f7df !important;
  color: #50b442 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="pink"] {
  background: #ffe8f1 !important;
  color: #ff5b8b !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="purple"] {
  background: #efe7ff !important;
  color: #8a64ee !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="blue"] {
  background: #e7f1ff !important;
  color: #5595e5 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status[data-tone="orange"] {
  background: #fff0df !important;
  color: #ee9130 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status i {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-preview {
  display: block !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  color: #53525d !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-time-note {
  display: block !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  overflow: hidden !important;
  color: #a7a2ad !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-side {
  position: relative !important;
  height: 78px !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  justify-items: end !important;
  align-items: center !important;
  align-self: center !important;
  min-width: 0 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-unread {
  position: absolute !important;
  right: -4px !important;
  top: -5px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #ff4c68 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 5px 12px rgb(255 76 104 / 24%) !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-unread[hidden] {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-list-time {
  grid-row: 1 !important;
  max-width: 104px !important;
  overflow: hidden !important;
  color: #a7a2ad !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-hearts {
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  color: #ff557d !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-hearts .is-empty {
  color: #f2b7c8 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-relation {
  grid-row: 3 !important;
  max-width: 104px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  color: #9b96a0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-list-time:empty,
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-heart,
.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-affinity {
  display: none !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card {
    height: 100px !important;
    min-height: 100px !important;
    margin-bottom: 10px !important;
    padding: 0 12px 0 14px !important;
    grid-template-columns: 64px minmax(0, 1fr) 94px !important;
    border-radius: 16px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .avatar {
    width: 56px !important;
    height: 56px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-name {
    max-width: 88px !important;
    font-size: 15px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status {
    height: 18px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-preview {
    margin-top: 7px !important;
    font-size: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-time-note {
    margin-top: 6px !important;
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-side {
    height: 70px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-hearts {
    gap: 1px !important;
    font-size: 15px !important;
    letter-spacing: -2px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-relation {
    max-width: 64px !important;
    margin-top: 7px !important;
    font-size: 10px !important;
  }
}

/* Mobile-only compact tuning for the character home page. Desktop remains unchanged. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-hero {
    left: 22px !important;
    right: 22px !important;
    top: 16px !important;
    height: 72px !important;
    grid-template-columns: 54px minmax(0, 1fr) 42px !important;
    gap: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-avatar-ring {
    width: 52px !important;
    height: 52px !important;
    box-shadow:
      0 0 0 4px #ffffff,
      0 6px 16px rgb(73 95 61 / 11%) !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-name-line {
    gap: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-name-line strong {
    font-size: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-name-line span {
    height: 18px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-profile-copy p {
    margin-top: 7px !important;
    font-size: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .home-plus-button {
    width: 40px !important;
    height: 40px !important;
    background-size: 31px auto !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-box {
    left: 18px !important;
    right: 18px !important;
    top: 94px !important;
    height: 46px !important;
    padding: 0 20px !important;
    border-radius: 23px !important;
    gap: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-mini {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .search-placeholder {
    top: -1px !important;
    font-size: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card {
    left: 18px !important;
    right: 18px !important;
    top: 150px !important;
    height: 56px !important;
    grid-template-columns: 38px minmax(0, 1fr) 60px !important;
    gap: 10px !important;
    padding: 0 13px !important;
    border-radius: 15px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-gift {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy {
    gap: 4px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy strong,
  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-copy span {
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-action {
    min-width: 54px !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .today-plot-card i {
    right: 13px !important;
    top: -4px !important;
    width: 9px !important;
    height: 9px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
    top: 216px !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 66px) !important;
    padding: 0 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card {
    height: 88px !important;
    min-height: 88px !important;
    margin-bottom: 8px !important;
    padding: 0 11px 0 12px !important;
    grid-template-columns: 56px minmax(0, 1fr) 82px !important;
    border-radius: 15px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .avatar {
    width: 49px !important;
    height: 49px !important;
    box-shadow:
      0 0 0 3px rgb(255 255 255 / 96%),
      0 6px 14px rgb(67 55 72 / 10%) !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-main {
    padding-right: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-line {
    gap: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-name {
    max-width: 82px !important;
    font-size: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-status {
    height: 17px !important;
    padding: 0 7px !important;
    font-size: 9px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card:nth-child(5n+1) .character-status {
    background: #ffe8f1 !important;
    color: #ff5b8b !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card:nth-child(5n+2) .character-status {
    background: #efe7ff !important;
    color: #8a64ee !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card:nth-child(5n+3) .character-status {
    background: #e7f7df !important;
    color: #50b442 !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card:nth-child(5n+4) .character-status {
    background: #fff0df !important;
    color: #ee9130 !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card:nth-child(5n) .character-status {
    background: #e7f1ff !important;
    color: #5595e5 !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card .chat-preview {
    margin-top: 6px !important;
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-time-note {
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-side {
    position: relative !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 88px !important;
    display: block !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-unread {
    right: -3px !important;
    top: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-hearts {
    gap: 1px !important;
    font-size: 13px !important;
    letter-spacing: -2px !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-list-time {
    position: absolute !important;
    top: 18px !important;
    right: 0 !important;
    max-width: 76px !important;
    font-size: 9px !important;
    text-align: right !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-relation {
    position: absolute !important;
    top: 57px !important;
    right: 0 !important;
    max-width: 76px !important;
    margin-top: 0 !important;
    font-size: 9px !important;
    text-align: right !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar {
    left: 18px !important;
    right: 18px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    height: 66px !important;
    min-height: 66px !important;
    border-radius: 24px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab {
    height: 66px !important;
    min-height: 66px !important;
  }

  .phone-shell.is-list-mode .screen-list .tabbar .tab-glyph {
    width: 27px !important;
    height: 27px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    background-size: 100vw 100dvh !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    padding: 16px 12px calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  }

  .diary-list {
    gap: 13px !important;
  }

  .diary-card {
    min-height: 0 !important;
    padding: 18px 18px 16px !important;
    border-radius: 24px !important;
  }

  .diary-card-head {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .diary-avatar {
    width: 68px !important;
    height: 68px !important;
  }

  .diary-title-block {
    gap: 11px !important;
  }

  .diary-title-row {
    gap: 11px !important;
  }

  .diary-pencil {
    width: 18px !important;
    height: 18px !important;
  }

  .diary-title-row strong {
    font-size: 21px !important;
    letter-spacing: 0.06em !important;
  }

  .diary-date-row {
    gap: 14px !important;
    font-size: 17px !important;
    letter-spacing: 0.05em !important;
  }

  .diary-weather {
    width: 24px !important;
    height: 24px !important;
  }

  .diary-content {
    gap: 11px !important;
    margin: 30px 0 20px 48px !important;
  }

  .diary-content p {
    font-size: 20px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.03em !important;
  }

  .diary-mood {
    gap: 10px !important;
    margin-left: 48px !important;
    font-size: 17px !important;
  }

  .diary-mood i {
    width: 23px !important;
    height: 23px !important;
  }
}

/* Mobile-only add-person viewport lock: keep the 6-step flow inside one phone screen. */
@media (max-width: 580px) {
  .phone-shell.is-add-person-mode {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    transform: none !important;
  }

  .phone-shell.is-add-person-mode .screen-add-person {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background-size: 100% 100% !important;
  }

  .phone-shell.is-add-person-mode .add-person-form,
  .phone-shell.is-add-person-mode .add-person-step-form,
  .phone-shell.is-add-person-mode .add-person-step-shell {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-header {
    top: clamp(10px, 2.4dvh, 24px) !important;
    height: 34px !important;
  }

  .phone-shell.is-add-person-mode .add-person-back {
    top: clamp(10px, 2.4dvh, 24px) !important;
  }

  .phone-shell.is-add-person-mode .add-person-progress {
    top: clamp(58px, 9.2dvh, 78px) !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-one,
  .phone-shell.is-add-person-mode .add-person-step-two,
  .phone-shell.is-add-person-mode .add-person-step-three,
  .phone-shell.is-add-person-mode .add-person-step-four,
  .phone-shell.is-add-person-mode .add-person-step-five,
  .phone-shell.is-add-person-mode .add-person-step-six {
    top: clamp(98px, 15.2dvh, 124px) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-one,
  .phone-shell.is-add-person-mode .add-person-step-two,
  .phone-shell.is-add-person-mode .add-person-step-three {
    padding-bottom: 64px !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-four,
  .phone-shell.is-add-person-mode .add-person-step-five,
  .phone-shell.is-add-person-mode .add-person-step-six {
    padding-bottom: 0 !important;
  }

  .phone-shell.is-add-person-mode .add-person-next-step,
  .phone-shell.is-add-person-mode .review-create-button {
    bottom: max(0px, env(safe-area-inset-bottom)) !important;
    height: clamp(46px, 6.4dvh, 52px) !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-four-scroll,
  .phone-shell.is-add-person-mode .review-scroll {
    bottom: calc(clamp(46px, 6.4dvh, 52px) + 14px) !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-five {
    padding-bottom: calc(clamp(46px, 6.4dvh, 52px) + 16px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .phone-shell.is-add-person-mode .review-create-tip {
    display: none !important;
  }

  .phone-shell.is-add-person-mode .profile-avatar-uploader {
    width: clamp(100px, 27vw, 132px) !important;
    height: clamp(100px, 27vw, 132px) !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
  }

  .phone-shell.is-add-person-mode .profile-avatar-camera {
    width: clamp(34px, 8.8vw, 42px) !important;
    height: clamp(34px, 8.8vw, 42px) !important;
    bottom: 10px !important;
    background-size: clamp(20px, 5.4vw, 25px) clamp(20px, 5.4vw, 25px) !important;
  }
}

/* Step 4 avatar final tuning for both desktop and mobile. */
.add-person-step-four .profile-avatar-uploader {
  width: 168px !important;
  height: 168px !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

.add-person-step-four .profile-avatar-camera {
  width: 46px !important;
  height: 46px !important;
  bottom: 14px !important;
  background-size: 27px 27px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-add-person-mode .add-person-step-four .profile-avatar-uploader {
    width: clamp(96px, 25vw, 124px) !important;
    height: clamp(96px, 25vw, 124px) !important;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-four .profile-avatar-camera {
    width: clamp(32px, 8.2vw, 40px) !important;
    height: clamp(32px, 8.2vw, 40px) !important;
    bottom: 8px !important;
    background-size: clamp(19px, 5vw, 24px) clamp(19px, 5vw, 24px) !important;
  }
}

/* Step 4 final spacing: lift the avatar near the title and tighten intro actions. */
.add-person-step-four .profile-avatar-uploader {
  width: 146px !important;
  height: 146px !important;
  margin-top: -22px !important;
  margin-bottom: 6px !important;
}

.add-person-step-four .profile-avatar-camera {
  width: 42px !important;
  height: 42px !important;
  bottom: 10px !important;
  background-size: 25px 25px !important;
}

.add-person-step-four .profile-ai-actions {
  margin-top: 8px !important;
}

.add-person-step-four .profile-ai-tip {
  margin-top: 7px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-add-person-mode .add-person-step-four .profile-avatar-uploader {
    width: clamp(84px, 22vw, 108px) !important;
    height: clamp(84px, 22vw, 108px) !important;
    margin-top: -18px !important;
    margin-bottom: 5px !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-four .profile-avatar-camera {
    width: clamp(29px, 7.4vw, 36px) !important;
    height: clamp(29px, 7.4vw, 36px) !important;
    bottom: 6px !important;
    background-size: clamp(17px, 4.5vw, 22px) clamp(17px, 4.5vw, 22px) !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-four .profile-ai-actions {
    margin-top: 6px !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-four .profile-ai-tip {
    margin-top: 5px !important;
  }
}

/* Final create-role background override: desktop and mobile only change the page background. */
.phone-shell.is-add-person-mode .screen-add-person {
  background:
    #f8faf5 url("./assets/backgrounds/character/create-role-page-bg.png") center top / 100% 100% no-repeat !important;
}

.profile-ai-intro-button.is-loading,
.meet-scene-random.is-loading,
.opening-story-refresh.is-loading {
  opacity: 0.58 !important;
  pointer-events: none !important;
}

/* Step 4 avatar title icon: use the provided green stick png on desktop and mobile. */
.profile-card-bar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 0 !important;
  background: url("./assets/icons/profile/profile-avatar-title-stick.png") center / contain no-repeat !important;
}

/* Mobile step 5: keep the next button outside the scrollable story content. */
@media (max-width: 580px) {
  .phone-shell.is-add-person-mode .add-person-step-five {
    padding-bottom: calc(clamp(46px, 6.4dvh, 52px) + 34px) !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-five .add-person-step-five-next {
    position: fixed !important;
    left: 5.8vw !important;
    right: 5.8vw !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 40 !important;
  }

  .phone-shell.is-add-person-mode .profile-card-bar {
    width: clamp(22px, 5.8vw, 26px) !important;
    height: clamp(22px, 5.8vw, 26px) !important;
  }
}

/* Desktop-only chat skin: use the dedicated chat assets without changing layout sizes. */
@media (min-width: 581px) {
  .phone-shell.is-chat-mode .screen-chat {
    background:
      #fff8fb url("./assets/backgrounds/chat/chat-desktop-green-bg.png") center top / var(--chat-page-width) var(--chat-page-height) no-repeat !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    right: 3px !important;
    top: 4px !important;
    height: 78px !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 97%) 0%, rgb(255 255 255 / 91%) 100%) !important;
    box-shadow:
      0 8px 24px rgb(198 177 188 / 13%),
      inset 0 0 0 1px rgb(255 255 255 / 74%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav::after {
    content: "" !important;
    position: absolute !important;
    right: 92px !important;
    top: 24px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 0 !important;
    background: url("./assets/icons/chat/chat-desktop-phone.png") center / contain no-repeat !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-control,
  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon {
    opacity: 1 !important;
    font-size: 0 !important;
    color: transparent !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 4 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge {
    display: inline-flex !important;
    position: absolute !important;
    left: 294px !important;
    top: 51px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 10px 0 8px !important;
    border: 1px solid rgb(89 187 77 / 18%) !important;
    border-radius: 999px !important;
    background: rgb(246 253 243 / 82%) !important;
    color: #466341 !important;
    font-size: 0 !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="pink"] {
    border-color: rgb(235 112 155 / 18%) !important;
    background: rgb(255 246 250 / 84%) !important;
    color: #895165 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="purple"] {
    border-color: rgb(160 128 224 / 18%) !important;
    background: rgb(250 247 255 / 86%) !important;
    color: #665487 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="blue"] {
    border-color: rgb(92 156 216 / 18%) !important;
    background: rgb(245 250 255 / 86%) !important;
    color: #4c6684 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="orange"] {
    border-color: rgb(232 169 82 / 20%) !important;
    background: rgb(255 250 240 / 86%) !important;
    color: #84633b !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge::before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    border-radius: 0 !important;
    background: var(--chat-status-icon, url("./assets/icons/status/status-online-green.png")) center / contain no-repeat !important;
    box-shadow: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge::after {
    content: "在线" !important;
    color: #4b5d45 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge::after {
    content: attr(data-label) !important;
    color: currentColor !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-control {
    background-image: url("./assets/icons/chat/chat-desktop-back.png") !important;
    background-size: 31px 31px !important;
    background-position: 14px 26px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-mark,
  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-badge {
    display: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon {
    width: 54px !important;
    height: var(--chat-nav-hit-height) !important;
    margin: 0 7px 0 0 !important;
    justify-self: end !important;
    align-self: start !important;
    box-shadow: none !important;
    background-image: url("./assets/icons/chat/chat-desktop-settings.png") !important;
    background-size: 30px 30px !important;
    background-position: center 27px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon::before,
  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon::after {
    content: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer,
  .phone-shell.is-chat-mode .screen-chat .composer.has-text {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    right: 3px !important;
    top: 13px !important;
    height: 84px !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 92%) 100%) !important;
    box-shadow:
      0 7px 24px rgb(210 188 198 / 14%),
      inset 0 0 0 1px rgb(238 236 235 / 82%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer::after {
    content: "" !important;
    position: absolute !important;
    left: 74px !important;
    right: 68px !important;
    top: 24px !important;
    height: 62px !important;
    border-radius: 999px !important;
    background: rgb(255 255 255 / 90%) !important;
    box-shadow:
      inset 0 0 0 1px rgb(232 232 232 / 72%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer > button {
    position: relative !important;
    opacity: 1 !important;
    align-self: start !important;
    height: var(--chat-composer-hit-height) !important;
    overflow: visible !important;
    border: 0 !important;
    background-color: transparent !important;
    background-position: center 34px !important;
    background-repeat: no-repeat !important;
    font-size: 0 !important;
    color: transparent !important;
    z-index: 2 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer > button::before,
  .phone-shell.is-chat-mode .screen-chat .composer > button::after {
    content: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer .voice-tool {
    width: 88px !important;
    min-width: 88px !important;
    height: var(--chat-composer-hit-height) !important;
    background: transparent !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer .voice-tool::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 27px !important;
    width: 56px !important;
    height: 56px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgb(255 255 255 / 96%) !important;
    box-shadow:
      0 6px 18px rgb(210 188 198 / 14%),
      inset 0 0 0 1px rgb(238 236 235 / 84%) !important;
    z-index: 1 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer .voice-tool::after {
    content: "" !important;
    position: absolute !important;
    left: 31px !important;
    top: 42px !important;
    width: 27px !important;
    height: 27px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("./assets/icons/chat/chat-desktop-leaf.png") center / contain no-repeat !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer .smile-tool {
    width: 54px !important;
    min-width: 54px !important;
    height: var(--chat-composer-hit-height) !important;
    background-image: url("./assets/icons/chat/chat-desktop-smile.png") !important;
    background-size: 36px 36px !important;
    background-position: center 37px !important;
    transform: translateX(-4px) !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer .plus-tool {
    width: 66px !important;
    min-width: 66px !important;
    height: var(--chat-composer-hit-height) !important;
    background-image: url("./assets/icons/chat/chat-desktop-send.png") !important;
    background-size: 70px 70px !important;
    background-position: center 20px !important;
    transform: translateX(-4px) !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer .mini-tool {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .composer #messageInput {
    position: relative !important;
    height: 42px !important;
    margin-top: 34px !important;
    padding-left: 18px !important;
    line-height: 42px !important;
    z-index: 3 !important;
  }
}

/* Desktop chat header status fix: keep the name clipped, but let the status pill show below it. */
@media (min-width: 581px) {
  .phone-shell.is-chat-mode .screen-chat .chat-nav h1 {
    overflow: visible !important;
    height: 54px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav #chatTitle {
    display: block !important;
    width: 140px !important;
    height: 26px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge {
    left: 50% !important;
    top: 29px !important;
    transform: translateX(-50%) !important;
  }
}

/* Create role step 3: icon personality tags, desktop and mobile. */
.phone-shell.is-add-person-mode .add-person-step-three > h2 {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 0 !important;
}

.phone-shell.is-add-person-mode .add-person-step-three > h2::before {
  content: "" !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  background: url("./assets/icons/personality/personality-title-icon.png") center / contain no-repeat !important;
}

.phone-shell.is-add-person-mode .add-person-step-three > p {
  margin-left: 60px !important;
}

.phone-shell.is-add-person-mode .personality-tags {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px 22px !important;
  margin-top: 28px !important;
}

.phone-shell.is-add-person-mode .personality-tag {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  justify-items: start !important;
  width: 100% !important;
  height: 64px !important;
  padding: 0 16px 0 20px !important;
  border: 1.5px solid transparent !important;
  border-radius: 30px !important;
  background: rgb(255 255 255 / 88%) !important;
  box-shadow: 0 14px 30px rgb(74 91 62 / 7%) !important;
  color: #161d15 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: left !important;
}

.phone-shell.is-add-person-mode .personality-tag::before {
  content: "" !important;
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  grid-column: 1 !important;
  justify-self: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--personality-icon, url("./assets/icons/personality/personality-leaf.png")) center / contain no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone-shell.is-add-person-mode .personality-tag:nth-child(1) { --personality-icon: url("./assets/icons/personality/personality-leaf.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(2) { --personality-icon: url("./assets/icons/personality/personality-dumbbell.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(3) { --personality-icon: url("./assets/icons/personality/personality-bandage.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(4) { --personality-icon: url("./assets/icons/personality/personality-crown.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(5) { --personality-icon: url("./assets/icons/personality/personality-lively.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(6) { --personality-icon: url("./assets/icons/personality/personality-cool.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(7) { --personality-icon: url("./assets/icons/personality/personality-snow.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(8) { --personality-icon: url("./assets/icons/personality/personality-heal.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(9) { --personality-icon: url("./assets/icons/personality/personality-dark.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(10) { --personality-icon: url("./assets/icons/personality/personality-apple.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(11) { --personality-icon: url("./assets/icons/personality/personality-heal.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(12) { --personality-icon: url("./assets/icons/personality/personality-ghost.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(13) { --personality-icon: url("./assets/icons/personality/personality-star.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(14) { --personality-icon: url("./assets/icons/personality/personality-lively.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(15) { --personality-icon: url("./assets/icons/personality/personality-skull.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(16) { --personality-icon: url("./assets/icons/personality/personality-wave.png"); }
.phone-shell.is-add-person-mode .personality-tag:nth-child(17) { --personality-icon: url("./assets/icons/personality/personality-flower.png"); }

.phone-shell.is-add-person-mode .personality-tag.is-selected {
  border-color: rgb(74 176 64 / 78%) !important;
  background: rgb(246 254 241 / 88%) !important;
  color: #228d27 !important;
  box-shadow: 0 14px 30px rgb(72 166 56 / 11%) !important;
}

.phone-shell.is-add-person-mode .personality-tag.is-selected::after {
  content: "✓" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #46ad3e !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

.phone-shell.is-add-person-mode .personality-tag-custom {
  color: #182018 !important;
}

.phone-shell.is-add-person-mode .personality-tag-custom::before {
  background: none !important;
  content: "+" !important;
  display: grid !important;
  place-items: center !important;
  color: #61ad55 !important;
  font-size: 28px !important;
  font-weight: 500 !important;
}

.phone-shell.is-add-person-mode .personality-tag-custom[data-tag]::before {
  content: "" !important;
  background: url("./assets/icons/personality/personality-star.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
}

.phone-shell.is-add-person-mode .personality-selected-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 24px !important;
  color: #666f62 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.phone-shell.is-add-person-mode .personality-selected-count::before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  background: url("./assets/icons/personality/personality-selected-icon.png") center / contain no-repeat !important;
}

.phone-shell.is-add-person-mode .personality-selected-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  margin: 12px auto 0 !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
  border: 1.5px dashed rgb(167 219 151 / 58%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 42%) !important;
}

.phone-shell.is-add-person-mode .personality-selected-tags span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgb(228 248 219 / 94%) !important;
  color: #268b29 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.phone-shell.is-add-person-mode .personality-selected-tags span::after {
  content: "×" !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-add-person-mode .add-person-step-three > h2 {
    gap: 10px !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-three > h2::before {
    width: clamp(28px, 7.2vw, 38px) !important;
    height: clamp(28px, 7.2vw, 38px) !important;
    flex-basis: clamp(28px, 7.2vw, 38px) !important;
  }

  .phone-shell.is-add-person-mode .add-person-step-three > p {
    margin-left: clamp(38px, 10vw, 52px) !important;
  }

  .phone-shell.is-add-person-mode .personality-tags {
    gap: clamp(8px, 2.1vw, 12px) !important;
    margin-top: clamp(14px, 3.2dvh, 22px) !important;
  }

  .phone-shell.is-add-person-mode .personality-tag {
    grid-template-columns: clamp(24px, 6vw, 32px) minmax(0, 1fr) 16px !important;
    height: clamp(38px, 7.8dvh, 52px) !important;
    padding: 0 clamp(7px, 1.7vw, 12px) !important;
    border-radius: 999px !important;
    font-size: clamp(12px, 3.2vw, 16px) !important;
  }

  .phone-shell.is-add-person-mode .personality-tag::before {
    width: clamp(20px, 5vw, 28px) !important;
    height: clamp(20px, 5vw, 28px) !important;
  }

  .phone-shell.is-add-person-mode .personality-tag-custom {
    align-items: center !important;
    line-height: 1 !important;
  }

  .phone-shell.is-add-person-mode .personality-tag-custom:not([data-tag])::before {
    align-self: center !important;
    justify-self: center !important;
    line-height: 0.86 !important;
    transform: translateY(-1px) !important;
  }

  .phone-shell.is-add-person-mode .personality-tag.is-selected::after {
    right: clamp(6px, 1.4vw, 10px) !important;
    width: clamp(17px, 4.4vw, 22px) !important;
    height: clamp(17px, 4.4vw, 22px) !important;
    font-size: clamp(11px, 3vw, 15px) !important;
  }

  .phone-shell.is-add-person-mode .personality-selected-count {
    margin-top: clamp(10px, 2.3dvh, 18px) !important;
    font-size: clamp(12px, 3.3vw, 15px) !important;
  }

  .phone-shell.is-add-person-mode .personality-selected-count::before {
    width: clamp(20px, 5.2vw, 26px) !important;
    height: clamp(20px, 5.2vw, 26px) !important;
  }

  .phone-shell.is-add-person-mode .personality-selected-tags {
    gap: 7px !important;
    min-height: clamp(42px, 8.2dvh, 56px) !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border-radius: 15px !important;
  }

  .phone-shell.is-add-person-mode .personality-selected-tags span {
    height: clamp(25px, 5.5dvh, 31px) !important;
    padding: 0 10px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
  }
}

/* Desktop chat history: drag with the mouse like swiping on a phone. */
@media (min-width: 581px) {
  .phone-shell.is-chat-mode .screen-chat .message-viewport {
    cursor: grab !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-chat-mode .screen-chat .message-viewport.is-drag-scrolling {
    cursor: grabbing !important;
    user-select: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .message-viewport.is-drag-scrolling * {
    user-select: none !important;
  }
}

/* Me page rebuild: real UI components, using the provided transparent PNG assets. */
.me-dashboard {
  display: none !important;
}

.diary-dashboard {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page {
  background:
    radial-gradient(circle at 18% 18%, rgb(113 190 86 / 12%), transparent 30%),
    radial-gradient(circle at 88% 4%, rgb(129 190 88 / 18%), transparent 24%),
    #fbfcf8 url("./assets/backgrounds/character/ui-soft-leaf-bg.png") center top / 100% 100% no-repeat !important;
}

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

.phone-shell.is-list-mode .screen-list.is-me-page .home-hero,
.phone-shell.is-list-mode .screen-list.is-me-page .search-box,
.phone-shell.is-list-mode .screen-list.is-me-page .today-plot-card,
.phone-shell.is-list-mode .screen-list.is-me-page .list-nav,
.phone-shell.is-list-mode .screen-list.is-me-page .list-add-person-button,
.phone-shell.is-list-mode .screen-list.is-me-page .chat-list,
.phone-shell.is-list-mode .screen-list.is-me-page .profile-edit-layer {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page {
  background: #fbfcf7 url("./assets/backgrounds/diary/diary-green-bg.png") center top / 100% 100% no-repeat !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .home-hero,
.phone-shell.is-list-mode .screen-list.is-diary-page .search-box,
.phone-shell.is-list-mode .screen-list.is-diary-page .today-plot-card,
.phone-shell.is-list-mode .screen-list.is-diary-page .list-nav,
.phone-shell.is-list-mode .screen-list.is-diary-page .list-add-person-button,
.phone-shell.is-list-mode .screen-list.is-diary-page .chat-list,
.phone-shell.is-list-mode .screen-list.is-diary-page .me-dashboard,
.phone-shell.is-list-mode .screen-list.is-diary-page .profile-edit-layer {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 34px 26px 116px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.diary-dashboard::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.diary-list {
  display: grid !important;
  gap: 24px !important;
}

.diary-card {
  box-sizing: border-box !important;
  min-height: 420px !important;
  padding: 34px 36px 28px !important;
  border: 1px solid rgb(222 225 223 / 94%) !important;
  border-radius: 34px !important;
  background: rgb(255 255 255 / 88%) !important;
  box-shadow: 0 16px 46px rgb(61 75 58 / 6%) !important;
  backdrop-filter: blur(7px) !important;
}

.diary-card-head {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: center !important;
}

.diary-avatar {
  width: 108px !important;
  height: 108px !important;
  border-radius: 50% !important;
  background-position: center !important;
  background-size: cover !important;
}

.diary-title-block {
  display: grid !important;
  gap: 20px !important;
  min-width: 0 !important;
}

.diary-title-row,
.diary-date-row,
.diary-mood {
  display: flex !important;
  align-items: center !important;
}

.diary-title-row {
  gap: 18px !important;
}

.diary-pencil {
  width: 26px !important;
  height: 26px !important;
  background: url("./assets/icons/ui/diary-pencil-gray.png") center / contain no-repeat !important;
}

.diary-title-row strong {
  color: #111 !important;
  font-size: 29px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

.diary-date-row {
  gap: 28px !important;
  color: #8a8995 !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
}

.diary-date-row em {
  font-style: normal !important;
}

.diary-weather {
  width: 35px !important;
  height: 35px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.diary-weather[data-weather="cloud"] {
  background-image: url("./assets/icons/ui/diary-cloud-gray.png") !important;
}

.diary-weather[data-weather="sun"] {
  background-image: url("./assets/icons/ui/diary-sun-orange.png") !important;
}

.diary-weather[data-weather="rain"] {
  background-image: url("./assets/icons/ui/diary-rain-gray.png") !important;
}

.diary-content {
  display: grid !important;
  gap: 20px !important;
  margin: 56px 0 32px 72px !important;
}

.diary-content p {
  margin: 0 !important;
  color: #101010 !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
}

.diary-mood {
  gap: 16px !important;
  margin-left: 72px !important;
  color: #8c8b98 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

.diary-mood i {
  width: 31px !important;
  height: 31px !important;
  background: url("./assets/icons/ui/diary-heart-gray.png") center / contain no-repeat !important;
}

.diary-mood b {
  font-weight: 400 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 42px 26px 116px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 5 !important;
  -webkit-overflow-scrolling: touch !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.me-hero {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  min-height: 120px !important;
  margin: 0 18px 28px !important;
}

.me-avatar-ring {
  position: relative !important;
  width: 74px !important;
  height: 74px !important;
  padding: 0 !important;
  border: 2px solid rgb(104 190 86 / 72%) !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 5px #fff,
    0 10px 24px rgb(69 96 57 / 13%) !important;
  cursor: pointer !important;
}

.me-avatar-ring::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  bottom: -6px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background:
    #fff url("./assets/icons/me/me-sprout.png") center / 17px 17px no-repeat !important;
  box-shadow:
    0 0 0 2px rgb(230 249 223 / 96%),
    0 8px 18px rgb(69 96 57 / 16%) !important;
}

.me-hero-main {
  min-width: 0 !important;
  padding-top: 8px !important;
}

.me-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.me-name-row strong {
  max-width: 180px !important;
  overflow: hidden !important;
  color: #101813 !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-vip,
.me-level {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.me-vip {
  background: linear-gradient(135deg, #ffc321, #ff9f12) !important;
}

.me-level {
  color: #ff3c75 !important;
  background: #ffeaf1 !important;
}

.me-signature-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 13px 0 0 !important;
  color: #65708b !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.me-signature-row span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-signature-edit {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("./assets/icons/me/me-sprout.png") center / contain no-repeat !important;
  cursor: pointer !important;
}

.me-mini-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin-top: 20px !important;
}

.me-mini-stats span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 29px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 78%) !important;
  color: #677088 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgb(72 92 60 / 7%) !important;
}

.me-mini-icon {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.me-mini-heart {
  background-image: url("./assets/icons/me/me-heart-pink.png") !important;
}

.me-mini-calendar {
  background-image: url("./assets/icons/me/me-book-purple.png") !important;
}

.me-mini-user {
  background-image: url("./assets/icons/me/me-group-green.png") !important;
}

.me-card {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 22px !important;
  border: 1px solid rgb(229 236 225 / 72%) !important;
  border-radius: 26px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: 0 18px 44px rgb(67 91 54 / 8%) !important;
  backdrop-filter: blur(12px) !important;
}

.me-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.me-section-head h2,
.me-relation-left h2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  color: #1a211b !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.me-section-head button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5d647c !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.me-section-head button::after {
  content: "›" !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.me-section-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.me-section-heart {
  background-image: url("./assets/icons/me/me-heart-pink-alt.png") !important;
}

.me-section-envelope {
  background-image: url("./assets/icons/me/me-icon-envelope-1.png") !important;
}

.me-section-settings {
  background-image: url("./assets/icons/me/me-star.png") !important;
}

.me-space-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.me-space-item {
  display: flex !important;
  min-width: 0 !important;
  min-height: 174px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 22px 10px 16px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgb(248 253 245 / 96%), rgb(255 255 255 / 88%)) !important;
  color: #1b231d !important;
  box-shadow: inset 0 0 0 1px rgb(232 239 228 / 72%) !important;
}

.me-space-item:nth-child(2) {
  background: linear-gradient(180deg, rgb(248 244 255 / 98%), rgb(255 255 255 / 88%)) !important;
}

.me-space-item:nth-child(3) {
  background: linear-gradient(180deg, rgb(242 248 255 / 98%), rgb(255 255 255 / 88%)) !important;
}

.me-space-item:nth-child(4) {
  background: linear-gradient(180deg, rgb(255 246 249 / 98%), rgb(255 255 255 / 88%)) !important;
}

.me-space-item:nth-child(5) {
  background: linear-gradient(180deg, rgb(255 249 241 / 98%), rgb(255 255 255 / 88%)) !important;
}

.me-space-icon {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.me-space-role {
  background-image: url("./assets/icons/me/me-role-green.png") !important;
}

.me-space-group {
  background-image: url("./assets/icons/me/me-group-green.png") !important;
}

.me-space-memory {
  background-image: url("./assets/icons/me/me-icon-book.png") !important;
}

.me-space-archive {
  background-image: url("./assets/icons/me/me-relation-archive.png") !important;
}

.me-space-letter {
  background-image: url("./assets/icons/me/me-icon-orange-plane.png") !important;
}

.me-space-item strong {
  color: #182019 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

.me-space-item span {
  color: #7c8498 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.me-space-item b {
  margin-top: auto !important;
  color: #40b83b !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.me-space-item:nth-child(2) b {
  color: #7a52ff !important;
}

.me-space-item:nth-child(3) b {
  color: #2577ff !important;
}

.me-space-item:nth-child(4) b,
.me-space-item:nth-child(5) b {
  color: #ff2f67 !important;
}

.me-relation-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1.25fr 1fr !important;
  gap: 24px !important;
  overflow: hidden !important;
}

.me-relation-card::after {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  top: 24px !important;
  width: 74px !important;
  height: 74px !important;
  opacity: 0.18 !important;
  background: url("./assets/icons/me/me-flower-pink.png") center / contain no-repeat !important;
}

.me-relation-left p,
.me-section-subtitle {
  margin: 14px 0 0 !important;
  color: #69738c !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.me-relation-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 38px !important;
}

.me-relation-stats span {
  display: grid !important;
  gap: 6px !important;
  color: #6e778d !important;
  font-weight: 700 !important;
}

.me-relation-stats strong {
  color: #46ad3e !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.me-relation-stats em {
  margin-left: 2px !important;
  color: #3a9d37 !important;
  font-size: 13px !important;
  font-style: normal !important;
}

.me-relation-stats small {
  color: #768096 !important;
  font-size: 13px !important;
}

.me-relation-right {
  padding-left: 24px !important;
  border-left: 1px solid rgb(225 230 224 / 80%) !important;
}

.me-relation-right > span {
  color: #6d7590 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.me-relation-right > strong {
  display: block !important;
  margin-top: 10px !important;
  color: #ff326e !important;
  font-size: 30px !important;
  font-weight: 900 !important;
}

.me-relation-progress {
  display: block !important;
  width: 100% !important;
  height: 8px !important;
  margin: 14px 0 20px !important;
  border-radius: 999px !important;
  background: #ffe0ea !important;
  overflow: hidden !important;
}

.me-relation-progress b {
  display: block !important;
  width: 72% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #ff2868, #ff6fa0) !important;
}

.me-relation-right p {
  margin: 11px 0 0 !important;
  color: #677089 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.me-relation-right b {
  color: #1b2020 !important;
  font-weight: 900 !important;
}

.me-letters-card .me-section-head {
  margin-bottom: 4px !important;
}

.me-letter-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

.me-letter-card {
  position: relative !important;
  display: grid !important;
  min-height: 166px !important;
  padding: 16px !important;
  border: 1px solid rgb(255 206 219 / 70%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 78%) !important;
  color: #4f5872 !important;
  text-align: left !important;
  box-shadow: 0 10px 24px rgb(255 112 145 / 6%) !important;
}

.me-letter-card-head {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 8px !important;
  gap: 9px !important;
  align-items: center !important;
}

.me-letter-card-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 2px #fff,
    0 5px 12px rgb(65 80 62 / 12%) !important;
}

.me-letter-card-meta {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.me-letter-card-meta strong {
  overflow: hidden !important;
  color: #1e241f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-letter-card-meta em {
  overflow: hidden !important;
  color: #6f7892 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-letter-card-head i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ff2b68 !important;
}

.me-letter-card-content {
  display: -webkit-box !important;
  min-height: 46px !important;
  margin-top: 16px !important;
  overflow: hidden !important;
  color: #68718b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.me-letter-view {
  justify-self: center !important;
  align-self: end !important;
  min-width: 72px !important;
  height: 28px !important;
  margin-top: 14px !important;
  border-radius: 999px !important;
  background: #ffe9ef !important;
  color: #ff2d68 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 28px !important;
  text-align: center !important;
}

.me-service-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 24px !important;
}

.me-service-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 18px !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 64px !important;
  padding: 0 14px !important;
  border: 1px solid rgb(228 233 228 / 78%) !important;
  border-radius: 16px !important;
  background: rgb(255 255 255 / 62%) !important;
  color: #242b34 !important;
  text-align: left !important;
}

.me-service-item::after {
  content: "›" !important;
  justify-self: end !important;
  color: #566078 !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

.me-service-item em {
  justify-self: end !important;
  width: 42px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #e9ebef !important;
}

.me-service-item em::before {
  content: "" !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  margin: 1.5px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgb(71 78 92 / 14%) !important;
}

.me-service-night::after {
  content: none !important;
}

.me-service-item i {
  width: 31px !important;
  height: 31px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.me-service-bell { background-image: url("./assets/icons/me/me-envelope-1.png") !important; }
.me-service-moon { background-image: url("./assets/icons/me/me-star.png") !important; }
.me-service-shield { background-image: url("./assets/icons/me/me-book-purple.png") !important; }
.me-service-help { background-image: url("./assets/icons/me/me-flower-pink.png") !important; }
.me-service-lock { background-image: url("./assets/icons/me/me-envelope-2.png") !important; }
.me-service-info { background-image: url("./assets/icons/me/me-sprout.png") !important; }

.me-service-item span {
  display: grid !important;
  gap: 5px !important;
}

.me-service-item strong {
  color: #1d2430 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.me-service-item small {
  overflow: hidden !important;
  color: #7a849a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-letter-dialog[hidden] {
  display: none !important;
}

.me-letter-dialog {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 26px !important;
  background: rgb(30 38 27 / 28%) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 40 !important;
}

.me-letter-sheet {
  position: relative !important;
  width: min(420px, 92vw) !important;
  box-sizing: border-box !important;
  padding: 28px 28px 30px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(255 253 249 / 96%)),
    radial-gradient(circle at 90% 12%, rgb(255 225 236 / 70%), transparent 30%) !important;
  border: 1px solid rgb(231 237 225 / 78%) !important;
  box-shadow: 0 24px 70px rgb(39 53 32 / 22%) !important;
  overflow: hidden !important;
  transform-origin: 50% 72% !important;
}

.me-letter-dialog:not([hidden]) .me-letter-sheet {
  animation: meLetterPaperUnfold 1500ms cubic-bezier(0.18, 0.92, 0.2, 1) both !important;
}

.me-letter-sheet::before,
.me-letter-sheet::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

.me-letter-sheet::before {
  inset: 0 !important;
  z-index: 5 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(32deg, rgb(230 246 222 / 98%) 0 49%, transparent 50%) left bottom / 51% 62% no-repeat,
    linear-gradient(-32deg, rgb(255 235 244 / 98%) 0 49%, transparent 50%) right bottom / 51% 62% no-repeat,
    linear-gradient(148deg, transparent 49%, rgb(242 251 236 / 88%) 50% 64%, transparent 65%) left top / 50% 100% no-repeat,
    linear-gradient(-148deg, transparent 49%, rgb(255 242 248 / 88%) 50% 64%, transparent 65%) right top / 50% 100% no-repeat,
    linear-gradient(180deg, #fffdf7 0%, #fff5fa 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgb(219 233 211 / 78%),
    inset 0 -18px 34px rgb(118 158 91 / 8%) !important;
  animation: meEnvelopePocketOpen 1500ms ease both !important;
}

.me-letter-sheet::after {
  top: 0 !important;
  left: 0 !important;
  z-index: 6 !important;
  width: 100% !important;
  height: 64% !important;
  clip-path: polygon(0 0, 100% 0, 50% 86%) !important;
  background:
    linear-gradient(180deg, #eef9e6 0%, #fff3f9 100%) !important;
  transform-origin: 50% 0 !important;
  animation: meEnvelopeLidOpen 1500ms cubic-bezier(0.16, 0.9, 0.2, 1) both !important;
}

.me-letter-dialog:not([hidden]) .me-letter-close,
.me-letter-dialog:not([hidden]) .me-letter-sheet header,
.me-letter-dialog:not([hidden]) .me-letter-sheet p {
  animation: meLetterInkReveal 460ms ease 1120ms both !important;
}

@keyframes meLetterPaperUnfold {
  0% {
    opacity: 0;
    transform: translateY(26px) scaleX(0.82) scaleY(0.48);
  }
  10% {
    opacity: 1;
    transform: translateY(22px) scaleX(0.84) scaleY(0.5);
  }
  40% {
    opacity: 1;
    transform: translateY(18px) scaleX(0.86) scaleY(0.52);
  }
  72% {
    opacity: 1;
    transform: translateY(-8px) scaleX(0.96) scaleY(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes meEnvelopeLidOpen {
  0% {
    opacity: 1;
    transform: perspective(720px) rotateX(0deg);
  }
  32% {
    opacity: 1;
    transform: perspective(720px) rotateX(0deg);
  }
  58% {
    opacity: 1;
    transform: perspective(720px) rotateX(-172deg) translateY(-5px);
  }
  76% {
    opacity: 0;
    transform: perspective(720px) rotateX(-180deg) translateY(-18px);
  }
  100% {
    opacity: 0;
    transform: perspective(720px) rotateX(-180deg) translateY(-18px);
  }
}

@keyframes meEnvelopePocketOpen {
  0%,
  54% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  78% {
    opacity: 0.86;
    transform: translateY(22px) scaleY(0.75);
  }
  100% {
    opacity: 0;
    transform: translateY(34px) scaleY(0.62);
  }
}

@keyframes meLetterInkReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.me-letter-close {
  position: absolute !important;
  right: 18px !important;
  top: 16px !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgb(242 246 239 / 88%) !important;
}

.me-letter-close::before,
.me-letter-close::after {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 14px !important;
  width: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #65705f !important;
}

.me-letter-close::before {
  transform: rotate(45deg) !important;
}

.me-letter-close::after {
  transform: rotate(-45deg) !important;
}

.me-letter-sheet header {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 22px !important;
}

.me-letter-avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 3px #fff,
    0 7px 18px rgb(65 80 62 / 13%) !important;
}

.me-letter-sheet header span:last-child {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.me-letter-sheet header strong {
  color: #161d18 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
}

.me-letter-sheet header em {
  color: #7a8497 !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.me-letter-sheet p {
  margin: 0 !important;
  color: #455069 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.85 !important;
  white-space: pre-wrap !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding: 16px 18px calc(max(10px, env(safe-area-inset-bottom)) + 90px) !important;
  }

  .me-hero {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 86px !important;
    margin: 0 4px 18px !important;
  }

  .me-avatar-ring {
    width: 52px !important;
    height: 52px !important;
    box-shadow:
      0 0 0 4px #fff,
      0 6px 16px rgb(73 95 61 / 11%) !important;
  }

  .me-avatar-ring::after {
    right: -7px !important;
    bottom: -5px !important;
    width: 22px !important;
    height: 22px !important;
    background-size: 14px 14px !important;
  }

  .me-hero-main {
    padding-top: 1px !important;
  }

  .me-name-row {
    gap: 7px !important;
  }

  .me-name-row strong {
    max-width: 104px !important;
    font-size: 20px !important;
  }

  .me-vip,
  .me-level {
    height: 18px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .me-signature-row {
    margin-top: 8px !important;
    font-size: 12px !important;
  }

  .me-signature-edit {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  .me-mini-stats {
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .me-mini-stats span {
    height: 23px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .me-mini-icon {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
  }

  .me-card {
    margin-bottom: 12px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .me-section-head {
    margin-bottom: 13px !important;
  }

  .me-section-head h2,
  .me-relation-left h2 {
    gap: 8px !important;
    font-size: 18px !important;
  }

  .me-section-icon {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }

  .me-section-head button {
    font-size: 11px !important;
  }

  .me-space-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .me-space-item {
    min-height: 118px !important;
    gap: 6px !important;
    padding: 15px 4px 10px !important;
    border-radius: 16px !important;
  }

  .me-space-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .me-space-item strong {
    font-size: 12px !important;
  }

  .me-space-item span {
    font-size: 9px !important;
  }

  .me-space-item b {
    font-size: 11px !important;
  }

  .me-relation-card {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .me-relation-left p,
  .me-section-subtitle {
    margin-top: 9px !important;
    font-size: 12px !important;
  }

  .me-relation-stats {
    gap: 10px !important;
    margin-top: 23px !important;
  }

  .me-relation-stats strong {
    font-size: 24px !important;
  }

  .me-relation-stats small,
  .me-relation-stats em {
    font-size: 10px !important;
  }

  .me-relation-right {
    padding-left: 0 !important;
    padding-top: 15px !important;
    border-top: 1px solid rgb(225 230 224 / 80%) !important;
    border-left: 0 !important;
  }

  .me-relation-right > strong {
    font-size: 25px !important;
  }

  .me-relation-right p {
    font-size: 12px !important;
  }

  .me-letter-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .me-letter-card {
    min-height: 124px !important;
    padding: 9px !important;
    border-radius: 15px !important;
  }

  .me-letter-card-head {
    grid-template-columns: 28px minmax(0, 1fr) 6px !important;
    gap: 6px !important;
  }

  .me-letter-card-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .me-letter-card-meta strong {
    font-size: 10px !important;
  }

  .me-letter-card-meta em {
    font-size: 9px !important;
  }

  .me-letter-card-head i {
    width: 6px !important;
    height: 6px !important;
  }

  .me-letter-card-content {
    min-height: 44px !important;
    margin-top: 9px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3 !important;
  }

  .me-letter-view {
    min-width: 46px !important;
    height: 22px !important;
    margin-top: 8px !important;
    font-size: 10px !important;
    line-height: 22px !important;
  }

  .me-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .me-service-item {
    min-height: 54px !important;
    grid-template-columns: 28px minmax(0, 1fr) 16px !important;
    gap: 10px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
  }

  .me-service-item i {
    width: 25px !important;
    height: 25px !important;
  }

  .me-service-item strong {
    font-size: 13px !important;
  }

  .me-service-item small {
    font-size: 10px !important;
  }

  .me-letter-dialog {
    padding: 20px !important;
  }

  .me-letter-sheet {
    padding: 24px 20px 24px !important;
    border-radius: 22px !important;
  }

  .me-letter-sheet p {
    font-size: 15px !important;
  }
}

/* Me page: remove personal header on mobile, move settings into a toggle panel, and fit three letters above the tabbar. */
.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
  position: absolute !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 8px 8px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-avatar-ring,
.phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-hero-main {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
  padding: 0 !important;
  margin-left: auto !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
  width: 40px !important;
  height: 40px !important;
  transform: none !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 72%) !important;
  box-shadow: 0 10px 22px rgb(67 88 57 / 10%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-service-card {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
  position: absolute !important;
  top: 50px !important;
  right: 10px !important;
  z-index: 40 !important;
  display: block !important;
  width: calc(100% - 20px) !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow:
    0 18px 48px rgb(42 58 36 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 90%) !important;
  backdrop-filter: blur(16px) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card .me-section-head {
  margin-bottom: 10px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item {
  min-height: 50px !important;
  padding: 0 10px !important;
  grid-template-columns: 26px minmax(0, 1fr) 12px !important;
  gap: 8px !important;
  border-radius: 13px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item i {
  width: 24px !important;
  height: 24px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item strong {
  font-size: 12px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item small {
  font-size: 9px !important;
}

.me-focus-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 3px !important;
}

.me-focus-stats span {
  min-height: 20px !important;
  padding: 4px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #f7fbf5 !important;
  color: #65708a !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.me-focus-stats b {
  color: #2fa845 !important;
  font-weight: 900 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding-top: 6px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    min-height: 34px !important;
    height: 34px !important;
    margin-bottom: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 34px !important;
    height: 34px !important;
  }

  .me-focus-stats {
    gap: 4px !important;
    margin-top: 2px !important;
  }

  .me-focus-stats span {
    min-height: 17px !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
  }

  .me-focus-card {
    padding: 10px 11px !important;
  }

  .me-focus-content {
    grid-template-columns: 48px minmax(0, 1fr) 60px !important;
    gap: 8px !important;
  }

  .me-focus-avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .me-focus-copy p {
    max-width: 105px !important;
    padding: 3px 7px !important;
  }

  .me-focus-action {
    min-width: 56px !important;
    height: 27px !important;
    font-size: 11px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) {
    padding: 11px !important;
    gap: 7px !important;
  }

  .me-relation-days {
    padding: 5px 0 !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right p {
    min-height: 19px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  .me-space-item {
    min-height: 70px !important;
    padding-top: 7px !important;
    padding-bottom: 6px !important;
  }

  .me-letters-card {
    padding: 11px 12px !important;
    border-radius: 16px !important;
  }

  .me-letters-card .me-section-head {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
  }

  .me-letters-card .me-section-head h2 {
    font-size: 17px !important;
  }

  .me-section-subtitle {
    margin-top: 5px !important;
    font-size: 11px !important;
  }

  .me-letter-card {
    min-height: 50px !important;
    padding: 7px 2px !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.28fr) 42px !important;
    gap: 6px !important;
  }

  .me-letter-card-head {
    grid-template-columns: 28px minmax(0, 1fr) 5px !important;
    gap: 5px !important;
  }

  .me-letter-card-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .me-letter-card-meta strong {
    font-size: 11px !important;
  }

  .me-letter-card-content {
    font-size: 10px !important;
  }

  .me-letter-view {
    min-width: 38px !important;
    height: 23px !important;
    font-size: 10px !important;
    line-height: 23px !important;
  }
}

/* Absolute final mobile diary sizing. Keep after all me-page overrides. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: 168px !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
    left: 0 !important;
    height: auto !important;
    padding: 12px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 16px 15px !important;
    border-radius: 22px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card-head {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-avatar {
    width: 54px !important;
    height: 54px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-block {
    gap: 7px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-row {
    gap: 8px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-pencil {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-row strong {
    overflow: hidden !important;
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-date-row {
    gap: 9px !important;
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-weather {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-content {
    gap: 8px !important;
    margin: 22px 0 15px 66px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-content p {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-mood {
    gap: 8px !important;
    margin-left: 66px !important;
    font-size: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-mood i {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
}

.phone-shell.is-list-mode .screen-list.is-diary-page {
  background: #f8fbef url("./assets/backgrounds/diary/diary-new-bg.png") center top / 100% 100% no-repeat !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    background: #f8fbef url("./assets/backgrounds/diary/diary-new-bg.png") center top / 100vw 100dvh no-repeat !important;
  }
}

/* True final diary background and placement. */
.phone-shell.is-list-mode .screen-list.is-diary-page {
  background: #f8fbef url("./assets/backgrounds/diary/diary-new-bg.png") center top / 100% 100% no-repeat !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
  padding-top: 260px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    background: #f8fbef url("./assets/backgrounds/diary/diary-new-bg.png") center top / 100vw 100dvh no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    padding-top: 168px !important;
  }
}

/* Final mobile diary sizing: keep diary cards inside narrow phone screens. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 16px 15px !important;
    border-radius: 22px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card-head {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-avatar {
    width: 54px !important;
    height: 54px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-block {
    gap: 7px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-row {
    gap: 8px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-pencil {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-row strong {
    overflow: hidden !important;
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-date-row {
    gap: 9px !important;
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-weather {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-content {
    gap: 8px !important;
    margin: 22px 0 15px 66px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-content p {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-mood {
    gap: 8px !important;
    margin-left: 66px !important;
    font-size: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-mood i {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
}

/* Mobile list/me tabbar: sit closer to the phone navigation buttons. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list .tabbar {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page) .chat-list {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
  }
}

/* Align the me-page profile header with the main page profile header. */
.phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  height: 96px !important;
  min-height: 96px !important;
  margin: 0 18px 28px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring {
  width: 74px !important;
  height: 74px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 5px #ffffff,
    0 8px 24px rgb(73 95 61 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring::after {
  content: none !important;
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-hero-main {
  padding-top: 0 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-name-row {
  gap: 9px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-name-row strong {
  max-width: 180px !important;
  color: #151b14 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-vip,
.phone-shell.is-list-mode .screen-list.is-me-page .me-level {
  height: 20px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row {
  margin: 12px 0 0 !important;
  color: #757d75 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 12px !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 4px 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring {
    width: 52px !important;
    height: 52px !important;
    box-shadow:
      0 0 0 4px #ffffff,
      0 6px 16px rgb(73 95 61 / 11%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row {
    gap: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row strong {
    max-width: 104px !important;
    font-size: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-vip,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-level {
    height: 18px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row {
    margin-top: 7px !important;
    font-size: 13px !important;
  }
}

/* Chat settings page: role profile style. */
.profile-drawer .settings-page-v2 {
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 8% 8%, rgb(215 204 238 / 34%), transparent 26%),
    radial-gradient(circle at 92% 18%, rgb(159 217 173 / 36%), transparent 24%),
    linear-gradient(180deg, #fbf8f1 0%, #f3f6ec 46%, #eef4e8 100%) !important;
}

.settings-page-v2 .settings-drawer-head {
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
  height: 92px !important;
  min-height: 92px !important;
  padding: 18px 18px 10px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settings-page-v2 .drawer-back {
  position: static !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgb(118 145 106 / 16%) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow: 0 8px 22px rgb(64 83 49 / 10%) !important;
}

.settings-page-v2 .drawer-back .back-mark {
  width: 12px !important;
  height: 12px !important;
  opacity: 1 !important;
  border-color: #273225 !important;
}

.settings-page-v2 .settings-title-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

.settings-page-v2 .settings-title-copy h2 {
  position: static !important;
  inset: auto !important;
  display: block !important;
  margin: 0 !important;
  color: #172018 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: left !important;
  pointer-events: auto !important;
}

.settings-page-v2 .settings-title-copy h2::before,
.settings-page-v2 .settings-title-copy h2::after {
  content: none !important;
}

.settings-page-v2 .settings-title-copy p {
  margin: 0 !important;
  color: #7b8476 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

.settings-page-v2 .settings-preview-button {
  min-width: 108px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid rgb(65 151 83 / 18%) !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 80%) !important;
  color: #399347 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgb(50 89 42 / 9%) !important;
}

.settings-page-v2 .settings-scroll-area {
  min-height: 0 !important;
  flex: 1 !important;
  padding: 2px 18px 22px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.settings-page-v2 .settings-scroll-area::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.settings-page-v2 .settings-card {
  margin: 0 0 10px !important;
  padding: 16px !important;
  border: 1px solid rgb(131 153 116 / 13%) !important;
  border-radius: 24px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow:
    0 14px 34px rgb(61 77 48 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 80%) !important;
  backdrop-filter: blur(12px) !important;
}

.settings-page-v2 .settings-section-title {
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.settings-page-v2 .settings-section-title span,
.settings-page-v2 .settings-detail-card summary > span {
  color: #172019 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.settings-page-v2 .settings-section-title small,
.settings-page-v2 .settings-detail-card summary > small {
  color: #879080 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: right !important;
}

.settings-page-v2 .settings-role-card {
  padding: 18px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 90%), rgb(255 250 254 / 78%)),
    radial-gradient(circle at 10% 0%, rgb(215 204 238 / 35%), transparent 30%) !important;
}

.settings-page-v2 .settings-role-top {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
}

.settings-page-v2 .settings-avatar-picker,
.settings-page-v2 .settings-user-avatar {
  cursor: pointer !important;
}

.settings-page-v2 .settings-avatar-picker input,
.settings-page-v2 .settings-user-avatar input {
  display: none !important;
}

.settings-page-v2 .settings-avatar-ring {
  width: 86px !important;
  height: 86px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 5px #ffffff,
    0 12px 24px rgb(70 77 59 / 12%) !important;
}

.settings-page-v2 .settings-avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
}

.settings-page-v2 .settings-avatar-edit {
  width: 76px !important;
  height: 24px !important;
  margin: 10px auto 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #edf7ea !important;
  color: #41944d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.settings-page-v2 .settings-role-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 9px !important;
}

.settings-page-v2 .settings-name-field {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.settings-page-v2 .settings-name-field span {
  color: #778074 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.settings-page-v2 #agentName {
  width: 100% !important;
  height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid rgb(120 156 115 / 14%) !important;
  border-radius: 14px !important;
  background: rgb(255 255 255 / 76%) !important;
  color: #172019 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%) !important;
}

.settings-page-v2 .settings-status-chip {
  width: fit-content !important;
  max-width: 100% !important;
  height: 30px !important;
  padding: 0 12px 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  background: var(--settings-tone-bg, #eef9eb) !important;
  color: var(--settings-tone-text, #3d9448) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-status-chip i {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  background: var(--settings-status-icon) center / contain no-repeat !important;
}

.settings-page-v2 .settings-status-chip[data-tone="pink"] {
  --settings-tone-bg: #fff0f5;
  --settings-tone-text: #d15e83;
}

.settings-page-v2 .settings-status-chip[data-tone="purple"] {
  --settings-tone-bg: #f2ecff;
  --settings-tone-text: #8865bf;
}

.settings-page-v2 .settings-status-chip[data-tone="blue"] {
  --settings-tone-bg: #edf5ff;
  --settings-tone-text: #557fbd;
}

.settings-page-v2 .settings-status-chip[data-tone="orange"] {
  --settings-tone-bg: #fff4e4;
  --settings-tone-text: #c47a29;
}

.settings-page-v2 #settingsRoleStatusDesc {
  min-height: 18px !important;
  margin: 0 !important;
  color: #6e776c !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.settings-page-v2 .settings-profile-grid {
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.settings-page-v2 .settings-profile-grid > span {
  min-height: 62px !important;
  padding: 10px 7px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  border-radius: 18px !important;
  background: rgb(250 252 246 / 86%) !important;
  text-align: center !important;
}

.settings-page-v2 .settings-profile-grid small {
  color: #8a9286 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.settings-page-v2 .settings-profile-grid strong {
  overflow: hidden !important;
  color: #20271f !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.settings-page-v2 .settings-tag-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.settings-page-v2 .settings-tag-list span {
  min-height: 30px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: #eef8ec !important;
  color: #3f9448 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-tag-list span[data-tone="pink"] {
  background: #fff0f5 !important;
  color: #cf6688 !important;
}

.settings-page-v2 .settings-tag-list span[data-tone="purple"] {
  background: #f1ecff !important;
  color: #8267b5 !important;
}

.settings-page-v2 .settings-tag-list span[data-tone="blue"] {
  background: #eef6ff !important;
  color: #5a82bd !important;
}

.settings-page-v2 .settings-tag-list span[data-tone="orange"] {
  background: #fff3df !important;
  color: #bf7b2d !important;
}

.settings-page-v2 .settings-memory-preview,
.settings-page-v2 .memory-list {
  display: grid !important;
  gap: 7px !important;
}

.settings-page-v2 .settings-memory-row,
.settings-page-v2 .memory-item {
  min-height: 48px !important;
  padding: 11px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgb(136 156 121 / 10%) !important;
  border-radius: 16px !important;
  background: rgb(250 252 247 / 76%) !important;
  color: #2d352c !important;
  font-size: 13px !important;
}

.settings-page-v2 .settings-memory-row span {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.settings-page-v2 .settings-memory-row strong {
  color: #1c251d !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-memory-row small {
  overflow: hidden !important;
  color: #737c70 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.settings-page-v2 .settings-memory-row em {
  color: #9aa294 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.settings-page-v2 .settings-user-view-row {
  background: linear-gradient(135deg, rgb(249 255 247 / 96%), rgb(255 248 243 / 92%)) !important;
  border-color: rgb(218 236 209 / 86%) !important;
}

.settings-page-v2 .settings-user-view-row strong {
  color: #2b5d35 !important;
}

.settings-page-v2 .settings-cognition-card {
  gap: 10px !important;
}

.settings-page-v2 .settings-cognition-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 10px 2px !important;
}

.settings-page-v2 .settings-cognition-column {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
  padding: 10px !important;
  border: 1px solid rgb(222 235 218 / 90%) !important;
  border-radius: 14px !important;
  background: rgb(250 254 249 / 92%) !important;
}

.settings-page-v2 .settings-cognition-column > strong {
  color: #2c5531 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-cognition-column span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.settings-page-v2 .settings-cognition-column b {
  color: #6e7b6b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-cognition-column em,
.settings-page-v2 .settings-cognition-column p {
  margin: 0 !important;
  color: #263226 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.settings-page-v2 .settings-cognition-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 0 10px 2px !important;
}

.settings-page-v2 .settings-cognition-actions button {
  flex: 1 !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: #eef8ec !important;
  color: #3f8b4a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  .settings-page-v2 .settings-cognition-grid {
    grid-template-columns: 1fr !important;
  }
}

.settings-page-v2 .memory-item button {
  min-width: 42px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #fff2f2 !important;
  color: #d65353 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.settings-page-v2 .memory-card-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

.settings-page-v2 .memory-summary-card {
  margin: 8px 10px 6px !important;
  padding: 10px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgb(219 235 215 / 92%) !important;
  border-radius: 14px !important;
  background: rgb(248 253 247 / 92%) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%) !important;
}

.settings-page-v2 .memory-summary-card span {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.settings-page-v2 .memory-summary-card strong {
  color: #2c5531 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .memory-summary-card em {
  color: #7a8576 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.settings-page-v2 .memory-summary-card button {
  min-width: 62px !important;
  height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #eef8ec !important;
  color: #4f9658 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .memory-summary-card .memory-consolidate-button {
  min-width: 72px !important;
  background: #e5f5e3 !important;
  color: #357c42 !important;
}

.settings-page-v2 .memory-summary-card .memory-consolidate-button:disabled {
  cursor: wait !important;
  opacity: 0.7 !important;
}

.settings-page-v2 .layered-memory-panel {
  margin: 8px 10px 10px !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
  border: 1px solid rgb(222 229 239 / 92%) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgb(250 252 255 / 96%), rgb(246 250 246 / 94%)) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 78%), 0 10px 24px rgb(31 55 38 / 6%) !important;
}

.settings-page-v2 .layered-memory-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.settings-page-v2 .layered-memory-header span {
  display: grid !important;
  gap: 3px !important;
}

.settings-page-v2 .layered-memory-header strong {
  color: #223524 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.settings-page-v2 .layered-memory-header em {
  color: #7b887c !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.settings-page-v2 .layered-memory-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.settings-page-v2 .layered-memory-section {
  min-width: 0 !important;
  padding: 9px !important;
  display: grid !important;
  gap: 7px !important;
  border: 1px solid rgb(229 235 228 / 88%) !important;
  border-radius: 14px !important;
  background: rgb(255 255 255 / 78%) !important;
}

.settings-page-v2 .layered-memory-section.is-secret {
  border-color: rgb(235 220 239 / 94%) !important;
  background: linear-gradient(145deg, rgb(255 251 255 / 94%), rgb(250 247 255 / 88%)) !important;
}

.settings-page-v2 .layered-memory-section-head {
  display: grid !important;
  gap: 2px !important;
}

.settings-page-v2 .layered-memory-section-head strong {
  color: #283b2b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.settings-page-v2 .layered-memory-section-head em {
  color: #8b9588 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.settings-page-v2 .layered-memory-items {
  display: grid !important;
  gap: 6px !important;
}

.settings-page-v2 .layered-memory-item {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.settings-page-v2 .layered-memory-item span {
  color: #263229 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

.settings-page-v2 .layered-memory-item small {
  color: #8b978b !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

.settings-page-v2 .layered-memory-item.is-outdated span,
.settings-page-v2 .layered-memory-item.is-conflicted span,
.settings-page-v2 .layered-memory-item.is-expired span {
  color: #8a9588 !important;
  text-decoration: line-through !important;
}

.settings-page-v2 .layered-memory-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.settings-page-v2 .layered-memory-actions button {
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid rgb(220 229 218 / 92%) !important;
  border-radius: 999px !important;
  background: rgb(247 250 245 / 92%) !important;
  color: #5e715c !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.settings-page-v2 .layered-memory-actions button:last-child {
  border-color: rgb(238 221 215 / 92%) !important;
  background: rgb(255 248 245 / 92%) !important;
  color: #9a5844 !important;
}

.settings-page-v2 .layered-memory-empty {
  margin: 0 !important;
  color: #a0aa9c !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.settings-page-v2 .memory-card-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

.settings-page-v2 .memory-card-main strong {
  color: #1f2b20 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.settings-page-v2 .memory-card-main small {
  color: #7a8576 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.settings-page-v2 .memory-card-main .memory-review-note {
  color: #9aa591 !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.settings-page-v2 .memory-card-actions {
  display: flex !important;
  gap: 6px !important;
}

.settings-page-v2 .memory-card-actions button {
  min-width: 38px !important;
  padding: 0 10px !important;
}

.settings-page-v2 .memory-card-actions .memory-edit-button {
  background: #eef8ec !important;
  color: #4f9658 !important;
}

.settings-page-v2 .memory-item-empty {
  display: block !important;
  color: #7a8576 !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.settings-page-v2 .memory-form {
  margin-top: 10px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px !important;
  gap: 8px !important;
  border-top: 0 !important;
}

.settings-page-v2 .memory-form input {
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid rgb(120 156 115 / 14%) !important;
  border-radius: 14px !important;
  background: rgb(255 255 255 / 72%) !important;
  color: #222a20 !important;
  font-size: 13px !important;
}

.settings-page-v2 .memory-form button {
  height: 40px !important;
  border-radius: 14px !important;
  background: #57aa60 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-detail-card {
  padding: 0 !important;
  overflow: hidden !important;
}

.settings-page-v2 .settings-detail-card summary {
  min-height: 58px !important;
  padding: 0 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 18px !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.settings-page-v2 .settings-detail-card summary::-webkit-details-marker {
  display: none !important;
}

.settings-page-v2 .settings-detail-card summary::after {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #9aa294 !important;
  border-bottom: 2px solid #9aa294 !important;
  transform: rotate(45deg) !important;
  transition: transform 0.18s ease !important;
}

.settings-page-v2 .settings-detail-card[open] summary::after {
  transform: rotate(225deg) !important;
}

.settings-page-v2 .settings-detail-card textarea,
.settings-page-v2 .settings-hidden-note,
.settings-page-v2 .settings-rule-list,
.settings-page-v2 .settings-advanced-grid {
  margin: 0 16px 16px !important;
}

.settings-page-v2 .settings-detail-card textarea {
  width: calc(100% - 32px) !important;
  min-height: 112px !important;
  padding: 12px !important;
  border: 1px solid rgb(120 156 115 / 14%) !important;
  border-radius: 16px !important;
  background: rgb(250 252 247 / 76%) !important;
  color: #222a20 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  resize: vertical !important;
}

.settings-page-v2 #persona {
  min-height: 168px !important;
}

.settings-page-v2 .settings-advanced-grid {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.settings-page-v2 .settings-user-avatar,
.settings-page-v2 .settings-mini-note {
  min-height: 116px !important;
  padding: 13px !important;
  display: grid !important;
  place-items: center !important;
  gap: 7px !important;
  border: 1px solid rgb(136 156 121 / 10%) !important;
  border-radius: 18px !important;
  background: rgb(250 252 247 / 76%) !important;
  text-align: center !important;
}

.settings-page-v2 .settings-user-avatar .avatar-xl {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
}

.settings-page-v2 .settings-user-avatar strong,
.settings-page-v2 .settings-mini-note strong {
  color: #1f2a20 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-user-avatar small,
.settings-page-v2 .settings-mini-note small {
  color: #7f887b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.settings-page-v2 .settings-rule-list {
  display: grid !important;
  gap: 8px !important;
}

.settings-page-v2 .settings-rule-list span,
.settings-page-v2 .settings-hidden-note {
  min-height: 38px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgb(250 252 247 / 76%) !important;
  color: #566052 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.settings-page-v2 .drawer-actions {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settings-page-v2 .drawer-actions::after {
  content: none !important;
}

.settings-page-v2 .drawer-actions button {
  min-height: 48px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .drawer-actions button:first-child {
  order: 1 !important;
  border: 0 !important;
  background: linear-gradient(135deg, #65bd70, #3b9848) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 22px rgb(60 151 72 / 20%) !important;
}

.settings-page-v2 .drawer-actions button:last-child {
  order: 2 !important;
  border: 1px solid rgb(213 83 83 / 18%) !important;
  background: rgb(255 246 246 / 82%) !important;
  color: #d65353 !important;
  box-shadow: none !important;
}

@media (max-width: 580px) {
  .settings-page-v2 .settings-drawer-head {
    height: 78px !important;
    min-height: 78px !important;
    padding: 14px 14px 8px !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 9px !important;
  }

  .settings-page-v2 .drawer-back {
    width: 34px !important;
    height: 34px !important;
  }

  .settings-page-v2 .settings-title-copy h2 {
    font-size: 19px !important;
  }

  .settings-page-v2 .settings-title-copy p {
    font-size: 11px !important;
  }

  .settings-page-v2 .settings-preview-button {
    min-width: 86px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .settings-page-v2 .settings-scroll-area {
    padding: 0 12px 18px !important;
  }

  .settings-page-v2 .settings-card {
    margin-bottom: 8px !important;
    padding: 13px !important;
    border-radius: 20px !important;
  }

  .settings-page-v2 .settings-role-card {
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .settings-page-v2 .settings-role-top {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .settings-page-v2 .settings-avatar-ring {
    width: 68px !important;
    height: 68px !important;
    box-shadow:
      0 0 0 4px #ffffff,
      0 10px 18px rgb(70 77 59 / 10%) !important;
  }

  .settings-page-v2 .settings-avatar {
    width: 60px !important;
    height: 60px !important;
  }

  .settings-page-v2 .settings-avatar-edit {
    width: 62px !important;
    height: 21px !important;
    margin-top: 8px !important;
    font-size: 10px !important;
  }

  .settings-page-v2 .settings-section-title {
    margin-bottom: 11px !important;
  }

  .settings-page-v2 .settings-section-title span,
  .settings-page-v2 .settings-detail-card summary > span {
    font-size: 15px !important;
  }

  .settings-page-v2 .settings-section-title small,
  .settings-page-v2 .settings-detail-card summary > small {
    font-size: 10px !important;
  }

  .settings-page-v2 .settings-name-field {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .settings-page-v2 #agentName {
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .settings-page-v2 .settings-status-chip {
    height: 27px !important;
    font-size: 11px !important;
  }

  .settings-page-v2 #settingsRoleStatusDesc {
    font-size: 11px !important;
  }

  .settings-page-v2 .settings-profile-grid {
    margin-top: 12px !important;
    gap: 6px !important;
  }

  .settings-page-v2 .settings-profile-grid > span {
    min-height: 52px !important;
    padding: 8px 5px !important;
    border-radius: 15px !important;
  }

  .settings-page-v2 .settings-profile-grid small {
    font-size: 10px !important;
  }

  .settings-page-v2 .settings-profile-grid strong {
    font-size: 12px !important;
  }

  .settings-page-v2 .settings-detail-card summary {
    min-height: 52px !important;
    padding: 0 13px !important;
  }

  .settings-page-v2 .settings-detail-card textarea,
  .settings-page-v2 .settings-hidden-note,
  .settings-page-v2 .settings-rule-list,
  .settings-page-v2 .settings-advanced-grid {
    margin: 0 13px 13px !important;
  }

  .settings-page-v2 .settings-detail-card textarea {
    width: calc(100% - 26px) !important;
    min-height: 94px !important;
    font-size: 13px !important;
  }

  .settings-page-v2 #persona {
    min-height: 138px !important;
  }

  .settings-page-v2 .settings-advanced-grid {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .settings-page-v2 .drawer-actions button {
    min-height: 44px !important;
    font-size: 14px !important;
  }
}

/* Chat settings reference polish: role card and personality tags. */
.settings-page-v2 .settings-role-card {
  padding: 15px 17px 17px !important;
  border: 1px solid rgb(231 236 229 / 95%) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgb(66 82 58 / 7%) !important;
}

.settings-page-v2 .settings-role-card .settings-section-title,
.settings-page-v2 .settings-personality-card .settings-section-title {
  margin-bottom: 14px !important;
  align-items: center !important;
}

.settings-page-v2 .settings-role-card .settings-section-title > span,
.settings-page-v2 .settings-personality-card .settings-section-title > span {
  position: relative !important;
  min-height: 24px !important;
  padding-left: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #222821 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-role-card .settings-section-title > span::before,
.settings-page-v2 .settings-personality-card .settings-section-title > span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: #f3eeff center / 15px 15px no-repeat !important;
}

.settings-page-v2 .settings-role-card .settings-section-title > span::before {
  background:
    radial-gradient(circle at 50% 36%, #815cf6 0 3.5px, transparent 4px),
    radial-gradient(ellipse at 50% 73%, #815cf6 0 6.5px, transparent 7px),
    #f3eeff !important;
}

.settings-page-v2 .settings-personality-card .settings-section-title > span::before {
  background-color: #ecfaee !important;
  background-image: url("./assets/settings-page/personality-tag.png") !important;
}

.settings-page-v2 .settings-card-edit {
  min-width: auto !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #78816f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.settings-page-v2 .settings-role-top {
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
}

.settings-page-v2 .settings-avatar-ring {
  width: 104px !important;
  height: 104px !important;
  box-shadow: none !important;
}

.settings-page-v2 .settings-avatar {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
}

.settings-page-v2 .settings-avatar-edit {
  display: none !important;
}

.settings-page-v2 .settings-role-main {
  gap: 7px !important;
}

.settings-page-v2 .settings-name-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.settings-page-v2 #agentName {
  width: auto !important;
  min-width: 0 !important;
  max-width: 150px !important;
  height: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #161b18 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 31px !important;
}

.settings-page-v2 .settings-gender-icon {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  object-fit: contain !important;
}

.settings-page-v2 .settings-role-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.settings-page-v2 .settings-relation-pill,
.settings-page-v2 .settings-online-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #333b33 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.settings-page-v2 .settings-relation-pill i {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  background: url("./assets/settings-page/relation-heart.png") center / contain no-repeat !important;
}

.settings-page-v2 .settings-online-pill i {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
  border-radius: 50% !important;
  background: #39bc64 !important;
}

.settings-page-v2 .settings-companion-line {
  margin: 1px 0 0 !important;
  color: #333b33 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.settings-page-v2 .settings-companion-line strong {
  font-size: inherit !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-status-desc {
  max-width: 190px !important;
  margin: 3px 0 0 !important;
  overflow: hidden !important;
  color: #7d8678 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.settings-page-v2 .settings-personality-card {
  padding: 15px 17px 17px !important;
  border: 1px solid rgb(231 236 229 / 95%) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgb(66 82 58 / 7%) !important;
}

.settings-page-v2 .settings-tag-list {
  gap: 10px !important;
  padding: 0 1px !important;
}

.settings-page-v2 .settings-tag-list span {
  min-width: 46px !important;
  min-height: 24px !important;
  padding: 5px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #eaf8ec !important;
  color: #52a763 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.settings-page-v2 .settings-tag-list span[data-tone] {
  background: #eaf8ec !important;
  color: #52a763 !important;
}

.settings-page-v2 .settings-tag-list::after {
  content: "+" !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid #d9e4d6 !important;
  border-radius: 50% !important;
  color: #96a08f !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

@media (max-width: 580px) {
  .settings-page-v2 .settings-role-card {
    padding: 12px 13px 14px !important;
    border-radius: 14px !important;
  }

  .settings-page-v2 .settings-role-top {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  .settings-page-v2 .settings-avatar-ring,
  .settings-page-v2 .settings-avatar {
    width: 84px !important;
    height: 84px !important;
  }

  .settings-page-v2 #agentName {
    max-width: 122px !important;
    height: 27px !important;
    font-size: 21px !important;
    line-height: 27px !important;
  }

  .settings-page-v2 .settings-gender-icon {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  .settings-page-v2 .settings-role-meta-row {
    gap: 14px !important;
  }

  .settings-page-v2 .settings-relation-pill,
  .settings-page-v2 .settings-online-pill {
    font-size: 12px !important;
  }

  .settings-page-v2 .settings-companion-line {
    font-size: 13px !important;
  }

  .settings-page-v2 .settings-status-desc {
    max-width: 166px !important;
    font-size: 11px !important;
  }

  .settings-page-v2 .settings-personality-card {
    padding: 12px 13px 14px !important;
    border-radius: 14px !important;
  }

  .settings-page-v2 .settings-tag-list {
    gap: 8px !important;
  }

  .settings-page-v2 .settings-tag-list span {
    min-width: 41px !important;
    min-height: 22px !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
  }

  .settings-page-v2 .settings-tag-list::after {
    width: 22px !important;
    height: 22px !important;
    font-size: 15px !important;
  }
}

/* Final character settings page: card-list layout inspired by the provided reference. */
.profile-drawer .settings-page-v2 {
  background:
    radial-gradient(circle at 12% 8%, rgb(123 188 98 / 10%), transparent 28%),
    radial-gradient(circle at 88% 10%, rgb(108 176 91 / 12%), transparent 24%),
    linear-gradient(180deg, #fbfcf9 0%, #f7faf4 52%, #f4f8ef 100%) !important;
}

.settings-page-v2 .settings-drawer-head {
  height: 128px !important;
  min-height: 128px !important;
  padding: 34px 28px 18px !important;
  grid-template-columns: 64px minmax(0, 1fr) 64px !important;
  gap: 18px !important;
}

.settings-page-v2 .drawer-back,
.settings-page-v2 .settings-clothes-button {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgb(218 229 215 / 80%) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: 0 14px 36px rgb(60 76 55 / 10%) !important;
}

.settings-page-v2 .drawer-back .back-mark {
  width: 18px !important;
  height: 18px !important;
  border-color: #111819 !important;
  border-left-width: 3px !important;
  border-bottom-width: 3px !important;
}

.settings-page-v2 .settings-title-copy {
  align-self: center !important;
  gap: 9px !important;
}

.settings-page-v2 .settings-title-copy h2 {
  position: relative !important;
  width: fit-content !important;
  padding-right: 32px !important;
  color: #111819 !important;
  font-size: 32px !important;
  font-weight: 950 !important;
  letter-spacing: -1px !important;
}

.settings-page-v2 .settings-title-copy h2::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  background: url("./assets/settings-page/leaf-green.png") center / contain no-repeat !important;
  transform: translateY(-50%) rotate(-10deg) !important;
}

.settings-page-v2 .settings-title-copy p {
  color: #6f7772 !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

.settings-page-v2 .settings-clothes-button {
  min-width: 58px !important;
  padding: 0 !important;
  color: transparent !important;
}

.settings-page-v2 .settings-clothes-button span {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  background: url("./assets/settings-page/clothes-green.png") center / contain no-repeat !important;
}

.settings-page-v2 .settings-scroll-area {
  padding: 0 28px 30px !important;
}

.settings-page-v2 .settings-role-card {
  position: relative !important;
  min-height: 256px !important;
  margin-bottom: 26px !important;
  padding: 46px 36px 34px !important;
  overflow: hidden !important;
  border: 1px solid rgb(232 238 229 / 88%) !important;
  border-radius: 30px !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: 0 18px 42px rgb(65 78 61 / 8%) !important;
  backdrop-filter: none !important;
}

.settings-page-v2 .settings-role-card::after {
  content: "" !important;
  position: absolute !important;
  right: 34px !important;
  bottom: 30px !important;
  width: 150px !important;
  height: 118px !important;
  background: url("./assets/settings-page/letter-plant.png") center / contain no-repeat !important;
  opacity: .82 !important;
  pointer-events: none !important;
}

.settings-page-v2 .settings-role-card .settings-section-title {
  display: none !important;
}

.settings-page-v2 .settings-role-top {
  position: relative !important;
  z-index: 1 !important;
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 42px !important;
}

.settings-page-v2 .settings-avatar-picker {
  position: relative !important;
  width: 188px !important;
  height: 188px !important;
  display: block !important;
}

.settings-page-v2 .settings-avatar-ring,
.settings-page-v2 .settings-avatar {
  width: 188px !important;
  height: 188px !important;
  border-radius: 50% !important;
}

.settings-page-v2 .settings-avatar-ring {
  background: #fff !important;
  box-shadow:
    0 0 0 1px rgb(225 232 225 / 78%),
    0 18px 46px rgb(72 86 67 / 12%) !important;
}

.settings-page-v2 .settings-avatar-edit {
  position: absolute !important;
  right: -12px !important;
  bottom: -6px !important;
  width: 60px !important;
  height: 60px !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 5px solid #fff !important;
  border-radius: 50% !important;
  background: #4caf5a url("./assets/settings-page/camera-green.png") center / 30px 30px no-repeat !important;
  color: transparent !important;
  box-shadow: 0 10px 22px rgb(55 136 65 / 22%) !important;
}

.settings-page-v2 .settings-role-main {
  align-content: center !important;
  gap: 18px !important;
}

.settings-page-v2 .settings-name-field {
  gap: 14px !important;
}

.settings-page-v2 #agentName {
  max-width: 250px !important;
  height: 52px !important;
  color: #101617 !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 52px !important;
}

.settings-page-v2 .settings-gender-icon {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
}

.settings-page-v2 .settings-name-field::after {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  background: url("./assets/icons/profile/profile-icon-name.png") center / contain no-repeat !important;
  opacity: .6 !important;
}

.settings-page-v2 .settings-role-meta-row {
  gap: 14px !important;
}

.settings-page-v2 .settings-relation-pill,
.settings-page-v2 .settings-online-pill {
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: #fff0f3 !important;
  color: #e24772 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

.settings-page-v2 .settings-online-pill {
  background: #eef5eb !important;
  color: #263027 !important;
}

.settings-page-v2 .settings-relation-pill i {
  width: 20px !important;
  height: 20px !important;
  background-image: url("./assets/settings-page/heart-pink.png") !important;
}

.settings-page-v2 .settings-online-pill i {
  width: 16px !important;
  height: 16px !important;
  background: #4dad5a !important;
}

.settings-page-v2 .settings-companion-line {
  margin-top: 6px !important;
  color: #151b1c !important;
  font-size: 21px !important;
}

.settings-page-v2 .settings-companion-line strong {
  color: #48ad5a !important;
}

.settings-page-v2 .settings-status-desc {
  max-width: 360px !important;
  color: #353b3c !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.settings-page-v2 .settings-detail-card {
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 1px solid rgb(232 238 229 / 88%) !important;
  border-radius: 26px !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: 0 16px 38px rgb(65 78 61 / 7%) !important;
  backdrop-filter: none !important;
}

.settings-page-v2 .settings-detail-card summary {
  min-height: 120px !important;
  padding: 0 34px 0 102px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  align-items: center !important;
  gap: 18px !important;
  position: relative !important;
}

.settings-page-v2 .settings-detail-card summary::before {
  content: "" !important;
  position: absolute !important;
  left: 36px !important;
  top: 50% !important;
  width: 34px !important;
  height: 34px !important;
  background: var(--settings-entry-icon) center / contain no-repeat !important;
  transform: translateY(-50%) !important;
}

.settings-page-v2 .settings-entry-chat-style { --settings-entry-icon: url("./assets/settings-page/chat-green.png"); }
.settings-page-v2 .settings-entry-persona { --settings-entry-icon: url("./assets/settings-page/detail-green.png"); }
.settings-page-v2 .settings-entry-rules { --settings-entry-icon: url("./assets/settings-page/rules-green.png"); }
.settings-page-v2 .settings-entry-advanced { --settings-entry-icon: url("./assets/settings-page/camera-green.png"); }
.settings-page-v2 .settings-entry-hidden { --settings-entry-icon: url("./assets/settings-page/leaf-green.png"); }

.settings-page-v2 .settings-detail-card summary > span {
  color: #101617 !important;
  font-size: 26px !important;
  font-weight: 920 !important;
}

.settings-page-v2 .settings-detail-card summary > small {
  color: #737b7c !important;
  font-size: 18px !important;
  font-weight: 560 !important;
}

.settings-page-v2 .settings-detail-card summary::after {
  position: static !important;
  width: 15px !important;
  height: 15px !important;
  border-right: 3px solid #a2aaa2 !important;
  border-top: 3px solid #a2aaa2 !important;
  transform: rotate(45deg) !important;
}

.settings-page-v2 .settings-detail-card[open] summary::after {
  transform: rotate(135deg) !important;
}

.settings-page-v2 .settings-detail-card textarea,
.settings-page-v2 .settings-hidden-note,
.settings-page-v2 .settings-rule-list,
.settings-page-v2 .settings-advanced-grid {
  margin: 0 34px 30px !important;
}

.settings-page-v2 .drawer-actions {
  margin: 34px 6px 0 !important;
  padding: 0 0 34px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.settings-page-v2 .drawer-actions::after {
  content: none !important;
}

.settings-page-v2 .drawer-actions button {
  min-height: 86px !important;
  border-radius: 999px !important;
  font-size: 28px !important;
  font-weight: 780 !important;
  letter-spacing: 1px !important;
}

.settings-page-v2 .drawer-actions button:first-child {
  background: linear-gradient(135deg, #5ab766 0%, #42a250 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 36px rgb(58 151 72 / 20%) !important;
}

.settings-page-v2 .drawer-actions button:first-child::after {
  content: "" !important;
  width: 42px !important;
  height: 42px !important;
  margin-left: 22px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  background: url("./assets/settings-page/sparkle.png") center / contain no-repeat !important;
}

.settings-page-v2 .drawer-actions button:last-child {
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgb(213 83 83 / 20%) !important;
  background: rgb(255 246 246 / 92%) !important;
  color: #d65353 !important;
  box-shadow: 0 14px 28px rgb(213 83 83 / 9%) !important;
}

@media (max-width: 580px) {
  .settings-page-v2 .settings-drawer-head {
    height: 102px !important;
    min-height: 102px !important;
    padding: 24px 20px 12px !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
    gap: 12px !important;
  }

  .settings-page-v2 .drawer-back,
  .settings-page-v2 .settings-clothes-button {
    width: 48px !important;
    height: 48px !important;
  }

  .settings-page-v2 .settings-clothes-button span {
    width: 29px !important;
    height: 29px !important;
  }

  .settings-page-v2 .settings-title-copy h2 {
    padding-right: 26px !important;
    font-size: 27px !important;
  }

  .settings-page-v2 .settings-title-copy h2::after {
    width: 19px !important;
    height: 19px !important;
  }

  .settings-page-v2 .settings-title-copy p {
    font-size: 15px !important;
  }

  .settings-page-v2 .settings-scroll-area {
    padding: 0 18px 24px !important;
  }

  .settings-page-v2 .settings-role-card {
    min-height: 198px !important;
    margin-bottom: 18px !important;
    padding: 32px 20px 24px !important;
    border-radius: 24px !important;
  }

  .settings-page-v2 .settings-role-card::after {
    right: 14px !important;
    bottom: 18px !important;
    width: 98px !important;
    height: 78px !important;
    opacity: .65 !important;
  }

  .settings-page-v2 .settings-role-top {
    grid-template-columns: 122px minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .settings-page-v2 .settings-avatar-picker,
  .settings-page-v2 .settings-avatar-ring,
  .settings-page-v2 .settings-avatar {
    width: 112px !important;
    height: 112px !important;
  }

  .settings-page-v2 .settings-avatar-edit {
    right: -7px !important;
    bottom: -6px !important;
    width: 43px !important;
    height: 43px !important;
    border-width: 4px !important;
    background-size: 22px 22px !important;
  }

  .settings-page-v2 .settings-role-main {
    gap: 10px !important;
  }

  .settings-page-v2 #agentName {
    max-width: 144px !important;
    height: 36px !important;
    font-size: 26px !important;
    line-height: 36px !important;
  }

  .settings-page-v2 .settings-gender-icon {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  .settings-page-v2 .settings-name-field::after {
    width: 23px !important;
    height: 23px !important;
  }

  .settings-page-v2 .settings-relation-pill,
  .settings-page-v2 .settings-online-pill {
    min-height: 32px !important;
    padding: 0 13px !important;
    font-size: 14px !important;
  }

  .settings-page-v2 .settings-companion-line,
  .settings-page-v2 .settings-status-desc {
    font-size: 15px !important;
  }

  .settings-page-v2 .settings-status-desc {
    max-width: 190px !important;
  }

  .settings-page-v2 .settings-detail-card {
    margin-bottom: 17px !important;
    border-radius: 22px !important;
  }

  .settings-page-v2 .settings-detail-card summary {
    min-height: 82px !important;
    padding: 0 22px 0 70px !important;
    grid-template-columns: minmax(0, 1fr) auto 18px !important;
    gap: 10px !important;
  }

  .settings-page-v2 .settings-detail-card summary::before {
    left: 24px !important;
    width: 27px !important;
    height: 27px !important;
  }

  .settings-page-v2 .settings-detail-card summary > span {
    font-size: 20px !important;
  }

  .settings-page-v2 .settings-detail-card summary > small {
    font-size: 13px !important;
  }

  .settings-page-v2 .settings-detail-card textarea,
  .settings-page-v2 .settings-hidden-note,
  .settings-page-v2 .settings-rule-list,
  .settings-page-v2 .settings-advanced-grid {
    margin: 0 20px 20px !important;
  }

  .settings-page-v2 .drawer-actions {
    margin-top: 24px !important;
    padding-bottom: 26px !important;
  }

  .settings-page-v2 .drawer-actions button {
    min-height: 66px !important;
    font-size: 19px !important;
    letter-spacing: 0 !important;
  }

  .settings-page-v2 .drawer-actions button:first-child {
    font-size: 22px !important;
  }

  .settings-page-v2 .drawer-actions::after {
    font-size: 14px !important;
  }
}

/* Final mobile me-page override: this must stay after all older me-page blocks. */
.phone-shell.is-list-mode .screen-list.is-me-page .me-service-card {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
  position: absolute !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
  position: absolute !important;
  top: 48px !important;
  right: 10px !important;
  z-index: 60 !important;
  display: block !important;
  width: calc(100% - 20px) !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow:
    0 18px 48px rgb(42 58 36 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 90%) !important;
  backdrop-filter: blur(16px) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item {
  min-height: 50px !important;
  padding: 0 10px !important;
  grid-template-columns: 26px minmax(0, 1fr) 12px !important;
  gap: 8px !important;
  border-radius: 13px !important;
}

.me-focus-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 3px !important;
}

.me-focus-stats span {
  min-height: 20px !important;
  padding: 4px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #f7fbf5 !important;
  color: #65708a !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.me-focus-stats b {
  color: #2fa845 !important;
  font-weight: 900 !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 8px 6px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-avatar-ring,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-hero-main {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    padding: 0 !important;
    margin-left: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 34px !important;
    height: 34px !important;
    transform: none !important;
    border-radius: 50% !important;
    background: rgb(255 255 255 / 72%) !important;
    box-shadow: 0 10px 22px rgb(67 88 57 / 10%) !important;
  }

  .me-focus-card,
  .me-relation-card:not(.me-relation-stats-card),
  .me-space-card,
  .me-letters-card {
    margin-bottom: 8px !important;
  }

  .me-focus-card {
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  .me-focus-card .me-section-head {
    margin-bottom: 7px !important;
  }

  .me-focus-card .me-section-head h2 {
    gap: 7px !important;
    font-size: 16px !important;
  }

  .me-title-spark {
    width: 16px !important;
    height: 16px !important;
  }

  .me-focus-content {
    grid-template-columns: 48px minmax(0, 1fr) 58px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .me-focus-avatar {
    width: 48px !important;
    height: 48px !important;
    box-shadow:
      0 0 0 3px #ffffff,
      0 8px 18px rgb(60 72 56 / 11%) !important;
  }

  .me-focus-copy {
    min-width: 0 !important;
    gap: 2px !important;
  }

  .me-focus-copy strong {
    overflow: hidden !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-focus-copy span,
  .me-focus-copy em {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-focus-copy p {
    max-width: 105px !important;
    margin-top: 2px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .me-focus-stats {
    gap: 4px !important;
    margin-top: 2px !important;
  }

  .me-focus-stats span {
    min-height: 17px !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
  }

  .me-focus-action {
    grid-column: auto !important;
    justify-self: end !important;
    min-width: 56px !important;
    height: 27px !important;
    margin-top: 0 !important;
    font-size: 11px !important;
  }

  .me-focus-action::after {
    margin-left: 4px !important;
    font-size: 16px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) {
    grid-template-columns: 1fr !important;
    padding: 11px !important;
    gap: 7px !important;
    border-radius: 16px !important;
  }

  .me-relation-card .me-relation-left h2 {
    gap: 7px !important;
    font-size: 16px !important;
  }

  .me-companion-profile {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .me-companion-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .me-companion-copy > strong {
    max-width: 92px !important;
    overflow: hidden !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-companion-copy .me-level,
  .me-companion-relation {
    height: 18px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-progress {
    width: calc(100% - 58px) !important;
    height: 6px !important;
    margin: 8px 0 7px 58px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-left > p {
    width: calc(100% - 58px) !important;
    margin: 0 0 0 58px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .me-relation-days {
    grid-template-columns: auto auto auto !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 5px !important;
    padding: 5px 0 !important;
    border-top: 1px solid #e0e5dd !important;
    border-bottom: 1px solid #e0e5dd !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .me-relation-days span {
    font-size: 12px !important;
  }

  .me-relation-days strong {
    font-size: 25px !important;
  }

  .me-relation-days em {
    font-size: 14px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right > span {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
    font-size: 11px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right p {
    min-height: 19px !important;
    margin: 0 !important;
    padding: 3px 4px 3px 14px !important;
    border-radius: 999px !important;
    background: #f7fbf5 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right p::before {
    left: 4px !important;
    top: 3px !important;
    font-size: 9px !important;
  }

  .me-space-grid {
    gap: 6px !important;
  }

  .me-space-item {
    min-height: 70px !important;
    padding: 7px 3px 6px !important;
    border-radius: 13px !important;
  }

  .me-space-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }

  .me-space-item strong {
    font-size: 11px !important;
  }

  .me-space-item b,
  .me-space-item span {
    font-size: 9px !important;
  }

  .me-letters-card {
    padding: 11px 12px !important;
    border-radius: 16px !important;
  }

  .me-letters-card .me-section-head {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
  }

  .me-letters-card .me-section-head h2 {
    font-size: 17px !important;
  }

  .me-section-subtitle {
    margin-top: 5px !important;
    font-size: 11px !important;
  }

  .me-letter-card {
    min-height: 50px !important;
    padding: 7px 2px !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.28fr) 42px !important;
    gap: 6px !important;
  }

  .me-letter-card-head {
    grid-template-columns: 28px minmax(0, 1fr) 5px !important;
    gap: 5px !important;
  }

  .me-letter-card-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .me-letter-card-meta strong {
    font-size: 11px !important;
  }

  .me-letter-card-content {
    font-size: 10px !important;
  }

  .me-letter-view {
    min-width: 38px !important;
    height: 23px !important;
    font-size: 10px !important;
    line-height: 23px !important;
  }
}

/* Me page relationship center v2. */
.phone-shell.is-list-mode .screen-list.is-me-page {
  background: #fbfcf7 url("./assets/backgrounds/profile/me-page-background.png") center top / 100% 100% no-repeat !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
  padding: 30px 32px 108px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
  position: relative !important;
  grid-template-columns: 92px minmax(0, 1fr) 112px !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 138px !important;
  height: auto !important;
  margin: 0 8px 24px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring {
  width: 90px !important;
  height: 90px !important;
  box-shadow:
    0 0 0 6px #ffffff,
    0 14px 28px rgb(72 86 62 / 14%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-name-row strong {
  max-width: 180px !important;
  font-size: 30px !important;
  font-weight: 900 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row {
  margin-top: 12px !important;
  color: #5c6680 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.me-top-actions {
  display: flex !important;
  align-self: start !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  padding-top: 4px !important;
}

.me-top-actions button {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: transparent !important;
}

.me-home-action::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 14px !important;
  width: 21px !important;
  height: 17px !important;
  border: 4px solid #1a211b !important;
  border-top: 0 !important;
  border-radius: 3px !important;
}

.me-home-action::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 5px !important;
  width: 19px !important;
  height: 19px !important;
  border-left: 4px solid #1a211b !important;
  border-top: 4px solid #1a211b !important;
  transform: rotate(45deg) !important;
}

.me-setting-action::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border: 4px solid #1a211b !important;
  border-radius: 50% !important;
}

.me-setting-action::after {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 15px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #1a211b !important;
  box-shadow:
    0 -13px 0 -1px #1a211b,
    0 13px 0 -1px #1a211b,
    13px 0 0 -1px #1a211b,
    -13px 0 0 -1px #1a211b !important;
}

.me-focus-card,
.me-relation-card,
.me-letters-card {
  border: 1px solid rgb(229 235 225 / 86%) !important;
  border-radius: 24px !important;
  background: rgb(255 255 255 / 88%) !important;
  box-shadow:
    0 18px 42px rgb(73 88 62 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 78%) !important;
}

.me-focus-card {
  padding: 25px 28px !important;
}

.me-focus-card .me-section-head {
  margin-bottom: 20px !important;
}

.me-focus-card .me-section-head h2,
.me-relation-card .me-relation-left h2 {
  font-size: 23px !important;
  font-weight: 900 !important;
}

.me-title-spark {
  width: 23px !important;
  height: 23px !important;
  display: inline-block !important;
  background: url("./assets/icons/me/me-star.png") center / contain no-repeat !important;
}

.me-focus-content {
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) 126px !important;
  align-items: center !important;
  gap: 26px !important;
}

.me-focus-avatar {
  position: relative !important;
  width: 126px !important;
  height: 126px !important;
  border-radius: 50% !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 5px #ffffff,
    0 14px 28px rgb(60 72 56 / 14%) !important;
}

.me-focus-avatar::after,
.me-companion-avatar::after {
  content: "" !important;
  position: absolute !important;
  right: -3px !important;
  bottom: 4px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background:
    #fff url("./assets/icons/me/me-heart-pink-alt.png") center / 16px 16px no-repeat !important;
  box-shadow: 0 4px 10px rgb(255 76 124 / 16%) !important;
}

.me-focus-copy {
  display: grid !important;
  gap: 8px !important;
}

.me-focus-copy strong {
  color: #161d18 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.me-focus-copy span {
  color: #6a728c !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.me-focus-copy span b {
  color: #ff2d68 !important;
  font-size: 18px !important;
}

.me-focus-copy em {
  color: #37a840 !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.me-focus-copy p {
  width: fit-content !important;
  max-width: 210px !important;
  margin: 8px 0 0 !important;
  padding: 8px 16px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #f5f2ed !important;
  color: #2e352f !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-focus-action {
  justify-self: end !important;
  min-width: 112px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #5ac65a, #34a83d) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgb(56 177 64 / 22%) !important;
}

.me-focus-action::after {
  content: "›" !important;
  margin-left: 8px !important;
  font-size: 26px !important;
  line-height: 0 !important;
}

.me-relation-card:not(.me-relation-stats-card) {
  grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 26px 30px !important;
}

.me-relation-stats-card[hidden] {
  display: none !important;
}

.me-companion-profile {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  margin-top: 22px !important;
}

.me-companion-avatar {
  position: relative !important;
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 4px #ffffff,
    0 10px 24px rgb(60 72 56 / 13%) !important;
}

.me-companion-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.me-companion-copy > strong {
  color: #151b17 !important;
  font-size: 27px !important;
  font-weight: 900 !important;
}

.me-companion-relation {
  height: 24px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #eaf7dc !important;
  color: #48a944 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.me-relation-card:not(.me-relation-stats-card) .me-relation-progress {
  width: calc(100% - 110px) !important;
  max-width: 220px !important;
  margin: 17px 0 12px 110px !important;
}

.me-relation-card:not(.me-relation-stats-card) .me-relation-progress b {
  width: var(--me-relation-progress, 72%) !important;
}

.me-relation-card:not(.me-relation-stats-card) .me-relation-left > p {
  margin: 0 0 0 110px !important;
  color: #68718b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.me-relation-days {
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  padding: 0 24px !important;
  border-left: 1px solid #e0e5dd !important;
  border-right: 1px solid #e0e5dd !important;
}

.me-relation-days span {
  color: #68718b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.me-relation-days strong {
  color: #202640 !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.me-relation-days em {
  color: #202640 !important;
  font-size: 19px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.me-relation-card:not(.me-relation-stats-card) .me-relation-right {
  padding-left: 0 !important;
  border-left: 0 !important;
}

.me-relation-card:not(.me-relation-stats-card) .me-relation-right > span {
  display: block !important;
  margin-bottom: 10px !important;
  color: #68718b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.me-relation-card:not(.me-relation-stats-card) .me-relation-right p {
  position: relative !important;
  margin: 8px 0 !important;
  padding-left: 22px !important;
  color: #68718b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.me-relation-card:not(.me-relation-stats-card) .me-relation-right p::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #43b84f !important;
  font-weight: 900 !important;
}

.me-space-card {
  margin: 0 0 18px !important;
}

.me-space-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.me-space-item {
  min-height: 142px !important;
  padding: 20px 10px 16px !important;
  border: 1px solid rgb(229 235 225 / 86%) !important;
  border-radius: 20px !important;
  background: rgb(255 255 255 / 88%) !important;
  box-shadow: 0 14px 30px rgb(73 88 62 / 7%) !important;
}

.me-space-icon {
  width: 50px !important;
  height: 50px !important;
  flex-basis: 50px !important;
}

.me-space-more {
  background-image:
    radial-gradient(circle at 28% 28%, #8f98a5 0 7px, transparent 7.5px),
    radial-gradient(circle at 72% 28%, #8f98a5 0 7px, transparent 7.5px),
    radial-gradient(circle at 28% 72%, #8f98a5 0 7px, transparent 7.5px),
    radial-gradient(circle at 72% 72%, #8f98a5 0 7px, transparent 7.5px) !important;
}

.me-space-item strong {
  font-size: 17px !important;
}

.me-space-item b {
  margin-top: 0 !important;
  font-size: 17px !important;
}

.me-space-item span {
  margin-top: 1px !important;
  font-size: 12px !important;
}

.me-letters-card {
  padding: 25px 28px !important;
}

.me-letters-card .me-section-head {
  padding-bottom: 14px !important;
  border-bottom: 1px solid #edf1eb !important;
}

.me-letter-list {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 0 !important;
}

.me-letter-card {
  min-height: 82px !important;
  padding: 13px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 70px !important;
  align-items: center !important;
  gap: 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf1eb !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.me-letter-card:last-child {
  border-bottom: 0 !important;
}

.me-letter-card-head {
  grid-template-columns: 48px minmax(0, 1fr) 8px !important;
  gap: 10px !important;
}

.me-letter-card-avatar {
  width: 48px !important;
  height: 48px !important;
}

.me-letter-card-meta strong {
  font-size: 17px !important;
}

.me-letter-card-meta em {
  color: #ff3b78 !important;
  font-size: 0 !important;
}

.me-letter-card-meta em::before {
  content: "●" !important;
  font-size: 14px !important;
}

.me-letter-card-content {
  min-height: auto !important;
  margin-top: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: 1 !important;
}

.me-letter-view {
  justify-self: end !important;
  align-self: center !important;
  min-width: 60px !important;
  height: 34px !important;
  margin-top: 0 !important;
  background: #47b844 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 34px !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding: 14px 12px calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    grid-template-columns: 54px minmax(0, 1fr) 62px !important;
    gap: 11px !important;
    min-height: 86px !important;
    margin: 0 4px 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring {
    width: 52px !important;
    height: 52px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row strong {
    max-width: 98px !important;
    font-size: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row {
    margin-top: 7px !important;
    font-size: 12px !important;
  }

  .me-top-actions {
    gap: 8px !important;
    padding-top: 0 !important;
  }

  .me-top-actions button {
    width: 26px !important;
    height: 26px !important;
    transform: scale(0.72) !important;
    transform-origin: center !important;
  }

  .me-focus-card,
  .me-relation-card:not(.me-relation-stats-card),
  .me-letters-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .me-focus-card .me-section-head h2,
  .me-relation-card .me-relation-left h2 {
    font-size: 17px !important;
  }

  .me-focus-content {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .me-focus-avatar {
    width: 70px !important;
    height: 70px !important;
  }

  .me-focus-avatar::after,
  .me-companion-avatar::after {
    width: 18px !important;
    height: 18px !important;
    background-size: 12px 12px !important;
  }

  .me-focus-copy strong {
    font-size: 18px !important;
  }

  .me-focus-copy span,
  .me-focus-copy em {
    font-size: 12px !important;
  }

  .me-focus-copy span b {
    font-size: 13px !important;
  }

  .me-focus-copy p {
    max-width: 128px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .me-focus-action {
    grid-column: 2 !important;
    justify-self: start !important;
    min-width: 78px !important;
    height: 32px !important;
    margin-top: 4px !important;
    font-size: 13px !important;
  }

  .me-focus-action::after {
    font-size: 19px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .me-companion-profile {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-top: 13px !important;
  }

  .me-companion-avatar {
    width: 60px !important;
    height: 60px !important;
  }

  .me-companion-copy > strong {
    font-size: 18px !important;
  }

  .me-companion-relation {
    height: 19px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-progress,
  .me-relation-card:not(.me-relation-stats-card) .me-relation-left > p {
    width: 70% !important;
    margin-left: 74px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-left > p {
    font-size: 12px !important;
  }

  .me-relation-days {
    grid-template-columns: auto auto auto !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 12px 0 !important;
    border-top: 1px solid #e0e5dd !important;
    border-bottom: 1px solid #e0e5dd !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .me-relation-days strong {
    font-size: 30px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right > span {
    grid-column: 1 / -1 !important;
    margin-bottom: 2px !important;
    font-size: 12px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right p {
    margin: 0 !important;
    font-size: 11px !important;
  }

  .me-space-grid {
    gap: 8px !important;
  }

  .me-space-item {
    min-height: 88px !important;
    padding: 12px 4px 9px !important;
    border-radius: 14px !important;
  }

  .me-space-icon {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
  }

  .me-space-item strong {
    font-size: 12px !important;
  }

  .me-space-item b,
  .me-space-item span {
    font-size: 10px !important;
  }

  .me-letters-card .me-section-head {
    padding-bottom: 8px !important;
  }

  .me-letter-card {
    min-height: 62px !important;
    padding: 9px 4px !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) 48px !important;
    gap: 8px !important;
  }

  .me-letter-card-head {
    grid-template-columns: 34px minmax(0, 1fr) 6px !important;
    gap: 6px !important;
  }

  .me-letter-card-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  .me-letter-card-meta strong {
    font-size: 12px !important;
  }

  .me-letter-card-meta em::before {
    font-size: 10px !important;
  }

  .me-letter-card-content {
    font-size: 11px !important;
  }

  .me-letter-view {
    min-width: 42px !important;
    height: 25px !important;
    font-size: 11px !important;
    line-height: 25px !important;
  }
}

/* Mobile me page compaction: keep the relationship content, but stop the first two cards from filling the whole screen. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    min-height: 76px !important;
    margin-bottom: 10px !important;
  }

  .me-focus-card,
  .me-relation-card:not(.me-relation-stats-card),
  .me-space-card,
  .me-letters-card {
    margin-bottom: 9px !important;
  }

  .me-focus-card {
    padding: 11px 12px !important;
    border-radius: 16px !important;
  }

  .me-focus-card .me-section-head {
    margin-bottom: 8px !important;
  }

  .me-focus-card .me-section-head h2 {
    gap: 7px !important;
    font-size: 16px !important;
  }

  .me-title-spark {
    width: 16px !important;
    height: 16px !important;
  }

  .me-focus-content {
    grid-template-columns: 52px minmax(0, 1fr) 70px !important;
    gap: 9px !important;
    align-items: center !important;
  }

  .me-focus-avatar {
    width: 52px !important;
    height: 52px !important;
    box-shadow:
      0 0 0 3px #ffffff,
      0 8px 18px rgb(60 72 56 / 11%) !important;
  }

  .me-focus-avatar::after {
    right: -2px !important;
    bottom: 0 !important;
    width: 15px !important;
    height: 15px !important;
    background-size: 10px 10px !important;
  }

  .me-focus-copy {
    min-width: 0 !important;
    gap: 2px !important;
  }

  .me-focus-copy strong {
    overflow: hidden !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-focus-copy span,
  .me-focus-copy em {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-focus-copy span b {
    font-size: 12px !important;
  }

  .me-focus-copy p {
    max-width: 118px !important;
    margin-top: 3px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .me-focus-action {
    grid-column: auto !important;
    justify-self: end !important;
    min-width: 62px !important;
    height: 29px !important;
    margin-top: 0 !important;
    font-size: 12px !important;
  }

  .me-focus-action::after {
    margin-left: 4px !important;
    font-size: 16px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) {
    padding: 12px !important;
    gap: 9px !important;
    border-radius: 16px !important;
  }

  .me-relation-card .me-relation-left h2 {
    gap: 7px !important;
    font-size: 16px !important;
  }

  .me-companion-profile {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 9px !important;
  }

  .me-companion-avatar {
    width: 46px !important;
    height: 46px !important;
    box-shadow:
      0 0 0 3px #ffffff,
      0 8px 16px rgb(60 72 56 / 10%) !important;
  }

  .me-companion-avatar::after {
    right: -2px !important;
    bottom: 0 !important;
    width: 15px !important;
    height: 15px !important;
    background-size: 10px 10px !important;
  }

  .me-companion-copy {
    gap: 5px !important;
  }

  .me-companion-copy > strong {
    max-width: 92px !important;
    overflow: hidden !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-companion-copy .me-level,
  .me-companion-relation {
    height: 18px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-progress {
    width: calc(100% - 58px) !important;
    height: 6px !important;
    margin: 8px 0 7px 58px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-left > p {
    width: calc(100% - 58px) !important;
    margin: 0 0 0 58px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .me-relation-days {
    padding: 7px 0 !important;
    gap: 5px !important;
  }

  .me-relation-days span {
    font-size: 12px !important;
  }

  .me-relation-days strong {
    font-size: 25px !important;
  }

  .me-relation-days em {
    font-size: 14px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right > span {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
    font-size: 11px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right p {
    min-height: 22px !important;
    padding: 4px 4px 4px 14px !important;
    border-radius: 999px !important;
    background: #f7fbf5 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right p::before {
    left: 4px !important;
    top: 4px !important;
    font-size: 9px !important;
  }

  .me-space-grid {
    gap: 6px !important;
  }

  .me-space-item {
    min-height: 76px !important;
    padding: 9px 3px 7px !important;
    border-radius: 13px !important;
  }

  .me-space-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }

  .me-space-item strong {
    font-size: 11px !important;
  }

  .me-space-item b,
  .me-space-item span {
    font-size: 9px !important;
  }
}

/* Absolute final override for the mobile me page. Keep this as the last rules in this file. */
.phone-shell.is-list-mode .screen-list.is-me-page .me-service-card {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
  position: absolute !important;
  top: 48px !important;
  right: 10px !important;
  z-index: 60 !important;
  display: block !important;
  width: calc(100% - 20px) !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow: 0 18px 48px rgb(42 58 36 / 18%) !important;
}

.me-focus-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 3px !important;
}

.me-focus-stats span {
  min-height: 20px !important;
  padding: 4px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #f7fbf5 !important;
  color: #65708a !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.me-focus-stats b {
  color: #2fa845 !important;
  font-weight: 900 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right p::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right p:nth-of-type(1)::before {
  background-image: url("./assets/icons/me/me-icon-exclusive-name.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right p:nth-of-type(2)::before {
  background-image: url("./assets/icons/me/me-icon-night-letter.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right p:nth-of-type(3)::before {
  background-image: url("./assets/icons/me/me-icon-active-care.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right p:nth-of-type(4)::before {
  background-image: url("./assets/icons/me/me-icon-memory-feature.png") !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 8px 6px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-avatar-ring,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-hero-main {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    padding: 0 !important;
    margin-left: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 34px !important;
    height: 34px !important;
    transform: none !important;
    border-radius: 50% !important;
    background: rgb(255 255 255 / 72%) !important;
    box-shadow: 0 10px 22px rgb(67 88 57 / 10%) !important;
  }

  .me-focus-card,
  .me-relation-card:not(.me-relation-stats-card),
  .me-space-card,
  .me-letters-card {
    margin-bottom: 8px !important;
  }

  .me-focus-card {
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  .me-focus-card .me-section-head {
    margin-bottom: 7px !important;
  }

  .me-focus-card .me-section-head h2 {
    gap: 7px !important;
    font-size: 16px !important;
  }

  .me-focus-content {
    grid-template-columns: 48px minmax(0, 1fr) 58px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .me-focus-avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .me-focus-copy {
    min-width: 0 !important;
    gap: 2px !important;
  }

  .me-focus-copy strong {
    overflow: hidden !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-focus-copy span,
  .me-focus-copy em {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-focus-copy p {
    max-width: 105px !important;
    margin-top: 2px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .me-focus-stats {
    gap: 4px !important;
    margin-top: 2px !important;
  }

  .me-focus-stats span {
    min-height: 17px !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
  }

  .me-focus-action {
    grid-column: auto !important;
    justify-self: end !important;
    min-width: 56px !important;
    height: 27px !important;
    margin-top: 0 !important;
    font-size: 11px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) {
    grid-template-columns: 1fr !important;
    padding: 9px 11px 11px !important;
    gap: 4px !important;
    border-radius: 16px !important;
  }

  .me-companion-profile {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 2px !important;
  }

  .me-companion-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-progress {
    width: calc(100% - 58px) !important;
    height: 6px !important;
    margin: 5px 0 5px 58px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-left > p {
    width: calc(100% - 58px) !important;
    margin: 0 0 0 58px !important;
    font-size: 11px !important;
  }

  .me-relation-days {
    grid-template-columns: auto auto auto !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 5px !important;
    padding: 3px 0 !important;
    border-top: 1px solid #e0e5dd !important;
    border-bottom: 1px solid #e0e5dd !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .me-relation-days strong {
    font-size: 25px !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: -1px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .me-relation-card:not(.me-relation-stats-card) .me-relation-right p {
    min-height: 21px !important;
    margin: 0 !important;
    padding: 4px 4px 4px 17px !important;
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right p::before {
    width: 12px !important;
    height: 12px !important;
  }

  .me-space-item {
    min-height: 70px !important;
    padding: 7px 3px 6px !important;
  }

  .me-letters-card {
    padding: 11px 12px !important;
  }

  .me-letter-card {
    min-height: 54px !important;
    padding: 8px 2px !important;
    grid-template-columns: 102px minmax(0, 1fr) 42px !important;
    gap: 5px !important;
  }

  .me-letter-card-head {
    grid-template-columns: 32px minmax(0, 1fr) 0 !important;
    gap: 7px !important;
  }

  .me-letter-card-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .me-letter-card-meta strong {
    display: block !important;
    overflow: hidden !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .me-letter-card-content {
    transform: translateX(-3px) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .me-letter-view {
    min-width: 38px !important;
    height: 23px !important;
    font-size: 10px !important;
    line-height: 23px !important;
  }
}

/* True final mobile diary sizing: keep diary cards inside narrow phone screens. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: 168px !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
    left: 0 !important;
    height: auto !important;
    padding: 12px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 16px 15px !important;
    border-radius: 22px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card-head {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-avatar {
    width: 54px !important;
    height: 54px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-block {
    gap: 7px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-row {
    gap: 8px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-pencil {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-title-row strong {
    overflow: hidden !important;
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-date-row {
    gap: 9px !important;
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-weather {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-content {
    gap: 8px !important;
    margin: 22px 0 15px 66px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-content p {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-mood {
    gap: 8px !important;
    margin-left: 66px !important;
    font-size: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-mood i {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
}

/* True final AI letters: content under name, unread dot on View button. */
.me-letter-card {
  grid-template-columns: minmax(0, 1fr) 70px !important;
}

.me-letter-card-head {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}

.me-letter-card-head > i,
.me-letter-card-meta em,
.me-letter-card-meta em::before,
.me-letter-card-content {
  display: none !important;
  content: none !important;
}

.me-letter-card-inline-content {
  display: -webkit-box !important;
  margin-top: 5px !important;
  overflow: hidden !important;
  color: #68718b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.me-letter-view {
  position: relative !important;
  justify-self: end !important;
}

.me-letter-card.is-unread .me-letter-view::after {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #ff2b68 !important;
  box-shadow: 0 2px 6px rgb(255 43 104 / 28%) !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card {
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-head {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-inline-content {
    margin-top: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card.is-unread .me-letter-view::after {
    top: -4px !important;
    right: -4px !important;
    width: 7px !important;
    height: 7px !important;
    border-width: 1.5px !important;
  }
}

/* Final me-page settings menu: only the top-right settings popup. */
.phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
  position: absolute !important;
  top: 20px !important;
  right: 24px !important;
  z-index: 70 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  height: 82px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 88%) url("./assets/settings-menu/settings-button.png") center / 30px 30px no-repeat !important;
  box-shadow: 0 12px 28px rgb(48 62 43 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::after {
  content: "设置" !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin-top: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64708a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-service-card {
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
  position: absolute !important;
  top: 94px !important;
  right: 20px !important;
  z-index: 65 !important;
  display: block !important;
  width: 260px !important;
  margin: 0 !important;
  padding: 22px 18px 18px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow:
    0 22px 54px rgb(43 55 40 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 90%) !important;
  backdrop-filter: blur(16px) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card::before {
  content: "" !important;
  position: absolute !important;
  top: -15px !important;
  right: 74px !important;
  width: 34px !important;
  height: 28px !important;
  background: rgb(255 255 255 / 94%) !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin: 0 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 50px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #232b42 !important;
  text-align: left !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item::after,
.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item small,
.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item em {
  display: none !important;
  content: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item i {
  width: 26px !important;
  height: 26px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item span {
  display: block !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item strong {
  color: #232b42 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-logout {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgb(224 229 222 / 80%) !important;
  border-radius: 0 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-logout strong {
  color: #ff2e6d !important;
}

.me-service-shield { background-image: url("./assets/settings-menu/account-security.png") !important; }
.me-service-palette { background-image: url("./assets/settings-menu/personalize.png") !important; }
.me-service-bell { background-image: url("./assets/settings-menu/notifications.png") !important; }
.me-service-lock { background-image: url("./assets/settings-menu/privacy.png") !important; }
.me-service-help { background-image: url("./assets/settings-menu/help-feedback.png") !important; }
.me-service-info { background-image: url("./assets/settings-menu/about-us.png") !important; }
.me-service-logout-icon { background-image: url("./assets/settings-menu/logout.png") !important; }

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    top: 16px !important;
    right: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 58px !important;
    height: 74px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before {
    width: 48px !important;
    height: 48px !important;
    background-size: 28px 28px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::after {
    margin-top: 5px !important;
    font-size: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    top: 84px !important;
    right: 14px !important;
    width: min(260px, calc(100% - 28px)) !important;
    padding: 20px 17px 17px !important;
    border-radius: 23px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card::before {
    right: 58px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item {
    min-height: 48px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item i {
    width: 24px !important;
    height: 24px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item strong {
    font-size: 16px !important;
  }
}

/* Mobile settings popup fine-tuning: move up, narrow panel, larger icons. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    top: 4px !important;
    right: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 60px !important;
    height: 74px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before {
    width: 52px !important;
    height: 52px !important;
    background-size: 33px 33px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    top: 72px !important;
    right: 18px !important;
    width: 220px !important;
    padding: 18px 14px 15px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card::before {
    right: 44px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 13px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item i {
    width: 31px !important;
    height: 31px !important;
  }
}

/* Mobile settings popup final width/icon pass. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    right: 20px !important;
    width: 188px !important;
    padding: 17px 12px 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card::before {
    right: 38px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item {
    grid-template-columns: 30px minmax(0, max-content) !important;
    gap: 10px !important;
    min-height: 47px !important;
    padding: 0 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-item i {
    width: 30px !important;
    height: 30px !important;
    background-size: 34px 34px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-bell {
    background-size: 30px 30px !important;
  }
}

/* Me page closest companion: match the compact reference card, keep unlocked section. */
.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 116px !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 10px 14px 11px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-left {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-left h2 {
  grid-column: 1 / -1 !important;
  margin: 0 0 7px !important;
  gap: 5px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-section-icon {
  width: 14px !important;
  height: 14px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-profile {
  display: contents !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-avatar {
  grid-column: 1 !important;
  grid-row: 2 / 5 !important;
  width: 50px !important;
  height: 50px !important;
  align-self: start !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 6px 14px rgb(60 72 56 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-avatar::after {
  right: -2px !important;
  bottom: 0 !important;
  width: 13px !important;
  height: 13px !important;
  background-size: 8px 8px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-copy {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-copy > strong {
  max-width: 72px !important;
  overflow: hidden !important;
  color: #111714 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-copy .me-level,
.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-relation {
  height: 17px !important;
  padding: 0 7px !important;
  font-size: 9px !important;
  line-height: 17px !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-progress {
  grid-column: 2 !important;
  grid-row: 3 !important;
  width: 100% !important;
  height: 5px !important;
  margin: 11px 0 7px !important;
  border-radius: 999px !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-left > p {
  grid-column: 2 !important;
  grid-row: 4 !important;
  width: auto !important;
  margin: 0 !important;
  color: #69728c !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-days {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  align-items: end !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 0 0 14px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 1px solid rgb(224 229 222 / 88%) !important;
  border-right: 0 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-days span {
  grid-column: 1 / -1 !important;
  color: #69728c !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-days strong {
  grid-column: 1 !important;
  grid-row: 2 !important;
  color: #25304b !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-days em {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-left: 3px !important;
  color: #25304b !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-days strong,
.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-days em {
  display: inline-block !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right {
  grid-column: 1 / -1 !important;
  margin-top: 9px !important;
}

/* Mobile me page bottom alignment and focus-card letter decoration. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding-top: 28px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 54px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    height: 24px !important;
    min-height: 24px !important;
    margin-bottom: 4px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    position: relative !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-content {
    grid-template-columns: 48px minmax(0, 1fr) 108px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action {
    position: relative !important;
    align-self: end !important;
    justify-self: center !important;
    margin-top: 54px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 14px) !important;
    width: 94px !important;
    height: 72px !important;
    background: url("./assets/icons/me/me-letter-decoration.png") center / contain no-repeat !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }
}

/* Mobile me page: place content below the settings button and reduce bottom gap. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding-top: 118px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    margin-bottom: 4px !important;
  }
}

/* Mobile me page final spacing: keep menu still, lift button, leave a small tabbar gap. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    z-index: 90 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    z-index: 91 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    z-index: 80 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    min-height: 172px !important;
    padding-top: 13px !important;
    padding-bottom: 15px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-content {
    min-height: 104px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    margin-bottom: 12px !important;
  }
}

/* Mobile me page final group fit: move the content group up and let the first card fill the top air. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding-top: 76px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    min-height: 238px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-content {
    min-height: 166px !important;
    grid-template-columns: 54px minmax(0, 1fr) 112px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action {
    margin-top: 70px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    margin-bottom: 10px !important;
  }
}

/* Hard mobile me-page lock: keep settings fixed and keep AI letters above the tabbar. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    top: 0 !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
    left: 0 !important;
    height: auto !important;
    padding: 76px 10px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-padding-bottom: 8px !important;
    z-index: 5 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    position: fixed !important;
    top: 4px !important;
    right: 44px !important;
    z-index: 140 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    z-index: 141 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    z-index: 120 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    margin-bottom: 0 !important;
  }
}

/* Mobile me-page fixed stack: the whole content group must not scroll. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    top: 0 !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
    left: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 74px 10px 8px !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card),
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    box-sizing: border-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    flex: 0 0 clamp(200px, 27dvh, 228px) !important;
    padding: 14px 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card .me-section-head {
    margin-bottom: 8px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-content {
    height: calc(100% - 30px) !important;
    min-height: 0 !important;
    grid-template-columns: 54px minmax(0, 1fr) 108px !important;
    gap: 8px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action {
    margin-top: clamp(50px, 6dvh, 64px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action::before {
    bottom: calc(100% + 10px) !important;
    width: 86px !important;
    height: 64px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) {
    flex: 0 0 clamp(132px, 18dvh, 156px) !important;
    padding: 9px 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-left h2 {
    margin-bottom: 5px !important;
    font-size: 13px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-companion-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) .me-relation-right {
    margin-top: 5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card {
    flex: 0 0 clamp(62px, 8.5dvh, 76px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid {
    height: 100% !important;
    gap: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item {
    height: 100% !important;
    min-height: 0 !important;
    padding: 5px 3px 4px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-icon {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item strong {
    font-size: 10.5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item b,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item span {
    font-size: 8.5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    flex: 1 1 132px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 9px 12px 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card .me-section-head {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-section-subtitle {
    flex: 0 0 auto !important;
    margin: 3px 0 2px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card {
    min-height: 0 !important;
    padding: 5px 2px !important;
    grid-template-columns: 96px minmax(0, 1fr) 40px !important;
    gap: 5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-head {
    grid-template-columns: 28px minmax(0, 1fr) 0 !important;
    gap: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-meta strong {
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-inline-content {
    margin-top: 2px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-view {
    min-width: 36px !important;
    height: 22px !important;
    font-size: 10px !important;
    line-height: 22px !important;
  }
}

@media (max-width: 580px) and (max-height: 740px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    gap: 6px !important;
    padding-top: 68px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    flex-basis: 184px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) {
    flex-basis: 126px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card {
    flex-basis: 58px !important;
  }
}

/* Mobile chat page: use the desktop-style pink skin only for the background and top capsule. */
@media (max-width: 580px) {
  .phone-shell.is-chat-mode .screen-chat {
    background:
      #fff8fb url("./assets/backgrounds/chat/chat-desktop-pink-bg.png")
      center top / var(--chat-page-width) var(--mobile-layout-height, var(--chat-page-height))
      no-repeat !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 20 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    top: 4px !important;
    height: 78px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(255 255 255 / 92%)) !important;
    box-shadow:
      0 8px 24px rgb(198 177 188 / 13%),
      inset 0 0 0 1px rgb(255 255 255 / 74%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav::after {
    content: "" !important;
    position: absolute !important;
    right: 92px !important;
    top: 24px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 0 !important;
    background: url("./assets/icons/chat/chat-desktop-phone.png") center / contain no-repeat !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav h1 {
    left: 50% !important;
    top: 18px !important;
    width: 180px !important;
    height: 54px !important;
    overflow: visible !important;
    color: #1d1d1f !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav #chatTitle {
    display: block !important;
    width: 180px !important;
    height: 24px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge {
    display: inline-flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 29px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 10px 0 8px !important;
    border: 1px solid rgb(89 187 77 / 18%) !important;
    border-radius: 999px !important;
    background: rgb(246 253 243 / 82%) !important;
    color: #466341 !important;
    font-size: 0 !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="pink"] {
    border-color: rgb(235 112 155 / 18%) !important;
    background: rgb(255 246 250 / 84%) !important;
    color: #895165 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="purple"] {
    border-color: rgb(160 128 224 / 18%) !important;
    background: rgb(250 247 255 / 86%) !important;
    color: #665487 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="blue"] {
    border-color: rgb(92 156 216 / 18%) !important;
    background: rgb(245 250 255 / 86%) !important;
    color: #4c6684 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge[data-tone="orange"] {
    border-color: rgb(232 169 82 / 20%) !important;
    background: rgb(255 250 240 / 86%) !important;
    color: #84633b !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge::before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    border-radius: 0 !important;
    background: var(--chat-status-icon, url("./assets/icons/status/status-online-green.png")) center / contain no-repeat !important;
    box-shadow: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .ai-badge::after {
    content: attr(data-label) !important;
    color: currentColor !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-control,
  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon {
    opacity: 1 !important;
    font-size: 0 !important;
    color: transparent !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 4 !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-control {
    background-image: url("./assets/icons/chat/chat-desktop-back.png") !important;
    background-size: 31px 31px !important;
    background-position: 18px 26px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-mark,
  .phone-shell.is-chat-mode .screen-chat .chat-nav .back-badge {
    display: none !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon {
    width: 54px !important;
    height: var(--chat-nav-hit-height) !important;
    margin: 0 10px 0 0 !important;
    justify-self: end !important;
    align-self: start !important;
    background-image: url("./assets/icons/chat/chat-desktop-settings.png") !important;
    background-size: 30px 30px !important;
    background-position: center 27px !important;
  }

  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon::before,
  .phone-shell.is-chat-mode .screen-chat .chat-nav .more-icon::after {
    content: none !important;
  }
}

/* Chat background selector page */
#settingsPanel.is-background-page .settings-scroll-area {
  display: none !important;
}

#settingsPanel.is-background-page .settings-background-page {
  display: flex !important;
}

.settings-page-v2 .settings-background-page {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: none !important;
  flex-direction: column;
  background: linear-gradient(180deg, #fbfcf8 0%, #f6faf1 100%) !important;
}

.settings-page-v2 .settings-background-head {
  height: 128px !important;
  min-height: 128px !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 84px !important;
  align-items: center !important;
  padding: 34px 24px 18px !important;
  color: #111819 !important;
}

.settings-page-v2 .settings-background-head strong {
  justify-self: center !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  letter-spacing: -1px !important;
}

.settings-page-v2 .settings-background-back,
.settings-page-v2 .settings-background-done {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
}

.settings-page-v2 .settings-background-done {
  justify-self: end !important;
  color: #2f8f3a !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.settings-page-v2 .settings-background-sheet {
  flex: 1 !important;
  margin: 0 24px 24px !important;
  padding: 20px !important;
  border-radius: 28px !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: 0 18px 42px rgb(65 78 61 / 8%) !important;
  overflow: auto !important;
}

.settings-page-v2 .settings-background-sheet h3 {
  margin: 0 0 16px !important;
  color: #111819 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-background-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.settings-page-v2 .settings-background-card {
  position: relative !important;
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid rgb(228 235 225 / 95%) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgb(60 76 55 / 6%) !important;
}

.settings-page-v2 .settings-background-card.is-active {
  border-color: rgb(47 143 58 / 30%) !important;
  box-shadow: 0 12px 26px rgb(47 143 58 / 12%) !important;
}

.settings-page-v2 .settings-background-preview {
  position: relative !important;
  aspect-ratio: 0.72 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.settings-page-v2 .settings-background-card.is-upload-card .settings-background-preview.is-empty {
  background: #fcfcfa !important;
  border: 2px dashed rgb(212 217 208 / 92%) !important;
}

.settings-page-v2 .settings-background-card.is-upload-card .settings-background-preview.is-empty::before {
  content: "+" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  color: #babdb5 !important;
  font-size: 52px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transform: translate(-50%, -60%) !important;
}

.settings-page-v2 .settings-background-card.is-upload-card .settings-background-preview.is-empty::after {
  content: "从相册上传" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  color: #3d443d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
}

.settings-page-v2 .settings-background-label {
  color: #20251f !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.settings-page-v2 .settings-background-card.is-upload-card .settings-background-label {
  text-align: center !important;
}

.settings-page-v2 .settings-background-card.is-upload-card .settings-background-preview.is-empty + .settings-background-label {
  display: none !important;
}

.settings-page-v2 .settings-background-card i {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 6px 16px rgb(60 76 55 / 10%) !important;
  opacity: 0 !important;
}

.settings-page-v2 .settings-background-card.is-active i {
  opacity: 1 !important;
}

.settings-page-v2 .settings-background-card.is-active i::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 4px !important;
  width: 6px !important;
  height: 10px !important;
  border-right: 2px solid #2f8f3a !important;
  border-bottom: 2px solid #2f8f3a !important;
  transform: rotate(40deg) !important;
}

.settings-page-v2 .settings-background-note {
  margin: 14px 0 0 !important;
  color: #8b918d !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* Appearance settings: chat bubble selector shell. Star Cat is currently the functional skin. */
.settings-page-v2 .settings-background-page {
  background: #ffffff !important;
}

.settings-page-v2 .settings-background-head {
  height: 102px !important;
  min-height: 102px !important;
  padding: 28px 24px 12px !important;
  background: #ffffff !important;
}

.settings-page-v2 .settings-background-head strong {
  font-size: 28px !important;
  letter-spacing: -0.5px !important;
}

.settings-page-v2 .settings-background-back {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid #e5e9ee !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 5px 15px rgb(40 55 70 / 6%) !important;
}

.settings-page-v2 .settings-background-back .back-mark {
  border-color: #0f1419 !important;
}

.settings-page-v2 .settings-background-done {
  color: #18a53a !important;
  font-size: 21px !important;
}

.settings-page-v2 .settings-appearance-tabs {
  height: 64px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: end !important;
  border-bottom: 1px solid #edf0f3 !important;
  background: #fff !important;
}

.settings-page-v2 .settings-appearance-tabs button {
  appearance: none !important;
  position: relative !important;
  height: 64px !important;
  border: 0 !important;
  background: transparent !important;
  color: #555a61 !important;
  font-size: 21px !important;
  font-weight: 760 !important;
}

.settings-page-v2 .settings-appearance-tabs button.is-active {
  color: #18a53a !important;
  font-weight: 900 !important;
}

.settings-page-v2 .settings-appearance-tabs button.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 86px !important;
  height: 4px !important;
  border-radius: 999px 999px 0 0 !important;
  background: #20bd45 !important;
  transform: translateX(-50%) !important;
}

.settings-page-v2 .settings-appearance-sheet {
  flex: 1 !important;
  margin: 0 !important;
  padding: 28px 22px 26px !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: auto !important;
}

.settings-page-v2 .settings-appearance-sheet h3 {
  margin: 0 0 24px !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

.settings-page-v2 .settings-bubble-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px 12px !important;
}

.settings-page-v2 .settings-bubble-card {
  appearance: none !important;
  position: relative !important;
  min-height: 150px !important;
  display: grid !important;
  grid-template-rows: minmax(86px, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 14px 9px 18px !important;
  border: 1px solid #e7ebef !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgb(35 48 65 / 4%) !important;
}

.settings-page-v2 .settings-bubble-card.is-active {
  border-color: #24bd4a !important;
  box-shadow: 0 8px 20px rgb(30 178 68 / 10%) !important;
}

.settings-page-v2 .settings-bubble-card-preview {
  width: 100% !important;
  min-height: 88px !important;
  display: grid !important;
  place-items: center !important;
  gap: 12px !important;
}

.settings-page-v2 .settings-bubble-card-preview.is-image-preview {
  gap: 7px !important;
  align-content: center !important;
}

.settings-page-v2 .settings-bubble-preview-img {
  display: block !important;
  width: 92px !important;
  height: 28px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 4px 8px rgb(90 120 150 / 8%)) !important;
}

.settings-page-v2 .settings-bubble-preview-img.right {
  width: 84px !important;
  opacity: 0.68 !important;
}

.settings-page-v2 .settings-bubble-card.is-active .settings-bubble-preview-img.right {
  opacity: 1 !important;
}

.settings-page-v2 .settings-bubble-card.is-locked {
  opacity: 1 !important;
  cursor: default !important;
}

.settings-page-v2 .settings-bubble-card-name {
  color: #151a21 !important;
  font-size: 17px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
}

.settings-page-v2 .settings-bubble-card i {
  position: absolute !important;
  right: 12px !important;
  bottom: 14px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #2db94d !important;
  opacity: 0 !important;
}

.settings-page-v2 .settings-bubble-card.is-active i {
  opacity: 1 !important;
}

.settings-page-v2 .settings-bubble-card i::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 4px !important;
  width: 6px !important;
  height: 10px !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(40deg) !important;
}

.settings-page-v2 .settings-demo-bubble {
  --bubble-border: #b8d4ef;
  --bubble-bg: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 100%);
  --bubble-shadow: rgb(112 154 196 / 18%);
  position: relative !important;
  z-index: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 68px !important;
  min-height: 32px !important;
  padding: 8px 16px !important;
  border: 1.5px solid var(--bubble-border) !important;
  border-radius: 18px !important;
  background: var(--bubble-bg) !important;
  box-shadow: 0 5px 12px var(--bubble-shadow) !important;
  color: #2d3742 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.settings-page-v2 .settings-demo-bubble.mini {
  width: 76px !important;
  height: 34px !important;
  min-width: 76px !important;
  min-height: 34px !important;
  padding: 0 !important;
}

.settings-page-v2 .settings-demo-bubble.mini.right {
  width: 58px !important;
  min-width: 58px !important;
  opacity: 0.38 !important;
  filter: grayscale(0.15) !important;
}

.settings-page-v2 .settings-demo-bubble.mini.left::before,
.settings-page-v2 .settings-demo-bubble.mini.right::after {
  bottom: -1px !important;
  width: 13px !important;
  height: 10px !important;
}

.settings-page-v2 .settings-demo-bubble.mini.left::before {
  left: -5px !important;
  border-radius: 0 0 0 11px !important;
}

.settings-page-v2 .settings-demo-bubble.mini.right::after {
  right: -5px !important;
  border-radius: 0 0 11px 0 !important;
}

.settings-page-v2 .settings-demo-bubble.left::before,
.settings-page-v2 .settings-demo-bubble.right::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  width: 24px !important;
  height: 18px !important;
  background: var(--bubble-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: -1 !important;
}

.settings-page-v2 .settings-demo-bubble.left::before {
  left: -10px !important;
  clip-path: path("M24 1 C18 5 14 11 3 16 C8 18 17 16 24 9 Z") !important;
  filter:
    drop-shadow(-1.2px 0 0 var(--bubble-border))
    drop-shadow(0 1.2px 0 var(--bubble-border)) !important;
  transform: none !important;
}

.settings-page-v2 .settings-demo-bubble.right::after {
  right: -10px !important;
  clip-path: path("M0 1 C6 5 10 11 21 16 C16 18 7 16 0 9 Z") !important;
  filter:
    drop-shadow(1.2px 0 0 var(--bubble-border))
    drop-shadow(0 1.2px 0 var(--bubble-border)) !important;
  transform: none !important;
}

.settings-page-v2 .settings-demo-bubble[data-tone="pink"],
.settings-page-v2 .settings-demo-bubble.bubble-star.right {
  --bubble-border: #f2a4ba;
  --bubble-bg: linear-gradient(180deg, #fff7fa 0%, #ffe6ee 100%);
  --bubble-shadow: rgb(236 128 160 / 18%);
}

.settings-page-v2 .settings-demo-bubble[data-tone="green"] {
  --bubble-border: #91cda5;
  --bubble-bg: linear-gradient(180deg, #fbfffd 0%, #effaf2 100%);
  --bubble-shadow: rgb(104 177 128 / 16%);
}

.settings-page-v2 .settings-demo-bubble[data-tone="ink"] {
  --bubble-border: #575757;
  --bubble-bg: #ffffff;
  --bubble-shadow: rgb(70 70 70 / 10%);
}

.settings-page-v2 .settings-demo-bubble[data-tone="purple"] {
  --bubble-border: #c9b6ef;
  --bubble-bg: linear-gradient(135deg, #f4f0ff 0%, #ffe9f2 100%);
  --bubble-shadow: rgb(158 130 220 / 18%);
}

.settings-page-v2 .settings-demo-bubble[data-tone="rainbow"] {
  --bubble-border: #f2acc0;
  --bubble-bg: linear-gradient(135deg, #fff8fb 0%, #eaf5ff 42%, #fff3dc 100%);
  --bubble-shadow: rgb(126 170 220 / 14%);
}

.settings-page-v2 .settings-demo-bubble[data-tone="default"].left {
  --bubble-border: #d7ccee;
  --bubble-bg: #ffffff;
  --bubble-shadow: rgb(80 70 110 / 8%);
  border-radius: 19px 7px 19px 7px !important;
}

.settings-page-v2 .settings-demo-bubble[data-tone="default"].right {
  --bubble-border: #bfe8c7;
  --bubble-bg: #ffffff;
  --bubble-shadow: rgb(75 150 90 / 8%);
  border-radius: 19px 7px 19px 7px !important;
  opacity: 1 !important;
  filter: none !important;
}

.settings-page-v2 .bubble-style-default .settings-demo-bubble.mini.left,
.settings-page-v2 .bubble-style-default .settings-demo-bubble.mini.right {
  width: 72px !important;
  min-width: 72px !important;
  height: 34px !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent]::after,
.settings-page-v2 .settings-demo-bubble[data-accent]::before {
  pointer-events: none !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="cat"] {
  background-image:
    radial-gradient(circle at 70% 72%, #6e7377 0 5px, transparent 5.5px),
    radial-gradient(circle at 65% 64%, #8d9397 0 8px, transparent 8.5px),
    radial-gradient(circle at 24% 28%, #8bb5df 0 2px, transparent 2.5px),
    radial-gradient(circle at 36% 74%, #b8d4ef 0 1.8px, transparent 2.3px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="flower"] {
  background-image:
    radial-gradient(circle at 82% 18%, #ff8fa8 0 3px, transparent 3.5px),
    radial-gradient(circle at 88% 24%, #ff8fa8 0 3px, transparent 3.5px),
    radial-gradient(circle at 78% 28%, #ffb6c6 0 2.5px, transparent 3px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="cloud"] {
  border-radius: 22px 20px 19px 23px !important;
  box-shadow: inset 11px 0 0 rgb(255 255 255 / 38%), 0 5px 12px var(--bubble-shadow) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="wave"] {
  border-radius: 42% 58% 47% 53% / 55% 45% 55% 45% !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="ribbon"] {
  border-style: dashed !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="heart"] {
  background-image:
    radial-gradient(circle at 88% 18%, #ff9bb4 0 4px, transparent 4.5px),
    radial-gradient(circle at 82% 18%, #ff9bb4 0 4px, transparent 4.5px),
    linear-gradient(45deg, transparent 77%, #ff9bb4 78% 84%, transparent 85%),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="ears"] {
  border-radius: 18px 18px 16px 16px !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="ears"]::before,
.settings-page-v2 .settings-demo-bubble[data-accent="ears"]::after {
  top: -8px !important;
  bottom: auto !important;
  width: 13px !important;
  height: 13px !important;
  border: 1.5px solid var(--bubble-border) !important;
  background: var(--bubble-bg) !important;
  transform: rotate(45deg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="ears"]::before {
  left: 12px !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="ears"]::after {
  right: 12px !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="stars"] {
  background-image:
    radial-gradient(circle at 14% 26%, #ffd95d 0 2.5px, transparent 3px),
    radial-gradient(circle at 84% 20%, #ffd95d 0 3.2px, transparent 3.7px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="leaf"] {
  background-image:
    radial-gradient(ellipse at 13% 26%, #62b77d 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 88% 22%, #62b77d 0 4px, transparent 4.5px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="pearl"] {
  background-image:
    radial-gradient(circle at 86% 20%, #f9fdff 0 5px, #bfd7f2 5.5px 6.5px, transparent 7px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="rainbow"] {
  background-image:
    radial-gradient(circle at 20% 74%, #fff 0 8px, transparent 8.5px),
    conic-gradient(from 180deg at 26% 72%, #ff7777, #ffd75a, #73d687, #74b7ff, #ff7777 42%, transparent 43%),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="moon"] {
  background-image:
    radial-gradient(circle at 84% 26%, #ffd665 0 5px, transparent 5.5px),
    radial-gradient(circle at 87% 22%, #f8fbff 0 5px, transparent 5.5px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="cream"] {
  background-image:
    linear-gradient(180deg, #fff0d8 0 26%, transparent 27%),
    radial-gradient(circle at 78% 16%, #ff5f6f 0 4px, transparent 4.5px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble[data-accent="candy"] {
  background-image:
    radial-gradient(circle at 83% 18%, #ff85a8 0 5px, transparent 5.5px),
    linear-gradient(45deg, transparent 78%, #fff 79% 83%, transparent 84%),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-star {
  min-width: 195px !important;
  min-height: 42px !important;
  border-radius: 22px !important;
  font-size: 17px !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-default {
  min-width: 195px !important;
  min-height: 42px !important;
  padding: 9px 18px !important;
  border-radius: 24px 8px 24px 8px !important;
  font-size: 17px !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-preview-image {
  min-width: 238px !important;
  min-height: 58px !important;
  padding: 15px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  color: #344050 !important;
  font-size: 17px !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-preview-image.right {
  min-width: 258px !important;
  padding: 15px 42px 15px 34px !important;
  opacity: 1 !important;
  filter: none !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-preview-image.left::before,
.settings-page-v2 .settings-demo-bubble.bubble-preview-image.right::after {
  content: none !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-star.left {
  background-image:
    radial-gradient(circle at 86% 67%, #6e7377 0 5px, transparent 5.5px),
    radial-gradient(circle at 81% 60%, #8d9397 0 9px, transparent 9.5px),
    radial-gradient(circle at 14% 28%, #8bb5df 0 2px, transparent 2.5px),
    radial-gradient(circle at 20% 74%, #b8d4ef 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 91% 28%, #8bb5df 0 2px, transparent 2.5px),
    var(--bubble-bg) !important;
}

.settings-page-v2 .settings-bubble-preview-card {
  margin-top: 26px !important;
  padding: 18px 18px 20px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 100%) !important;
}

.settings-page-v2 .settings-bubble-preview-card p {
  margin: 0 0 18px !important;
  color: #4f5962 !important;
  font-size: 16px !important;
  font-weight: 760 !important;
}

.settings-page-v2 .settings-bubble-preview-chat {
  display: grid !important;
  gap: 18px !important;
}

.settings-page-v2 .settings-bubble-preview-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.settings-page-v2 .settings-bubble-preview-row.user {
  justify-content: flex-end !important;
}

.settings-page-v2 .settings-bubble-preview-avatar {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgb(255 255 255 / 80%) !important;
  background: #fff center / cover no-repeat !important;
  box-shadow: 0 5px 14px rgb(77 101 126 / 12%) !important;
}

.settings-page-v2 .settings-bubble-preview-avatar.assistant {
  background-image: url("./assets/avatars/legacy/erciyuan.png") !important;
}

.settings-page-v2 .settings-bubble-preview-avatar.user {
  background-image: url("./assets/avatars/legacy/nanshengtouxiang.png") !important;
}

.settings-page-v2 .settings-bubble-note {
  position: relative !important;
  margin-top: 20px !important;
  padding-left: 28px !important;
  color: #535b63 !important;
  font-size: 16px !important;
  text-align: left !important;
}

.settings-page-v2 .settings-bubble-note::before {
  content: "?" !important;
  position: absolute !important;
  left: 0 !important;
  top: -1px !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #ffbd38 !important;
  border-radius: 50% !important;
  color: #ffb21f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
  text-align: center !important;
}

.settings-page-v2 .settings-background-pane .settings-background-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 430px) {
  .settings-page-v2 .settings-bubble-grid {
    gap: 12px 8px !important;
  }

  .settings-page-v2 .settings-bubble-card {
    min-height: 126px !important;
    padding: 10px 6px 14px !important;
    border-radius: 13px !important;
  }

  .settings-page-v2 .settings-demo-bubble.mini {
    width: 56px !important;
    min-width: 56px !important;
    height: 27px !important;
    min-height: 27px !important;
  }

  .settings-page-v2 .settings-demo-bubble.mini.right {
    width: 44px !important;
    min-width: 44px !important;
  }

  .settings-page-v2 .settings-bubble-card-name {
    font-size: 14px !important;
  }
}

/* Star cat bubble skin built from the user's PNG elements. */
.settings-page-v2 .settings-demo-bubble[data-tone="star-cat"],
.settings-page-v2 .settings-demo-bubble.bubble-star {
  --star-cat-blue-border: #a8c9ec;
  --star-cat-blue-bg: linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(243 249 255 / 96%) 100%);
  --star-cat-pink-border: #f59ab5;
  --star-cat-pink-bg: linear-gradient(180deg, #fff8fb 0%, #ffe5ef 100%);
}

.settings-page-v2 .bubble-style-star {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, rgb(36 189 74 / 70%), rgb(36 189 74 / 88%)) border-box !important;
}

.settings-page-v2 .bubble-style-star .settings-bubble-card-preview {
  gap: 14px !important;
}

.settings-page-v2 .settings-demo-bubble[data-tone="star-cat"].left,
.settings-page-v2 .settings-demo-bubble.bubble-star.left {
  --bubble-border: var(--star-cat-blue-border);
  --bubble-bg: var(--star-cat-blue-bg);
  --bubble-shadow: rgb(92 145 199 / 20%);
  border-color: var(--star-cat-blue-border) !important;
  background-color: #f8fbff !important;
  background-image:
    url("./assets/chat-bubbles/star-cat/ribbon.png"),
    url("./assets/chat-bubbles/star-cat/cat.png"),
    url("./assets/chat-bubbles/star-cat/star-blue.png"),
    url("./assets/chat-bubbles/star-cat/star-soft.png"),
    radial-gradient(circle at 18% 42%, #98bee6 0 2px, transparent 2.5px),
    radial-gradient(circle at 26% 70%, #c5daf0 0 1.6px, transparent 2.1px),
    radial-gradient(circle at 77% 32%, #a7c8eb 0 1.8px, transparent 2.3px),
    var(--star-cat-blue-bg) !important;
  background-repeat: no-repeat !important;
  background-size:
    32px 32px,
    34px 34px,
    12px 12px,
    18px 18px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    18px 7px,
    calc(100% - 37px) calc(100% - 28px),
    58px 26px,
    calc(100% - 16px) 11px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.settings-page-v2 .settings-demo-bubble[data-tone="star-cat"].right,
.settings-page-v2 .settings-demo-bubble.bubble-star.right {
  --bubble-border: var(--star-cat-pink-border);
  --bubble-bg: var(--star-cat-pink-bg);
  --bubble-shadow: rgb(239 120 155 / 22%);
  border-color: var(--star-cat-pink-border) !important;
  opacity: 1 !important;
  filter: none !important;
  background-color: #fff0f5 !important;
  background-image:
    url("./assets/chat-bubbles/star-cat/fingers.png"),
    url("./assets/chat-bubbles/star-cat/sparkle-pink.png"),
    radial-gradient(circle at 12% 28%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 18% 50%, #ffd0dd 0 1.7px, transparent 2.2px),
    radial-gradient(circle at 82% 25%, #fff 0 2px, transparent 2.5px),
    var(--star-cat-pink-bg) !important;
  background-repeat: no-repeat !important;
  background-size:
    46px 46px,
    16px 16px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    center center,
    calc(100% - 14px) 10px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.settings-page-v2 .settings-demo-bubble[data-tone="star-cat"].mini.left {
  width: 82px !important;
  min-width: 82px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 19px !important;
  background-size:
    19px 19px,
    22px 22px,
    8px 8px,
    11px 11px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    10px 4px,
    calc(100% - 25px) calc(100% - 17px),
    28px 17px,
    calc(100% - 8px) 6px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.settings-page-v2 .settings-demo-bubble[data-tone="star-cat"].mini.right {
  width: 72px !important;
  min-width: 72px !important;
  height: 35px !important;
  min-height: 35px !important;
  border-radius: 18px !important;
  opacity: 1 !important;
  background-size:
    36px 36px,
    12px 12px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    center center,
    calc(100% - 9px) 7px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-star.left {
  min-width: 225px !important;
  min-height: 50px !important;
  padding: 11px 62px 11px 58px !important;
  border-radius: 25px !important;
  background-size:
    35px 35px,
    40px 40px,
    13px 13px,
    21px 21px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    18px 7px,
    calc(100% - 45px) calc(100% - 33px),
    58px 28px,
    calc(100% - 17px) 11px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.settings-page-v2 .settings-demo-bubble.bubble-star.right {
  min-width: 245px !important;
  min-height: 50px !important;
  padding: 11px 54px 11px 24px !important;
  border-radius: 25px !important;
  background-size:
    42px 42px,
    18px 18px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    calc(100% - 26px) center,
    calc(100% - 10px) 9px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.settings-page-v2 .settings-demo-bubble[data-tone="star-cat"].left::before,
.settings-page-v2 .settings-demo-bubble.bubble-star.left::before,
.settings-page-v2 .settings-demo-bubble[data-tone="star-cat"].right::after,
.settings-page-v2 .settings-demo-bubble.bubble-star.right::after {
  background: inherit !important;
  background-image: var(--bubble-bg) !important;
}

@media (min-width: 581px) {
  .phone-shell.is-chat-mode .screen-chat {
    background-image: var(--chat-background-desktop-image, url("./assets/backgrounds/chat/chat-desktop-green-bg.png")) !important;
    background-color: #fff8fb !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: var(--chat-page-width) var(--chat-page-height) !important;
  }
}

@media (max-width: 580px) {
  .phone-shell.is-chat-mode .screen-chat {
    background-image: var(--chat-background-mobile-image, url("./assets/backgrounds/chat/chat-desktop-pink-bg.mobile.webp")) !important;
    background-color: #fff8fb !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: var(--chat-page-width) var(--mobile-layout-height, var(--chat-page-height)) !important;
  }
}

/* Mobile diary page: new Xinjian background and a higher first diary card. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.png")
      center top / 100vw 100dvh
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: 132px !important;
    padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  }
}

/* Mobile Xinjian mixed feed: diary + moments, text only. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-list {
    display: grid !important;
    gap: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 13px 14px 12px !important;
    border: 1px solid rgb(224 228 215 / 72%) !important;
    border-radius: 22px !important;
    background: rgb(255 255 255 / 87%) !important;
    box-shadow:
      0 12px 28px rgb(88 108 70 / 7%),
      inset 0 1px 0 rgb(255 255 255 / 78%) !important;
    backdrop-filter: blur(8px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-card-head {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: start !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 92%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-block {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-row strong {
    overflow: hidden !important;
    max-width: 100% !important;
    color: #54733b !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card-menu {
    width: 24px !important;
    height: 18px !important;
    background:
      radial-gradient(circle, #8f9291 0 2px, transparent 2.3px) 3px 50% / 7px 7px repeat-x !important;
    opacity: 0.82 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-date-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: #7f8384 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-date-row em {
    overflow: hidden !important;
    font-style: normal !important;
    text-overflow: ellipsis !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-weather {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-content {
    display: grid !important;
    gap: 4px !important;
    margin: 13px 4px 12px 59px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-content p {
    margin: 0 !important;
    color: #1c201b !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.52 !important;
    letter-spacing: 0.01em !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-mood {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 0 59px !important;
    color: #8d9390 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-mood i {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    background: none !important;
    border: 2px solid currentColor !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-radius: 4px 0 6px 0 !important;
    transform: rotate(45deg) translateY(-1px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--moment .diary-mood {
    color: #91ad61 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--diary .diary-mood {
    color: #9a8ccf !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-mood b {
    font-weight: 700 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
    position: relative !important;
    margin-left: 22px !important;
    color: #868c8a !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::before {
    content: "" !important;
    position: absolute !important;
    left: -22px !important;
    top: 50% !important;
    width: 16px !important;
    height: 12px !important;
    border: 2px solid currentColor !important;
    border-radius: 7px !important;
    transform: translateY(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::after {
    content: "" !important;
    position: absolute !important;
    left: -12px !important;
    top: 9px !important;
    width: 5px !important;
    height: 5px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(36deg) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-share-mark {
    position: relative !important;
    width: 22px !important;
    height: 18px !important;
    margin-left: 18px !important;
    color: #868c8a !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-share-mark::before {
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    top: 8px !important;
    width: 16px !important;
    height: 9px !important;
    border-top: 2px solid currentColor !important;
    border-right: 2px solid currentColor !important;
    border-radius: 0 8px 0 0 !important;
    transform: skewX(-18deg) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-share-mark::after {
    content: "" !important;
    position: absolute !important;
    right: 2px !important;
    top: 3px !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid currentColor !important;
    border-right: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
  }
}

/* Mobile Xinjian feed actions: real heart PNG for like, CSS gray bubble for comments. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-like-button {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("./assets/icons/ui/diary-heart-gray.png") center / contain no-repeat !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-like-button.is-liked {
    background-image: url("./assets/icons/ui/diary-heart-light-green.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-mood i {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
    color: #858b89 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::before {
    border-color: #858b89 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::after {
    border-color: #858b89 !important;
  }
}

/* Mobile Xinjian comments: moment comments + composer, no diary like button and no share button. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--diary .diary-mood--plain {
    margin-left: 59px !important;
    color: #8f84c6 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--diary .diary-like-button {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-share-mark {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
    position: relative !important;
    min-width: 34px !important;
    margin-left: 24px !important;
    padding-left: 25px !important;
    color: #777d7b !important;
    font-weight: 700 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("./assets/icons/ui/diary-comment-gray.png") center / contain no-repeat !important;
    transform: translateY(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::after {
    content: none !important;
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments {
    margin: 12px 0 0 59px !important;
    padding: 10px 11px 11px !important;
    border-radius: 14px !important;
    background: rgb(248 249 244 / 82%) !important;
    box-shadow: inset 0 0 0 1px rgb(232 235 226 / 72%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-list {
    display: grid !important;
    gap: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments:not(.is-expanded) .diary-comment-item.is-hidden {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #1f241e !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item strong {
    flex: 0 0 auto !important;
    max-width: 58px !important;
    overflow: hidden !important;
    color: #4f7936 !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #20251f !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item em {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: #8b918d !important;
    font-style: normal !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments-more {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #4d7d36 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-compose {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 26px 26px !important;
    align-items: center !important;
    gap: 10px !important;
    height: 42px !important;
    margin-top: 11px !important;
    padding: 0 11px 0 14px !important;
    border-radius: 14px !important;
    background: rgb(255 255 255 / 86%) !important;
    box-shadow: inset 0 0 0 1px rgb(230 233 227 / 78%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-compose span {
    overflow: hidden !important;
    color: #8f9491 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    width: 25px !important;
    height: 25px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile {
    background-image: url("./assets/icons/ui/diary-smile-gray.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    background-image: url("./assets/icons/ui/diary-send-gray.png") !important;
  }
}

/* Mobile-only lightweight backgrounds. Original PNG assets stay for desktop and fallback. */
@media (max-width: 580px) {
  .phone-shell.is-chat-mode .screen-chat {
    background:
      #fff8fb url("./assets/backgrounds/chat/chat-desktop-pink-bg.mobile.webp")
      center top / var(--chat-page-width) var(--mobile-layout-height, var(--chat-page-height))
      no-repeat !important;
  }

  .phone-shell.is-add-person-mode .screen-add-person {
    background:
      #f8faf5 url("./assets/backgrounds/character/create-role-page-bg.mobile.webp") center top / 100% 100% no-repeat !important;
  }

  .phone-shell.is-list-mode,
  .phone-shell.is-list-mode .screen-list {
    background:
      #fafbf7 url("./assets/backgrounds/character/ui-soft-leaf-bg.mobile.webp") center top / 100% 100% no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page {
    background:
      #fbfcf7 url("./assets/backgrounds/profile/me-page-background.png") center top / 100% 100% no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page {
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.mobile.webp") center top / 100vw 100dvh no-repeat !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-sheet {
    background:
      linear-gradient(rgb(255 255 255 / 18%), rgb(255 255 255 / 10%)),
      url("./assets/backgrounds/profile/me-directory-list-bg.mobile.webp") center / cover no-repeat !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-sheet,
  .me-directory-dialog[data-directory-type="memory-detail"] .me-directory-sheet {
    background:
      linear-gradient(rgb(255 255 255 / 14%), rgb(255 255 255 / 8%)),
      url("./assets/backgrounds/profile/me-memory-bg.mobile.webp") center / cover no-repeat !important;
  }
}

/* FINAL MANUAL CONTROL - desktop Xinjian first card position.
   This block is intentionally last so it wins over earlier desktop/mobile overrides. */
@media (min-width: 581px) {
  :root {
    --desktop-xinjian-feed-top: 182px;
    --desktop-xinjian-first-gap: 0px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: var(--desktop-xinjian-feed-top) !important;
    padding-top: var(--desktop-xinjian-first-gap) !important;
  }
}

/* True final mobile Xinjian layout: header stays above feed, tabbar stays visible. */
@media (max-width: 580px) {
  :root {
    --mobile-xinjian-feed-top: 156px;
    --mobile-xinjian-tabbar-bottom: 18px;
    --mobile-xinjian-tabbar-height: 78px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.mobile.webp")
      center top / 100vw 100dvh
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--mobile-xinjian-feed-top) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-xinjian-tabbar-height) + var(--mobile-xinjian-tabbar-bottom) + 12px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 5 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 8px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-list {
    display: grid !important;
    gap: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 26px !important;
    right: 26px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-xinjian-tabbar-bottom)) !important;
    width: auto !important;
    height: var(--mobile-xinjian-tabbar-height) !important;
    min-height: var(--mobile-xinjian-tabbar-height) !important;
    margin: 0 !important;
    padding: 8px 8px 6px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    overflow: visible !important;
    border: 1px solid rgb(229 235 225 / 82%) !important;
    border-radius: 27px !important;
    background: rgb(255 255 255 / 80%) !important;
    box-shadow: 0 18px 42px rgb(62 89 51 / 10%) !important;
    backdrop-filter: blur(14px) !important;
    transform: none !important;
    z-index: 120 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-image,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-highlight,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-active-image {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 37px 18px !important;
    place-items: center !important;
    gap: 2px !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) {
    left: 8% !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) {
    left: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) {
    left: -8% !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1),
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active {
    color: #8e9490 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-message-gray.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3),
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3).is-active {
    color: #42a82f !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-leaf-green.png") !important;
    filter: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4),
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4).is-active {
    color: #8e9490 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-me-gray.png") !important;
  }
}

/* True EOF Xinjian keyboard isolation: inline comments must not resize the page chrome. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    width: 100vw !important;
    height: var(--mobile-layout-height, 100dvh) !important;
    min-height: var(--mobile-layout-height, 100dvh) !important;
    max-height: none !important;
    overflow: hidden !important;
    background-size: 100vw var(--mobile-layout-height, 100dvh) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* True EOF Xinjian card comment composer: this must stay after all older comment rules. */
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-compose,
.phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments .diary-comment-compose,
.phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments .diary-comment-compose {
  display: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose,
.phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments.is-composing .diary-comment-compose,
.phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose {
  display: grid !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  grid-template-columns: minmax(0, 1fr) 30px 30px !important;
  align-items: center !important;
  gap: 12px !important;
  height: 48px !important;
  margin: 14px 0 0 !important;
  padding: 0 12px 0 16px !important;
  border-radius: 16px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow: inset 0 0 0 1px rgb(228 232 224 / 90%) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #30352f !important;
  font-size: 15px !important;
  font-weight: 560 !important;
  line-height: 48px !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input::placeholder {
  color: #9b9f97 !important;
  opacity: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile {
  background-image: url("./assets/icons/ui/diary-smile-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
  background-image: url("./assets/icons/ui/diary-send-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
  cursor: pointer !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active {
  color: #5f8f3e !important;
  font-weight: 820 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active::before {
  background-image: url("./assets/icons/ui/diary-comment-green.png") !important;
}

.diary-global-comment-bar,
.diary-global-comment-bar.is-open,
.diary-global-comment-bar[hidden] {
  display: none !important;
}

/* True EOF Xinjian keyboard isolation: inline comments must not resize the page chrome. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    width: 100vw !important;
    height: var(--mobile-layout-height, 100dvh) !important;
    min-height: var(--mobile-layout-height, 100dvh) !important;
    max-height: none !important;
    overflow: hidden !important;
    background-size: 100vw var(--mobile-layout-height, 100dvh) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* Final Xinjian card comment composer: keep the input inside the active moment card. */
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-compose,
.phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments .diary-comment-compose,
.phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments .diary-comment-compose {
  display: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose,
.phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments.is-composing .diary-comment-compose,
.phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px 30px !important;
  align-items: center !important;
  gap: 12px !important;
  height: 48px !important;
  margin: 14px 0 0 !important;
  padding: 0 12px 0 16px !important;
  border-radius: 16px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow: inset 0 0 0 1px rgb(228 232 224 / 90%) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #30352f !important;
  font-size: 15px !important;
  font-weight: 560 !important;
  line-height: 48px !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input::placeholder {
  color: #9b9f97 !important;
  opacity: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile {
  background-image: url("./assets/icons/ui/diary-smile-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
  background-image: url("./assets/icons/ui/diary-send-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
  cursor: pointer !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active {
  color: #5f8f3e !important;
  font-weight: 820 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active::before {
  background-image: url("./assets/icons/ui/diary-comment-green.png") !important;
}

.diary-global-comment-bar,
.diary-global-comment-bar.is-open,
.diary-global-comment-bar[hidden] {
  display: none !important;
}

.diary-empty-card {
  display: grid !important;
  place-items: center !important;
  min-height: 220px !important;
}

.diary-empty-copy {
  display: grid !important;
  gap: 10px !important;
  color: #668552 !important;
  text-align: center !important;
}

.diary-empty-copy strong {
  font-size: 20px !important;
  font-weight: 900 !important;
}

.diary-empty-copy span {
  color: #8f9889 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.diary-comment-item.is-publisher-reply strong {
  color: #6a8f4d !important;
}

/* FINAL MANUAL CONTROL - desktop Xinjian first card position.
   Change --desktop-xinjian-feed-top to move the hidden red-line boundary.
   Change --desktop-xinjian-first-gap to move the first card closer/farther under that line. */
@media (min-width: 581px) {
  :root {
    --desktop-xinjian-feed-top: 194px;
    --desktop-xinjian-first-gap: 0px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: var(--desktop-xinjian-feed-top) !important;
    padding-top: var(--desktop-xinjian-first-gap) !important;
  }
}

/* Final mobile Xinjian layout: keep the header art above the feed and restore the main tabbar. */
@media (max-width: 580px) {
  :root {
    --mobile-xinjian-feed-top: 184px;
    --mobile-xinjian-tabbar-bottom: 18px;
    --mobile-xinjian-tabbar-height: 78px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.mobile.webp")
      center top / 100vw 100dvh
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--mobile-xinjian-feed-top) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-xinjian-tabbar-height) + var(--mobile-xinjian-tabbar-bottom) + 12px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 5 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 8px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-list {
    display: grid !important;
    gap: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 26px !important;
    right: 26px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-xinjian-tabbar-bottom)) !important;
    width: auto !important;
    height: var(--mobile-xinjian-tabbar-height) !important;
    min-height: var(--mobile-xinjian-tabbar-height) !important;
    margin: 0 !important;
    padding: 8px 8px 6px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    overflow: visible !important;
    border: 1px solid rgb(229 235 225 / 82%) !important;
    border-radius: 27px !important;
    background: rgb(255 255 255 / 80%) !important;
    box-shadow: 0 18px 42px rgb(62 89 51 / 10%) !important;
    backdrop-filter: blur(14px) !important;
    transform: none !important;
    z-index: 120 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-image,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-highlight,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-active-image {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 37px 18px !important;
    place-items: center !important;
    gap: 2px !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1),
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active {
    color: #8e9490 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-message-gray.png") !important;
  }
}

/* Final mobile Xinjian comment mode: keep the composer inside the card, same as desktop interaction. */
@media (max-width: 580px) {
  .diary-global-comment-bar,
  .diary-global-comment-bar.is-open,
  .diary-global-comment-bar[hidden] {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments {
    margin: 12px 0 0 59px !important;
    padding: 10px 11px 11px !important;
    border-radius: 14px !important;
    background: rgb(248 249 244 / 82%) !important;
    box-shadow: inset 0 0 0 1px rgb(232 235 226 / 72%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-compose,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments.is-composing .diary-comment-compose,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose {
    display: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    grid-template-columns: minmax(0, 1fr) 28px 28px !important;
    gap: 10px !important;
    height: 46px !important;
    margin-top: 10px !important;
    padding: 0 12px 0 14px !important;
    border-radius: 16px !important;
    background: rgb(255 255 255 / 92%) !important;
    box-shadow: inset 0 0 0 1px rgb(228 232 225 / 88%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose {
    display: grid !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input {
    font-size: 14px !important;
    font-weight: 560 !important;
    line-height: 46px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input::placeholder {
    color: #9b9f97 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    width: 28px !important;
    height: 28px !important;
    opacity: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active {
    color: #5f8f3e !important;
  }

  .phone-shell.is-list-mode.is-diary-commenting,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-dashboard,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-dashboard {
    top: 132px !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  }
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 24% 18%, rgb(255 234 229 / 92%), transparent 34%),
    linear-gradient(145deg, rgb(255 247 240 / 94%), rgb(232 247 235 / 94%));
  backdrop-filter: blur(18px);
}

.auth-overlay[hidden] {
  display: none;
}

.auth-card {
  width: min(360px, calc(100vw - 38px));
  padding: 26px 24px 24px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 28px;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 24px 70px rgb(96 61 42 / 18%);
}

.auth-copy {
  display: grid;
  gap: 7px;
  margin-bottom: 22px;
  color: #27352d;
}

.auth-copy strong {
  font-size: 25px;
  letter-spacing: .04em;
}

.auth-copy span,
.auth-tip,
.auth-message {
  color: #728077;
  font-size: 13px;
  line-height: 1.6;
}

.auth-card label {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: #465349;
  font-size: 13px;
  font-weight: 700;
}

.auth-card input {
  height: 46px;
  min-width: 0;
  padding: 0 15px;
  border: 1px solid #e1e7df;
  border-radius: 16px;
  outline: none;
  background: #fbfdf9;
  color: #27352d;
  font-size: 16px;
}

.auth-card input:focus {
  border-color: #8bc79c;
  box-shadow: 0 0 0 4px rgb(139 199 156 / 18%);
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 10px;
}

.auth-send-code,
.auth-login {
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, #4aa568, #82c98e);
  box-shadow: 0 10px 24px rgb(64 144 86 / 22%);
}

.auth-send-code {
  height: 46px;
}

.auth-login {
  width: 100%;
  height: 48px;
  margin-top: 18px;
  font-size: 16px;
}

.auth-send-code:disabled,
.auth-login:disabled {
  opacity: .58;
  cursor: wait;
}

.auth-tip {
  margin: 12px 2px 0;
}

.auth-message {
  min-height: 20px;
  margin: 8px 2px 0;
  color: #4f9463;
  font-weight: 700;
}

.me-directory-row.is-memory {
  cursor: default !important;
}

.me-directory-row.is-memory:active {
  transform: none !important;
}

.me-directory-row.is-memory .me-directory-avatar {
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #e9f8e9, #fff7ed) !important;
  color: #4d9b62 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 1px rgb(124 188 139 / 24%) !important;
}

.me-directory-row.is-memory .me-directory-main em {
  white-space: normal !important;
  line-height: 1.45 !important;
}

.me-layered-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 12px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #f1fbef, #fff7ec) !important;
  box-shadow: 0 14px 32px rgb(65 92 68 / 10%), inset 0 0 0 1px rgb(211 229 205 / 78%) !important;
}

.me-layered-tools span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.me-layered-tools strong {
  color: #172118 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.me-layered-tools em {
  color: #7d897f !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
}

.me-layered-tools button {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  background: #2f7d48 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgb(47 125 72 / 20%) !important;
}

.me-layered-tools button:disabled {
  opacity: .62 !important;
}

.me-cognition-section {
  display: grid !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(244 251 243 / 94%)) !important;
  box-shadow: 0 12px 30px rgb(65 92 68 / 9%), inset 0 0 0 1px rgb(220 232 218 / 74%) !important;
}

.me-cognition-section header {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

.me-cognition-section header span {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #daf4de, #fff4e7) !important;
  color: #46965e !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.me-cognition-section header strong {
  color: #172118 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.me-cognition-section header em {
  color: #8c978d !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.me-cognition-section ul {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.me-cognition-section li {
  position: relative !important;
  padding-left: 16px !important;
  color: #4f5d52 !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1.55 !important;
}

.me-cognition-section.me-layered-section li {
  display: grid !important;
  gap: 4px !important;
}

.me-cognition-section.me-layered-section li strong {
  color: #2d382e !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
}

.me-cognition-section.me-layered-section li small {
  color: #8c978d !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.me-cognition-section.me-layered-section.is-secret {
  background: linear-gradient(145deg, rgb(255 251 255 / 96%), rgb(250 247 255 / 92%)) !important;
  box-shadow: 0 12px 30px rgb(92 65 92 / 8%), inset 0 0 0 1px rgb(235 220 239 / 94%) !important;
}

.me-cognition-section li::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: .72em !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #75bd83 !important;
}

/* Final desktop Xinjian position: first feed card sits close under the red separator line. */
@media (min-width: 581px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: 100px !important;
    padding: 0 42px 156px !important;
  }
}

/* Desktop Xinjian top clipping: feed scrolls below the fixed title/description area. */
@media (min-width: 581px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: 132px !important;
    bottom: 0 !important;
    padding-top: 0 !important;
  }
}

/* Desktop Xinjian fit fix: desktop is a scaled phone shell, so keep cards inside the shell. */
@media (min-width: 581px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    padding: 0 42px 156px !important;
    overflow-x: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-block,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-content,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-content p {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments {
    box-sizing: border-box !important;
    width: calc(100% - 80px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item {
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item strong {
    max-width: 72px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item span {
    flex: 1 1 auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item em {
    margin-left: 8px !important;
  }
}

/* Desktop Xinjian hard top boundary: feed content must never pass the title separator line. */
@media (min-width: 581px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: 202px !important;
    padding-top: 2px !important;
  }
}

/* Mobile Xinjian final polish: hide card dots and right-align the comment toggle. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card-menu {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments-more {
    width: max-content !important;
    margin: 7px 0 0 auto !important;
    color: #8f9491 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: right !important;
  }
}

/* Mobile Xinjian final action stability: hide diary footer and lock moment action positions. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--diary .diary-mood {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--moment .diary-mood {
    display: grid !important;
    grid-template-columns: 22px 38px 54px !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 138px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--moment .diary-like-button {
    justify-self: start !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--moment .diary-like-count {
    display: block !important;
    min-width: 38px !important;
    color: #8aa967 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: left !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--moment .diary-comment-count {
    display: block !important;
    min-width: 54px !important;
    margin-left: 0 !important;
    padding-left: 25px !important;
    box-sizing: border-box !important;
    font-variant-numeric: tabular-nums !important;
    text-align: left !important;
  }
}

/* Mobile Xinjian comment input: make the composer really editable and sendable. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #30352f !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input::placeholder {
    color: #8f9491 !important;
    opacity: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
}

/* Mobile Xinjian WeChat-like comment entry: show the input only after tapping comment. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
    cursor: pointer !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active::before {
    background-image: url("./assets/icons/ui/diary-comment-green.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-compose {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose {
    display: grid !important;
  }
}

/* Mobile Xinjian keyboard placement: pin the active comment bar directly above the keyboard. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-dashboard {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
    padding-bottom: calc(var(--mobile-keyboard-offset, 0px) + 96px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments.is-composing .diary-comment-compose {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: var(--mobile-keyboard-offset, 0px) !important;
    z-index: 260 !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 12px 0 15px !important;
    border-radius: 18px !important;
    background: rgb(255 255 255 / 96%) !important;
    box-shadow:
      0 -8px 26px rgb(91 108 74 / 12%),
      inset 0 0 0 1px rgb(226 230 224 / 92%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comment-input {
    line-height: 54px !important;
  }
}

/* Mobile Xinjian global comment bar: independent from the bottom tabbar. */
.diary-global-comment-bar {
  display: none;
}

.diary-global-comment-bar[hidden] {
  display: none !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments.is-composing .diary-comment-compose {
    display: none !important;
  }

  .diary-global-comment-bar.is-open {
    position: fixed !important;
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--diary-comment-keyboard-px, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px 30px !important;
    align-items: center !important;
    gap: 10px !important;
    height: 54px !important;
    padding: 0 13px 0 16px !important;
    border-radius: 18px !important;
    background: rgb(255 255 255 / 97%) !important;
    box-shadow:
      0 -8px 26px rgb(91 108 74 / 13%),
      inset 0 0 0 1px rgb(226 230 224 / 92%) !important;
    box-sizing: border-box !important;
  }

  .diary-global-comment-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #30352f !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 54px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .diary-global-comment-input::placeholder {
    color: #8f9491 !important;
    opacity: 1 !important;
  }

  .diary-global-comment-smile,
  .diary-global-comment-send {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .diary-global-comment-smile {
    background-image: url("./assets/icons/ui/diary-smile-gray.png") !important;
  }

  .diary-global-comment-send {
    background-image: url("./assets/icons/ui/diary-send-gray.png") !important;
  }
}

/* Mobile Xinjian comment fix: the page/tabbar stay still; only the comment bar floats. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-dashboard {
    bottom: 0 !important;
    padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  }

  .diary-global-comment-bar:not(.is-open),
  .diary-global-comment-bar[hidden] {
    display: none !important;
  }

  .diary-global-comment-bar.is-open {
    bottom: calc(var(--diary-comment-keyboard-px, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile Xinjian hard lock: keyboard must not resize/move the page chrome. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode.is-diary-commenting {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: var(--diary-locked-layout-height, var(--mobile-layout-height, 100dvh)) !important;
    min-height: var(--diary-locked-layout-height, var(--mobile-layout-height, 100dvh)) !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--diary-locked-layout-height, var(--mobile-layout-height, 100dvh)) !important;
    min-height: var(--diary-locked-layout-height, var(--mobile-layout-height, 100dvh)) !important;
    max-height: none !important;
    overflow: hidden !important;
    background-size: 100vw var(--diary-locked-layout-height, var(--mobile-layout-height, 100dvh)) !important;
  }

  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-dashboard {
    top: 132px !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  }

  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar {
    bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }
}

/* Mobile Xinjian final rule: fixed top, fixed bottom, only the feed area scrolls. */
@media (max-width: 580px) {
  :root {
    --diary-fixed-top: 132px;
    --diary-fixed-bottom: 0px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page {
    position: relative !important;
    width: 100vw !important;
    height: var(--mobile-layout-height, 100dvh) !important;
    min-height: var(--mobile-layout-height, 100dvh) !important;
    max-height: none !important;
    overflow: hidden !important;
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.png")
      center top / 100vw var(--mobile-layout-height, 100dvh)
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-dashboard,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-dashboard {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--diary-fixed-top) !important;
    bottom: var(--diary-fixed-bottom) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 5 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 8px 14px 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 42px !important;
    right: 42px !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    height: 66px !important;
    min-height: 66px !important;
    z-index: 80 !important;
    transform: none !important;
  }

  .diary-global-comment-bar.is-open {
    position: fixed !important;
    bottom: calc(var(--diary-comment-keyboard-px, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10000 !important;
  }
}

/* Create chooser: shown before entering the role creation flow. */
.create-choice-dialog {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: none !important;
  color: #101723 !important;
}

.create-choice-dialog.is-open {
  display: block !important;
}

.create-choice-dialog[hidden] {
  display: none !important;
}

.create-choice-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgb(26 35 28 / 18%) !important;
  backdrop-filter: blur(3px) !important;
}

.create-choice-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 72% !important;
  padding: 50px 23px calc(env(safe-area-inset-bottom, 0px) + 30px) !important;
  border-radius: 42px 42px 0 0 !important;
  background:
    radial-gradient(circle at 18% 12%, rgb(112 211 91 / 9%), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fbfdf9 100%) !important;
  box-shadow: 0 -18px 42px rgb(51 71 45 / 16%) !important;
  box-sizing: border-box !important;
}

.create-choice-panel h2 {
  margin: 0 0 42px !important;
  color: #101723 !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
}

.create-choice-close {
  position: absolute !important;
  top: 31px !important;
  right: 29px !important;
  width: 52px !important;
  height: 52px !important;
  border: 1.5px solid #edf0ee !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 88%) !important;
  box-shadow: inset 0 0 0 1px rgb(229 232 231 / 68%) !important;
}

.create-choice-close::before,
.create-choice-close::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: #111823 !important;
}

.create-choice-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.create-choice-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.create-choice-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 23px !important;
  width: 100% !important;
  min-height: 112px !important;
  margin: 0 0 18px !important;
  padding: 18px 29px 18px 18px !important;
  border: 1.5px solid #edf0ee !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: inset 0 0 0 1px rgb(239 241 239 / 74%) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.create-choice-card--group {
  border-color: #48c13a !important;
  background:
    radial-gradient(circle at 20% 50%, rgb(92 207 68 / 11%), transparent 34%),
    rgb(251 255 249 / 92%) !important;
  box-shadow:
    inset 0 0 0 1px rgb(72 193 58 / 48%),
    0 10px 28px rgb(75 177 65 / 8%) !important;
}

.create-choice-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  background:
    rgb(242 249 239 / 96%)
    center / 48px 48px
    no-repeat !important;
}

.create-choice-icon--role {
  background-image: url("./assets/icons/me/me-role-green.png") !important;
}

.create-choice-icon--group {
  background-image: url("./assets/icons/me/me-group-green.png") !important;
}

.create-choice-copy {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.create-choice-copy strong {
  overflow: hidden !important;
  color: #101723 !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.create-choice-copy em {
  overflow: hidden !important;
  color: #7a8190 !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.create-choice-card > i {
  width: 19px !important;
  height: 19px !important;
  border-top: 4px solid #737b86 !important;
  border-right: 4px solid #737b86 !important;
  transform: rotate(45deg) !important;
}

.create-choice-card--group > i {
  border-color: #48c13a !important;
}

@media (max-width: 580px) {
  .create-choice-panel {
    min-height: 70dvh !important;
    padding: 44px 22px calc(env(safe-area-inset-bottom, 0px) + 26px) !important;
    border-radius: 38px 38px 0 0 !important;
  }

  .create-choice-panel h2 {
    margin-bottom: 37px !important;
    font-size: 29px !important;
  }

  .create-choice-close {
    top: 27px !important;
    right: 25px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .create-choice-card {
    grid-template-columns: 68px minmax(0, 1fr) 24px !important;
    min-height: 106px !important;
    gap: 21px !important;
    margin-bottom: 17px !important;
    padding: 16px 27px 16px 16px !important;
  }

  .create-choice-icon {
    width: 68px !important;
    height: 68px !important;
    background-size: 46px 46px !important;
  }

  .create-choice-copy strong {
    font-size: 24px !important;
  }

  .create-choice-copy em {
    font-size: 17px !important;
  }
}

/* Create chooser final: compact menu under the home plus button, no highlighted item. */
.create-choice-dialog {
  pointer-events: none !important;
}

.create-choice-dialog.is-open {
  pointer-events: auto !important;
}

.create-choice-backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
}

.create-choice-panel {
  left: auto !important;
  right: 26px !important;
  top: 118px !important;
  bottom: auto !important;
  width: 278px !important;
  min-height: 0 !important;
  padding: 10px !important;
  border: 1px solid rgb(231 236 229 / 92%) !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 16px 38px rgb(58 81 49 / 15%) !important;
}

.create-choice-panel::before {
  content: "" !important;
  position: absolute !important;
  right: 23px !important;
  top: -8px !important;
  width: 18px !important;
  height: 18px !important;
  border-left: 1px solid rgb(231 236 229 / 92%) !important;
  border-top: 1px solid rgb(231 236 229 / 92%) !important;
  background: rgb(255 255 255 / 96%) !important;
  transform: rotate(45deg) !important;
}

.create-choice-panel h2,
.create-choice-close {
  display: none !important;
}

.create-choice-card,
.create-choice-card--group {
  grid-template-columns: 46px minmax(0, 1fr) 14px !important;
  gap: 12px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.create-choice-card + .create-choice-card {
  margin-top: 6px !important;
}

.create-choice-card:active {
  background: rgb(243 249 241 / 94%) !important;
}

.create-choice-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  background-size: 31px 31px !important;
}

.create-choice-copy {
  gap: 5px !important;
}

.create-choice-copy strong {
  font-size: 17px !important;
}

.create-choice-copy em {
  font-size: 12px !important;
  font-weight: 700 !important;
}

.create-choice-card > i,
.create-choice-card--group > i {
  width: 10px !important;
  height: 10px !important;
  border-width: 2.5px !important;
  border-color: #8c929b !important;
}

@media (max-width: 580px) {
  .create-choice-panel {
    right: 26px !important;
    top: 116px !important;
    width: 272px !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 21px !important;
  }
}

/* Group chat creation flow. */
.screen-group-flow {
  background:
    radial-gradient(circle at 88% 8%, rgb(111 197 78 / 14%), transparent 24%),
    linear-gradient(180deg, #fbfdf9 0%, #f6faf4 100%) !important;
  color: #111823 !important;
}

.group-flow-page {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 18px 18px 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.group-flow-nav,
.group-chat-nav {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 72px !important;
  align-items: center !important;
  min-height: 48px !important;
  margin-bottom: 12px !important;
}

.group-flow-nav strong,
.group-chat-nav strong {
  overflow: hidden !important;
  color: #101723 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.group-flow-back {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
}

.group-flow-back::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 13px !important;
  width: 13px !important;
  height: 13px !important;
  border-left: 2.5px solid #101723 !important;
  border-bottom: 2.5px solid #101723 !important;
  transform: rotate(45deg) !important;
}

.group-flow-done {
  color: #34af2f !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: right !important;
}

.group-flow-search {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  height: 42px !important;
  margin-bottom: 10px !important;
  padding: 0 14px !important;
  border-radius: 15px !important;
  background: rgb(238 243 237 / 92%) !important;
  box-sizing: border-box !important;
}

.group-flow-search i {
  width: 17px !important;
  height: 17px !important;
  border: 2px solid #7dbb6e !important;
  border-radius: 50% !important;
}

.group-flow-search i::after {
  content: "" !important;
  position: absolute !important;
  width: 7px !important;
  height: 2px !important;
  margin: 13px 0 0 12px !important;
  border-radius: 99px !important;
  background: #7dbb6e !important;
  transform: rotate(45deg) !important;
}

.group-flow-search input {
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  color: #252c28 !important;
  font-size: 14px !important;
}

.group-member-list {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 120px !important;
  bottom: 112px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.group-member-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 6px 0 !important;
  text-align: left !important;
}

.group-member-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background-color: #eef2ec !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 94%) !important;
}

.group-member-main {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.group-member-main strong {
  overflow: hidden !important;
  max-width: 50% !important;
  color: #182018 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.group-member-main em {
  max-width: 86px !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: #dff4d8 !important;
  color: #37a833 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.group-member-main em[data-tone="orange"] {
  background: #ffead6 !important;
  color: #f08a35 !important;
}

.group-member-main em[data-tone="pink"] {
  background: #ffe0ec !important;
  color: #ef6291 !important;
}

.group-member-main em[data-tone="purple"] {
  background: #eadfff !important;
  color: #8b6bef !important;
}

.group-member-main em[data-tone="blue"] {
  background: #dfeeff !important;
  color: #4383dd !important;
}

.group-member-check {
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid #cbd2cc !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

.group-member-row.is-selected .group-member-check {
  border-color: #42b739 !important;
  background: #42b739 !important;
}

.group-member-row.is-selected .group-member-check::before {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 5px !important;
  margin: 5px auto 0 !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) !important;
}

.group-member-footer {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

.group-selected-copy {
  color: #1e251f !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.group-selected-copy b {
  color: #2faf2a !important;
}

.group-selected-avatars {
  display: flex !important;
  min-width: 0 !important;
}

.group-selected-avatar {
  width: 28px !important;
  height: 28px !important;
  margin-left: -5px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background-color: #eef2ec !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.group-selected-avatar:first-child {
  margin-left: 0 !important;
}

.group-primary-button,
.group-secondary-button {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: 12px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.group-primary-button {
  background: linear-gradient(180deg, #48c83f 0%, #2eac27 100%) !important;
  color: #fff !important;
}

.group-primary-button:disabled {
  opacity: 0.45 !important;
}

.group-secondary-button {
  border: 1px solid #b9dfb2 !important;
  background: #fff !important;
  color: #3c9736 !important;
}

.group-flow-info {
  padding: 16px 18px 24px !important;
}

.group-info-avatar {
  display: grid !important;
  grid-template-columns: repeat(2, 44px) !important;
  grid-template-rows: repeat(2, 44px) !important;
  gap: 3px !important;
  width: 91px !important;
  height: 91px !important;
  margin: 35px auto 24px !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background: #eef4ed !important;
}

.group-avatar-tile {
  background-color: #e7ede6 !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.group-field {
  position: relative !important;
  display: grid !important;
  gap: 9px !important;
  margin-bottom: 18px !important;
}

.group-field span {
  color: #333b35 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.group-field input,
.group-field textarea {
  width: 100% !important;
  padding: 0 56px 0 14px !important;
  border: 1px solid #e4e9e3 !important;
  border-radius: 11px !important;
  background: rgb(255 255 255 / 88%) !important;
  color: #212821 !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

.group-field input {
  height: 45px !important;
}

.group-field textarea {
  height: 92px !important;
  padding-top: 13px !important;
  resize: none !important;
}

.group-field em {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  color: #9aa19d !important;
  font-size: 12px !important;
  font-style: normal !important;
}

.group-create-submit {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 28px !important;
  width: auto !important;
}

.group-flow-success {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  padding: 42px 24px !important;
  text-align: center !important;
}

.group-success-icon {
  width: 92px !important;
  height: 92px !important;
  margin-bottom: 24px !important;
  background:
    radial-gradient(circle at 50% 54%, #37b72f 0 16px, transparent 17px),
    conic-gradient(from 20deg, #ffb537, #34b634, #6cc74d, #ffcf4e, #34b634) !important;
  clip-path: polygon(50% 0, 100% 88%, 0 88%) !important;
  transform: rotate(-8deg) !important;
}

.group-flow-success h2 {
  margin: 0 0 9px !important;
  color: #121a14 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.group-flow-success p {
  margin: 0 0 36px !important;
  color: #8a928e !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.group-flow-success .group-primary-button,
.group-flow-success .group-secondary-button {
  width: 100% !important;
  max-width: 320px !important;
}

.group-chat-page {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 0 !important;
  background: #f4f6ef !important;
}

.group-chat-nav {
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
  min-height: 70px !important;
  margin: 0 !important;
  padding: 10px 10px 8px !important;
  border-bottom: 1px solid #e5e9e3 !important;
  background: rgb(252 254 250 / 95%) !important;
  box-sizing: border-box !important;
}

.group-chat-nav span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  text-align: center !important;
}

.group-chat-nav em {
  overflow: hidden !important;
  color: #8b928e !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.group-chat-more {
  width: 44px !important;
  height: 44px !important;
  background: radial-gradient(circle, #111 0 2px, transparent 2.5px) center / 9px 9px repeat-x !important;
}

.group-chat-messages {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px 14px !important;
}

.group-chat-message {
  margin-bottom: 14px !important;
}

.group-chat-message--system {
  margin: 0 auto 18px !important;
  max-width: 82% !important;
  color: #9aa19c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.group-chat-message--user {
  display: grid !important;
  justify-items: end !important;
}

.group-chat-message--user span {
  max-width: 74% !important;
  padding: 10px 13px !important;
  border-radius: 14px 14px 4px 14px !important;
  background: #d9f4cf !important;
  color: #172019 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.group-chat-message--user em {
  margin-top: 4px !important;
  color: #9aa19c !important;
  font-size: 11px !important;
  font-style: normal !important;
}

.group-chat-composer {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  border-top: 1px solid #e5e9e3 !important;
  background: rgb(252 254 250 / 96%) !important;
}

.group-chat-composer input {
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #202720 !important;
  font-size: 14px !important;
}

.group-chat-camera,
.group-chat-smile,
.group-chat-plus {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #6f7772 !important;
}

.group-chat-camera::before {
  content: "\1F4F7" !important;
}

.group-chat-smile::before {
  content: "\263A" !important;
  font-size: 24px !important;
}

.group-chat-plus::before {
  content: "+" !important;
  font-size: 24px !important;
  line-height: 34px !important;
}

.group-flow-info {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 16px 18px 24px !important;
  -webkit-overflow-scrolling: touch !important;
}

.group-info-hero {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 4px 0 16px !important;
  padding: 12px !important;
  border: 1px solid rgb(199 226 195 / 72%) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(235 249 231 / 88%)) !important;
  box-shadow: 0 12px 28px rgb(83 132 72 / 10%) !important;
}

.group-info-hero .group-info-avatar {
  grid-template-columns: repeat(2, 35px) !important;
  grid-template-rows: repeat(2, 35px) !important;
  width: 74px !important;
  height: 74px !important;
  margin: 0 !important;
  border-radius: 22px !important;
}

.group-info-hero strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #121a14 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.group-info-hero em {
  display: block !important;
  color: #6c776f !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

.group-setting-block,
.group-member-preview-card {
  margin: 0 0 14px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: inset 0 0 0 1px rgb(224 232 222 / 72%) !important;
}

.group-setting-block h3,
.group-member-preview-card h3 {
  margin: 0 0 10px !important;
  color: #263029 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.group-option-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.group-option-card,
.group-rhythm-chip {
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid #e2eadf !important;
  border-radius: 15px !important;
  background: #f8fbf6 !important;
  text-align: left !important;
}

.group-option-card.is-active,
.group-rhythm-chip.is-active {
  border-color: #45bd3d !important;
  background: linear-gradient(180deg, #f4fff0 0%, #e8f9e2 100%) !important;
  box-shadow: 0 8px 16px rgb(66 183 57 / 12%) !important;
}

.group-option-card strong,
.group-rhythm-chip strong {
  color: #1f291f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.group-option-card span,
.group-rhythm-chip span {
  color: #7a837c !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.group-chip-row {
  display: grid !important;
  gap: 8px !important;
}

.group-rhythm-chip {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
}

.group-member-preview-list {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  -webkit-overflow-scrolling: touch !important;
}

.group-member-preview-item {
  flex: 0 0 64px !important;
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.group-member-preview-item i {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: 0 7px 14px rgb(55 88 49 / 12%) !important;
}

.group-member-preview-item b {
  overflow: hidden !important;
  max-width: 62px !important;
  color: #222b25 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.group-member-preview-item em {
  color: #6bb762 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.group-flow-info .group-create-submit {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  box-shadow: none !important;
}

@media (max-width: 580px) {
  .screen-group-flow {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/* Real group chat: WeChat-like square composite avatar and member names in chat. */
.group-avatar,
.character-card.is-group-chat .group-avatar,
.chat-row.is-group-chat .group-avatar,
.group-info-avatar.group-avatar {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  gap: 1.5px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background-color: #e9eee6 !important;
  box-sizing: border-box !important;
}

.group-info-avatar.group-avatar {
  border-radius: 26px !important;
}

.group-avatar-cell,
.group-avatar-tile {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 4px !important;
  background-color: #dfe6dc !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

.group-avatar[data-count="1"] > :nth-child(1) {
  grid-column: 2 / 6 !important;
  grid-row: 2 / 6 !important;
}

.group-avatar[data-count="2"] > :nth-child(1) {
  grid-column: 1 / 4 !important;
  grid-row: 2 / 5 !important;
}

.group-avatar[data-count="2"] > :nth-child(2) {
  grid-column: 4 / 7 !important;
  grid-row: 2 / 5 !important;
}

.group-avatar[data-count="3"] > :nth-child(1) {
  grid-column: 2 / 5 !important;
  grid-row: 1 / 4 !important;
}

.group-avatar[data-count="3"] > :nth-child(2) {
  grid-column: 1 / 4 !important;
  grid-row: 4 / 7 !important;
}

.group-avatar[data-count="3"] > :nth-child(3) {
  grid-column: 4 / 7 !important;
  grid-row: 4 / 7 !important;
}

.group-avatar[data-count="4"] > :nth-child(1) {
  grid-column: 1 / 4 !important;
  grid-row: 1 / 4 !important;
}

.group-avatar[data-count="4"] > :nth-child(2) {
  grid-column: 4 / 7 !important;
  grid-row: 1 / 4 !important;
}

.group-avatar[data-count="4"] > :nth-child(3) {
  grid-column: 1 / 4 !important;
  grid-row: 4 / 7 !important;
}

.group-avatar[data-count="4"] > :nth-child(4) {
  grid-column: 4 / 7 !important;
  grid-row: 4 / 7 !important;
}

.group-avatar[data-count="5"] > :nth-child(1) {
  grid-column: 2 / 4 !important;
  grid-row: 2 / 4 !important;
}

.group-avatar[data-count="5"] > :nth-child(2) {
  grid-column: 4 / 6 !important;
  grid-row: 2 / 4 !important;
}

.group-avatar[data-count="5"] > :nth-child(3) {
  grid-column: 1 / 3 !important;
  grid-row: 4 / 6 !important;
}

.group-avatar[data-count="5"] > :nth-child(4) {
  grid-column: 3 / 5 !important;
  grid-row: 4 / 6 !important;
}

.group-avatar[data-count="5"] > :nth-child(5) {
  grid-column: 5 / 7 !important;
  grid-row: 4 / 6 !important;
}

.group-avatar[data-count="6"] > :nth-child(1),
.group-avatar[data-count="6"] > :nth-child(4) {
  grid-column: 1 / 3 !important;
}

.group-avatar[data-count="6"] > :nth-child(2),
.group-avatar[data-count="6"] > :nth-child(5) {
  grid-column: 3 / 5 !important;
}

.group-avatar[data-count="6"] > :nth-child(3),
.group-avatar[data-count="6"] > :nth-child(6) {
  grid-column: 5 / 7 !important;
}

.group-avatar[data-count="6"] > :nth-child(-n + 3) {
  grid-row: 2 / 4 !important;
}

.group-avatar[data-count="6"] > :nth-child(n + 4) {
  grid-row: 4 / 6 !important;
}

.group-avatar[data-count="7"] > :nth-child(1) {
  grid-column: 3 / 5 !important;
  grid-row: 1 / 3 !important;
}

.group-avatar[data-count="7"] > :nth-child(2),
.group-avatar[data-count="7"] > :nth-child(5),
.group-avatar[data-count="8"] > :nth-child(3),
.group-avatar[data-count="8"] > :nth-child(6),
.group-avatar[data-count="9"] > :nth-child(1),
.group-avatar[data-count="9"] > :nth-child(4),
.group-avatar[data-count="9"] > :nth-child(7) {
  grid-column: 1 / 3 !important;
}

.group-avatar[data-count="7"] > :nth-child(3),
.group-avatar[data-count="7"] > :nth-child(6),
.group-avatar[data-count="8"] > :nth-child(4),
.group-avatar[data-count="8"] > :nth-child(7),
.group-avatar[data-count="9"] > :nth-child(2),
.group-avatar[data-count="9"] > :nth-child(5),
.group-avatar[data-count="9"] > :nth-child(8) {
  grid-column: 3 / 5 !important;
}

.group-avatar[data-count="7"] > :nth-child(4),
.group-avatar[data-count="7"] > :nth-child(7),
.group-avatar[data-count="8"] > :nth-child(5),
.group-avatar[data-count="8"] > :nth-child(8),
.group-avatar[data-count="9"] > :nth-child(3),
.group-avatar[data-count="9"] > :nth-child(6),
.group-avatar[data-count="9"] > :nth-child(9) {
  grid-column: 5 / 7 !important;
}

.group-avatar[data-count="7"] > :nth-child(n + 2):nth-child(-n + 4),
.group-avatar[data-count="8"] > :nth-child(n + 3):nth-child(-n + 5),
.group-avatar[data-count="9"] > :nth-child(n + 4):nth-child(-n + 6) {
  grid-row: 3 / 5 !important;
}

.group-avatar[data-count="7"] > :nth-child(n + 5),
.group-avatar[data-count="8"] > :nth-child(n + 6),
.group-avatar[data-count="9"] > :nth-child(n + 7) {
  grid-row: 5 / 7 !important;
}

.group-avatar[data-count="8"] > :nth-child(1) {
  grid-column: 2 / 4 !important;
  grid-row: 1 / 3 !important;
}

.group-avatar[data-count="8"] > :nth-child(2) {
  grid-column: 4 / 6 !important;
  grid-row: 1 / 3 !important;
}

.group-avatar[data-count="9"] > :nth-child(-n + 3) {
  grid-row: 1 / 3 !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card.is-group-chat .group-avatar {
  border-radius: 16px !important;
}

.message-row-system {
  display: block !important;
  width: fit-content !important;
  max-width: 78% !important;
  margin: 14px auto !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 56%) !important;
  color: #9aa19d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.message-row.group-member-message {
  align-items: flex-start !important;
}

.group-message-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  flex: 0 0 calc(100% - 136px) !important;
  width: calc(100% - 136px) !important;
  max-width: calc(100% - 136px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.group-message-sender {
  padding-left: 2px !important;
  color: #8d948f !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.message-row.group-member-message .bubble {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 42px !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.screen-chat .message-row.assistant.group-member-message .bubble {
  max-width: 100% !important;
}

/* Me page directory sheets: friends and groups opened from the "Me" dashboard. */
.me-directory-dialog[hidden] {
  display: none !important;
}

.me-directory-dialog {
  position: absolute !important;
  inset: 0 !important;
  z-index: 130 !important;
  display: grid !important;
  place-items: end center !important;
  background: rgb(40 52 42 / 18%) !important;
  backdrop-filter: blur(6px) !important;
}

.me-directory-backdrop {
  position: absolute !important;
  inset: 0 !important;
}

.me-directory-sheet {
  position: relative !important;
  z-index: 1 !important;
  width: min(92%, 500px) !important;
  max-height: 82% !important;
  margin: 0 0 18px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgb(231 239 225 / 86%) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 92% 4%, rgb(114 204 86 / 16%), transparent 24%),
    rgb(255 255 255 / 94%) !important;
  box-shadow: 0 22px 58px rgb(55 76 48 / 18%) !important;
}

.me-directory-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgb(226 234 221 / 76%) !important;
}

.me-directory-back {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgb(241 247 237 / 92%) !important;
}

.me-directory-back::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 13px !important;
  width: 12px !important;
  height: 12px !important;
  border-left: 2.5px solid #283126 !important;
  border-bottom: 2.5px solid #283126 !important;
  transform: rotate(45deg) !important;
}

.me-directory-head span {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.me-directory-head strong {
  color: #172118 !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.me-directory-head em {
  color: #7f8a80 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.me-directory-list {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 10px 14px 18px !important;
  -webkit-overflow-scrolling: touch !important;
}

.me-directory-search[hidden] {
  display: none !important;
}

.me-directory-search {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 52px !important;
  margin: 0 22px 16px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 72%) !important;
  box-shadow: inset 0 0 0 1px rgb(218 226 215 / 74%), 0 10px 24px rgb(65 86 60 / 8%) !important;
  backdrop-filter: blur(10px) !important;
}

.me-directory-search i {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  justify-self: center !important;
}

.me-directory-search i::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  width: 13px !important;
  height: 13px !important;
  border: 3px solid #9da2a3 !important;
  border-radius: 999px !important;
}

.me-directory-search i::after {
  content: "" !important;
  position: absolute !important;
  right: 3px !important;
  bottom: 3px !important;
  width: 9px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #9da2a3 !important;
  transform: rotate(45deg) !important;
  transform-origin: center !important;
}

.me-directory-search input {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #222a24 !important;
  font-size: 16px !important;
  font-weight: 780 !important;
}

.me-directory-search input::placeholder {
  color: #aeb1b4 !important;
  font-weight: 760 !important;
}

.me-directory-search button {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #b8babd !important;
  opacity: .95 !important;
}

.me-directory-search button::before,
.me-directory-search button::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 12px !important;
  width: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.me-directory-search button::before {
  transform: rotate(45deg) !important;
}

.me-directory-search button::after {
  transform: rotate(-45deg) !important;
}

.me-directory-row {
  width: 100% !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 9px !important;
  padding: 10px 12px !important;
  border-radius: 22px !important;
  background: rgb(247 251 245 / 88%) !important;
  text-align: left !important;
  box-shadow: inset 0 0 0 1px rgb(226 236 220 / 82%) !important;
}

.me-directory-row:active {
  transform: scale(0.988) !important;
  background: rgb(239 248 235 / 94%) !important;
}

.me-directory-avatar,
.me-directory-row .avatar {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  border-radius: 50% !important;
  background-color: #e9efe6 !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 96%) !important;
}

.me-directory-row.is-group .me-directory-avatar,
.me-directory-row.is-group .avatar.group-avatar {
  border-radius: 14px !important;
}

.me-directory-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
}

.me-directory-main strong {
  overflow: hidden !important;
  color: #1c251d !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-directory-main em {
  overflow: hidden !important;
  color: #8a938b !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-directory-meta {
  max-width: 78px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #e8f7df !important;
  color: #48ab3d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.me-directory-empty {
  display: grid !important;
  place-items: center !important;
  min-height: 180px !important;
  color: #8c948e !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.me-directory-dialog[data-directory-type="friends"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  place-items: stretch !important;
  background: transparent !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-backdrop {
  display: none !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-sheet {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  background:
    linear-gradient(rgb(255 255 255 / 18%), rgb(255 255 255 / 10%)),
    url("./assets/backgrounds/profile/me-directory-list-bg.png") center / cover no-repeat !important;
  box-shadow: none !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-head {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 30px) 24px 24px !important;
  border-bottom: 0 !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-back {
  width: 50px !important;
  height: 50px !important;
  background: rgb(255 255 255 / 74%) !important;
  box-shadow: 0 12px 28px rgb(74 91 67 / 10%) !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-back::before {
  left: 20px !important;
  top: 16px !important;
  width: 16px !important;
  height: 16px !important;
  border-left-width: 3px !important;
  border-bottom-width: 3px !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-head strong {
  color: #0d1510 !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  letter-spacing: -1px !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-head em {
  color: #858a8d !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-list {
  padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-row {
  min-height: 78px !important;
  grid-template-columns: 52px minmax(0, 1fr) auto 18px !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow: inset 0 0 0 1px rgb(229 235 228 / 72%), 0 12px 28px rgb(76 91 71 / 7%) !important;
  backdrop-filter: blur(8px) !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-row::after {
  content: "" !important;
  width: 11px !important;
  height: 11px !important;
  border-right: 2.5px solid #b8babf !important;
  border-top: 2.5px solid #b8babf !important;
  transform: rotate(45deg) !important;
  justify-self: center !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-avatar {
  width: 50px !important;
  height: 50px !important;
  flex-basis: 50px !important;
  box-shadow: none !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-main {
  gap: 7px !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-main strong {
  color: #0d1510 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -.2px !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-main em {
  color: #7f858c !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-meta {
  max-width: 78px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #eaf8e4 !important;
  color: #39ad39 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.me-directory-dialog[data-directory-type="friends"] .me-directory-empty {
  min-height: 260px !important;
  color: #8a918d !important;
  font-size: 16px !important;
}

.me-directory-dialog[data-directory-type="memory"],
.me-directory-dialog[data-directory-type="memory-detail"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  place-items: stretch !important;
  background: transparent !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-backdrop,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-backdrop {
  display: none !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-sheet,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-sheet {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  background:
    linear-gradient(rgb(255 255 255 / 14%), rgb(255 255 255 / 8%)),
    url("./assets/backgrounds/profile/me-memory-bg.png") center / cover no-repeat !important;
  box-shadow: none !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-head,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 56px !important;
  align-items: center !important;
  gap: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 38px) 24px 34px !important;
  border-bottom: 0 !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-back,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-back {
  width: 54px !important;
  height: 54px !important;
  background: rgb(255 255 255 / 74%) !important;
  box-shadow: 0 12px 28px rgb(74 91 67 / 10%) !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-back::before,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-back::before {
  left: 21px !important;
  top: 17px !important;
  width: 16px !important;
  height: 16px !important;
  border-left-color: #4b9a38 !important;
  border-bottom-color: #4b9a38 !important;
  border-left-width: 3px !important;
  border-bottom-width: 3px !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-head span,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-head span {
  justify-items: center !important;
  text-align: center !important;
  gap: 10px !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-head strong,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-head strong {
  color: #11191d !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  letter-spacing: -1px !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-head em,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-head em {
  color: #707782 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
}

.me-directory-dialog[data-directory-type="memory"] .me-directory-list,
.me-directory-dialog[data-directory-type="memory-detail"] .me-directory-list {
  padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
}

.me-memory-home-card {
  width: 100% !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 14px !important;
  padding: 18px 20px 18px 18px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgb(255 255 255 / 80%) !important;
  text-align: left !important;
  box-shadow: inset 0 0 0 1px rgb(229 235 228 / 70%), 0 14px 30px rgb(76 91 71 / 8%) !important;
  backdrop-filter: blur(8px) !important;
}

.me-memory-home-card:active {
  transform: scale(.988) !important;
}

.me-memory-home-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  background-color: #eef7e8 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.me-memory-home-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

.me-memory-home-copy strong {
  color: #10171a !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.me-memory-home-copy em {
  overflow: hidden !important;
  color: #707782 !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.me-memory-home-copy b {
  color: #2f9a25 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.me-memory-home-card > i {
  width: 14px !important;
  height: 14px !important;
  border-right: 3px solid #4d9b3b !important;
  border-top: 3px solid #4d9b3b !important;
  transform: rotate(45deg) !important;
}

.me-memory-detail-hero {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow: inset 0 0 0 1px rgb(229 235 228 / 70%), 0 14px 30px rgb(76 91 71 / 8%) !important;
}

.me-memory-detail-hero span {
  width: 60px !important;
  height: 60px !important;
  border-radius: 999px !important;
  background-color: #eef7e8 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.me-memory-detail-hero strong {
  color: #10171a !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

.me-memory-detail-hero em {
  color: #707782 !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  text-align: center !important;
}

.me-memory-detail-group {
  display: grid !important;
  gap: 8px !important;
}

.me-memory-detail-group-head {
  min-height: 28px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: 1px solid rgb(222 232 220 / 86%) !important;
  border-radius: 999px !important;
  background: rgb(249 252 246 / 72%) !important;
}

.me-memory-detail-group-head strong {
  color: #2d432f !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.me-memory-detail-group-head em {
  color: #81917e !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

.me-memory-detail-item {
  display: grid !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: inset 0 0 0 1px rgb(229 235 228 / 68%) !important;
}

.me-memory-detail-item strong {
  color: #20282a !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.me-memory-detail-item em {
  color: #879089 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

.me-memory-detail-item.is-outdated strong,
.me-memory-detail-item.is-conflicted strong,
.me-memory-detail-item.is-expired strong {
  color: #8a9588 !important;
  text-decoration: line-through !important;
}

@media (max-width: 580px) {
  .me-directory-dialog {
    position: fixed !important;
    width: 100vw !important;
    height: 100dvh !important;
  }

  .me-directory-sheet {
    width: calc(100vw - 24px) !important;
    max-height: 78dvh !important;
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 86px) !important;
    border-radius: 26px !important;
  }

  .me-directory-head {
    padding: 14px 14px 10px !important;
  }

  .me-directory-row {
    min-height: 66px !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 19px !important;
  }

  .me-directory-avatar,
  .me-directory-row .avatar {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-sheet {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-head {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 30px) 24px 24px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-back {
    width: 50px !important;
    height: 50px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-head strong {
    font-size: 29px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-head em {
    font-size: 16px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-search {
    min-height: 48px !important;
    margin: 0 22px 16px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-list {
    padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-row {
    min-height: 78px !important;
    grid-template-columns: 52px minmax(0, 1fr) auto 18px !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-avatar {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-main strong {
    font-size: 18px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-main em {
    font-size: 12px !important;
  }

  .me-directory-dialog[data-directory-type="friends"] .me-directory-meta {
    max-width: 76px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 580px) {
  .me-directory-dialog[data-directory-type="memory"] {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-sheet {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-head {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 8px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-back {
    width: 38px !important;
    height: 38px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-back::before {
    left: 15px !important;
    top: 12px !important;
    width: 12px !important;
    height: 12px !important;
    border-left-width: 2.5px !important;
    border-bottom-width: 2.5px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-head span {
    gap: 3px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-head strong {
    font-size: 26px !important;
    line-height: .98 !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-head em {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-list {
    display: grid !important;
    grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: hidden !important;
    padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-card {
    min-height: 0 !important;
    height: 100% !important;
    grid-template-columns: 38px minmax(0, 1fr) 12px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-copy {
    gap: 2px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-copy strong {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-copy em {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-copy b {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-card > i {
    width: 9px !important;
    height: 9px !important;
    border-right-width: 2px !important;
    border-top-width: 2px !important;
  }
}

@media (max-width: 580px) and (max-height: 760px) {
  .me-directory-dialog[data-directory-type="memory"] .me-directory-head {
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 6px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-head strong {
    font-size: 23px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-head em {
    display: none !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-directory-list {
    gap: 5px !important;
    padding: 5px 14px calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-card {
    grid-template-columns: 34px minmax(0, 1fr) 10px !important;
    gap: 7px !important;
    padding: 5px 9px !important;
    border-radius: 15px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-copy strong {
    font-size: 15px !important;
  }

  .me-directory-dialog[data-directory-type="memory"] .me-memory-home-copy em {
    display: none !important;
  }
}

/* Chat card context menu: rounded WeChat-like actions, no delete option. */
.chat-card-menu[hidden] {
  display: none !important;
}

.chat-card-menu {
  position: fixed !important;
  z-index: 220 !important;
  min-width: 178px !important;
  padding: 8px !important;
  border: 1px solid rgb(228 234 224 / 86%) !important;
  border-radius: 24px !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 18px 46px rgb(31 44 30 / 18%) !important;
  backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
}

.chat-card-menu button {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 17px !important;
  color: #222922 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.chat-card-menu button:active {
  background: #edf7e8 !important;
  color: #33a53b !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card.is-pinned {
  border-color: rgb(189 229 177 / 90%) !important;
  background: rgb(250 255 247 / 93%) !important;
}

.phone-shell.is-list-mode .screen-list:not(.is-me-page) .character-card.is-pinned .character-list-time::before {
  content: "\7f6e\9876" !important;
  display: inline-flex !important;
  margin-right: 5px !important;
  color: #4fb044 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

/* Desktop Xinjian: use the same diary + moment feed features as mobile, without touching mobile layout. */
@media (min-width: 581px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.png")
      center top / 100% 100%
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    padding: 72px 54px 118px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-list {
    display: grid !important;
    gap: 18px !important;
    width: min(760px, 100%) !important;
    margin: 0 auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed {
    min-height: 0 !important;
    padding: 22px 24px 20px !important;
    border: 1px solid rgb(224 228 215 / 76%) !important;
    border-radius: 28px !important;
    background: rgb(255 255 255 / 88%) !important;
    box-shadow:
      0 16px 36px rgb(84 106 68 / 8%),
      inset 0 1px 0 rgb(255 255 255 / 78%) !important;
    backdrop-filter: blur(10px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-card-head {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-avatar {
    width: 64px !important;
    height: 64px !important;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 92%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-block {
    gap: 6px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-title-row strong {
    overflow: hidden !important;
    max-width: 100% !important;
    color: #54733b !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card-menu {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-date-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #7f8384 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-weather {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-content {
    gap: 7px !important;
    margin: 18px 6px 16px 80px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-content p {
    color: #1c201b !important;
    font-size: 18px !important;
    font-weight: 520 !important;
    line-height: 1.55 !important;
    letter-spacing: 0.01em !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed .diary-mood {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 0 80px !important;
    color: #8d9390 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--diary .diary-mood {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-like-button {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: url("./assets/icons/ui/diary-heart-gray.png") center / contain no-repeat !important;
    box-shadow: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-like-button.is-liked {
    background-image: url("./assets/icons/ui/diary-heart-light-green.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-like-count {
    min-width: 36px !important;
    color: #8aa967 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
    position: relative !important;
    min-width: 58px !important;
    margin-left: 0 !important;
    padding-left: 30px !important;
    color: #777d7b !important;
    font-variant-numeric: tabular-nums !important;
    cursor: default !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 24px !important;
    height: 24px !important;
    background: url("./assets/icons/ui/diary-comment-gray.png") center / contain no-repeat !important;
    transform: translateY(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active::before {
    background-image: url("./assets/icons/ui/diary-comment-green.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active {
    color: #6c9650 !important;
    font-weight: 820 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count::after {
    content: none !important;
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments {
    margin: 14px 0 0 80px !important;
    padding: 12px 14px 14px !important;
    border-radius: 18px !important;
    background: rgb(248 249 244 / 84%) !important;
    box-shadow: inset 0 0 0 1px rgb(232 235 226 / 74%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-list {
    display: grid !important;
    gap: 8px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments:not(.is-expanded) .diary-comment-item.is-hidden {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    color: #1f241e !important;
    font-size: 14px !important;
    font-weight: 550 !important;
    line-height: 1.35 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item strong {
    flex: 0 0 auto !important;
    max-width: 96px !important;
    overflow: hidden !important;
    color: #4f7936 !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #20251f !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item em {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: #8b918d !important;
    font-style: normal !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments-more {
    display: block !important;
    width: max-content !important;
    height: auto !important;
    margin: 9px 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #8f9491 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    text-align: right !important;
    cursor: pointer !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-compose {
    display: none !important;
    grid-template-columns: minmax(0, 1fr) 30px 30px !important;
    align-items: center !important;
    gap: 12px !important;
    height: 44px !important;
    margin-top: 12px !important;
    padding: 0 12px 0 14px !important;
    border-radius: 15px !important;
    background: rgb(255 255 255 / 94%) !important;
    box-shadow: inset 0 0 0 1px rgb(228 232 224 / 90%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #30352f !important;
    font-size: 13px !important;
    font-weight: 560 !important;
    line-height: 44px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input::placeholder {
    color: #8f9491 !important;
    opacity: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile {
    background-image: url("./assets/icons/ui/diary-smile-gray.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    background-image: url("./assets/icons/ui/diary-send-gray.png") !important;
  }
}

/* FINAL MANUAL CONTROL - desktop Xinjian first card position.
   This block is intentionally last so it wins over earlier desktop/mobile overrides. */
@media (min-width: 581px) {
  :root {
    --desktop-xinjian-feed-top: 194px;
    --desktop-xinjian-first-gap: 0px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: var(--desktop-xinjian-feed-top) !important;
    padding-top: var(--desktop-xinjian-first-gap) !important;
  }
}

/* EOF final mobile Xinjian layout: header stays above feed, tabbar stays visible. */
@media (max-width: 580px) {
  :root {
    --mobile-xinjian-feed-top: 184px;
    --mobile-xinjian-tabbar-bottom: 18px;
    --mobile-xinjian-tabbar-height: 78px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.mobile.webp")
      center top / 100vw 100dvh
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--mobile-xinjian-feed-top) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-xinjian-tabbar-height) + var(--mobile-xinjian-tabbar-bottom) + 12px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 5 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 8px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-list {
    display: grid !important;
    gap: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 26px !important;
    right: 26px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-xinjian-tabbar-bottom)) !important;
    width: auto !important;
    height: var(--mobile-xinjian-tabbar-height) !important;
    min-height: var(--mobile-xinjian-tabbar-height) !important;
    margin: 0 !important;
    padding: 8px 8px 6px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    overflow: visible !important;
    border: 1px solid rgb(229 235 225 / 82%) !important;
    border-radius: 27px !important;
    background: rgb(255 255 255 / 80%) !important;
    box-shadow: 0 18px 42px rgb(62 89 51 / 10%) !important;
    backdrop-filter: blur(14px) !important;
    transform: none !important;
    z-index: 120 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-image,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-highlight,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-active-image {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 37px 18px !important;
    place-items: center !important;
    gap: 2px !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1),
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active {
    color: #8e9490 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-message-gray.png") !important;
  }
}

/* Absolute final mobile Xinjian nav/content alignment. */
@media (max-width: 580px) {
  :root {
    --mobile-xinjian-feed-top: 132px;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard {
    top: var(--mobile-xinjian-feed-top) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    border: 1px solid rgb(228 234 225 / 86%) !important;
    border-radius: 24px !important;
    background: rgb(255 255 255 / 86%) !important;
    box-shadow: 0 18px 42px rgb(62 89 51 / 11%) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 20 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab {
    position: absolute !important;
    top: 0 !important;
    width: 54px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    z-index: 2 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(2) {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) {
    left: 22% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) {
    left: 78% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab span:not(.tab-glyph) {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 29px !important;
    height: 29px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    color: transparent !important;
    transform: translate(-50%, -50%) !important;
    filter: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph::before,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph::after {
    display: none !important;
    content: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-message-gray.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-leaf-green.png") !important;
    filter: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-me-gray.png") !important;
  }
}

/* Copy mobile home tabbar to Xinjian without changing icon state. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    border: 1px solid rgb(228 234 225 / 86%) !important;
    border-radius: 24px !important;
    background: rgb(255 255 255 / 86%) !important;
    box-shadow: 0 18px 42px rgb(62 89 51 / 11%) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 20 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-image,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-highlight,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tabbar-active-image {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab {
    position: absolute !important;
    top: 0 !important;
    width: 54px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    z-index: 2 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) {
    left: 22% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(2) {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) {
    display: block !important;
    left: 78% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab span:not(.tab-glyph) {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 29px !important;
    height: 29px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    color: transparent !important;
    transform: translate(-50%, -50%) !important;
    filter: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph::before,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph::after {
    display: none !important;
    content: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-message-green.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-leaf-green.png") !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-me-gray.png") !important;
  }
}

/* Final Xinjian mobile tabbar lock: match the actual mobile home/me tabbar. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-dashboard,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-dashboard {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    width: auto !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    border: 1px solid rgb(228 234 225 / 86%) !important;
    border-radius: 24px !important;
    background: rgb(255 255 255 / 86%) !important;
    box-shadow: 0 18px 42px rgb(62 89 51 / 11%) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 20 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar .tab,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar .tab {
    position: absolute !important;
    top: 0 !important;
    width: 54px !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    z-index: 2 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1),
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar .tab:nth-of-type(1),
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) {
    left: 22% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(2),
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar .tab:nth-of-type(2),
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar .tab:nth-of-type(2) {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3),
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar .tab:nth-of-type(3),
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4),
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar .tab:nth-of-type(4),
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) {
    display: block !important;
    left: 78% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab span:not(.tab-glyph),
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar .tab span:not(.tab-glyph),
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar .tab span:not(.tab-glyph) {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar .tab-glyph,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar .tab-glyph {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 27px !important;
    height: 27px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    color: transparent !important;
    transform: translate(-50%, -50%) !important;
    filter: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph::before,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab-glyph::after {
    display: none !important;
    content: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(1).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-message-green.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(3).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-leaf-green.png") !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4) .tab-glyph,
  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar .tab:nth-of-type(4).is-active .tab-glyph {
    background-image: url("./assets/icons/tabbar/tab-me-gray.png") !important;
  }
}

/* True EOF Xinjian card comment composer: this must stay after all older comment rules. */
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-compose,
.phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments .diary-comment-compose,
.phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments .diary-comment-compose {
  display: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose,
.phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments.is-composing .diary-comment-compose,
.phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose {
  display: grid !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  grid-template-columns: minmax(0, 1fr) 30px 30px !important;
  align-items: center !important;
  gap: 12px !important;
  height: 48px !important;
  margin: 14px 0 0 !important;
  padding: 0 12px 0 16px !important;
  border-radius: 16px !important;
  background: rgb(255 255 255 / 94%) !important;
  box-shadow: inset 0 0 0 1px rgb(228 232 224 / 90%) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #30352f !important;
  font-size: 15px !important;
  font-weight: 560 !important;
  line-height: 48px !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-input::placeholder {
  color: #9b9f97 !important;
  opacity: 1 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile {
  background-image: url("./assets/icons/ui/diary-smile-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
  background-image: url("./assets/icons/ui/diary-send-gray.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count {
  cursor: pointer !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active {
  color: #5f8f3e !important;
  font-weight: 820 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-count.is-active::before {
  background-image: url("./assets/icons/ui/diary-comment-green.png") !important;
}

.diary-global-comment-bar,
.diary-global-comment-bar.is-open,
.diary-global-comment-bar[hidden] {
  display: none !important;
}
/* True EOF Xinjian keyboard isolation: inline comments must not resize the page chrome. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page {
    width: 100vw !important;
    height: var(--mobile-layout-height, 100dvh) !important;
    min-height: var(--mobile-layout-height, 100dvh) !important;
    max-height: none !important;
    overflow: hidden !important;
    background-size: 100vw var(--mobile-layout-height, 100dvh) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}
/* True EOF Xinjian layout restore: keep title art above feed and keep tabbar unchanged. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode,
  .phone-shell.is-list-mode .screen-list.is-diary-page,
  .phone-shell.is-list-mode.is-diary-commenting,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page {
    position: relative !important;
    width: 100vw !important;
    height: var(--mobile-stable-viewport-height, 100dvh) !important;
    min-height: var(--mobile-stable-viewport-height, 100dvh) !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page {
    background:
      #f8fbef url("./assets/backgrounds/diary/diary-xinjian-bg.mobile.webp")
      center top / 100vw var(--mobile-stable-viewport-height, 100dvh)
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-dashboard,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-dashboard,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-dashboard {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 120px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 5 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 8px 14px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .tabbar,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .tabbar,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .tabbar {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    width: auto !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 24px !important;
    z-index: 20 !important;
    transform: none !important;
  }
}

/* True EOF Xinjian comments polish: wrap replies naturally and let the inline composer grow. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    min-width: 0 !important;
    overflow: visible !important;
    color: #1f241e !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
    white-space: normal !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-body {
    grid-column: 1 !important;
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
    color: #20251f !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-name,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-reply-target {
    display: inline !important;
    max-width: none !important;
    overflow: visible !important;
    color: #4f7936 !important;
    font-weight: 850 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-reply-word {
    display: inline-block !important;
    overflow: visible !important;
    color: #20251f !important;
    font-weight: 650 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-text {
    display: inline !important;
    min-width: 0 !important;
    overflow: visible !important;
    color: #20251f !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item em {
    grid-column: 2 !important;
    align-self: start !important;
    flex: none !important;
    margin-left: 4px !important;
    padding-top: 1px !important;
    color: #8b918d !important;
    font-size: 11px !important;
    font-style: normal !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose,
  .phone-shell.is-list-mode .screen-list.is-diary-page.is-diary-commenting .diary-comments.is-composing .diary-comment-compose,
  .phone-shell.is-list-mode.is-diary-commenting .screen-list.is-diary-page .diary-comments.is-composing .diary-comment-compose {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px 28px !important;
    align-items: end !important;
    gap: 9px !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 13px 0 0 !important;
    padding: 8px 12px 8px 16px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    background: rgb(255 255 255 / 94%) !important;
    box-shadow: inset 0 0 0 1px rgb(228 232 224 / 90%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page textarea.diary-comment-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    outline: 0 !important;
    resize: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: transparent !important;
    color: #30352f !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 560 !important;
    line-height: 22px !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    scrollbar-width: none !important;
    -webkit-appearance: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page textarea.diary-comment-input::-webkit-scrollbar {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page textarea.diary-comment-input::placeholder {
    color: #9b9f97 !important;
    opacity: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    align-self: end !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 0 1px !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-smile {
    background-size: 23px 23px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-send {
    background-size: 27px 27px !important;
  }
}

/* True EOF Xinjian comments final wrap fix: beat older generic span ellipsis rules. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-item {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    align-items: start !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-item > .diary-comment-body {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-item > .diary-comment-body .diary-comment-text {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-name,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-reply-word,
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-reply-target {
    display: inline-flex !important;
    align-items: center !important;
    height: 18px !important;
    max-width: none !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-reply-word {
    transform: translateY(-1px) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-comments .diary-comment-item em {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    margin-left: 0 !important;
    text-align: right !important;
  }
}

/* True EOF main list unread badge: place unread count between date and relationship. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list:not(.is-me-page):not(.is-diary-page) .character-side {
    position: relative !important;
  }

  .phone-shell.is-list-mode .screen-list:not(.is-me-page):not(.is-diary-page) .character-unread:not([hidden]) {
    position: absolute !important;
    top: 36px !important;
    right: 0 !important;
    left: auto !important;
    z-index: 3 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    display: inline-grid !important;
    place-items: center !important;
    transform: none !important;
  }
}

/* True EOF Me page visual refresh: keep all existing actions, replace only layout and icons. */
.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before,
.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::after,
.phone-shell.is-list-mode .screen-list.is-me-page .me-section-icon::before,
.phone-shell.is-list-mode .screen-list.is-me-page .me-section-icon::after {
  content: none !important;
  display: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
  width: 72px !important;
  height: 78px !important;
  display: grid !important;
  grid-template-rows: 54px 18px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #31342e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before {
  content: "" !important;
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background:
    rgb(255 255 255 / 86%)
    url("./assets/icons/me/me-ui-gear.png") center / 30px 30px
    no-repeat !important;
  box-shadow: 0 10px 24px rgb(75 95 62 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::after {
  content: "\8bbe\7f6e" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-space-icon,
.phone-shell.is-list-mode .screen-list.is-me-page .me-section-envelope,
.phone-shell.is-list-mode .screen-list.is-me-page .me-service-item i {
  border: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-space-role {
  background-image: url("./assets/icons/me/me-ui-companion.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-space-group {
  background-image: url("./assets/icons/me/me-ui-group.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-space-memory {
  background-image: url("./assets/icons/me/me-ui-memory.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-space-letter {
  background-image: url("./assets/icons/me/me-ui-letter.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-space-more {
  background-image: url("./assets/icons/me/me-ui-more.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-section-envelope {
  background-image: url("./assets/icons/me/me-ui-ai-letter.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-service-item:nth-child(1) i {
  background-image: url("./assets/icons/me/me-ui-active-care.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-service-item:nth-child(3) i {
  background-image: url("./assets/icons/me/me-ui-exclusive-name.png") !important;
}

.phone-shell.is-list-mode .screen-list.is-me-page .me-service-item:nth-child(5) i {
  background-image: url("./assets/icons/me/me-ui-memory-feature.png") !important;
}

@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page {
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    position: absolute !important;
    inset: 0 0 calc(env(safe-area-inset-bottom, 0px) + 66px) 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 94px 152px 120px 78px minmax(110px, 1fr) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    padding: 18px 14px 8px !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    position: relative !important;
    flex: none !important;
    height: 94px !important;
    min-height: 94px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) 72px !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    box-shadow:
      0 0 0 5px #ffffff,
      0 10px 22px rgb(72 86 62 / 14%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero-main {
    align-self: center !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row {
    gap: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row strong {
    max-width: 120px !important;
    color: #101510 !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-vip {
    min-width: 36px !important;
    height: 19px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ffc84f, #ff9f20) !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 19px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero-main > .me-name-row .me-level,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-mini-stats {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row {
    margin-top: 9px !important;
    color: #536080 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-edit {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    align-self: center !important;
    justify-self: end !important;
    padding: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 64px !important;
    height: 72px !important;
    grid-template-rows: 52px 16px !important;
    font-size: 11px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before {
    width: 52px !important;
    height: 52px !important;
    background-size: 29px 29px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card),
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    min-height: 0 !important;
    margin: 0 !important;
    border: 1px solid rgb(229 235 225 / 86%) !important;
    border-radius: 22px !important;
    background: rgb(255 255 255 / 89%) !important;
    box-shadow: 0 12px 28px rgb(73 88 62 / 8%) !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    flex: none !important;
    height: 152px !important;
    padding: 11px 13px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card .me-section-head {
    margin: 0 0 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-section-head h2,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-left h2 {
    color: #141a13 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-title-spark {
    width: 15px !important;
    height: 15px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-content {
    height: calc(100% - 25px) !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 83px !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-avatar {
    width: 58px !important;
    height: 58px !important;
    box-shadow:
      0 0 0 4px #fff,
      0 8px 18px rgb(60 72 56 / 12%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-avatar::after,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-companion-avatar::after {
    width: 17px !important;
    height: 17px !important;
    right: -2px !important;
    bottom: 0 !important;
    background-size: 11px 11px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-copy {
    gap: 3px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-copy strong {
    font-size: 20px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-copy span,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-copy em {
    font-size: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-copy span b {
    font-size: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-copy p {
    max-width: 128px !important;
    margin-top: 3px !important;
    padding: 4px 9px !important;
    font-size: 10.5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-stats {
    display: flex !important;
    gap: 7px !important;
    margin-top: 2px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-stats span {
    font-size: 10.5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action {
    justify-self: end !important;
    align-self: end !important;
    min-width: 76px !important;
    height: 36px !important;
    margin: 0 !important;
    font-size: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    bottom: calc(100% + 7px) !important;
    width: 74px !important;
    height: 50px !important;
    background: url("./assets/icons/me/me-ui-envelope.png") center / contain no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-action::after {
    content: "\203A" !important;
    margin-left: 4px !important;
    font-size: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) {
    flex: none !important;
    height: 120px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 8px !important;
    padding: 10px 13px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-left {
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-companion-profile {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-companion-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-companion-copy > strong {
    font-size: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-companion-copy .me-level,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-companion-relation {
    height: 17px !important;
    padding: 0 7px !important;
    font-size: 9.5px !important;
    line-height: 17px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-progress {
    height: 5px !important;
    margin-top: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-left > p {
    margin-top: 5px !important;
    font-size: 10.5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-days {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 70px !important;
    height: 84px !important;
    align-self: center !important;
    justify-self: end !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
    border: 0 !important;
    background:
      radial-gradient(circle at center, rgb(255 221 229 / 82%) 0 42%, transparent 43%),
      radial-gradient(circle at 50% 12%, rgb(255 236 241 / 92%) 0 18%, transparent 19%),
      radial-gradient(circle at 88% 50%, rgb(255 236 241 / 92%) 0 18%, transparent 19%),
      radial-gradient(circle at 50% 88%, rgb(255 236 241 / 92%) 0 18%, transparent 19%),
      radial-gradient(circle at 12% 50%, rgb(255 236 241 / 92%) 0 18%, transparent 19%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-days span {
    font-size: 10px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-days strong,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-days em {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 8px !important;
    margin-top: 5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right > span {
    grid-column: 1 / -1 !important;
    font-size: 9.5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p::before {
    width: 13px !important;
    height: 13px !important;
    background-size: contain !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p:nth-of-type(1)::before {
    background-image: url("./assets/icons/me/me-ui-exclusive-name.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p:nth-of-type(2)::before {
    background-image: url("./assets/icons/me/me-ui-night-letter.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p:nth-of-type(3)::before {
    background-image: url("./assets/icons/me/me-ui-active-care.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p:nth-of-type(4)::before {
    background-image: url("./assets/icons/me/me-ui-memory-feature.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card {
    flex: none !important;
    height: 78px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid {
    height: 78px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item {
    height: 78px !important;
    min-height: 78px !important;
    padding: 7px 3px 5px !important;
    display: grid !important;
    grid-template-rows: 30px 18px 15px !important;
    place-items: center !important;
    border: 1px solid rgb(229 235 225 / 72%) !important;
    border-radius: 16px !important;
    background: rgb(255 255 255 / 82%) !important;
    box-shadow: 0 10px 22px rgb(73 88 62 / 7%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(1) {
    order: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(4) {
    order: 2 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(2) {
    order: 3 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(3) {
    order: 4 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(5) {
    order: 5 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item strong {
    color: #181d18 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item b,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item span {
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(1) b {
    color: #2dae31 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(4) b {
    color: #ff2d68 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(2) b {
    color: #7448ff !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item:nth-child(3) b {
    color: #1676ff !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    flex: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 13px 8px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card .me-section-head {
    flex: 0 0 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card .me-section-head h2 {
    font-size: 17px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-section-envelope {
    width: 18px !important;
    height: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card .me-section-head button {
    color: #24952d !important;
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-section-subtitle {
    flex: 0 0 14px !important;
    margin: 1px 0 2px !important;
    color: #556084 !important;
    font-size: 10.5px !important;
    line-height: 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid rgb(226 231 222 / 66%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-head {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-avatar {
    width: 30px !important;
    height: 30px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-meta strong {
    font-size: 11.5px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card-inline-content {
    margin-top: 2px !important;
    color: #59607b !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-view {
    min-width: 45px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #54bd4b, #2fa038) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 24px !important;
    box-shadow: 0 7px 14px rgb(51 160 56 / 20%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-service-card {
    display: none !important;
  }
}

@media (max-width: 580px) and (max-height: 740px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    grid-template-rows: 82px 138px 108px 68px minmax(95px, 1fr) !important;
    gap: 6px !important;
    padding: 12px 12px 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    height: 82px !important;
    min-height: 82px !important;
    grid-template-columns: 62px minmax(0, 1fr) 60px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring {
    width: 58px !important;
    height: 58px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row strong {
    font-size: 21px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row {
    font-size: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 58px !important;
    height: 64px !important;
    grid-template-rows: 46px 14px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before {
    width: 46px !important;
    height: 46px !important;
    background-size: 25px 25px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    height: 138px !important;
    padding: 9px 11px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) {
    height: 108px !important;
    padding: 8px 11px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item {
    height: 68px !important;
    min-height: 68px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-icon {
    width: 25px !important;
    height: 25px !important;
  }
}

/* True EOF Me page function guard: keep settings popup and all existing actions usable. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    position: absolute !important;
    top: 10px !important;
    right: 16px !important;
    z-index: 80 !important;
    align-self: auto !important;
    justify-self: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open {
    overflow: visible !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    position: absolute !important;
    top: 82px !important;
    right: 14px !important;
    z-index: 160 !important;
    display: block !important;
    width: min(220px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 150px) !important;
    margin: 0 !important;
    padding: 16px 12px 14px !important;
    overflow: auto !important;
    border-radius: 22px !important;
    background: rgb(255 255 255 / 96%) !important;
    box-shadow: 0 20px 52px rgb(42 58 36 / 18%) !important;
  }
}

/* True EOF Me page mobile polish: top-right settings, original settings icons, better cards. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 56px !important;
    height: 66px !important;
    display: grid !important;
    grid-template-rows: 48px 15px !important;
    place-items: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before {
    width: 48px !important;
    height: 48px !important;
    background:
      rgb(255 255 255 / 88%)
      url("./assets/icons/me/me-ui-gear.png") center / 28px 28px
      no-repeat !important;
    box-shadow: 0 10px 24px rgb(65 84 58 / 12%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::after {
    margin-top: 4px !important;
    color: #657089 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-bell {
    background-image: url("./assets/settings-menu/notifications.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-moon {
    background-image: url("./assets/settings-menu/personalize.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-shield {
    background-image: url("./assets/settings-menu/account-security.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-help {
    background-image: url("./assets/settings-menu/help-feedback.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-lock {
    background-image: url("./assets/settings-menu/privacy.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-info {
    background-image: url("./assets/settings-menu/about-us.png") !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    grid-template-rows: 92px 150px 142px 84px minmax(118px, 1fr) !important;
    gap: 8px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) {
    height: 142px !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
    grid-template-rows: minmax(0, 1fr) 38px !important;
    align-items: stretch !important;
    padding: 10px 13px 9px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-days {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 74px !important;
    height: 78px !important;
    align-self: center !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right > span {
    position: absolute !important;
    left: 13px !important;
    bottom: 45px !important;
    display: block !important;
    color: #65708a !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p {
    min-width: 0 !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 2px 0 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #65708a !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-right p::before {
    left: 0 !important;
    top: 50% !important;
    width: 13px !important;
    height: 13px !important;
    transform: translateY(-50%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid {
    height: 84px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid {
    gap: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item {
    height: 84px !important;
    min-height: 84px !important;
    grid-template-rows: 34px 19px 16px !important;
    padding: 7px 2px 5px !important;
    border-radius: 18px !important;
    background: rgb(255 255 255 / 86%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item strong {
    font-size: 12px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item b,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item span {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card .me-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card .me-section-head h2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-section-envelope {
    flex: 0 0 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card:last-child {
    border-bottom: 0 !important;
  }
}

/* True EOF Me space bar centering: icons, labels and counts stay centered. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid {
    height: 80px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid {
    align-items: center !important;
    gap: 7px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item {
    height: 80px !important;
    min-height: 80px !important;
    padding: 6px 2px 5px !important;
    display: grid !important;
    grid-template-rows: 33px 19px 14px !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    row-gap: 2px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-icon {
    width: 33px !important;
    height: 33px !important;
    flex: none !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item strong {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    align-self: center !important;
    justify-self: center !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item b {
    width: 100% !important;
    margin: -1px 0 0 !important;
    display: block !important;
    align-self: start !important;
    justify-self: center !important;
    text-align: center !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item span {
    display: none !important;
  }
}

/* True EOF Me header alignment: match the main page profile header on mobile. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    padding-top: 16px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    position: relative !important;
    flex: none !important;
    width: auto !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
    pointer-events: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    justify-self: start !important;
    align-self: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow:
      0 0 0 4px #ffffff,
      0 6px 16px rgb(73 95 61 / 11%) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-avatar-ring::after {
    content: none !important;
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero-main {
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-name-row strong {
    max-width: 128px !important;
    overflow: hidden !important;
    color: #151b14 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-vip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 18px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ffd966, #ffb84d) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 18px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-level,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-mini-stats {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row {
    display: block !important;
    margin: 7px 0 0 !important;
    overflow: hidden !important;
    color: #757d75 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-row span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-signature-edit {
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-top-actions {
    position: static !important;
    z-index: 80 !important;
    display: block !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background:
      rgb(255 255 255 / 88%)
      url("./assets/icons/me/me-ui-gear.png") center / 24px 24px
      no-repeat !important;
    box-shadow: 0 10px 24px rgb(65 84 58 / 12%) !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::before,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-setting-action::after {
    content: none !important;
    display: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    top: 82px !important;
    right: 14px !important;
  }
}

/* True EOF Me header absolute lock: same visual coordinates as the main page top bar. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    position: absolute !important;
    inset: 0 0 calc(env(safe-area-inset-bottom, 0px) + 80px) 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    padding: 104px 14px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    top: 16px !important;
    z-index: 140 !important;
    width: auto !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-avatar-ring {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-hero-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-top-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 145 !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-hero > .me-top-actions .me-setting-action {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 50% !important;
    background:
      rgb(255 255 255 / 88%)
      url("./assets/icons/me/me-ui-gear.png") center / 24px 24px
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card),
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    flex: none !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard.is-service-open .me-service-card {
    position: absolute !important;
    top: 88px !important;
    right: 14px !important;
    z-index: 160 !important;
  }
}

/* True EOF Me middle balance: keep header/tabbar fixed, let content fill the open space. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    gap: clamp(8px, 1.55dvh, 14px) !important;
    padding-bottom: 6px !important;
    overflow: hidden !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card {
    flex: 0 0 clamp(156px, 20.2dvh, 188px) !important;
    height: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card) {
    flex: 0 0 clamp(132px, 17.4dvh, 164px) !important;
    height: auto !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid {
    flex: 0 0 clamp(78px, 9.4dvh, 92px) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item {
    height: 100% !important;
    min-height: 0 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    flex: 1 1 auto !important;
    min-height: 196px !important;
    height: auto !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letter-card {
    min-height: 0 !important;
    align-items: center !important;
  }
}

/* True EOF Me layer fix: one background layer, cards float above it without a clipping middle layer. */
@media (max-width: 580px) {
  .phone-shell.is-list-mode,
  .phone-shell.is-list-mode .screen-list.is-me-page {
    background-color: #f8faf5 !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page {
    overflow: visible !important;
    background:
      #f8faf5 url("./assets/backgrounds/profile/me-page-background.png")
      center top / 100vw var(--mobile-stable-viewport-height, 100dvh)
      no-repeat !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-dashboard {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    overflow: visible !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-focus-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-relation-card:not(.me-relation-stats-card),
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-grid,
  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-item {
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    overflow: visible !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-space-card {
    padding-bottom: 2px !important;
  }

  .phone-shell.is-list-mode .screen-list.is-me-page .me-letters-card {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Active chat bubble skin: Star Cat. It only changes bubble visuals, not message logic. */
.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble),
.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble) {
  box-sizing: border-box !important;
  min-height: 46px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-radius: 23px !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 9px 20px rgb(95 133 168 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 86%) !important;
  color: #25303a !important;
  font-size: 17px !important;
  line-height: 1.46 !important;
  overflow: visible !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble) {
  --chat-tail-border: #a9c9e9;
  --chat-tail-fill: linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(242 248 255 / 98%) 100%);
  max-width: 430px !important;
  min-width: 106px !important;
  padding: 10px 58px 10px 46px !important;
  border-color: #a9c9e9 !important;
  background-color: #f8fbff !important;
  background-image:
    url("./assets/chat-bubbles/star-cat/ribbon.png"),
    url("./assets/chat-bubbles/star-cat/cat.png"),
    url("./assets/chat-bubbles/star-cat/star-blue.png"),
    url("./assets/chat-bubbles/star-cat/star-soft.png"),
    radial-gradient(circle at 19% 73%, rgb(142 183 223 / 70%) 0 2px, transparent 2.6px),
    radial-gradient(circle at 27% 30%, rgb(185 211 239 / 80%) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 74% 28%, rgb(141 183 224 / 62%) 0 1.7px, transparent 2.3px),
    linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(242 248 255 / 98%) 100%) !important;
  background-size:
    33px 33px,
    39px 39px,
    11px 11px,
    18px 18px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    15px 6px,
    calc(100% - 42px) calc(100% - 31px),
    47px calc(100% - 14px),
    calc(100% - 16px) 9px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble) {
  --chat-tail-border: #f49bb5;
  --chat-tail-fill: linear-gradient(180deg, #fff8fb 0%, #ffe6ef 100%);
  max-width: calc(100% - 136px) !important;
  min-width: 132px !important;
  padding: 10px 74px 10px 18px !important;
  border-color: #f49bb5 !important;
  background-color: #fff1f6 !important;
  background-image:
    url("./assets/chat-bubbles/star-cat/fingers.png"),
    url("./assets/chat-bubbles/star-cat/sparkle-pink.png"),
    radial-gradient(circle at 11% 27%, rgb(255 255 255 / 94%) 0 2px, transparent 2.5px),
    radial-gradient(circle at 18% 53%, rgb(255 202 217 / 80%) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 84% 24%, rgb(255 255 255 / 94%) 0 2px, transparent 2.5px),
    linear-gradient(180deg, #fff8fb 0%, #ffe6ef 100%) !important;
  background-size:
    48px 48px,
    16px 16px,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    calc(100% - 34px) center,
    calc(100% - 12px) 8px,
    0 0,
    0 0,
    0 0,
    0 0 !important;
  box-shadow:
    0 9px 20px rgb(229 112 150 / 13%),
    inset 0 1px 0 rgb(255 255 255 / 88%) !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  width: 22px !important;
  height: 15px !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
  z-index: 0 !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble)::before {
  left: -8px !important;
  right: auto !important;
  border-left: 1.5px solid #a9c9e9 !important;
  border-bottom: 1.5px solid #a9c9e9 !important;
  border-radius: 0 0 0 15px !important;
  background: linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(242 248 255 / 98%) 100%) !important;
  transform: skewX(-28deg) !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble)::after {
  left: auto !important;
  right: -8px !important;
  border-right: 1.5px solid #f49bb5 !important;
  border-bottom: 1.5px solid #f49bb5 !important;
  border-radius: 0 0 15px 0 !important;
  background: linear-gradient(180deg, #fff8fb 0%, #ffe6ef 100%) !important;
  transform: skewX(28deg) !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble.typing-bubble {
  border-color: #a9c9e9 !important;
  background: linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(242 248 255 / 98%) 100%) !important;
}

@media (max-width: 580px) {
  .screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble) {
    max-width: calc(100vw - 118px) !important;
    padding: 9px 50px 9px 40px !important;
    background-size:
      28px 28px,
      34px 34px,
      9px 9px,
      15px 15px,
      auto,
      auto,
      auto,
      auto !important;
    background-position:
      13px 6px,
      calc(100% - 36px) calc(100% - 27px),
      42px calc(100% - 12px),
      calc(100% - 13px) 8px,
      0 0,
      0 0,
      0 0,
      0 0 !important;
  }

  .screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble) {
    max-width: calc(100vw - 130px) !important;
    padding: 9px 62px 9px 16px !important;
    background-size:
      42px 42px,
      14px 14px,
      auto,
      auto,
      auto,
      auto !important;
    background-position:
      calc(100% - 29px) center,
      calc(100% - 10px) 8px,
      0 0,
      0 0,
      0 0,
      0 0 !important;
  }
}

/* Active chat bubble skin: Romantic Flower. */
.screen-chat[data-chat-bubble-style="sticker"] .message-row.assistant .bubble:not(.typing-bubble),
.screen-chat[data-chat-bubble-style="sticker"] .message-row.user .bubble:not(.typing-bubble) {
  box-sizing: border-box !important;
  min-height: 46px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-radius: 23px !important;
  background-repeat: no-repeat !important;
  color: #30313a !important;
  font-size: 17px !important;
  line-height: 1.46 !important;
  overflow: visible !important;
}

.screen-chat[data-chat-bubble-style="sticker"] .message-row.assistant .bubble:not(.typing-bubble) {
  --chat-tail-border: #f2b8c6;
  --chat-tail-fill: #fffefe;
  max-width: 430px !important;
  min-width: 122px !important;
  padding: 10px 58px 10px 20px !important;
  border-color: #f2b8c6 !important;
  background-color: #fffefe !important;
  background-image:
    url("./assets/chat-bubbles/romantic-flower/1.png"),
    url("./assets/chat-bubbles/romantic-flower/2.png"),
    radial-gradient(circle at 16% 28%, rgb(255 173 190 / 60%) 0 2px, transparent 2.6px),
    linear-gradient(180deg, rgb(255 255 255 / 98%) 0%, rgb(255 247 250 / 0) 100%) !important;
  background-size: 40px 40px, 30px 30px, auto, auto !important;
  background-position: calc(100% - 44px) calc(100% - 30px), 14px 7px, 0 0, 0 0 !important;
  box-shadow: 0 9px 20px rgb(221 125 150 / 12%), inset 0 1px 0 rgb(255 255 255 / 88%) !important;
}

.screen-chat[data-chat-bubble-style="sticker"] .message-row.user .bubble:not(.typing-bubble) {
  --chat-tail-border: #f091aa;
  --chat-tail-fill: linear-gradient(180deg, #fff8fb 0%, #ffe5ee 100%);
  max-width: calc(100% - 136px) !important;
  min-width: 122px !important;
  padding: 10px 58px 10px 20px !important;
  border-color: #f091aa !important;
  background-color: #fff1f6 !important;
  background-image:
    url("./assets/chat-bubbles/romantic-flower/1.png"),
    url("./assets/chat-bubbles/romantic-flower/3.png"),
    linear-gradient(180deg, #fff8fb 0%, #ffe5ee 100%) !important;
  background-size: 42px 42px, 24px 24px, auto !important;
  background-position: calc(100% - 42px) calc(100% - 30px), 16px 7px, 0 0 !important;
  box-shadow: 0 9px 20px rgb(229 112 150 / 13%), inset 0 1px 0 rgb(255 255 255 / 88%) !important;
}

/* Active chat bubble skin: Cloud Candy. */
.screen-chat[data-chat-bubble-style="cloud"] .message-row.assistant .bubble:not(.typing-bubble),
.screen-chat[data-chat-bubble-style="cloud"] .message-row.user .bubble:not(.typing-bubble) {
  box-sizing: border-box !important;
  min-height: 48px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-radius: 26px 23px 25px 22px !important;
  background-repeat: no-repeat !important;
  color: #263544 !important;
  font-size: 17px !important;
  line-height: 1.46 !important;
  overflow: visible !important;
}

.screen-chat[data-chat-bubble-style="cloud"] .message-row.assistant .bubble:not(.typing-bubble) {
  --chat-tail-border: #b8d4ee;
  --chat-tail-fill: linear-gradient(180deg, rgb(255 255 255 / 98%) 0%, rgb(242 248 255 / 96%) 100%);
  max-width: 430px !important;
  min-width: 130px !important;
  padding: 11px 58px 11px 52px !important;
  border-color: #b8d4ee !important;
  background-color: #f9fcff !important;
  background-image:
    url("./assets/chat-bubbles/cloud-candy/3.png"),
    url("./assets/chat-bubbles/cloud-candy/4.png"),
    linear-gradient(180deg, rgb(255 255 255 / 98%) 0%, rgb(242 248 255 / 96%) 100%) !important;
  background-size: 38px 38px, 34px 34px, auto !important;
  background-position: 9px 5px, calc(100% - 42px) calc(100% - 30px), 0 0 !important;
  box-shadow: 0 9px 20px rgb(92 145 199 / 14%), inset 0 1px 0 rgb(255 255 255 / 90%) !important;
}

.screen-chat[data-chat-bubble-style="cloud"] .message-row.user .bubble:not(.typing-bubble) {
  --chat-tail-border: #f39db7;
  --chat-tail-fill: linear-gradient(180deg, #fff8fb 0%, #ffe5ef 100%);
  max-width: calc(100% - 136px) !important;
  min-width: 132px !important;
  padding: 11px 58px 11px 52px !important;
  border-color: #f39db7 !important;
  border-radius: 27px 24px 25px 24px !important;
  background-color: #fff0f6 !important;
  background-image:
    url("./assets/chat-bubbles/cloud-candy/1.png"),
    url("./assets/chat-bubbles/cloud-candy/2.png"),
    linear-gradient(180deg, #fff8fb 0%, #ffe5ef 100%) !important;
  background-size: 40px 40px, 34px 34px, auto !important;
  background-position: 10px calc(100% - 33px), calc(100% - 42px) 5px, 0 0 !important;
  box-shadow: 0 9px 20px rgb(229 112 150 / 13%), inset 0 1px 0 rgb(255 255 255 / 88%) !important;
}

/* Active chat bubble skin: Simple Handdrawn. */
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.assistant .bubble:not(.typing-bubble),
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.user .bubble:not(.typing-bubble) {
  box-sizing: border-box !important;
  min-height: 45px !important;
  border-style: solid !important;
  border-width: 1.6px !important;
  border-radius: 22px 9px 22px 9px !important;
  background-repeat: no-repeat !important;
  background-color: rgb(255 255 255 / 96%) !important;
  color: #20232a !important;
  font-size: 17px !important;
  line-height: 1.46 !important;
  overflow: visible !important;
}

.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.assistant .bubble:not(.typing-bubble) {
  --chat-tail-border: #5a5a5a;
  --chat-tail-fill: rgb(255 255 255 / 96%);
  max-width: 430px !important;
  min-width: 116px !important;
  padding: 10px 48px 10px 20px !important;
  border-color: #5a5a5a !important;
  background-image: url("./assets/chat-bubbles/handdrawn-simple/3.png") !important;
  background-size: 22px 22px !important;
  background-position: calc(100% - 28px) 8px !important;
  box-shadow: 0 8px 18px rgb(60 60 60 / 8%) !important;
}

.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.user .bubble:not(.typing-bubble) {
  --chat-tail-border: #e66687;
  --chat-tail-fill: rgb(255 255 255 / 96%);
  max-width: calc(100% - 136px) !important;
  min-width: 116px !important;
  padding: 10px 48px 10px 20px !important;
  border-color: #e66687 !important;
  background-image: url("./assets/chat-bubbles/handdrawn-simple/2.png") !important;
  background-size: 22px 22px !important;
  background-position: calc(100% - 29px) calc(100% - 24px) !important;
  box-shadow: 0 8px 18px rgb(214 86 120 / 10%) !important;
}

.screen-chat[data-chat-bubble-style="sticker"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="cloud"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="sticker"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="cloud"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.user .bubble:not(.typing-bubble)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  width: 18px !important;
  height: 15px !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  z-index: 0 !important;
}

.screen-chat[data-chat-bubble-style="sticker"] .message-row.assistant .bubble:not(.typing-bubble)::before {
  left: -8px !important;
  border-left: 1.5px solid #f2b8c6 !important;
  border-bottom: 1.5px solid #f2b8c6 !important;
  border-radius: 0 0 0 15px !important;
  background: #fffefe !important;
  transform: skewX(-30deg) !important;
}

.screen-chat[data-chat-bubble-style="sticker"] .message-row.user .bubble:not(.typing-bubble)::after {
  right: -8px !important;
  border-right: 1.5px solid #f091aa !important;
  border-bottom: 1.5px solid #f091aa !important;
  border-radius: 0 0 15px 0 !important;
  background: #ffe5ee !important;
  transform: skewX(30deg) !important;
}

.screen-chat[data-chat-bubble-style="cloud"] .message-row.assistant .bubble:not(.typing-bubble)::before {
  left: -8px !important;
  border-left: 1.5px solid #b8d4ee !important;
  border-bottom: 1.5px solid #b8d4ee !important;
  border-radius: 0 0 0 15px !important;
  background: #f9fcff !important;
  transform: skewX(-30deg) !important;
}

.screen-chat[data-chat-bubble-style="cloud"] .message-row.user .bubble:not(.typing-bubble)::after {
  right: -8px !important;
  border-right: 1.5px solid #f39db7 !important;
  border-bottom: 1.5px solid #f39db7 !important;
  border-radius: 0 0 15px 0 !important;
  background: #ffe5ef !important;
  transform: skewX(30deg) !important;
}

.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.assistant .bubble:not(.typing-bubble)::before {
  left: -8px !important;
  border-left: 1.6px solid #5a5a5a !important;
  border-bottom: 1.6px solid #5a5a5a !important;
  border-radius: 0 0 0 14px !important;
  background: rgb(255 255 255 / 96%) !important;
  transform: skewX(-30deg) !important;
}

.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.user .bubble:not(.typing-bubble)::after {
  right: -8px !important;
  border-right: 1.6px solid #e66687 !important;
  border-bottom: 1.6px solid #e66687 !important;
  border-radius: 0 0 14px 0 !important;
  background: rgb(255 255 255 / 96%) !important;
  transform: skewX(30deg) !important;
}

@media (max-width: 580px) {
  .screen-chat[data-chat-bubble-style="sticker"] .message-row.assistant .bubble:not(.typing-bubble),
  .screen-chat[data-chat-bubble-style="cloud"] .message-row.assistant .bubble:not(.typing-bubble),
  .screen-chat[data-chat-bubble-style="handdrawn"] .message-row.assistant .bubble:not(.typing-bubble) {
    max-width: calc(100vw - 118px) !important;
  }

  .screen-chat[data-chat-bubble-style="sticker"] .message-row.user .bubble:not(.typing-bubble),
  .screen-chat[data-chat-bubble-style="cloud"] .message-row.user .bubble:not(.typing-bubble),
  .screen-chat[data-chat-bubble-style="handdrawn"] .message-row.user .bubble:not(.typing-bubble) {
    max-width: calc(100vw - 130px) !important;
  }
}

/* Final curved bubble tails: soft hook-like tails matching the reference art. */
.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="sticker"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="cloud"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="sticker"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="cloud"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.user .bubble:not(.typing-bubble)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: -2px !important;
  width: 25px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--chat-tail-fill, #fff) !important;
  z-index: -1 !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="sticker"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="cloud"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.assistant .bubble:not(.typing-bubble)::before {
  left: -10px !important;
  right: auto !important;
  clip-path: path("M25 1 C18 5 14 12 3 16 C9 18 18 16 25 9 Z") !important;
  filter:
    drop-shadow(-1.35px 0 0 var(--chat-tail-border, #b8d4ee))
    drop-shadow(0 1.35px 0 var(--chat-tail-border, #b8d4ee)) !important;
  transform: none !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="sticker"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="cloud"] .message-row.user .bubble:not(.typing-bubble)::after,
.screen-chat[data-chat-bubble-style="handdrawn"] .message-row.user .bubble:not(.typing-bubble)::after {
  left: auto !important;
  right: -10px !important;
  clip-path: path("M0 1 C7 5 11 12 22 16 C16 18 7 16 0 9 Z") !important;
  filter:
    drop-shadow(1.35px 0 0 var(--chat-tail-border, #f49bb5))
    drop-shadow(0 1.35px 0 var(--chat-tail-border, #f49bb5)) !important;
  transform: none !important;
}

/* Star Cat: no side pointer/tail. Keep the bubble body and decorations only. */
.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble),
.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble) {
  isolation: isolate !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble)::before,
.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble)::after {
  content: none !important;
  display: none !important;
}

/* Absolute final Xinjian interaction reminder skin: keep PNG assets above older fallback CSS. */
.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;
}

/* EOF guard: pixel-ratio layout for the 853x1844 Xinjian interaction mockup. */
.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;
  background: url("./assets/diary-interaction/red-dot.png") center / contain no-repeat !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;
  background: url("./assets/diary-interaction/arrow.png") center / contain no-repeat !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;
}

/* Xinjian interactions: final PNG-driven skin. */
.diary-interaction-panel {
  background:
    #fbfcf7 url("./assets/diary-interaction/background.png")
    center top / 100% auto
    no-repeat !important;
  background-position: center 62px !important;
}

.diary-interaction-head {
  min-height: 62px !important;
  padding: max(13px, env(safe-area-inset-top, 0px)) 20px 12px !important;
  grid-template-columns: 46px minmax(0, 1fr) 88px !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 2px 8px rgb(38 52 32 / 7%) !important;
}

.diary-interaction-head strong {
  color: #101410 !important;
  font-size: 22px !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
}

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

.diary-interaction-back::before {
  left: 15px !important;
  top: 10px !important;
  width: 15px !important;
  height: 15px !important;
  border-left: 3px solid #111 !important;
  border-bottom: 3px solid #111 !important;
}

.diary-interaction-read-all {
  color: #1b6f17 !important;
  font-size: 16px !important;
  font-weight: 760 !important;
}

.diary-interaction-hero {
  min-height: 196px !important;
  box-sizing: border-box !important;
  padding: 54px 26px 24px !important;
  background: transparent !important;
}

.diary-interaction-hero p {
  max-width: 260px !important;
  margin: 0 0 16px !important;
  color: #0a671c !important;
  font-size: 22px !important;
  font-weight: 760 !important;
  line-height: 1.58 !important;
  letter-spacing: 0.02em !important;
}

.diary-interaction-hero span {
  color: #737774 !important;
  font-size: 18px !important;
  font-weight: 580 !important;
  line-height: 1.32 !important;
}

.diary-interaction-list {
  padding: 0 20px 28px !important;
  gap: 18px !important;
}

.diary-interaction-message {
  min-height: 0 !important;
  padding: 24px 28px 24px 30px !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 22px !important;
  border: 0 !important;
  border-radius: 31px !important;
  background: rgb(255 255 255 / 82%) !important;
  box-shadow:
    0 20px 44px rgb(82 92 75 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 86%) !important;
  backdrop-filter: blur(12px) !important;
}

.diary-interaction-message-avatar {
  width: 70px !important;
  height: 70px !important;
  box-shadow: 0 5px 14px rgb(46 50 40 / 12%) !important;
}

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

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

.diary-interaction-message-title {
  color: #161916 !important;
  font-size: 19px !important;
  font-weight: 780 !important;
  line-height: 1.32 !important;
}

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

.diary-interaction-message-title b {
  color: #141914 !important;
  font-size: 19px !important;
  font-weight: 780 !important;
}

.diary-interaction-message-top time {
  color: #707471 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.diary-interaction-message-dot {
  width: 14px !important;
  height: 14px !important;
  margin-top: 6px !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: #464a47 !important;
  font-size: 18px !important;
  font-weight: 520 !important;
  line-height: 1.48 !important;
  white-space: normal !important;
}

.diary-interaction-message-quote {
  padding: 15px 22px !important;
  display: grid !important;
  gap: 9px !important;
  border-radius: 18px !important;
  background: rgb(247 248 245 / 72%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 74%) !important;
  white-space: normal !important;
}

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

.diary-interaction-message-quote-meta {
  color: #777b78 !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 {
  justify-content: flex-end !important;
  margin-top: 2px !important;
}

.diary-interaction-message-foot button {
  padding: 5px 27px 5px 0 !important;
  color: #1c7019 !important;
  font-size: 17px !important;
  font-weight: 780 !important;
}

.diary-interaction-message-foot button::after {
  right: 0 !important;
  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 {
  margin: 12px 20px -2px !important;
  color: #6f746f !important;
  font-size: 17px !important;
  font-weight: 560 !important;
}

.diary-interaction-message.is-read {
  opacity: 0.58 !important;
}

.diary-interaction-tail {
  padding: 12px 0 24px !important;
  color: #767b77 !important;
  font-size: 16px !important;
  font-weight: 560 !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 {
  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-arrow::before {
  content: none !important;
  display: none !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;
}

@media (max-width: 580px) {
  .diary-interaction-head {
    min-height: 58px !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px !important;
    grid-template-columns: 42px minmax(0, 1fr) 78px !important;
  }

  .diary-interaction-head strong {
    font-size: 18px !important;
  }

  .diary-interaction-read-all {
    font-size: 13px !important;
  }

  .diary-interaction-hero {
    min-height: 150px !important;
    padding: 34px 24px 16px !important;
  }

  .diary-interaction-hero p {
    margin-bottom: 10px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .diary-interaction-hero span {
    font-size: 14px !important;
  }

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

  .diary-interaction-message {
    padding: 17px 15px 16px !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;
  }

  .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 {
    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;
  }

  .diary-interaction-read-divider,
  .diary-interaction-tail {
    font-size: 12px !important;
  }
}

.diary-interaction-dialog {
  position: absolute !important;
  inset: 0 !important;
  z-index: 520 !important;
  display: block !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

.diary-interaction-dialog[hidden] {
  display: none !important;
}

.diary-interaction-dialog.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.diary-interaction-panel {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 86%), rgb(250 253 244 / 94%)),
    url("./assets/backgrounds/diary/diary-xinjian-bg.mobile.webp") center top / cover no-repeat,
    #f7faef !important;
  color: #23301f !important;
}

.diary-interaction-head {
  position: relative !important;
  z-index: 2 !important;
  min-height: 58px !important;
  padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 74px !important;
  align-items: center !important;
  border-bottom: 1px solid rgb(220 224 215 / 70%) !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: 0 5px 18px rgb(70 90 62 / 8%) !important;
  backdrop-filter: blur(14px) !important;
}

.diary-interaction-head strong {
  color: #1f261e !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
}

.diary-interaction-back,
.diary-interaction-read-all {
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.diary-interaction-back {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
}

.diary-interaction-back::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 11px !important;
  width: 10px !important;
  height: 10px !important;
  border-left: 2px solid #20251f !important;
  border-bottom: 2px solid #20251f !important;
  transform: rotate(45deg) !important;
}

.diary-interaction-back:active {
  background: rgb(87 123 70 / 8%) !important;
}

.diary-interaction-read-all {
  justify-self: end !important;
  padding: 8px 0 !important;
  color: #5b8f43 !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  white-space: nowrap !important;
}

.diary-interaction-read-all:disabled {
  color: #a6b09f !important;
  cursor: default !important;
}

.diary-interaction-hero {
  flex: 0 0 auto !important;
  padding: 26px 24px 14px !important;
  background:
    radial-gradient(circle at 88% 8%, rgb(202 226 176 / 42%), transparent 32%),
    linear-gradient(135deg, rgb(244 251 235 / 72%), rgb(255 255 255 / 12%)) !important;
}

.diary-interaction-hero p {
  margin: 0 0 9px !important;
  color: #45663a !important;
  font-size: 15px !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
}

.diary-interaction-hero span {
  display: block !important;
  color: #52624e !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
}

.diary-interaction-list {
  flex: 1 1 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 14px 24px !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  -webkit-overflow-scrolling: touch !important;
}

.diary-interaction-message {
  position: relative !important;
  box-sizing: border-box !important;
  min-height: 104px !important;
  padding: 16px 15px 14px !important;
  display: grid !important;
  grid-template-columns: 45px minmax(0, 1fr) !important;
  gap: 12px !important;
  border: 1px solid rgb(235 238 231 / 82%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 90%) !important;
  box-shadow:
    0 12px 28px rgb(77 96 66 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 84%) !important;
  backdrop-filter: blur(10px) !important;
}

.diary-interaction-message-avatar {
  width: 44px !important;
  height: 44px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background-color: #eef5e9 !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 4px 12px rgb(40 50 36 / 12%) !important;
}

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

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

.diary-interaction-message-title {
  overflow: hidden !important;
  color: #263223 !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diary-interaction-message-title strong {
  color: #4f853c !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.diary-interaction-message-title b {
  color: #2d342b !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

.diary-interaction-message-top time {
  color: #838982 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.diary-interaction-message-dot {
  width: 7px !important;
  height: 7px !important;
  margin-top: 5px !important;
  border-radius: 50% !important;
  background: #ef504d !important;
  box-shadow: 0 2px 6px rgb(224 61 57 / 22%) !important;
}

.diary-interaction-message.is-read .diary-interaction-message-dot {
  visibility: hidden !important;
}

.diary-interaction-message-text {
  overflow: hidden !important;
  margin: 0 !important;
  color: #3d453a !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diary-interaction-message-quote {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgb(248 249 246 / 92%) !important;
  color: #6d8a5e !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diary-interaction-message-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #9aa095 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.diary-interaction-message-foot span {
  overflow: hidden !important;
  min-width: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diary-interaction-message-foot button {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 4px 12px 4px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5f983f !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.diary-interaction-message-foot button::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 1.7px solid currentColor !important;
  border-right: 1.7px solid currentColor !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

.diary-interaction-read-divider {
  margin: 8px 4px -2px !important;
  color: #858b82 !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

.diary-interaction-message.is-read {
  opacity: 0.76 !important;
}

.diary-interaction-tail {
  margin: 6px 0 0 !important;
  padding: 4px 0 14px !important;
  color: #8e958c !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  text-align: center !important;
}

.diary-interaction-empty {
  margin-top: 30px !important;
  padding: 30px 18px !important;
  display: grid !important;
  gap: 9px !important;
  border-radius: 20px !important;
  background: rgb(255 255 255 / 78%) !important;
  color: #72806d !important;
  text-align: center !important;
  box-shadow: 0 12px 28px rgb(76 98 64 / 8%) !important;
}

.diary-interaction-empty strong {
  color: #4f713f !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

.diary-interaction-empty span {
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-card--feed.is-interaction-highlight {
  animation: diaryInteractionPulse 1100ms ease 2 !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-comment-item.is-interaction-highlight {
  border-radius: 10px !important;
  background: rgb(224 244 208 / 74%) !important;
  box-shadow: 0 0 0 6px rgb(224 244 208 / 74%) !important;
}

@keyframes diaryInteractionPulse {
  0%,
  100% {
    box-shadow:
      0 12px 28px rgb(77 96 66 / 8%),
      inset 0 1px 0 rgb(255 255 255 / 84%) !important;
  }
  45% {
    box-shadow:
      0 16px 34px rgb(96 148 65 / 18%),
      0 0 0 4px rgb(151 210 116 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 90%) !important;
  }
}

@media (min-width: 581px) {
  .diary-interaction-panel {
    inset: 22px !important;
    border: 1px solid rgb(226 232 219 / 86%) !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 60px rgb(39 54 32 / 18%) !important;
  }

  .diary-interaction-list {
    padding: 0 20px 28px !important;
  }
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-reminder {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 9px 42px 9px 15px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto 12px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgb(208 230 198 / 92%) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgb(247 255 239 / 94%), rgb(234 249 222 / 92%)) !important;
  box-shadow:
    0 12px 26px rgb(92 128 73 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 80%) !important;
  color: #49663b !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-reminder:active {
  transform: translateY(1px) !important;
  background:
    linear-gradient(135deg, rgb(240 252 231 / 96%), rgb(225 244 212 / 94%)) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-icon {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
  background: rgb(129 190 103 / 18%) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 8px !important;
  width: 15px !important;
  height: 11px !important;
  border: 2px solid #70ad59 !important;
  border-radius: 6px !important;
  background: rgb(255 255 255 / 78%) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 19px !important;
  width: 7px !important;
  height: 6px !important;
  background: #70ad59 !important;
  clip-path: polygon(0 0, 100% 0, 18% 100%) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-text {
  overflow: hidden !important;
  color: #48683d !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-avatars {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 32px !important;
  padding-left: 8px !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-avatar {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  margin-left: -8px !important;
  overflow: hidden !important;
  border: 2px solid rgb(255 255 255 / 96%) !important;
  border-radius: 50% !important;
  background-color: #f7fbef !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 3px 8px rgb(67 98 54 / 12%) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-arrow {
  position: relative !important;
  width: 9px !important;
  height: 15px !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-arrow::before {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  top: 3px !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 2px solid #91a984 !important;
  border-right: 2px solid #91a984 !important;
  transform: rotate(45deg) !important;
}

.phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-dot {
  position: absolute !important;
  right: 16px !important;
  top: 12px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid rgb(255 255 255 / 96%) !important;
  border-radius: 50% !important;
  background: #f2554d !important;
  box-shadow: 0 2px 6px rgb(216 61 55 / 24%) !important;
}

@media (min-width: 581px) {
  .phone-shell.is-list-mode .screen-list.is-diary-page .diary-interaction-reminder {
    min-height: 62px !important;
    padding: 12px 48px 12px 18px !important;
    border-radius: 22px !important;
  }
}

.screen-chat[data-chat-bubble-style="star"] .message-row.assistant .bubble:not(.typing-bubble)::before {
  content: none !important;
  display: none !important;
}

.screen-chat[data-chat-bubble-style="star"] .message-row.user .bubble:not(.typing-bubble)::after {
  content: none !important;
  display: none !important;
}

/* EOF guard: final Xinjian interaction reminder skin. */
.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;
}