/* ========== iOS 应用内消息横幅 ========== */
    #inAppBannerContainer {
      position: fixed;
      top: calc(10px + env(safe-area-inset-top, 0px));
      left: 0;
      right: 0;
      z-index: 999999;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }

    .ios-banner {
      width: 92%;
      max-width: 380px;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      border-radius: 18px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
      margin-bottom: 10px;
      pointer-events: auto;
      cursor: pointer;
      transform: translateY(-150%);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }

    .ios-banner.show {
      transform: translateY(0);
      opacity: 1;
    }

    body.dark .ios-banner {
      background: rgba(44, 44, 46, 0.88);
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .ios-banner .banner-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--header-text);
      margin-bottom: 2px;
    }

    .ios-banner .banner-content {
      font-size: 14px;
      color: var(--time-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 250px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    }

    :root {
      /* 基础背景：奶油白、拿铁色 */
      --phone-bg: #F3EFE9;
      --screen-bg: #FDFBF7;
      --header-bg: rgba(253, 251, 247, 0.85);
      --chat-bg: #FAF6F0;
      --input-area-bg: #FFFFFF;
      --panel-bg: #FFFFFF;
      --dock-bg: rgba(253, 251, 247, 0.85);

      /* 文字与图标：温暖的可可棕，避免死黑 */
      --status-text: #4A3B32;
      --header-text: #4A3B32;
      --app-name: #4A3B32;
      --bot-text: #4A3B32;
      --btn-text: #4A3B32;

      /* 主色调：香槟金/哑光玫瑰金 */
      --primary-btn: #C5A059;
      --user-bubble-bg: #D4A373;
      /* 用户气泡用温暖的焦糖奶茶色 */
      --user-text: #FFFFFF;

      /* 气泡与边框 */
      --bot-bubble-bg: #FFFFFF;
      --border-color: #EBE3D5;
      --btn-normal: #F4EFE6;
      --time-text: #A89F91;

      /* 阴影：带有金色光晕的柔光 */
      --shadow: 0 4px 20px rgba(197, 160, 89, 0.12);
    }

    body.dark {
      --phone-bg: #000000;
      --screen-bg: #1c1c1e;
      --status-text: #ffffff;
      --app-name: #ffffff;
      --app-icon-bg: #2c2c2e;
      --header-bg: rgba(28, 28, 30, 0.85);
      --header-text: #ffffff;
      --chat-bg: #1c1c1e;
      --bot-bubble-bg: #2c2c2e;
      --bot-text: #ffffff;
      --user-bubble-bg: #0a84ff;
      --user-text: #ffffff;
      --input-area-bg: #1c1c1e;
      --border-color: #38383a;
      --panel-bg: #2c2c2e;
      --btn-normal: #3a3a3c;
      --btn-text: #ffffff;
      --primary-btn: #0a84ff;
      --time-text: #98989d;
      --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
      --dock-bg: rgba(44, 44, 46, 0.75);
    }

    html,
    body {
      width: 100%;
      height: 100%;
      height: 100dvh;
      overflow: hidden;
      background: var(--screen-bg);
      display: block;
    }

    body.dark {
      background: #000;
    }

    .phone-frame {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      border-radius: 0;
      padding: 0;
      background: var(--phone-bg);
      box-shadow: none;
      position: relative;
      flex-shrink: 1;
    }

    .phone-screen {
      width: 100%;
      height: 100%;
      background: var(--screen-bg);
      border-radius: 0;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .notch {
      display: none;
    }

    /* 隐藏我们画上去的假刘海，让真实手机的刘海/灵动岛露出来 */
    .status-bar {
      height: 44px;
      min-height: 44px;
      padding: 0 20px;
      padding-top: env(safe-area-inset-top, 6px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 600;
      color: var(--status-text);
      flex-shrink: 0;
      z-index: 10;
    }

    .home-screen {
      position: absolute;
      inset: 0;
      top: 44px;
      display: flex;
      flex-direction: column;
      z-index: 5;
    }

    .home-scroll {
      overflow-y: auto !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory;
      display: flex !important;
      flex-direction: row !important;
      padding: 8px 0 100px 0 !important;
      scrollbar-width: none;
      /* 隐藏滚动条 */
      user-select: none;
      /* 👈 防止拖拽时选中文字或图标 */
      -webkit-user-select: none;
      -webkit-user-drag: none;
      /* 👈 防止拖出图片幽灵 */
    }

    .home-greeting {
      text-align: center;
      margin-bottom: 18px;
      color: var(--header-text);
    }

    .home-greeting .date {
      font-size: 12px;
      color: var(--time-text);
      margin-bottom: 4px;
    }

    .home-greeting .hello {
      font-size: 20px;
      font-weight: 600;
    }

    .app-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px 10px;
      align-content: flex-start;
    }

    .app-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      transition: transform 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .app-item:active {
      transform: scale(0.9);
    }

    .app-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--app-icon-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .app-icon svg {
      width: 28px;
      height: 28px;
    }

    .app-name {
      font-size: 11px;
      color: var(--app-name);
      text-align: center;
      line-height: 1.2;
    }

    .dock {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      height: 76px;
      background: var(--dock-bg);
      backdrop-filter: blur(20px);
      border-radius: 26px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      padding: 0 8px;
      gap: 6px;
      z-index: 6;
    }

    .dock .app-item .app-name {
      display: none;
    }

    .dock .app-icon {
      width: 54px;
      height: 54px;
    }

    .page {
      position: absolute;
      inset: 0;
      top: 44px;
      background: var(--screen-bg);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.42s cubic-bezier(0.4, 0.0, 0.2, 1);
      z-index: 20;
      overflow: hidden;
      /* 👈 新增这一行，非常重要 */
    }

    .page.active {
      transform: translateX(0);
    }

    .page.page-leaving {
      transform: translateX(100%);
      transition: transform 0.42s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .page-header {
      height: 50px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--header-bg);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    .page-header .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--header-text);
      flex: 1;
      text-align: center;
    }

    .page-header .back-btn,
    .page-header .right-btn {
      width: 36px;
      height: 36px;
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-btn);
    }

    .page-header .right-btn {
      color: var(--header-text);
    }

    #chatBox {
      flex: 1;
      padding: 14px;
      overflow-y: auto;
      background: var(--chat-bg);
    }

    .msg-row {
      display: flex;
      margin-bottom: 16px;
      align-items: flex-start;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .msg-row.bot {
      flex-direction: row;
    }

    .msg-row.user {
      flex-direction: row-reverse;
    }

    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 6px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      font-weight: 500;
      background: var(--primary-btn);
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .msg-row.user .avatar {
      background: #8e8e93;
    }

    .msg-wrap {
      max-width: 72%;
      display: flex;
      flex-direction: column;
    }

    .msg-row.bot .msg-wrap {
      margin-left: 10px;
      align-items: flex-start;
    }

    .msg-row.user .msg-wrap {
      margin-right: 10px;
      align-items: flex-end;
    }

    .msg {
      padding: 10px 14px;
      border-radius: 6px;
      word-wrap: break-word;
      white-space: pre-wrap;
      font-size: 15px;
      line-height: 1.5;
    }

    .msg.bot {
      background: var(--bot-bubble-bg);
      color: var(--bot-text);
      border-bottom-left-radius: 0;
    }

    .msg.user {
      background: var(--user-bubble-bg);
      color: var(--user-text);
      border-bottom-right-radius: 0;
    }

    .narratage {
      align-self: center;
      font-size: 13px;
      color: #999;
      padding: 10px 20px;
      text-align: center;
      animation: fadeIn 0.5s ease;
      line-height: 1.5;
      max-width: 85%;
      margin: 0 auto;
      background: transparent;
    }

    .think-box {
      width: 100%;
      margin-bottom: 4px;
      border-radius: 10px;
      background: rgba(128, 128, 128, 0.08);
      border: 1px dashed var(--border-color);
      overflow: hidden;
      font-size: 12px;
    }

    .think-box summary {
      cursor: pointer;
      padding: 6px 10px;
      color: var(--time-text);
      list-style: none;
      user-select: none;
    }

    .think-box summary::-webkit-details-marker {
      display: none;
    }

    .think-box summary::before {
      content: "▶ ";
      font-size: 10px;
    }

    .think-box[open] summary::before {
      content: "▼ ";
    }

    .think-box .think-content {
      padding: 6px 12px 10px;
      color: var(--time-text);
      white-space: pre-wrap;
      line-height: 1.5;
      font-size: 12px;
    }

    .input-area {
      padding: 8px 12px 10px;
      background: var(--input-area-bg);
      border-top: 1px solid var(--border-color);
      display: flex;
      gap: 8px;
      align-items: flex-end;
      flex-shrink: 0;
      flex-direction: column;
    }

    .quote-bar {
      width: 100%;
      padding: 6px 10px;
      background: var(--btn-normal);
      border-left: 3px solid var(--primary-btn);
      font-size: 13px;
      color: var(--btn-text);
      display: flex;
      justify-content: space-between;
      border-radius: 8px;
      margin-bottom: 4px;
    }

    .quote-close {
      cursor: pointer;
      font-size: 16px;
    }

    .input-row {
      width: 100%;
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }

    #msgInput {
      flex: 1;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 9px 14px;
      font-size: 15px;
      background: var(--panel-bg);
      color: var(--header-text);
      outline: none;
      resize: none;
      max-height: 100px;
      line-height: 1.4;
    }

    #sendBtn {
      width: 38px;
      height: 38px;
      border: none;
      border-radius: 6px;
      background: var(--primary-btn);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    #sendBtn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    #sendBtn svg {
      width: 18px;
      height: 18px;
    }

    .typing-tip {
      padding: 4px 16px 8px;
      font-size: 12px;
      color: var(--time-text);
      display: none;
    }

    .typing-dot {
      animation: blink 1.4s infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 0.2
      }

      50% {
        opacity: 1
      }
    }

    .panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      color: var(--header-text);
    }

    .form-item {
      margin-bottom: 14px;
    }

    .form-item label {
      display: block;
      font-size: 13px;
      margin-bottom: 6px;
      color: var(--time-text);
    }

    .form-item input,
    .form-item textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--panel-bg);
      color: var(--header-text);
      font-size: 14px;
      outline: none;
    }

    .form-item input:focus,
    .form-item textarea:focus {
      border-color: var(--primary-btn);
    }

    textarea {
      resize: vertical;
    }

    .btn-primary {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 12px;
      background: var(--primary-btn);
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 8px;
    }

    .avatar-upload-wrap {
      text-align: center;
      margin-bottom: 20px;
    }

    .avatar-preview {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: var(--primary-btn);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 600;
      overflow: hidden;
      cursor: pointer;
      box-shadow: var(--shadow);
    }

    .avatar-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .avatar-hint {
      font-size: 12px;
      color: var(--time-text);
      margin-top: 6px;
    }

    .char-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .char-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 14px;
      background: var(--panel-bg);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: transform 0.15s;
    }

    .char-item:active {
      transform: scale(0.98);
    }

    .char-item.current {
      border-color: var(--primary-btn);
      box-shadow: 0 0 0 1px var(--primary-btn);
    }

    .char-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      flex-shrink: 0;
      overflow: hidden;
    }

    .char-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .char-info {
      flex: 1;
      min-width: 0;
    }

    .char-name {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 2px;
      color: var(--header-text);
    }

    .char-preview {
      font-size: 12px;
      color: var(--time-text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .char-del {
      border: none;
      background: transparent;
      color: #ff3b30;
      font-size: 13px;
      cursor: pointer;
      padding: 4px 8px;
    }

    .moment-item {
      padding: 14px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .moment-item:last-child {
      border-bottom: none;
    }

    .moment-img {
      max-width: 100%;
      border-radius: 10px;
      margin: 8px 0;
    }

    .moment-time {
      font-size: 12px;
      color: var(--time-text);
      margin: 4px 0 8px;
    }

    .moment-actions {
      display: flex;
      gap: 14px;
      margin-bottom: 8px;
    }

    .moment-actions button {
      border: none;
      background: none;
      color: var(--header-text);
      cursor: pointer;
      font-size: 14px;
      padding: 0;
    }

    .comment-item {
      font-size: 13px;
      padding: 4px 0;
      color: var(--header-text);
      opacity: 0.85;
    }

    .comment-input-area {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .comment-input-area input {
      flex: 1;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--panel-bg);
      color: var(--header-text);
      font-size: 13px;
      outline: none;
    }

    .comment-input-area button {
      padding: 7px 12px;
      border: none;
      border-radius: 8px;
      background: var(--primary-btn);
      color: #fff;
      font-size: 13px;
      cursor: pointer;
    }

    .preview-img {
      max-width: 120px;
      border-radius: 8px;
      margin: 6px 0;
    }

    .msg-menu {
      position: fixed;
      background: var(--panel-bg);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      z-index: 9999;
      overflow: hidden;
      display: none;
      min-width: 130px;
      max-height: 65vh;
      overflow-y: auto;
    }

    .msg-menu.show {
      display: block;
    }

    .msg-menu div {
      padding: 11px 18px;
      cursor: pointer;
      font-size: 14px;
      color: var(--header-text);
    }

    .msg-menu div:active {
      background: var(--btn-normal);
    }

    .modal-mask {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px;
    }

    .modal-mask.show {
      display: flex;
    }

    .modal-panel {
      background: var(--panel-bg);
      border-radius: 18px;
      padding: 22px;
      width: 100%;
      max-width: 340px;
      max-height: 85vh;
      overflow-y: auto;
    }

    .modal-panel h3 {
      font-size: 16px;
      margin-bottom: 14px;
      color: var(--header-text);
    }

    .modal-panel textarea {
      width: 100%;
      min-height: 120px;
      padding: 10px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--panel-bg);
      color: var(--header-text);
      font-size: 14px;
      outline: none;
      resize: vertical;
    }

    .modal-btns {
      display: flex;
      gap: 10px;
      margin-top: 12px;
    }

    .modal-btns button {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      cursor: pointer;
    }

    .modal-btns .cancel {
      background: var(--btn-normal);
      color: var(--btn-text);
    }

    .modal-btns .save {
      background: var(--primary-btn);
      color: #fff;
    }

    .profile-card {
      text-align: center;
    }

    .profile-card .pc-avatar {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      margin: 0 auto 12px;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 600;
      overflow: hidden;
    }

    .profile-card .pc-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-card .pc-name {
      font-size: 18px;
      font-weight: 600;
      color: var(--header-text);
    }

    .profile-card .pc-remark {
      font-size: 13px;
      color: var(--time-text);
      margin-top: 4px;
    }

    .profile-card .pc-id {
      font-size: 12px;
      color: var(--time-text);
      margin-top: 6px;
    }

    .profile-card .pc-sign {
      font-size: 14px;
      margin-top: 12px;
      font-style: italic;
      color: var(--header-text);
    }

    .profile-card .pc-prompt {
      font-size: 13px;
      margin-top: 16px;
      text-align: left;
      line-height: 1.6;
      color: var(--header-text);
      white-space: pre-wrap;
      padding: 12px;
      background: var(--btn-normal);
      border-radius: 10px;
    }

    .empty-tip {
      text-align: center;
      color: var(--time-text);
      font-size: 13px;
      padding: 40px 20px;
    }

    .phone-tab-btn {
      padding: 8px;
      border-radius: 8px;
      border: none;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      color: #fff;
      transition: opacity 0.2s;
    }

    .phone-tab-btn:active {
      opacity: 0.7;
    }

    .phone-panel {
      padding: 12px;
      background: var(--panel-bg);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      min-height: 200px;
      font-size: 14px;
      line-height: 1.8;
      color: var(--header-text);
      white-space: pre-wrap;
    }

    .search-item {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .search-item:last-child {
      border-bottom: none;
    }

    .order-card {
      padding: 12px;
      border-radius: 8px;
      background: rgba(175, 82, 222, 0.05);
      border: 1px solid rgba(175, 82, 222, 0.2);
      margin-bottom: 10px;
    }

    .memo-sticky {
      padding: 12px;
      border-radius: 8px;
      background: #fdf6e3;
      color: #333;
      border-left: 4px solid #f0ad4e;
      margin-bottom: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      font-size: 14px;
    }

    body.dark .memo-sticky {
      background: #3a352b;
      color: #e0e0e0;
    }

    .chat-record-item {
      display: flex;
      margin-bottom: 12px;
    }

    .chat-record-item.me {
      flex-direction: row-reverse;
    }

    .chat-record-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      flex-shrink: 0;
    }

    .chat-record-bubble {
      max-width: 70%;
      padding: 8px 12px;
      border-radius: 12px;
      background: var(--btn-normal);
      margin: 0 8px;
      font-size: 13px;
      line-height: 1.5;
    }

    .chat-record-item.me .chat-record-bubble {
      background: var(--primary-btn);
      color: #fff;
    }

    ::-webkit-scrollbar {
      width: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(128, 128, 128, 0.3);
      border-radius: 2px;
    }

    .chat-list-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: var(--panel-bg);
      border-radius: 10px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: transform 0.1s;
      box-shadow: var(--shadow);
    }

    .chat-list-item:active {
      transform: scale(0.98);
    }

    .chat-list-avatar {
      width: 48px;
      height: 48px;
      border-radius: 6px;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      flex-shrink: 0;
      overflow: hidden;
    }

    .chat-list-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 通讯录 */
    .contact-group {
      background: var(--panel-bg);
      margin-bottom: 10px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
    }

    .contact-item:last-child {
      border-bottom: none;
    }

    .contact-icon {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-right: 12px;
      color: #fff;
    }

    .contact-text {
      flex: 1;
      font-size: 15px;
      color: var(--header-text);
    }

    .contact-arrow {
      color: var(--time-text);
      font-size: 18px;
    }

    .group-header {
      padding: 6px 16px;
      font-size: 13px;
      color: var(--time-text);
      background: var(--chat-bg);
      font-weight: 600;
    }

    .contact-char-item {
      display: flex;
      align-items: center;
      padding: 10px 16px;
      background: var(--panel-bg);
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
    }

    .contact-char-item:active {
      background: var(--btn-normal);
    }

    .contact-char-avatar {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      margin-right: 12px;
      overflow: hidden;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .contact-char-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contact-char-info {
      flex: 1;
    }

    .contact-char-name {
      font-size: 15px;
      color: var(--header-text);
    }

    .contact-char-jibang {
      font-size: 12px;
      color: #ff2d55;
      margin-top: 2px;
    }

    /* 微信底部导航栏 */
    .wechat-bottom-nav {
      display: flex;
      height: 60px;
      background: var(--panel-bg);
      border-top: 1px solid var(--border-color);
      flex-shrink: 0;
      width: 100%;
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 10px;
      color: var(--time-text);
      cursor: pointer;
      transition: color 0.2s;
    }

    .nav-item.active {
      color: var(--primary-btn);
    }

    .nav-item svg {
      width: 22px;
      height: 22px;
    }

    /* 消息列表 */
    .chat-list-info {
      flex: 1;
      margin-left: 12px;
      overflow: hidden;
    }

    .chat-list-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 4px;
    }

    .chat-list-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--header-text);
    }

    .chat-list-time {
      font-size: 11px;
      color: var(--time-text);
    }

    .chat-list-preview {
      font-size: 13px;
      color: var(--time-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-list-badge {
      background: #ff3b30;
      color: #fff;
      font-size: 11px;
      font-weight: bold;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 8px;
      flex-shrink: 0;
    }

    /* 角色详情页 */
    .profile-detail-card {
      background: var(--panel-bg);
      padding: 20px 16px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 10px;
    }

    .profile-detail-avatar {
      width: 76px;
      height: 76px;
      border-radius: 10px;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .profile-detail-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-detail-info {
      flex: 1;
      padding-top: 4px;
    }

    .profile-detail-name {
      font-size: 20px;
      font-weight: 600;
      color: var(--header-text);
      margin-bottom: 8px;
    }

    .profile-detail-text {
      font-size: 14px;
      color: var(--time-text);
      line-height: 1.6;
    }

    .profile-detail-menu {
      background: var(--panel-bg);
      margin-bottom: 10px;
    }

    .profile-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 16px;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
    }

    .profile-list-item:last-child {
      border-bottom: none;
    }

    .profile-list-item:active {
      background: var(--btn-normal);
    }

    .profile-list-item .label {
      font-size: 15px;
      color: var(--header-text);
    }

    .profile-list-item .sub-label {
      font-size: 12px;
      color: var(--time-text);
      margin-top: 4px;
    }

    .profile-list-item .arrow {
      color: var(--time-text);
      font-size: 18px;
    }

    .profile-moment-row {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      background: var(--panel-bg);
      align-items: center;
      overflow: hidden;
      border-bottom: 1px solid var(--border-color);
    }

    .profile-moment-thumb {
      width: 54px;
      height: 54px;
      border-radius: 6px;
      background: var(--btn-normal);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .profile-moment-text {
      flex: 1;
      font-size: 13px;
      color: var(--header-text);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .profile-action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px;
      background: var(--panel-bg);
      border-bottom: 1px solid var(--border-color);
      font-size: 16px;
      color: var(--primary-btn);
      cursor: pointer;
    }

    .profile-action-btn:active {
      background: var(--btn-normal);
    }

    .profile-action-btn.danger {
      color: #ff3b30;
    }

    /* 日程时间轴 */
    .schedule-day-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 8px;
    }

    .schedule-day-item.active {
      background: var(--header-text);
      color: var(--screen-bg);
    }

    .schedule-day-item.active .day-num {
      font-weight: bold;
    }

    .schedule-day-item .day-name {
      font-size: 10px;
      color: var(--time-text);
    }

    .schedule-day-item.active .day-name {
      color: var(--screen-bg);
      opacity: 0.8;
    }

    .schedule-day-item .day-num {
      font-size: 15px;
      color: var(--header-text);
    }

    .schedule-day-item.active .day-num {
      color: var(--screen-bg);
    }

    .schedule-avatar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      min-width: 50px;
    }

    .schedule-avatar-item .avatar-img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-size: 18px;
      border: 2px solid transparent;
      transition: all 0.2s;
    }

    .schedule-avatar-item.active .avatar-img {
      border-color: #000;
      transform: scale(1.05);
    }

    .schedule-avatar-item .avatar-name {
      font-size: 11px;
      color: var(--header-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 50px;
    }

    .schedule-avatar-item.active .avatar-name {
      font-weight: bold;
    }

    /* 时间刻度 */
    .time-slot {
      display: flex;
      height: 60px;
      position: relative;
    }

    .time-label {
      width: 50px;
      text-align: right;
      padding-right: 10px;
      font-size: 11px;
      color: var(--time-text);
      transform: translateY(-6px);
    }

    .time-line {
      flex: 1;
      border-top: 1px dashed var(--border-color);
    }

    /* 事件卡片 */
    .schedule-event {
      position: absolute;
      left: 60px;
      right: 16px;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow: hidden;
      box-sizing: border-box;
    }

    .schedule-event .evt-title {
      font-weight: 600;
      font-size: 12px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .schedule-event .evt-desc {
      font-size: 11px;
      opacity: 0.8;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .schedule-event .evt-loc {
      font-size: 10px;
      opacity: 0.6;
      margin-top: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 更多功能面板 */
    .more-grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .more-grid-item:active .more-icon {
      background: var(--btn-normal);
    }

    .more-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--chat-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: background 0.15s;
    }

    .more-grid-item span {
      font-size: 11px;
      color: var(--time-text);
    }

    /* 爱心掉落动画 */
    @keyframes fallHeart {
      0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: translateY(100vh) scale(1.5) rotate(360deg);
        opacity: 0;
      }
    }

    .falling-heart {
      position: fixed;
      top: -50px;
      font-size: 24px;
      pointer-events: none;
      z-index: 99999;
      animation: fallHeart 3s linear forwards;
    }

    /* 语音消息气泡 */
    .msg.voice {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 100px;
      cursor: pointer;
    }

    .voice-wave {
      display: flex;
      gap: 2px;
      align-items: center;
      height: 14px;
    }

    .voice-wave span {
      width: 3px;
      background: currentColor;
      border-radius: 2px;
      animation: wave 1.2s infinite ease-in-out;
    }

    .voice-wave span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .voice-wave span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes wave {

      0%,
      100% {
        height: 4px;
      }

      50% {
        height: 14px;
      }
    }

    /* 红包 / 转账气泡 */
    .msg.redpacket {
      background: #fa9d3b;
      color: #fff;
      border-radius: 8px;
      padding: 0;
      overflow: hidden;
      cursor: pointer;
      width: 220px;
    }

    .msg.redpacket .rp-content {
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .msg.redpacket .rp-icon {
      font-size: 28px;
    }

    .msg.redpacket .rp-text {
      flex: 1;
    }

    .msg.redpacket .rp-title {
      font-size: 14px;
      font-weight: 600;
    }

    .msg.redpacket .rp-desc {
      font-size: 11px;
      opacity: 0.9;
      margin-top: 2px;
    }

    .msg.redpacket .rp-foot {
      background: rgba(0, 0, 0, 0.1);
      font-size: 10px;
      padding: 4px 12px;
      text-align: right;
    }

    .msg.transfer {
      background: #f5a623;
      color: #fff;
      border-radius: 8px;
      padding: 0;
      overflow: hidden;
      cursor: pointer;
      width: 220px;
    }

    .msg.transfer .rp-content {
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .msg.transfer .rp-icon {
      font-size: 28px;
    }

    .msg.transfer .rp-text {
      flex: 1;
    }

    .msg.transfer .rp-title {
      font-size: 14px;
      font-weight: 600;
    }

    .msg.transfer .rp-desc {
      font-size: 11px;
      opacity: 0.9;
      margin-top: 2px;
    }

    /* 网易云风格进度条 */
    #musicProgress {
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255, 255, 255, 0.1);
      outline: none;
      border-radius: 2px;
    }

    #musicProgress::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff2d55;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255, 45, 85, 0.8);
      transition: transform 0.15s;
    }

    #musicProgress::-webkit-slider-thumb:hover {
      transform: scale(1.3);
    }

    /* 通话全屏界面 */
    #callScreen {
      position: fixed;
      inset: 0;
      background: #1c1c1e;
      color: #fff;
      z-index: 9999;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 60px 20px 40px;
    }

    #callScreen.show {
      display: flex;
    }

    .call-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: var(--primary-btn);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      margin-bottom: 20px;
    }

    .call-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .call-name {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .call-status {
      font-size: 14px;
      color: #8e8e93;
    }

    .call-actions {
      display: flex;
      gap: 30px;
      margin-top: auto;
    }

    .call-btn {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: none;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .call-btn.hangup {
      background: #ff3b30;
    }

    .call-btn.accept {
      background: #34c759;
    }

    .emoji-tab {
      transition: opacity 0.2s;
    }

    .emoji-tab.active {
      opacity: 1 !important;
    }

    /* iOS 开关 */
    .switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 26px;
      flex-shrink: 0;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .switch .slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: #ccc;
      border-radius: 26px;
      transition: .2s;
    }

    .switch .slider:before {
      content: "";
      position: absolute;
      height: 22px;
      width: 22px;
      left: 2px;
      bottom: 2px;
      background: #fff;
      border-radius: 50%;
      transition: .2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .switch input:checked+.slider {
      background: #34c759;
    }

    .switch input:checked+.slider:before {
      transform: translateX(18px);
    }

    #chatInfoBar::-webkit-scrollbar {
      display: none;
    }

    #chatScheduleBar::-webkit-scrollbar {
      display: none;
    }

    .chat-search-tab.active {
      background: var(--primary-btn) !important;
      color: #fff !important;
      border-color: var(--primary-btn) !important;
    }

    .chat-search-date-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 12px;
      background: var(--panel-bg);
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
    }

    .chat-search-date-row:active {
      background: var(--btn-normal);
    }

    .chat-search-msg-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px;
      background: var(--panel-bg);
      border-bottom: 1px solid var(--border-color);
      font-size: 13px;
      color: var(--header-text);
    }

    .chat-search-avatar {
      width: 38px;
      height: 38px;
      border-radius: 6px;
      background: var(--primary-btn);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      flex-shrink: 0;
      overflow: hidden;
    }

    .chat-search-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .chat-search-body {
      flex: 1;
      min-width: 0;
    }

    .chat-search-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 4px;
    }

    .chat-search-meta .who {
      color: var(--time-text);
      font-size: 11px;
    }

    .chat-search-meta .time {
      color: var(--time-text);
      font-size: 11px;
    }

    .chat-search-content {
      line-height: 1.5;
      word-break: break-word;
    }

    .chat-search-msg-row .who {
      color: var(--time-text);
      font-size: 11px;
      margin-right: 6px;
    }

    .chat-search-msg-row .time {
      color: var(--time-text);
      font-size: 11px;
      float: right;
    }

    .publish-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 0;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      font-size: 15px;
      color: var(--header-text);
    }

    .publish-row:last-of-type {
      border-bottom: none;
    }

    /* 底部输入框避开小白条 */
    .input-area {
      padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    /* 底部导航栏避开小白条 */
    .dock {
      bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    /* 防止 iOS 点击输入框时自动放大页面 */
    #msgInput {
      font-size: 16px !important;
    }

    /* ========== 巴洛克奶油风专属质感补丁 ========== */
    /* 提升输入框质感 */
    .input-area {
      background: rgba(255, 255, 255, 0.65) !important;
      backdrop-filter: blur(25px) !important;
      -webkit-backdrop-filter: blur(25px) !important;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.02) !important;
    }

    #msgInput {
      background: rgba(255, 255, 255, 0.8) !important;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03) !important;
      border: 1px solid rgba(197, 160, 89, 0.3) !important;
    }

    /* 头像增加点阴影，更有立体感 */
    .avatar {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
    }

    /* 1. 全局毛玻璃质感（让顶栏和底栏更高级） */
    .page-header,
    .input-area,
    .dock {
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
    }

    /* 2. 主按钮（发送、保存等）变成香槟金渐变 */
    .btn-primary,
    #sendBtn,
    #pomoStartBtn {
      background: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%) !important;
      color: #FFFFFF !important;
      border: none !important;
      box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3) !important;
      transition: transform 0.2s !important;
    }

    .btn-primary:active,
    #sendBtn:active {
      transform: scale(0.96);
    }

    /* 3. 聊天界面用户气泡渐变 */
    .msg.user {
      background: linear-gradient(135deg, #D4A373 0%, #C5A059 100%) !important;
      box-shadow: 0 4px 10px rgba(197, 160, 89, 0.2) !important;
    }

    .msg.bot {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
      border: 1px solid #F0EBE6 !important;
    }

    /* 4. 暗黑模式下的巴洛克补丁（如果想在暗黑模式下也有金边） */
    body.dark .btn-primary,
    body.dark #sendBtn {
      background: linear-gradient(135deg, #D4AF37 0%, #A88238 100%) !important;
      color: #1A1513 !important;
    }

    body.dark .msg.user {
      background: linear-gradient(135deg, #D4A373 0%, #A88238 100%) !important;
      color: #1A1513 !important;
    }

    body.dark .msg.bot {
      border: 1px solid rgba(197, 160, 89, 0.2) !important;
    }

    /* 纪念日全屏贺卡 */
    #annivOverlay {
      position: fixed;
      inset: 0;
      background: rgba(74, 59, 50, 0.6);
      backdrop-filter: blur(8px);
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.8s ease;
    }

    #annivOverlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .anniv-card {
      background: linear-gradient(135deg, #FDFBF7 0%, #FFF8F0 100%);
      width: 85%;
      max-width: 340px;
      border-radius: 24px;
      padding: 30px 24px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 0 0 2px #E8DCC8, inset 0 0 0 4px #FDFBF7, inset 0 0 0 6px #C5A059;
      text-align: center;
      transform: scale(0.8) translateY(20px);
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
    }

    #annivOverlay.show .anniv-card {
      transform: scale(1) translateY(0);
    }

    .anniv-card::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(197, 160, 89, 0.1) 0%, transparent 60%);
      z-index: 0;
      pointer-events: none;
    }

    .anniv-content {
      position: relative;
      z-index: 1;
    }

    .anniv-icon {
      font-size: 56px;
      margin-bottom: 16px;
      animation: floatIcon 3s ease-in-out infinite;
    }

    @keyframes floatIcon {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    .anniv-title {
      font-size: 22px;
      font-weight: 800;
      color: #4A3B32;
      margin-bottom: 8px;
      letter-spacing: 2px;
    }

    .anniv-subtitle {
      font-size: 13px;
      color: #A89F91;
      margin-bottom: 20px;
    }

    .anniv-text {
      font-size: 15px;
      line-height: 1.8;
      color: #4A3B32;
      text-align: left;
      background: rgba(255, 255, 255, 0.6);
      padding: 16px;
      border-radius: 12px;
      border: 1px dashed #D4A373;
      max-height: 200px;
      overflow-y: auto;
      margin-bottom: 24px;
    }

    .anniv-close-btn {
      background: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%);
      color: #FFF;
      border: none;
      padding: 12px 0;
      width: 100%;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(197, 160, 89, 0.4);
    }

    .anniv-close-btn:active {
      transform: scale(0.96);
    }

    /* ========== 时光轴 ========== */
    .timeline-container {
      position: relative;
      padding: 20px 16px 40px 40px;
    }

    .timeline-line {
      position: absolute;
      left: 24px;
      top: 20px;
      bottom: 20px;
      width: 2px;
      background: linear-gradient(180deg, #E8DCC8, #C5A059, #E8DCC8);
      z-index: 0;
    }

    .timeline-item {
      position: relative;
      margin-bottom: 24px;
      z-index: 1;
      animation: fadeIn 0.4s ease;
    }

    .timeline-dot {
      position: absolute;
      left: -21px;
      top: 16px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #C5A059;
      border: 2px solid #FFFCF8;
      box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
      z-index: 2;
    }

    .timeline-card {
      background: #FFFCF8;
      border: 1px solid #E8DCC8;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 4px 15px rgba(197, 160, 89, 0.06);
      position: relative;
    }

    .timeline-time {
      font-size: 11px;
      color: #A89F91;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
    }

    .timeline-content {
      font-size: 14px;
      color: #4A3B32;
      line-height: 1.6;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .timeline-del {
      position: absolute;
      bottom: 10px;
      right: 12px;
      font-size: 16px;
      color: #D4A373;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s;
    }

    .timeline-del:hover {
      opacity: 1;
    }

    /* ========== 皮肤主题系统 ========== */
    /* 1. 草莓奶油粉 (Strawberry) */
    body.theme-strawberry {
      --phone-bg: #FFF0F5;
      --screen-bg: #FFF8F9;
      --header-bg: rgba(255, 240, 245, 0.85);
      --chat-bg: #FFF5F6;
      --input-area-bg: #FFFFFF;
      --panel-bg: #FFFFFF;
      --dock-bg: rgba(255, 240, 245, 0.85);

      --status-text: #8B5A6B;
      --header-text: #5C3A3A;
      --app-name: #8B5A6B;
      --bot-text: #5C3A3A;
      --btn-text: #8B5A6B;

      --primary-btn: #FF8FAB;
      --user-bubble-bg: #FF8FAB;
      --user-text: #FFFFFF;

      --bot-bubble-bg: #FFFFFF;
      --border-color: #FFE4E1;
      --btn-normal: #FFF0F5;
      --time-text: #B59AA5;

      --shadow: 0 4px 15px rgba(255, 143, 171, 0.15);
    }

    body.theme-strawberry .btn-primary,
    body.theme-strawberry #sendBtn,
    body.theme-strawberry #pomoStartBtn {
      background: linear-gradient(135deg, #FFB6C1 0%, #FF8FAB 100%) !important;
      box-shadow: 0 4px 15px rgba(255, 143, 171, 0.3) !important;
      color: #fff !important;
    }

    body.theme-strawberry .msg.user {
      background: linear-gradient(135deg, #FFB6C1 0%, #FF8FAB 100%) !important;
      box-shadow: 0 4px 10px rgba(255, 143, 171, 0.2) !important;
    }

    body.theme-strawberry .msg.bot {
      border: 1px solid #FFE4E1 !important;
      box-shadow: 0 4px 10px rgba(255, 143, 171, 0.05) !important;
    }

    body.theme-strawberry .app-icon {
      background: #FFFFFF;
      border: 1px solid #FFE4E1;
    }

    /* 4. 黑白拼贴风 (Collage) */
    body.theme-collage {
      --phone-bg: #E5E5E5;
      --screen-bg: #F0F0F0;
      --header-bg: rgba(240, 240, 240, 0.6);
      --chat-bg: #EBEBEB;
      --input-area-bg: rgba(255, 255, 255, 0.6);
      --panel-bg: rgba(255, 255, 255, 0.4);
      --dock-bg: rgba(255, 255, 255, 0.3);

      --status-text: #FFFFFF;
      --header-text: #222222;
      --app-name: #333333;
      --bot-text: #333333;
      --btn-text: #555555;

      --primary-btn: #444444;
      --user-bubble-bg: rgba(0, 0, 0, 0.75);
      --user-text: #FFFFFF;

      --bot-bubble-bg: rgba(255, 255, 255, 0.8);
      --border-color: rgba(0, 0, 0, 0.08);
      --btn-normal: rgba(0, 0, 0, 0.05);
      --time-text: #666666;

      --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    }

    /* 针对拼贴风的特殊处理：毛玻璃与大图标 */
    body.theme-collage .app-icon {
      border-radius: 22px !important;
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
      background-size: cover !important;
      background-position: center !important;
      /* 如果没有图片，默认给个灰色渐变 */
      background-image: linear-gradient(135deg, #e0e0e0 0%, #b0b0b0 100%);
    }

    body.theme-collage .app-icon svg {
      display: none;
      /* 隐藏原本的线条图标 */
    }

    body.theme-collage .dock {
      background: rgba(255, 255, 255, 0.25) !important;
      backdrop-filter: blur(30px) !important;
      -webkit-backdrop-filter: blur(30px) !important;
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      border-radius: 35px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    }

    body.theme-collage .widget-card {
      background: rgba(255, 255, 255, 0.35) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      border-radius: 24px !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05) !important;
    }

    /* 3. 婴儿蓝 (Baby Blue) */
    body.theme-babyblue {
      --phone-bg: #EBF4FA;
      --screen-bg: #F5FAFD;
      --header-bg: rgba(245, 250, 253, 0.85);
      --chat-bg: #F0F6FB;
      --input-area-bg: #FFFFFF;
      --panel-bg: #FFFFFF;
      --dock-bg: rgba(235, 244, 250, 0.85);

      --status-text: #5A738E;
      --header-text: #3A4D63;
      --app-name: #5A738E;
      --bot-text: #3A4D63;
      --btn-text: #5A738E;

      --primary-btn: #8BB8E8;
      --user-bubble-bg: #8BB8E8;
      --user-text: #FFFFFF;

      --bot-bubble-bg: #FFFFFF;
      --border-color: #D6E8F5;
      --btn-normal: #E6F2FA;
      --time-text: #94A9BD;

      --shadow: 0 4px 15px rgba(139, 184, 232, 0.15);
    }

    body.theme-babyblue .btn-primary,
    body.theme-babyblue #sendBtn,
    body.theme-babyblue #pomoStartBtn {
      background: linear-gradient(135deg, #A4D0F0 0%, #8BB8E8 100%) !important;
      box-shadow: 0 4px 15px rgba(139, 184, 232, 0.3) !important;
      color: #fff !important;
    }

    body.theme-babyblue .msg.user {
      background: linear-gradient(135deg, #A4D0F0 0%, #8BB8E8 100%) !important;
      box-shadow: 0 4px 10px rgba(139, 184, 232, 0.2) !important;
    }

    body.theme-babyblue .msg.bot {
      border: 1px solid #D6E8F5 !important;
      box-shadow: 0 4px 10px rgba(139, 184, 232, 0.05) !important;
    }

    body.theme-babyblue .app-icon {
      background: #FFFFFF;
      border: 1px solid #D6E8F5;
    }

    body.theme-babyblue .dock {
      background: rgba(235, 244, 250, 0.9) !important;
      border: 1px solid rgba(139, 184, 232, 0.25) !important;
      box-shadow: 0 8px 25px rgba(139, 184, 232, 0.12) !important;
    }

    /* 5. 青苹果 (Apple) */
    body.theme-apple {
      --phone-bg: #EEF5E1;
      --screen-bg: #F7FBF2;
      --header-bg: rgba(247, 251, 242, 0.85);
      --chat-bg: #F4FAE4;
      --input-area-bg: #FFFFFF;
      --panel-bg: #FFFFFF;
      --dock-bg: rgba(247, 251, 242, 0.85);

      --status-text: #4A5A1E;
      --header-text: #2E3F0F;
      --app-name: #4A5A1E;
      --bot-text: #2E3F0F;
      --btn-text: #4A5A1E;

      --primary-btn: #8DBE47;
      --user-bubble-bg: #A4D04A;
      --user-text: #FFFFFF;

      --bot-bubble-bg: #FFFFFF;
      --border-color: #E2EDCC;
      --btn-normal: #EEF5E1;
      --time-text: #7B8E5A;

      --shadow: 0 4px 15px rgba(164, 208, 74, 0.15);
    }

    /* 青苹果的按钮和气泡覆盖 */
    body.theme-apple .btn-primary,
    body.theme-apple #sendBtn,
    body.theme-apple #pomoStartBtn {
      background: linear-gradient(135deg, #A4D04A 0%, #7AA627 100%) !important;
      box-shadow: 0 4px 15px rgba(164, 208, 74, 0.3) !important;
      color: #fff !important;
    }

    body.theme-apple .msg.user {
      background: linear-gradient(135deg, #A4D04A 0%, #8DBE47 100%) !important;
      box-shadow: 0 4px 10px rgba(164, 208, 74, 0.2) !important;
    }

    body.theme-apple .msg.bot {
      border: 1px solid #E2EDCC !important;
      box-shadow: 0 4px 10px rgba(164, 208, 74, 0.05) !important;
    }

    body.theme-apple .app-icon {
      background: #FFFFFF;
      border: 1px solid #E2EDCC;
    }

    body.theme-apple .dock {
      background: rgba(238, 245, 225, 0.9) !important;
      border: 1px solid rgba(164, 208, 74, 0.25) !important;
      box-shadow: 0 8px 25px rgba(164, 208, 74, 0.12) !important;
    }

    /* 2. 冷酷极简风 (Minimal) */
    body.theme-minimal {
      --phone-bg: #f5f5f7;
      --screen-bg: #ffffff;
      --header-bg: #ffffff;
      --chat-bg: #ffffff;
      --input-area-bg: #f5f5f7;
      --panel-bg: #ffffff;
      --dock-bg: #ffffff;
      --status-text: #000000;
      --header-text: #111111;
      --app-name: #111111;
      --bot-text: #111111;
      --btn-text: #111111;
      --primary-btn: #000000;
      --user-bubble-bg: #000000;
      --user-text: #ffffff;
      --bot-bubble-bg: #f0f0f0;
      --border-color: #e5e5ea;
      --btn-normal: #f0f0f0;
      --time-text: #8e8e93;
      --shadow: none;
    }

    body.theme-minimal .btn-primary,
    body.theme-minimal #sendBtn,
    body.theme-minimal #pomoStartBtn {
      background: #000000 !important;
      border-radius: 6px !important;
      box-shadow: none !important;
      color: #fff !important;
    }

    body.theme-minimal .msg.user {
      background: #000000 !important;
      border-radius: 12px 12px 0 12px !important;
      box-shadow: none !important;
    }

    body.theme-minimal .msg.bot {
      background: #f0f0f0 !important;
      border: none !important;
      box-shadow: none !important;
      border-radius: 12px 12px 12px 0 !important;
    }

    body.theme-minimal .page-header,
    body.theme-minimal .input-area,
    body.theme-minimal .dock {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-bottom: 1px solid #e5e5ea !important;
    }

    body.theme-minimal .app-icon {
      background: #f0f0f0;
      box-shadow: none;
    }

    body.theme-minimal .chat-list-item {
      box-shadow: none;
      border-bottom: 1px solid #e5e5ea;
      border-radius: 0;
    }

    /* 主题选择器 UI */
    .theme-picker-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 10px 0;
    }

    .theme-preview-card {
      flex-shrink: 0;
      width: 80px;
      height: 110px;
      border-radius: 12px;
      border: 2px solid transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.2s;
    }

    .theme-preview-card.active {
      border-color: var(--primary-btn);
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .theme-preview-card span {
      font-size: 12px;
      font-weight: 600;
      margin-top: 8px;
    }

    /* ========== 塔罗 APP 专属样式 ========== */
    #page-tarot {
      background: radial-gradient(circle at 50% 30%, #1e1b3a 0%, #0d0c15 100%);
      color: #fff;
    }

    .tarot-star-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .tarot-star {
      position: absolute;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
      animation: twinkle 3s infinite ease-in-out alternate;
    }

    @keyframes twinkle {
      0% {
        opacity: 0.2;
        transform: scale(0.8);
      }

      100% {
        opacity: 1;
        transform: scale(1.2);
      }
    }

    .tarot-node-container {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 40px 20px;
    }

    .tarot-title {
      text-align: center;
      font-size: 20px;
      color: #E8DCC8;
      margin-bottom: 20px;
      letter-spacing: 2px;
    }

    .tarot-subtitle {
      text-align: center;
      font-size: 12px;
      color: #8b7a5e;
      margin-bottom: 40px;
    }

    .tarot-node {
      position: absolute;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s;
    }

    .tarot-node:active {
      transform: scale(0.95);
    }

    .tarot-node-star {
      font-size: 24px;
      margin-bottom: 8px;
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
      animation: floatStar 4s infinite ease-in-out;
    }

    @keyframes floatStar {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    .tarot-node-title {
      font-size: 16px;
      color: #fff;
      font-weight: 600;
      margin-bottom: 4px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

    .tarot-node-en {
      font-size: 10px;
      color: #C5A059;
      letter-spacing: 1px;
    }

    /* 塔罗面板 */
    .tarot-panel {
      position: absolute;
      inset: 0;
      background: rgba(13, 12, 21, 0.95);
      backdrop-filter: blur(10px);
      z-index: 10;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tarot-panel.active {
      transform: translateY(0);
    }

    .tarot-panel-header {
      padding: 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .tarot-panel-header button {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin-right: 12px;
    }

    .tarot-panel-header .title {
      font-size: 16px;
      font-weight: 600;
      flex: 1;
      text-align: center;
      padding-right: 32px;
    }

    .tarot-panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    /* 塔罗氛围文案 */
    .tarot-atmosphere {
      font-size: 13px;
      color: #E8DCC8;
      background: rgba(197, 160, 89, 0.1);
      border-left: 3px solid #C5A059;
      padding: 10px 14px;
      border-radius: 4px;
      line-height: 1.6;
      margin-bottom: 20px;
      font-style: italic;
      opacity: 0.9;
    }

    /* Tab 切换 */
    .tarot-tabs {
      display: flex;
      gap: 20px;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 8px;
    }

    .tarot-tab {
      font-size: 14px;
      color: #8b7a5e;
      cursor: pointer;
      transition: 0.2s;
      position: relative;
    }

    .tarot-tab.active {
      color: #C5A059;
      font-weight: bold;
    }

    .tarot-tab.active::after {
      content: '';
      position: absolute;
      bottom: -9px;
      left: 0;
      right: 0;
      height: 2px;
      background: #C5A059;
      box-shadow: 0 0 8px #C5A059;
    }

    /* 牌阵卡片选择 */
    .tarot-spread-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }

    .tarot-spread-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 12px;
      cursor: pointer;
      transition: 0.2s;
    }

    .tarot-spread-card.active {
      border-color: #8E82FE;
      background: rgba(142, 130, 254, 0.15);
      box-shadow: 0 0 10px rgba(142, 130, 254, 0.2);
    }

    .tarot-spread-card .title {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 4px;
    }

    .tarot-spread-card .desc {
      font-size: 11px;
      color: #A89F91;
      line-height: 1.4;
    }

    /* 胶囊单选（我来问/让Ta问） */
    .tarot-capsule-group {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }

    .tarot-capsule {
      flex: 1;
      text-align: center;
      padding: 10px 0;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.03);
      color: #A89F91;
      font-size: 13px;
      cursor: pointer;
      transition: 0.2s;
    }

    .tarot-capsule.active {
      background: #C5A059;
      color: #fff;
      border-color: #C5A059;
      font-weight: bold;
    }

    /* 玻璃卡片 */
    .glass-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
    }

    .glass-card textarea {
      width: 100%;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 14px;
      outline: none;
      resize: none;
      line-height: 1.6;
    }

    .glass-card textarea::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    /* 选项按钮 */
    .tarot-option-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      margin-right: 8px;
      margin-bottom: 8px;
      transition: 0.2s;
    }

    .tarot-option-btn.active {
      background: rgba(197, 160, 89, 0.2);
      border-color: #C5A059;
      color: #C5A059;
    }

    /* 牌面展示 */
    .tarot-card-show {
      width: 80px;
      height: 120px;
      background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
      border: 2px solid #C5A059;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
      margin: 0 auto;
    }

    .tarot-card-show .card-name {
      font-size: 14px;
      font-weight: bold;
      color: #C5A059;
      text-align: center;
      padding: 0 4px;
    }

    .tarot-card-show .card-pos {
      font-size: 10px;
      color: #fff;
      opacity: 0.8;
      margin-top: 4px;
    }

    /* 猜拳游戏专属 */
    .finger-btn {
      transition: transform 0.1s, background 0.2s;
      cursor: pointer;
    }

    .finger-btn:active {
      transform: scale(0.9);
    }

    .finger-selected {
      background: #C5A059 !important;
      color: #fff !important;
      border-color: #C5A059 !important;
    }

    /* ========== 双人小窝 专属样式 ========== */
    #page-room {
      background: #1a1a24;
      overflow: hidden;
    }

    .room-scene {
      perspective: 1200px;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .room-container {
      width: 300px;
      height: 400px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.1s ease-out;
      background: #2c2c2e;
      border-radius: 20px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      background-image: linear-gradient(to bottom, #3a3a3c 60%, #2c2c2e 60%);
    }

    .room-item {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s;
      transform: translateZ(30px);
      /* 让物品浮起来 */
    }

    .room-item:active {
      transform: translateZ(10px) scale(0.9);
    }

    .room-item .emoji {
      font-size: 50px;
      filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4));
    }

    .room-item .label {
      font-size: 10px;
      color: #fff;
      margin-top: 5px;
      background: rgba(0, 0, 0, 0.5);
      padding: 2px 6px;
      border-radius: 10px;
    }

    /* 各种物品的位置 */
    .item-bed {
      bottom: 20px;
      left: 20px;
    }

    .item-sofa {
      bottom: 80px;
      right: 20px;
    }

    .item-window {
      top: 40px;
      left: 50px;
    }

    .item-tv {
      top: 120px;
      right: 30px;
    }

    .item-char {
      bottom: 60px;
      left: 120px;
      transform: translateZ(50px);
      z-index: 10;
    }

    @keyframes msgHighlight {
      0% {
        background-color: rgba(255, 204, 0, 0.5);
        transform: scale(1.05);
      }

      100% {
        background-color: transparent;
        transform: scale(1);
      }
    }

    .msg-highlight .msg {
      animation: msgHighlight 2s ease-out;
    }

    @keyframes callPulse {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }

      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    @keyframes callShake {

      0%,
      100% {
        transform: rotate(0);
      }

      10%,
      30%,
      50% {
        transform: rotate(-10deg);
      }

      20%,
      40%,
      60% {
        transform: rotate(10deg);
      }
    }

    #callChatList::-webkit-scrollbar {
      width: 4px;
    }

    #callChatList::-webkit-scrollbar-thumb {
      background: rgba(197, 160, 89, 0.3);
      border-radius: 2px;
    }

    /* ========== 新版查手机 UI 样式 ========== */
    #page-phone {
      background: var(--chat-bg);
      /* 参考图里的淡灰绿色背景 */
      color: var(--header-text);
      /* 深墨绿色字体 */
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .phone-home-header {
      padding: 20px 20px 10px;
      display: flex;
      flex-direction: column;
    }

    .phone-home-date {
      font-size: 14px;
      color: var(--time-text);
      font-weight: 500;
      margin-bottom: 4px;
    }

    .phone-home-time {
      font-size: 56px;
      font-weight: 400;
      letter-spacing: -2px;
      line-height: 1;
      color: var(--header-text);
      margin-bottom: 8px;
    }

    .phone-home-subtitle {
      font-size: 13px;
      color: var(--time-text);
    }

    .phone-scroll-area {
      flex: 1;
      overflow-y: auto;
      padding: 0 16px 100px;
      /* 底部留白给图标和小鸡 */
      -webkit-overflow-scrolling: touch;
    }

    /* 卡片通用样式 */
    .phone-card {
      background: #FFFFFF;
      border-radius: 20px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
      position: relative;
    }

    .phone-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .phone-card-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--time-text);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .phone-card-icon {
      font-size: 16px;
    }

    /* 时间线卡片特殊样式 */
    .phone-timeline-item {
      display: flex;
      gap: 12px;
      position: relative;
      padding-bottom: 16px;
    }

    .phone-timeline-item:last-child {
      padding-bottom: 0;
    }

    .phone-timeline-item::before {
      content: '';
      position: absolute;
      left: 5px;
      top: 14px;
      bottom: -8px;
      width: 2px;
      background: var(--chat-bg);
    }

    .phone-timeline-item:last-child::before {
      display: none;
    }

    .phone-timeline-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--header-text);
      margin-top: 4px;
      flex-shrink: 0;
      border: 2px solid #fff;
      z-index: 1;
    }

    .phone-timeline-content {
      flex: 1;
    }

    .phone-timeline-time {
      font-size: 12px;
      color: var(--time-text);
      margin-bottom: 2px;
      font-weight: 600;
    }

    .phone-timeline-text {
      font-size: 14px;
      line-height: 1.4;
      color: var(--header-text);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* App 图标网格 */
    .phone-app-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px 12px;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .phone-app-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: transform 0.1s;
    }

    .phone-app-item:active {
      transform: scale(0.9);
    }

    .phone-app-icon {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .phone-app-name {
      font-size: 11px;
      color: var(--header-text);
    }

    /* 悬浮的小鸡挂件 */
    .phone-chick {
      position: absolute;
      right: 20px;
      bottom: 90px;
      width: 56px;
      height: 56px;
      background: #FFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      z-index: 10;
      cursor: pointer;
      animation: floatChick 3s ease-in-out infinite;
    }

    @keyframes floatChick {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    /* 底部状态栏（导航条模拟） */
    .phone-bottom-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 24px 24px 0 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom: env(safe-area-inset-bottom);
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      z-index: 20;
    }

    .phone-bottom-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--time-text);
    }

    .phone-bottom-item svg {
      width: 24px;
      height: 24px;
    }

    /* 查手机弹窗内容样式 */
    .phone-modal-content {
      background: #FFFFFF;
      border-radius: 20px;
      padding: 20px;
      line-height: 1.6;
      font-size: 14px;
      color: var(--header-text);
      white-space: pre-wrap;
      max-height: 60vh;
      overflow-y: auto;
      border: 1px solid var(--chat-bg);
    }

    .phone-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      color: var(--time-text);
      font-size: 14px;
    }

    /* 图四的粉色通话气泡 */
    .msg.call-bubble {
      background: var(--user-bubble-bg) !important;
      /* 👈 改成跟随主题的粉色 */
      color: #fff !important;
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 16px 4px 16px 16px !important;
      padding: 12px 16px !important;
      font-size: 14px;
      box-shadow: 0 4px 10px rgba(255, 143, 171, 0.2) !important;
    }

    /* 图一图二通话详情卡片 */
    .call-hist-card {
      background: var(--panel-bg);
      border-radius: 16px;
      margin-bottom: 12px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .call-hist-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      cursor: pointer;
    }

    .call-hist-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .call-hist-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--btn-normal);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .call-hist-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--header-text);
      margin-bottom: 4px;
    }

    .call-hist-time {
      font-size: 12px;
      color: var(--time-text);
    }

    .call-hist-right {
      font-size: 13px;
      color: var(--time-text);
    }

    .call-hist-details {
      display: none;
      padding: 0 16px 16px 16px;
      border-top: 1px dashed var(--border-color);
      margin-top: 4px;
    }

    .call-hist-details.show {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    .call-hist-msg-row {
      display: flex;
      gap: 8px;
      font-size: 13px;
      margin-top: 10px;
      line-height: 1.5;
    }

    .call-hist-msg-time {
      color: var(--time-text);
      font-size: 11px;
      width: 40px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .call-hist-msg-content {
      flex: 1;
    }

    .call-hist-msg-who {
      font-weight: 600;
      margin-right: 4px;
    }

    .call-hist-summary {
      margin-top: 16px;
      padding: 12px;
      background: var(--btn-normal);
      border-radius: 8px;
      font-size: 12px;
      color: var(--time-text);
      line-height: 1.5;
    }

    /* ========== 底部 Dock 栏加深质感补丁 ========== */
    .dock {
      background: rgba(243, 239, 233, 0.85) !important;
      /* 使用偏深一点的拿铁色底色 */
      border: 1px solid rgba(197, 160, 89, 0.18) !important;
      /* 淡淡的香槟金外边框 */
      box-shadow: 0 8px 25px rgba(197, 160, 89, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
      /* 外阴影 + 顶部亮色内阴影 */
    }

    /* 适配草莓粉主题 */
    body.theme-strawberry .dock {
      background: rgba(255, 235, 242, 0.9) !important;
      border: 1px solid rgba(255, 143, 171, 0.25) !important;
      box-shadow: 0 8px 25px rgba(255, 143, 171, 0.12) !important;
    }

    /* 适配极简黑白主题 */
    body.theme-minimal .dock {
      background: #f0f0f0 !important;
      border: 1px solid #e5e5ea !important;
      box-shadow: none !important;
    }

    /* 适配暗黑模式 */
    body.dark .dock {
      background: rgba(44, 44, 46, 0.9) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
    }

    /* ========== 桌面横向翻页 ========== */
    .home-scroll {
      overflow-y: auto !important;
      /* 👈 这里改成 auto，允许上下滑动看图标 */
      overflow-x: auto !important;
      scroll-snap-type: x mandatory;
      display: flex !important;
      flex-direction: row !important;
      padding: 8px 0 100px 0 !important;
      scrollbar-width: none;
      /* 隐藏滚动条 */
    }

    .home-page-container {
      min-width: 100vw;
      height: auto !important;
      /* 👈 改成 auto，让它根据内容撑开 */
      min-height: 100%;
      padding: 0 18px 150px !important;
      /* 👈 确保底部有足够留白给图标 */
      scroll-snap-align: start;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(5, 1fr);
      /* 限制每页最多 20 个 APP */
      gap: 20px 10px;
      align-content: flex-start;
      box-sizing: border-box;
    }

    /* ========== 日程 UI 质感优化 ========== */
    #page-schedule {
      background: linear-gradient(180deg, #FCFAF8 0%, #F4EFE6 100%) !important;
    }

    .schedule-event {
      border-radius: 12px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
      backdrop-filter: blur(10px);
      transition: transform 0.2s, box-shadow 0.2s;
      border: 1px solid rgba(255, 255, 255, 0.6) !important;
      border-left-width: 4px !important;
    }

    .schedule-event:active {
      transform: scale(0.98);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    .schedule-event .evt-title {
      font-size: 13px !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px;
    }

    .schedule-event .evt-desc {
      font-size: 11px !important;
      opacity: 0.9 !important;
    }

    .time-line {
      border-top: 1px dashed rgba(0, 0, 0, 0.06) !important;
    }

    .time-label {
      font-weight: 500;
      color: #A89F91 !important;
    }

    /* 当前时间红线发光效果 */
    .schedule-timeline-now {
      box-shadow: 0 0 8px #ff3b30;
    }

    /* ========== 桌面小组件（Widgets）专属样式优化版 ========== */
    .home-page-container {
      padding: 0 16px !important;
      /* ⚠️ 关键修复：取消强制高度 100%，改用 min-height，防止内容溢出被截断 */
      height: auto !important;
      min-height: 100%;
      padding-bottom: 120px !important;
      /* 留出足够空间给 Dock 栏 */
    }

    /* 通用小组件卡片 */
    .widget-card {
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 22px;
      padding: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
      /* ⚠️ 关键修复：加一个最小高度，防止被 Flex 压扁 */
      min-height: 70px;
      justify-content: center;
    }

    body.dark .widget-card {
      background: rgba(44, 44, 46, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .widget-card:active {
      transform: scale(0.96);
    }

    /* 宽卡片 (占满两列) */
    .widget-card.wide {
      grid-column: span 2;
    }

    /* 组件的标题和图标 */
    .widget-title {
      font-size: 14px;
      color: var(--header-text);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .widget-content {
      font-size: 12px;
      color: var(--time-text);
      line-height: 1.5;
    }

    /* 快捷功能小圆角方块组 */
    .widget-shortcuts {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .shortcut-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    body.dark .shortcut-icon {
      background: rgba(255, 255, 255, 0.1);
    }

    /* 拖拽时的鼠标样式 */
    .home-scroll {
      cursor: grab;
    }

    .home-scroll:active {
      cursor: grabbing;
    }

    /* ========== 一起看 放映厅 2.0 ========== */
    #page-watchtogether {
      background: #141214;
      /* 极深背景 */
      color: #fff;
      display: flex;
      flex-direction: column;
    }

    .watch-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      background: rgba(20, 18, 20, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .watch-header .title {
      text-align: center;
      font-size: 16px;
      font-weight: 500;
    }

    .watch-tabs-container {
      padding: 16px 16px 0;
      display: flex;
      gap: 12px;
    }

    .watch-tab-btn {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      border-radius: 24px;
      font-size: 14px;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.6);
      transition: all 0.3s;
    }

    .watch-tab-btn.active {
      background: linear-gradient(135deg, #f7d794 0%, #f8c291 100%);
      color: #3a1c20;
      font-weight: 600;
    }

    .watch-form-area {
      padding: 16px;
      flex: 1;
      overflow-y: auto;
    }

    .watch-import-card {
      background: #211d21;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .watch-import-card .info h4 {
      font-size: 15px;
      margin: 0 0 4px 0;
      font-weight: 500;
    }

    .watch-import-card .info p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      margin: 0;
      max-width: 220px;
    }

    .watch-select-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #fff;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      cursor: pointer;
    }

    .watch-name-input {
      width: 100%;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 18px;
      outline: none;
      padding: 4px 0;
    }

    .watch-name-input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .watch-link-input {
      width: 100%;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 15px;
      outline: none;
      padding: 12px;
      border-radius: 8px;
      margin-top: 10px;
    }

    .watch-hint-text {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      line-height: 1.6;
      padding: 0 4px;
      margin-bottom: 20px;
    }

    .watch-start-container {
      text-align: center;
      padding: 20px 0 40px;
    }

    .watch-start-btn {
      background: #b08d57;
      color: #fff;
      border: none;
      padding: 12px 48px;
      border-radius: 24px;
      font-size: 15px;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    /* 播放页面 */
    #watchPlayerView {
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 9999;
      display: none;
      flex-direction: column;
    }

    .watch-video-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      position: relative;
    }

    .watch-video-wrapper video,
    .watch-video-wrapper iframe {
      width: 100%;
      max-height: 100%;
      object-fit: contain;
      border: none;
    }

    .watch-exit-btn {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
    }

    /* 拖拽时的幽灵占位符 */
    .sortable-ghost {
      opacity: 0.3;
      transform: scale(0.9);
      background: #e0e0e0 !important;
      border: 2px dashed #C5A059 !important;
    }

    /* 正在拖拽的图标 */
    .sortable-drag {
      opacity: 1 !important;
      transform: scale(1.1);
      z-index: 9999;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
    }

    /* 禁用拖拽时的自带横向滑动 */
    .home-scroll.sorting {
      overflow: hidden !important;
    }

    /* 防止拖拽时浏览器接管滚动 */
    .app-item {
      touch-action: none;
      -webkit-user-drag: none;
    }

    /* 拖拽中的克隆体，确保能跨两页自由移动 */
    .sortable-fallback {
      position: fixed !important;
      pointer-events: none;
      z-index: 99999;
      opacity: 0.95;
    }

    .home-scroll {
      overflow-y: auto !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    .home-page-container {
      flex-shrink: 0;
      /* 别被压缩成屏高 */
      height: auto !important;
      min-height: 100%;
    }

    .app-item {
      touch-action: none;
      -webkit-user-drag: none;
      will-change: transform;
    }

    /* 拖动中的克隆体 */
    .sortable-fallback {
      position: fixed !important;
      pointer-events: none;
      z-index: 99999;
      opacity: 0.9;
      transform: scale(1.08);
      transition: none !important;
    }

    /* 拖动占位符也加快过渡 */
    .sortable-ghost {
      opacity: 0.3;
      transition: none !important;
    }

    /* ========== 全新日记本 UI ========== */
    .diary-book-container {
      width: 100%;
      height: 100%;
      background-color: var(--chat-bg);
      /* 网格纸背景 */
      background-image:
        linear-gradient(var(--border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
      background-size: 20px 20px;
      background-position: center top;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* 书本的外壳 */
    .diary-book {
      flex: 1;
      margin: 16px;
      background: var(--panel-bg);
      border-radius: 12px 20px 20px 12px;
      box-shadow: -4px 8px 24px rgba(0, 0, 0, 0.1), inset 4px 0 10px rgba(0, 0, 0, 0.02);
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-left: 6px solid rgba(0, 0, 0, 0.05);
      /* 书脊 */
    }

    /* 封面页 */
    .diary-cover-page {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      animation: fadeIn 0.4s ease;
    }

    .diary-cover-card {
      background: #ffffff;
      width: 75%;
      max-width: 280px;
      aspect-ratio: 3/4;
      border-radius: 4px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
      position: relative;
    }

    body.dark .diary-cover-card {
      background: #2c2c2e;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .diary-cover-title {
      font-size: 42px;
      font-weight: 800;
      color: var(--header-text);
      font-family: "Times New Roman", serif;
      margin-bottom: 4px;
    }

    .diary-cover-subtitle {
      font-size: 16px;
      color: var(--time-text);
      margin-bottom: 20px;
    }

    .diary-cover-divider {
      width: 80%;
      height: 1px;
      background: var(--border-color);
      margin-bottom: 20px;
    }

    .diary-cover-stats {
      font-size: 15px;
      font-weight: 600;
      color: var(--header-text);
      margin-bottom: 6px;
    }

    .diary-cover-date {
      font-size: 12px;
      color: var(--time-text);
    }

    .diary-cover-sticker {
      position: absolute;
      bottom: -15px;
      right: -15px;
      width: 60px;
      height: 70px;
      background: #fff;
      padding: 4px 4px 16px 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transform: rotate(8deg);
      border-radius: 2px;
    }

    .diary-cover-sticker img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 目录页 & 详情页 */
    .diary-inner-page {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      animation: slideInRight 0.3s ease;
    }

    .diary-catalog-item {
      display: flex;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px dashed var(--border-color);
      position: relative;
    }

    .diary-catalog-left {
      width: 50px;
      text-align: center;
      flex-shrink: 0;
    }

    .diary-catalog-day {
      font-size: 28px;
      font-weight: 700;
      color: var(--header-text);
      line-height: 1;
    }

    .diary-catalog-month {
      font-size: 10px;
      color: var(--time-text);
      margin-top: 4px;
    }

    .diary-catalog-right {
      flex: 1;
      min-width: 0;
      cursor: pointer;
    }

    .diary-catalog-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--header-text);
      margin-bottom: 6px;
    }

    .diary-catalog-preview {
      font-size: 13px;
      color: var(--time-text);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .diary-del-btn {
      position: absolute;
      right: 0;
      top: 16px;
      color: #ff3b30;
      opacity: 0.5;
      cursor: pointer;
      padding: 4px;
      font-size: 16px;
    }

    .diary-del-btn:active {
      opacity: 1;
    }

    /* 日记正文详情 */
    .diary-detail-content {
      font-size: 16px;
      line-height: 1.8;
      color: var(--header-text);
      white-space: pre-wrap;
      font-family: Georgia, serif;
    }

    /* 顶部切换箭头 */
    .diary-nav-arrow {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--time-text);
      cursor: pointer;
      background: var(--btn-normal);
      border-radius: 50%;
    }

    /* ========== 仿 iOS 查手机列表样式 ========== */
    .ios-list-group {
      background: var(--panel-bg);
      border-radius: 12px;
      margin: 16px;
      overflow: hidden;
    }

    .ios-list-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      position: relative;
    }

    .ios-list-item:last-child {
      border-bottom: none;
    }

    .ios-list-item:active {
      background: var(--btn-normal);
    }

    .ios-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-right: 12px;
      flex-shrink: 0;
      background: var(--chat-bg);
      color: var(--time-text);
    }

    .ios-content {
      flex: 1;
      min-width: 0;
    }

    .ios-title {
      font-size: 16px;
      color: var(--header-text);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 4px;
    }

    .ios-subtitle {
      font-size: 13px;
      color: var(--time-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ios-time {
      font-size: 12px;
      color: var(--time-text);
      flex-shrink: 0;
    }

    .ios-missed {
      color: #ff3b30 !important;
    }

    .ios-arrow {
      width: 8px;
      height: 8px;
      border-top: 2px solid #ccc;
      border-right: 2px solid #ccc;
      transform: rotate(45deg);
      margin-left: 8px;
    }

    /* 短信详情内的内心OS（引用块） */
    .sms-inner-voice {
      border-left: 3px solid #ccc;
      padding-left: 12px;
      margin: 20px 0;
      font-size: 14px;
      color: var(--time-text);
      line-height: 1.6;
    }

    /* 转发按钮 */
    .forward-btn {
      width: calc(100% - 32px);
      margin: 20px 16px;
      padding: 14px;
      background: transparent;
      border: 1px solid #ff3b30;
      color: #ff3b30;
      border-radius: 12px;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
    }

    /* ========== 查手机-联系人专属样式 ========== */
    .contact-page-bg {
      background: #F2F2F7;
    }

    .contact-card {
      background: #FFFFFF;
      border-radius: 12px;
      margin: 0 16px 24px;
      overflow: hidden;
    }

    .contact-item-ios {
      padding: 16px;
      border-bottom: 1px solid #E5E5EA;
    }

    .contact-item-ios:last-child {
      border-bottom: none;
    }

    .contact-title-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 6px;
    }

    .contact-name {
      font-size: 17px;
      color: #000;
      font-weight: 500;
    }

    .contact-count {
      font-size: 13px;
      color: #8E8E93;
    }

    .contact-desc {
      font-size: 13px;
      color: #8E8E93;
      line-height: 1.4;
    }

    /* 拦截名单专属红色 */
    .contact-blocked .contact-name {
      color: #FF3B30;
    }

    .contact-blocked .contact-desc {
      color: #FF3B30;
      opacity: 0.8;
    }

    /* 底部红色大按钮 */
    .bottom-danger-btn {
      display: block;
      /* 👈 关键：让按钮变成块级元素，才能自动居中 */
      width: calc(100% - 32px);
      /* 👈 设定宽度，左右各留出 16px 边距 */
      margin: 20px auto 40px;
      /* 👈 上下边距，左右 auto 自动居中 */
      padding: 14px;
      background: transparent;
      border: 1px solid #FF3B30;
      color: #FF3B30;
      border-radius: 10px;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* ========== 成就系统样式 ========== */
    .achievement-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 16px;
    }

    .achievement-card {
      background: var(--panel-bg);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
      transition: transform 0.2s;
    }

    .achievement-card.unlocked {
      background: linear-gradient(135deg, #FFFDF9 0%, #FFF8EE 100%);
      border-color: #E8DCC8;
    }

    .achievement-card.locked {
      opacity: 0.5;
      filter: grayscale(1);
    }

    .achievement-icon {
      font-size: 40px;
      margin-bottom: 8px;
      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    }

    .achievement-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--header-text);
      margin-bottom: 4px;
    }

    .achievement-desc {
      font-size: 11px;
      color: var(--time-text);
      line-height: 1.4;
    }

    .achievement-date {
      font-size: 10px;
      color: #C5A059;
      margin-top: 8px;
      font-weight: 600;
    }

    /* 成就弹窗 */
    #achievementToast {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      background: rgba(30, 30, 30, 0.95);
      color: #fff;
      padding: 24px 40px;
      border-radius: 20px;
      text-align: center;
      z-index: 99999;
      opacity: 0;
      pointer-events: none;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #C5A059;
    }

    #achievementToast.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    #achievementToast .toast-icon {
      font-size: 60px;
      margin-bottom: 12px;
      animation: floatIcon 2s infinite;
    }

    #achievementToast .toast-title {
      font-size: 20px;
      font-weight: 800;
      color: #F4D03F;
      letter-spacing: 2px;
      margin-bottom: 6px;
    }

    #achievementToast .toast-desc {
      font-size: 14px;
      color: #ddd;
    }

    /* 隐藏更多面板的滚动条但保留滚动功能 */
    #moreMode>div:last-child::-webkit-scrollbar {
      display: none;
    }

    /* ========== 外卖 APP 专属样式 ========== */

    /* 分类 Tab 顶部 */
    .takeout-tab {
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: var(--time-text);
      cursor: pointer;
      padding: 8px 0;
      position: relative;
      white-space: nowrap;
      transition: all 0.2s;
    }

    .takeout-tab span {
      display: block;
      font-size: 10px;
      margin-top: 2px;
      opacity: 0.7;
    }

    .takeout-tab.active {
      color: var(--header-text);
      font-weight: bold;
    }

    .takeout-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background: var(--primary-btn);
      border-radius: 2px;
    }

    /* 店铺列表卡片 */
    .takeout-list {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .takeout-shop-card {
      background: #FFF;
      border-radius: 14px;
      padding: 12px;
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
      transition: transform 0.1s;
    }

    .takeout-shop-card:active {
      transform: scale(0.98);
    }

    /* 店铺左侧渐变色块 */
    .takeout-shop-img {
      width: 70px;
      height: 70px;
      border-radius: 10px;
      background: linear-gradient(135deg, #E8DCC8 0%, #D4A373 100%);
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 4px;
      flex-shrink: 0;
    }

    .takeout-shop-img span {
      background: rgba(255, 255, 255, 0.85);
      color: #333;
      font-size: 10px;
      padding: 2px 4px;
      border-radius: 4px;
      font-weight: 500;
    }

    /* 店铺信息 */
    .takeout-shop-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .takeout-shop-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--header-text);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .takeout-shop-meta {
      font-size: 12px;
      color: var(--time-text);
      margin-bottom: 8px;
      font-weight: 500;
    }

    /* 店铺菜品标签 */
    .takeout-shop-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .takeout-shop-tags span {
      background: #FFF8EE;
      color: #C5A059;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }

    /* 底部导航栏 */
    .takeout-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: var(--time-text);
      font-size: 11px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .takeout-nav-item svg {
      width: 22px;
      height: 22px;
    }

    .takeout-nav-item.active {
      color: var(--primary-btn);
    }

    /* 详情页菜品卡片 */
    .takeout-dish-card {
      background: #FFF;
      border-radius: 14px;
      padding: 12px;
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .takeout-dish-img {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      background: linear-gradient(135deg, #E8DCC8 0%, #D4A373 100%);
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 4px;
      flex-shrink: 0;
    }

    .takeout-dish-img span {
      background: rgba(255, 255, 255, 0.85);
      color: #333;
      font-size: 10px;
      padding: 2px 4px;
      border-radius: 4px;
      font-weight: 500;
    }

    .takeout-dish-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .takeout-dish-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--header-text);
      margin-bottom: 4px;
    }

    .takeout-dish-desc {
      font-size: 11px;
      color: var(--time-text);
      line-height: 1.4;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .takeout-dish-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .takeout-dish-price {
      font-size: 16px;
      font-weight: bold;
      color: #E54D42;
    }

    .takeout-dish-price small {
      font-size: 12px;
      margin-right: 2px;
    }

    .takeout-add-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--primary-btn);
      color: #FFF;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      transition: transform 0.1s;
    }

    .takeout-add-btn:active {
      transform: scale(0.9);
    }

    /* 订单页卡片 */
    .takeout-order-card {
      background: #FFF;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .takeout-order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      border-bottom: 1px dashed var(--border-color);
      padding-bottom: 10px;
    }

    .takeout-order-shop {
      font-size: 15px;
      font-weight: bold;
      color: var(--header-text);
    }

    .takeout-order-time {
      font-size: 12px;
      color: var(--time-text);
    }

    .takeout-order-items {
      font-size: 13px;
      color: var(--header-text);
      line-height: 1.5;
      margin-bottom: 12px;
      opacity: 0.8;
    }

    .takeout-order-meta {
      font-size: 12px;
      color: var(--time-text);
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .takeout-order-note {
      background: #FFF9F0;
      border: 1px dashed #F5A623;
      border-radius: 8px;
      padding: 10px;
      font-size: 13px;
      color: #4A3B32;
      font-style: italic;
      line-height: 1.5;
    }

    @keyframes shuraFall {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
      }
    }

    /* ========== 手帐风美化特效 (开关控制) ========== */
    body.journal-mode #chatBox {
      background-image:
        radial-gradient(circle, rgba(139, 184, 232, 0.15) 2px, transparent 2px),
        radial-gradient(circle, rgba(139, 184, 232, 0.1) 1px, transparent 1px);
      background-size: 40px 40px, 20px 20px;
      background-position: 0 0, 10px 10px;
    }

    body.journal-mode .msg.bot {
      background: rgba(255, 255, 255, 0.85) !important;
      backdrop-filter: blur(10px);
      border-radius: 24px !important;
      border: 1px solid rgba(214, 232, 245, 0.8) !important;
      box-shadow: 0 4px 15px rgba(139, 184, 232, 0.08) !important;
    }

    body.journal-mode .msg.user {
      background: linear-gradient(135deg, rgba(164, 208, 240, 0.9) 0%, rgba(139, 184, 232, 0.9) 100%) !important;
      backdrop-filter: blur(10px);
      border-radius: 24px !important;
      box-shadow: 0 4px 15px rgba(139, 184, 232, 0.2) !important;
    }

    body.journal-mode .msg-row.bot .msg-wrap {
      position: relative;
    }

    body.journal-mode .msg-row.bot .msg::after {
      content: "";
      position: absolute;
      right: -18px;
      bottom: -8px;
      width: 36px;
      height: 36px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,50 Q40,20 80,30 Q60,50 60,80 Q50,60 20,50 Z" fill="rgba(255,255,255,0.9)" stroke="rgba(164,208,240,0.8)" stroke-width="2"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 10;
    }

    body.journal-mode .msg-row.user .msg-wrap {
      position: relative;
    }

    body.journal-mode .msg-row.user .msg::after {
      content: "";
      position: absolute;
      left: -18px;
      bottom: -8px;
      width: 36px;
      height: 36px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,50 Q40,20 80,30 Q60,50 60,80 Q50,60 20,50 Z" fill="rgba(164,208,240,0.9)" stroke="rgba(255,255,255,0.8)" stroke-width="2"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 10;
      transform: scaleX(-1);
    }

    body.journal-mode .avatar {
      border-radius: 50% !important;
      border: 2px solid #FFF !important;
      box-shadow: 0 4px 10px rgba(139, 184, 232, 0.2) !important;
    }

    body.journal-mode .narratage {
      font-style: italic;
      letter-spacing: 1px;
      color: #8BA0B5 !important;
      font-size: 13px;
    }

    body.journal-mode .msg-wrap>div:last-child {
      opacity: 0.6;
      font-size: 10px !important;
    }

    /* ==========================================
       🚀 聊天页专属：云朵翅膀 (chat-skin-cloud)
       ========================================== */
    body.chat-skin-cloud #page-chat {
      background-color: #f4f5f7 !important;
      background-image: radial-gradient(#dcdfe5 1.6px, transparent 1.6px), linear-gradient(180deg, #f9fafb 0%, #eef0f4 55%, #f5f6f8 100%) !important;
      background-size: 24px 24px, 100% 100% !important;
    }

    body.chat-skin-cloud #chatBox {
      background-color: transparent !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 140' fill='none'%3E%3Cg opacity='0.52'%3E%3Cpath d='M116 78 C116 62, 92 40, 62 42 C42 43, 30 53, 35 64 C38 70, 48 70, 52 70 C40 73, 38 83, 47 89 C54 93, 66 90, 70 88 C64 94, 68 102, 80 102 C95 102, 110 92, 114 82 C116 76, 106 72, 102 77 C99 81, 104 86, 109 84' fill='%23ffffff' stroke='%23cfd4dc' stroke-width='2.2'/%3E%3Cpath d='M144 78 C144 62, 168 40, 198 42 C218 43, 230 53, 225 64 C222 70, 212 70, 208 70 C220 73, 222 83, 213 89 C206 93, 194 90, 190 88 C196 94, 192 102, 180 102 C165 102, 150 92, 146 82 C144 76, 154 72, 158 77 C161 81, 156 86, 151 84' fill='%23ffffff' stroke='%23cfd4dc' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: center 46% !important;
      background-size: 220px auto !important;
    }

    body.chat-skin-cloud #page-chat .page-header {
      background-color: rgba(255, 255, 255, 0.84) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10' fill='none'%3E%3Cpath d='M0 2 Q 9 10, 18 2 Q 27 10, 36 2' stroke='%23d4d8e0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
      background-repeat: repeat-x !important;
      background-position: bottom center !important;
      background-size: 32px 9px !important;
      backdrop-filter: blur(20px) saturate(135%) !important;
      border-bottom: none !important;
      box-shadow: 0 6px 20px rgba(155, 160, 170, 0.08) !important;
    }

    body.chat-skin-cloud #page-chat .back-btn,
    body.chat-skin-cloud #page-chat .right-btn {
      background: rgba(255, 255, 255, 0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M29 24 C30 15, 20 8, 9 11 C4 12, 3 17, 7 20 C9 21, 13 21, 15 21 C10 22, 9 27, 13 29 C16 31, 20 29, 22 28 C20 31, 22 34, 26 33 C30 32, 29 27, 29 24 Z' fill='%23ffffff' stroke='%238c929e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27 24 C25 21, 21 22, 21 25 C21 27, 24 28, 25 26' stroke='%238c929e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
      border-radius: 50% !important;
      border: 1.2px solid rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 3px 10px rgba(145, 150, 160, 0.12) !important;
    }

    body.chat-skin-cloud #page-chat .back-btn svg,
    body.chat-skin-cloud #page-chat .right-btn svg {
      display: none !important;
    }

    body.chat-skin-cloud .msg-row {
      margin-bottom: 22px !important;
    }

    body.chat-skin-cloud .avatar {
      border-radius: 50% !important;
      border: 2px solid #ffffff !important;
      background-color: #eceef2 !important;
      box-shadow: 0 4px 14px rgba(140, 145, 156, 0.14) !important;
    }

    /* 🚀 修复所有聊天皮肤的气泡宽度挤压Bug */
    body[class*="chat-skin-"] .msg-wrap {
      max-width: 75% !important;
      width: fit-content !important;
    }

    body[class*="chat-skin-"] .msg {
      width: fit-content !important;
      max-width: 100% !important;
      word-break: break-word !important;
      word-wrap: break-word !important;
    }

    body.chat-skin-cloud .msg {
      position: relative !important;
      overflow: visible !important;
      font-size: 14.5px !important;
      padding: 9px 13px !important;
      line-height: 1.58 !important;
      color: #4a4d52 !important;
      backdrop-filter: blur(16px) saturate(130%) !important;
    }

    body.chat-skin-cloud .msg.bot {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 247, 250, 0.84) 100%) !important;
      border-radius: 22px 22px 22px 12px !important;
      border: 1.4px solid #ffffff !important;
      box-shadow: 0 0 0 1px rgba(208, 213, 222, 0.65), 0 7px 20px -3px rgba(145, 150, 162, 0.13), inset 0 -3px 6px rgba(212, 216, 224, 0.38) !important;
    }

    body.chat-skin-cloud .msg.user {
      background: linear-gradient(180deg, rgba(236, 239, 244, 0.88) 0%, rgba(223, 227, 234, 0.82) 100%) !important;
      border-radius: 22px 22px 12px 22px !important;
      color: #43464b !important;
      border: 1.4px solid rgba(255, 255, 255, 0.96) !important;
      box-shadow: 0 0 0 1px rgba(198, 204, 214, 0.7), 0 7px 20px -3px rgba(135, 140, 152, 0.16) !important;
    }

    body.chat-skin-cloud .msg.bot::before {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      width: 32px !important;
      height: 24px !important;
      top: 50% !important;
      right: -20px !important;
      transform: translateY(-50%) rotate(6deg) !important;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52' fill='none'%3E%3Cpath d='M14 36 C10 20, 29 8, 53 10 C63 11, 66 17, 61 22 C58 25, 50 25, 46 25 C55 27, 59 35, 52 39 C46 43, 37 40, 33 38 C37 43, 33 48, 24 47 C16 46, 14 41, 14 36 Z' fill='%23ffffff' stroke='%23a5abb6' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain !important;
      filter: drop-shadow(0 2px 5px rgba(145, 150, 162, 0.25)) !important;
      z-index: 3 !important;
    }

    body.chat-skin-cloud .msg.user::before {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      width: 32px !important;
      height: 24px !important;
      top: 50% !important;
      left: -20px !important;
      transform: translateY(-50%) rotate(-6deg) !important;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52' fill='none'%3E%3Cpath d='M54 36 C58 20, 39 8, 15 10 C5 11, 2 17, 7 22 C10 25, 18 25, 22 25 C13 27, 9 35, 16 39 C22 43, 31 40, 35 38 C31 43, 35 48, 44 47 C52 46, 54 41, 54 36 Z' fill='%23ffffff' stroke='%23adb3be' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain !important;
      filter: drop-shadow(0 2px 5px rgba(145, 150, 162, 0.25)) !important;
      z-index: 3 !important;
    }

    body.chat-skin-cloud .input-area {
      background-color: rgba(246, 247, 250, 0.86) !important;
      backdrop-filter: blur(22px) saturate(135%) !important;
      border-top: 1.5px solid #ffffff !important;
      box-shadow: 0 -6px 22px rgba(145, 150, 162, 0.08) !important;
    }

    body.chat-skin-cloud #msgInput {
      background: rgba(255, 255, 255, 0.92) !important;
      border: 1.5px solid #d5d9e2 !important;
      border-radius: 999px !important;
      box-shadow: 0 3px 12px rgba(145, 150, 160, 0.07) !important;
    }

    body.chat-skin-cloud #sendBtn,
    body.chat-skin-cloud #moreBtn,
    body.chat-skin-cloud #emojiBtn,
    body.chat-skin-cloud #voiceBtn {
      background: linear-gradient(135deg, #d8dde6 0%, #bcc3cf 100%) !important;
      border: 1.6px solid #ffffff !important;
      border-radius: 50% !important;
      box-shadow: 0 4px 14px rgba(140, 146, 158, 0.24) !important;
    }

    /* ==========================================
       🚀 聊天页专属：黑白立体 (chat-skin-neo)
       ========================================== */
    body.chat-skin-neo #page-chat .page-header {
      background: #ffffff !important;
      border-bottom: 3px solid #000000 !important;
      box-shadow: 0 4px 0 #000000 !important;
    }

    body.chat-skin-neo #page-chat .back-btn,
    body.chat-skin-neo #page-chat .right-btn {
      width: 40px !important;
      height: 40px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #ffffff !important;
      border: 2px solid #000000 !important;
      border-radius: 10px !important;
      box-shadow: 2px 2px 0 #000000 !important;
      color: #000000 !important;
    }

    body.chat-skin-neo #page-chat .back-btn svg,
    body.chat-skin-neo #page-chat .right-btn svg {
      stroke: #000000 !important;
      fill: #000000 !important;
    }

    body.chat-skin-neo #chatBox {
      background-color: #ffffff !important;
      background-image: radial-gradient(#000000 1.5px, transparent 1.5px) !important;
      background-size: 20px 20px !important;
    }

    body.chat-skin-neo .msg {
      max-width: calc(100% - 20px) !important;
      font-size: 14.5px !important;
      padding: 9px 13px !important;
      border: 2px solid #000000 !important;
      box-shadow: 4px 4px 0 #000000 !important;
      background: #ffffff !important;
      color: #000000 !important;
      position: relative !important;
      font-weight: 500 !important;
    }

    body.chat-skin-neo .msg.bot {
      border-radius: 12px 12px 12px 4px !important;
    }

    body.chat-skin-neo .msg.user {
      border-radius: 12px 12px 4px 12px !important;
    }

    body.chat-skin-neo .msg::before {
      content: "" !important;
      position: absolute !important;
      bottom: -2px !important;
      width: 10px !important;
      height: 10px !important;
      background: #ffffff !important;
      border: 2px solid #000000 !important;
      z-index: 1 !important;
    }

    body.chat-skin-neo .msg.bot::before {
      left: -8px !important;
      border-top: 0 !important;
      border-right: 0 !important;
      transform: rotate(45deg) !important;
      border-radius: 0 0 0 2px !important;
    }

    body.chat-skin-neo .msg.user::before {
      right: -8px !important;
      border-top: 0 !important;
      border-left: 0 !important;
      transform: rotate(-45deg) !important;
      border-radius: 0 0 2px 0 !important;
    }

    body.chat-skin-neo .avatar {
      border: 2px solid #000000 !important;
      box-shadow: 3px 3px 0 #000000 !important;
      background: #ffffff !important;
      border-radius: 50% !important;
    }

    body.chat-skin-neo .narratage {
      background: #ffffff !important;
      border: 2px solid #000000 !important;
      border-radius: 20px !important;
      box-shadow: 2px 2px 0 #000000 !important;
      color: #000000 !important;
      font-weight: 700 !important;
      padding: 4px 14px !important;
    }

    body.chat-skin-neo .input-area {
      background: #ffffff !important;
      border-top: 3px solid #000000 !important;
      box-shadow: 0 -4px 0 #000000 !important;
    }

    body.chat-skin-neo #msgInput {
      background: #ffffff !important;
      border: 2px solid #000000 !important;
      border-radius: 20px !important;
      box-shadow: 2px 2px 0 #000000 !important;
      color: #000000 !important;
    }

    body.chat-skin-neo #sendBtn,
    body.chat-skin-neo #moreBtn,
    body.chat-skin-neo #emojiBtn,
    body.chat-skin-neo #voiceBtn {
      background: #ffffff !important;
      border: 2px solid #000000 !important;
      border-radius: 50% !important;
      box-shadow: 2px 2px 0 #000000 !important;
      color: #000000 !important;
    }

    body.chat-skin-neo #sendBtn svg,
    body.chat-skin-neo #moreBtn svg,
    body.chat-skin-neo #emojiBtn svg,
    body.chat-skin-neo #voiceBtn svg {
      stroke: #000000 !important;
      fill: #000000 !important;
    }

    body.chat-skin-neo #sendBtn:active,
    body.chat-skin-neo #moreBtn:active,
    body.chat-skin-neo #page-chat .back-btn:active {
      transform: translate(2px, 2px) !important;
      box-shadow: 0 0 0 #000000 !important;
    }

    /* ==========================================
       🚀 聊天页专属：奶油粉信笺 (chat-skin-cream-pink)
       ========================================== */
    body.chat-skin-cream-pink #page-chat {
      background-image: url("https://imgbed.heliar.top/i/mmFqzLV_p7OCTUT-_A4EC691808E7A0692927296B602C352D.webp") !important;
      background-size: cover !important;
      background-position: center !important;
    }

    body.chat-skin-cream-pink #chatBox {
      background: transparent !important;
    }

    body.chat-skin-cream-pink .msg {
      border-radius: 22px !important;
      box-shadow: 5px 5px 0 rgba(216, 184, 202, 0.34) !important;
      border: 2px dashed rgba(196, 143, 169, 0.76) !important;
      max-width: 290px !important;
      color: #65525d !important;
    }

    body.chat-skin-cream-pink .msg.bot {
      background: rgba(255, 251, 244, 0.97) !important;
      border-color: rgba(188, 164, 169, 0.70) !important;
    }

    body.chat-skin-cream-pink .msg.user {
      background: rgba(241, 214, 229, 0.96) !important;
    }

    body.chat-skin-cream-pink .avatar {
      border: 4px double rgba(196, 143, 169, 0.76) !important;
    }

    body.chat-skin-cream-pink .input-area {
      background: rgba(246, 241, 239, 0.92) !important;
      border-top: 2px solid rgba(196, 143, 169, 0.72) !important;
      backdrop-filter: blur(16px) !important;
    }

    body.chat-skin-cream-pink #msgInput {
      background: rgba(235, 242, 247, 0.88) !important;
      border-radius: 28px !important;
      color: #766875 !important;
    }

    body.chat-skin-cream-pink #sendBtn {
      background: #d993b2 !important;
      color: #fffafc !important;
      border-radius: 50% !important;
      box-shadow: 0 3px 9px rgba(190, 120, 151, 0.20) !important;
    }

    /* ==========================================
       🚀 聊天页专属：蓝调来信 (chat-skin-blue-hour)
       ========================================== */
    body.chat-skin-blue-hour #page-chat {
      background-image: url("https://i.ibb.co/8LW4z2xT/IMG-2619.jpg") !important;
      background-size: cover !important;
      background-position: center !important;
    }

    body.chat-skin-blue-hour #chatBox {
      background: transparent !important;
    }

    body.chat-skin-blue-hour .msg {
      border-radius: 28px !important;
      background: linear-gradient(135deg, rgba(255, 255, 255, .76) 0%, rgba(231, 238, 240, .42) 48%, rgba(255, 255, 255, .66) 100%) !important;
      border: 1px solid rgba(255, 255, 255, .9) !important;
      box-shadow: inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -2px 5px rgba(109, 130, 140, .15), 0 5px 16px rgba(50, 68, 79, .12) !important;
      color: #303b40 !important;
      max-width: 280px !important;
      backdrop-filter: blur(24px) saturate(110%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(110%) !important;
    }

    body.chat-skin-blue-hour .input-area {
      background: rgba(231, 243, 250, .8) !important;
      backdrop-filter: blur(22px) !important;
      border-top: 1px solid rgba(255, 255, 255, .7) !important;
    }

    body.chat-skin-blue-hour #msgInput {
      background: rgba(255, 255, 255, .66) !important;
      border-radius: 24px !important;
      border: 1px solid rgba(255, 255, 255, .92) !important;
      color: #35424a !important;
      box-shadow: inset 0 1px 4px rgba(83, 117, 145, .13) !important;
    }

    body.chat-skin-blue-hour #sendBtn {
      background: linear-gradient(145deg, #f3f5f5, #c0c9ce 65%, #a4b1b9) !important;
      color: #34434d !important;
      border-radius: 50% !important;
      box-shadow: inset 0 1px 1px #fff, 0 3px 8px rgba(55, 70, 80, .16) !important;
    }

    /* 底栏图标替换 */
    body.chat-skin-blue-hour .wechat-bottom-nav {
      background: rgba(235, 245, 252, .8) !important;
      border-top: 1px solid rgba(255, 255, 255, .8) !important;
      backdrop-filter: blur(10px) !important;
    }

    body.chat-skin-blue-hour .nav-item span {
      color: #637b8c !important;
    }

    body.chat-skin-blue-hour .nav-item.active span {
      color: #243f57 !important;
      font-weight: 600;
    }

    /* 顶栏 */
    body.chat-skin-blue-hour #page-chat .page-header {
      background: transparent !important;
      border-bottom: none !important;
      color: #233c53 !important;
    }

    body.chat-skin-blue-hour #page-chat .back-btn {
      color: #233c53 !important;
    }

    /* ==========================================
       🚀 聊天页专属：梦幻美乐蒂 (chat-skin-melody)
       ========================================== */
    body.chat-skin-melody #page-chat {
      background-image: url("https://i.ibb.co/Xnk9y1g/IMG-2775.jpg") !important;
      background-size: cover !important;
      background-position: center !important;
    }

    body.chat-skin-melody #chatBox {
      background: transparent !important;
    }

    body.chat-skin-melody .msg {
      border-radius: 18px !important;
      box-shadow: 0 3px 10px rgba(139, 100, 120, 0.07) !important;
      max-width: 240px !important;
      color: #58434e !important;
      border: none !important;
      position: relative !important;
    }

    body.chat-skin-melody .msg.bot {
      background: #fffafd !important;
    }

    body.chat-skin-melody .msg.user {
      background: #f9e4ee !important;
    }

    /* 气泡右上角/左上角小装饰图 */
    body.chat-skin-melody .msg.bot::after {
      content: "" !important;
      position: absolute !important;
      top: -13px !important;
      right: 7px !important;
      width: 29px !important;
      height: 24px !important;
      background: url("https://i.ibb.co/Vp9V6vpT/IMG-2834.png") no-repeat center / contain !important;
      z-index: 2 !important;
    }

    body.chat-skin-melody .msg.user::after {
      content: "" !important;
      position: absolute !important;
      top: -10px !important;
      left: -3px !important;
      width: 27px !important;
      height: 22px !important;
      background: url("https://i.ibb.co/Vp9V6vpT/IMG-2834.png") no-repeat center / contain !important;
      z-index: 2 !important;
    }

    /* 头像边框替换 */
    body.chat-skin-melody .avatar {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      position: relative !important;
    }

    body.chat-skin-melody .avatar::before {
      content: "" !important;
      position: absolute !important;
      inset: -6px !important;
      background: url("https://i.ibb.co/SXZwcF6r/IMG-2846.png") no-repeat center / contain !important;
      z-index: 10 !important;
      pointer-events: none !important;
    }

    /* 输入框与底栏 */
    body.chat-skin-melody .input-area {
      background: rgba(255, 247, 251, 0.96) !important;
      border-top: none !important;
    }

    body.chat-skin-melody #msgInput {
      background: #fffafd !important;
      border: 1px solid #d9b4c6 !important;
      border-radius: 12px !important;
      color: #58434e !important;
    }

    /* 按钮图标替换 */
    body.chat-skin-melody #sendBtn,
    body.chat-skin-melody #emojiBtn,
    body.chat-skin-melody #moreBtn {
      background-color: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    body.chat-skin-melody #sendBtn svg,
    body.chat-skin-melody #emojiBtn svg,
    body.chat-skin-melody #moreBtn svg {
      display: none !important;
    }

    body.chat-skin-melody #sendBtn {
      background-image: url("https://i.ibb.co/GQgQcczC/IMG-2833.png") !important;
    }

    body.chat-skin-melody #emojiBtn {
      background-image: url("https://i.ibb.co/FbzySzcB/IMG-2818.png") !important;
    }

    body.chat-skin-melody #moreBtn {
      background-image: url("https://i.ibb.co/4w5CGjgB/IMG-2835.png") !important;
    }

    /* 底栏图标替换 */
    body.chat-skin-melody .wechat-bottom-nav {
      background: #fff9fc !important;
      border-top: none !important;
    }

    body.chat-skin-melody .wechat-bottom-nav .nav-item svg {
      display: none !important;
    }

    body.chat-skin-melody .wechat-bottom-nav .nav-item span {
      color: #806070 !important;
      margin-top: 4px;
    }

    body.chat-skin-melody .wechat-bottom-nav .nav-item.active span {
      color: #75415b !important;
      font-weight: 600;
    }

    body.chat-skin-melody .wechat-bottom-nav .nav-item[data-tab="msg"] {
      background: url("https://i.ibb.co/tTP0HyCV/IMG-2803.png") no-repeat center 6px / 32px 32px !important;
    }

    body.chat-skin-melody .wechat-bottom-nav .nav-item[data-tab="contact"] {
      background: url("https://i.ibb.co/Y73f0thw/IMG-2816.png") no-repeat center 6px / 32px 32px !important;
    }

    body.chat-skin-melody .wechat-bottom-nav .nav-item[data-tab="discover"] {
      background: url("https://i.ibb.co/NnGMMGq5/IMG-2815.png") no-repeat center 6px / 32px 32px !important;
    }

    body.chat-skin-melody .wechat-bottom-nav .nav-item[data-tab="me"] {
      background: url("https://i.ibb.co/gZxZKPrb/IMG-2802.png") no-repeat center 6px / 32px 32px !important;
    }

    /* 顶栏 */
    body.chat-skin-melody #page-chat .page-header {
      background: transparent !important;
      border-bottom: none !important;
      color: #58434e !important;
    }

    body.chat-skin-melody #page-chat .back-btn {
      color: #58434e !important;
    }

    /* ==========================================
       🚀 聊天页专属：青苹果 (chat-skin-apple)
       ========================================== */
    body.chat-skin-apple #page-chat {
      background: linear-gradient(180deg, #F4FAE4 0%, #E8F5C8 100%) !important;
    }

    body.chat-skin-apple #chatBox {
      background: transparent !important;
    }

    body.chat-skin-apple .msg.bot {
      background: #FFFFFF !important;
      color: #4A5A1E !important;
      border: 1.5px solid #C0D85B !important;
      border-radius: 18px 18px 18px 4px !important;
      box-shadow: 0 4px 14px rgba(150, 202, 0, 0.15) !important;
    }

    body.chat-skin-apple .msg.user {
      background: linear-gradient(135deg, #C0D85B 0%, #96CA00 100%) !important;
      color: #FFFFFF !important;
      border-radius: 18px 18px 4px 18px !important;
      box-shadow: 0 4px 14px rgba(150, 202, 0, 0.25) !important;
    }

    body.chat-skin-apple .avatar {
      border: 2px solid #C0D85B !important;
      box-shadow: 0 0 0 3px rgba(192, 216, 91, 0.25) !important;
    }

    body.chat-skin-apple .narratage {
      color: #7A8F3A !important;
      font-style: italic;
    }

    body.chat-skin-apple .input-area {
      background: rgba(244, 250, 228, 0.92) !important;
      border-top: 1.5px solid #C0D85B !important;
      backdrop-filter: blur(16px) !important;
    }

    body.chat-skin-apple #msgInput {
      background: #FFFFFF !important;
      border: 1.5px solid #C0D85B !important;
      border-radius: 22px !important;
      color: #4A5A1E !important;
    }

    body.chat-skin-apple #sendBtn {
      background: linear-gradient(135deg, #C0D85B 0%, #96CA00 100%) !important;
      color: #fff !important;
      border-radius: 50% !important;
      box-shadow: 0 3px 10px rgba(150, 202, 0, 0.3) !important;
    }

    body.chat-skin-apple #page-chat .page-header {
      background: rgba(244, 250, 228, 0.9) !important;
      border-bottom: 1.5px solid #C0D85B !important;
    }

    /* 限制桌面宽度，让排版紧凑 */
    .home-page-container {
      max-width: 600px !important;
      margin: 0 auto !important;
    }

    /* 限制底栏宽度，居中显示 */
    .dock {
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: calc(100% - 24px) !important;
      max-width: 600px !important;
    }

    /* ==========================================
   🚀 外部神仙皮肤移植包
   ========================================== */
    /* ================= 皮肤 2：飘雪动态 ================= */
    /* 飘雪动画 */
    @keyframes qiu-snowfall {
      0% {
        background-position: 0px 0px, 0px 0px;
      }

      100% {
        background-position: 60px 600px, -40px 400px;
      }
    }

    body.chat-skin-snow #page-chat {
      /* 使用原图的绝美风景背景 */
      background-image: url("https://image.arityflow.top/uploads/2026/10/6ad34409722592.64652324_58b382dd.jpg") !important;
      background-size: cover !important;
      background-position: center !important;
      position: relative !important;
    }

    body.chat-skin-snow #chatBox {
      background: transparent !important;
      position: relative !important;
      z-index: 1 !important;
    }

    /* 动态飘雪层 */
    body.chat-skin-snow #page-chat::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      pointer-events: none !important;
      z-index: 0 !important;
      background-image:
        radial-gradient(2.5px 2.5px at 15% 10%, rgba(255, 255, 255, 0.85) 50%, transparent 100%),
        radial-gradient(2px 2px at 45% 28%, rgba(255, 255, 255, 0.75) 50%, transparent 100%),
        radial-gradient(3px 3px at 78% 18%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 25% 55%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 62% 68%, rgba(255, 255, 255, 0.85) 50%, transparent 100%),
        radial-gradient(2px 2px at 88% 82%, rgba(255, 255, 255, 0.75) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 88%, rgba(255, 255, 255, 0.65) 50%, transparent 100%) !important;
      background-size: 300px 600px, 220px 400px !important;
      background-repeat: repeat !important;
      animation: qiu-snowfall 12s linear infinite !important;
    }

    /* 气泡：极度通透的毛玻璃 */
    body.chat-skin-snow .msg {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(238, 242, 248, 0.28)) !important;
      backdrop-filter: blur(12px) saturate(135%) !important;
      -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
      border: 1px solid rgba(255, 255, 255, 0.48) !important;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.55) !important;
      color: #1e242b !important;
      border-radius: 16px 16px 16px 4px !important;
    }

    body.chat-skin-snow .msg.user {
      background: linear-gradient(135deg, rgba(225, 234, 246, 0.44), rgba(205, 218, 235, 0.28)) !important;
      border-radius: 16px 16px 4px 16px !important;
      color: #1a222c !important;
    }

    /* 顶栏与底栏：灰色磨砂 */
    body.chat-skin-snow #page-chat .page-header {
      background: rgba(220, 224, 230, 0.85) !important;
      backdrop-filter: blur(8px) !important;
      border-bottom: none !important;
    }

    body.chat-skin-snow .input-area {
      background: rgba(220, 224, 230, 0.8) !important;
      backdrop-filter: blur(8px) !important;
      border-top: none !important;
    }

    body.chat-skin-snow #msgInput {
      background: rgba(255, 255, 255, 0.6) !important;
      border: 1px solid rgba(255, 255, 255, 0.8) !important;
      backdrop-filter: blur(5px) !important;
    }

    /* 头像：圆角矩形加白边 */
    body.chat-skin-snow .avatar {
      border-radius: 8px !important;
      border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    }

    /* ==========================================
   🚀 终极优化补丁：丝滑过渡 & 样式隔离
   ========================================== */

    /* 1. 丝滑过渡：让气泡、头像、输入框、顶栏在切换皮肤时“慢慢变装” */
    .msg,
    .avatar,
    .page-header,
    .input-area,
    #msgInput,
    .narratage,
    .msg.call-bubble {
      transition: background 0.4s ease,
        background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        backdrop-filter 0.4s ease !important;
    }

    /* 页面切换时的淡入淡出动画 */
    .page.active {
      animation: pageFadeIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    @keyframes pageFadeIn {
      from {
        opacity: 0.3;
      }

      to {
        opacity: 1;
      }
    }

    /* 2. 强制作用域隔离：确保所有聊天皮肤只影响聊天页，绝不污染全局 */
    /* 无论你切什么皮肤，朋友圈、通讯录的底色永远由全局主题控制 */
    body[class*="chat-skin-"] #page-chat {
      /* 允许皮肤修改聊天页的底色 */
      background-color: inherit;
    }

    /* 彻底拦截飘雪、萌物等皮肤的越权行为 */
    body[class*="chat-skin-"] #page-moments,
    body[class*="chat-skin-"] #page-chars,
    body[class*="chat-skin-"] #page-settings,
    body[class*="chat-skin-"] .home-screen {
      /* 这些页面不仅不需要飘雪动画，背景也强制恢复为原本的全局主题背景 */
      background-image: none !important;
      /* 如果你有全局自定义背景，这里会冲突，可以改成 inherit */
      animation: none !important;
    }

    /* ================= 视频通话专属样式 ================= */
    #videoCallScreen {
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 10000;
      display: none;
      flex-direction: column;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
      color: #fff;
      overflow: hidden;
    }

    #videoCallScreen.show {
      display: flex;
    }

    /* 模拟对方的全屏画面 */
    #videoCallRemoteBg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: background 0.5s ease;
      z-index: 1;
    }

    /* 画面暗角，让文字更清晰 */
    #videoCallRemoteBg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 20%, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
    }

    /* 你的画中画（右上角小窗） */
    #videoCallLocalWindow {
      position: absolute;
      top: calc(20px + env(safe-area-inset-top));
      right: 20px;
      width: 100px;
      height: 140px;
      background: #333;
      border-radius: 12px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
      z-index: 2;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #videoCallLocalWindow img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 字幕区 */
    #videoCallSubtitles {
      position: absolute;
      bottom: 150px;
      left: 20px;
      right: 20px;
      text-align: center;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none;
    }

    .video-subtitle-bubble {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(5px);
      padding: 10px 16px;
      border-radius: 16px;
      font-size: 15px;
      line-height: 1.5;
      color: #fff;
      display: inline-block;
      margin: 0 auto;
      max-width: 85%;
      animation: fadeIn 0.3s ease;
    }

    /* 底部操作栏 */
    #videoCallControls {
      position: absolute;
      bottom: calc(30px + env(safe-area-inset-bottom));
      left: 0;
      right: 0;
      z-index: 3;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    .vc-btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      color: #fff;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s;
    }

    .vc-btn:active {
      transform: scale(0.9);
    }

    .vc-btn.hangup {
      background: #ff3b30;
      width: 70px;
      height: 70px;
      font-size: 28px;
    }