@import url('assets/vendor/css2-138026d656.css');

    :root {
      /* Viewport sizing (Android/iOS full-height without vh bugs) */
      --app-height: 100vh;
      --app-width: 100vw;

      /* 🔥 顶栏全局Padding管理系统 */
      --custom-top-offset: 0px; /* 用户自定义偏移量（通过设置调整） */
      --base-top-padding: 12px; /* 基础顶部padding */
      --safe-area-top: env(safe-area-inset-top, 0px); /* 安全区域（刘海屏） */
      --total-top-padding: calc(var(--base-top-padding) + var(--safe-area-top) + var(--custom-top-offset)); /* 总padding */

      /* App Header专用（通常更大） */
      --app-header-base-padding: 40px; /* App Header基础padding */
      --app-header-total-padding: calc(var(--app-header-base-padding) + var(--safe-area-top) + var(--custom-top-offset)); /* App Header总padding */

      /* Light Mode Colors - 温度模块清爽配色 */
      --bg-primary: #ffffff;
      --bg-secondary: #fafafa;
      --bg-tertiary: #f5f5f5;
      --text-primary: #000000;
      --text-secondary: #666666;
      --text-tertiary: #888888;
      --border-color: #e0e0e0;
      --post-separator: #00000008;
      --progress-bg: rgba(0, 0, 0, 0.1);
      --progress-fill: rgba(0, 0, 0, 0.8);
      --accent-color: #000000;
      --badge-color: var(--accent-color);
      --badge-text-color: var(--bg-primary);
      --hover-bg: #fafafa;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
      --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

      /* 手机颜色专用变量 - 优先级高于主题系统 */
      --phone-frame-color: #1a1a1a;
      --phone-notch-color: #0a0a0a;
      --phone-island-color: #1a1a1a;
      --home-app-label-color: var(--text-secondary);

      /* 日记本变量 - Light Mode */
      --diary-cover: #f0ede8;
      --diary-cover-accent: rgba(0,0,0,0.06);
      --diary-cover-text: #2a2a2a;
      --diary-cover-text-sub: rgba(0,0,0,0.45);
      --diary-cover-border: rgba(0,0,0,0.08);
      --diary-cover-star: rgba(0,0,0,0.15);
      --diary-spine: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.04) 50%, rgba(255,255,255,0.2) 100%);
      --diary-spine-inner: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, transparent 50%, rgba(255,255,255,0.08) 100%);
      --diary-page: #fdfcfa;
      --diary-line: rgba(0,0,0,0.05);
      --diary-text: #2a2a2a;
      --diary-text-light: #666666;
      --diary-ink-1: #000000;
      --diary-ink-2: #4a4a4a;
      --diary-ink-3: #7a7a7a;
      --sticky-bg-1: rgba(255,250,205,0.92);
      --sticky-border-1: #d4b800;
      --sticky-bg-2: rgba(255,228,235,0.92);
      --sticky-border-2: #c44569;
      --sticky-bg-3: rgba(230,240,255,0.92);
      --sticky-border-3: #5588cc;

      /* SMS Detail 短信详情页变量 - Light Mode */
      --sms-bg: #e5e5e5;
      --sms-bg-pattern: linear-gradient(180deg, #ededed 0%, #e0e0e0 100%);
      --sms-header-bg: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
      --sms-header-border: #b8b8b8;
      --sms-header-text: #1a1a1a;
      --sms-input-bg: #ffffff;
      --sms-input-border: #c0c0c0;
      --sms-send-bg: linear-gradient(180deg, #f0f0f0 0%, #d8d8d8 100%);
      --sms-send-text: #1a1a1a;
      --sms-bubble-user: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
      --sms-bubble-user-text: #ffffff;
      --sms-bubble-other: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
      --sms-bubble-other-text: #1a1a1a;
      --sms-bubble-shadow: 0 1px 2px rgba(0,0,0,0.15);
      --sms-time-text: #666666;
      --sms-date-bg: rgba(0,0,0,0.06);
      --sms-date-text: #555555;
      --sms-typing-dot: #888888;
    }

    @supports (height: 100svh) {
      :root { --app-height: 100svh; }
    }

    @supports (height: 100dvh) {
      :root { --app-height: 100dvh; }
    }

    [data-theme='dark'] {
      /* Dark Mode Colors - 温度模块清爽配色 */
      --bg-primary: #0a0a0a;
      --bg-secondary: #0f0f0f;
      --bg-tertiary: #141414;
      --text-primary: #ffffff;
      --text-secondary: #888888;
      --text-tertiary: #666666;
      --border-color: #2a2a2a;
      --post-separator: #262626;
      --progress-bg: rgba(255, 255, 255, 0.15);
      --progress-fill: rgba(255, 255, 255, 0.9);
      --accent-color: #ffffff;
      --hover-bg: #141414;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
      --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.9);

      /* 日记本变量 - Dark Mode */
      --diary-cover: #141414;
      --diary-cover-accent: rgba(255,255,255,0.04);
      --diary-cover-text: #e0e0e0;
      --diary-cover-text-sub: rgba(255,255,255,0.4);
      --diary-cover-border: rgba(255,255,255,0.08);
      --diary-cover-star: rgba(255,255,255,0.2);
      --diary-spine: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 50%, rgba(255,255,255,0.03) 100%);
      --diary-spine-inner: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, transparent 50%, rgba(255,255,255,0.02) 100%);
      --diary-page: #1a1a1a;
      --diary-line: rgba(255,255,255,0.04);
      --diary-text: #d0d0d0;
      --diary-text-light: #808080;
      --diary-ink-1: #e0e0e0;
      --diary-ink-2: #888888;
      --diary-ink-3: #707070;
      --sticky-bg-1: rgba(80,75,40,0.92);
      --sticky-border-1: #8a7800;
      --sticky-bg-2: rgba(80,50,60,0.92);
      --sticky-border-2: #8a3550;
      --sticky-bg-3: rgba(45,55,75,0.92);
      --sticky-border-3: #3568aa;

      /* SMS Detail 短信详情页变量 - Dark Mode */
      --sms-bg: #0a0a0a;
      --sms-bg-pattern: linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%);
      --sms-header-bg: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
      --sms-header-border: #2a2a2a;
      --sms-header-text: #ffffff;
      --sms-input-bg: #1a1a1a;
      --sms-input-border: #333333;
      --sms-send-bg: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
      --sms-send-text: #ffffff;
      --sms-bubble-user: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
      --sms-bubble-user-text: #0a0a0a;
      --sms-bubble-other: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
      --sms-bubble-other-text: #e0e0e0;
      --sms-bubble-shadow: 0 1px 3px rgba(0,0,0,0.5);
      --sms-time-text: #666666;
      --sms-date-bg: rgba(255,255,255,0.06);
      --sms-date-text: #888888;
      --sms-typing-dot: #666666;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    /* 防止页面滚动条出现导致偏移 */
    html {
      overflow: hidden;
      height: 100%;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-secondary);
      color: var(--text-primary);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin: 0;
      overflow: hidden;
      transition: background 0.3s ease, color 0.3s ease;
    }

    button,
    input,
    textarea,
    select {
      font-family: inherit;
    }

    /* Phone Container - 全屏设计 */
    .phone-container {
      width: 100%; /* 修复：使用 100% 而非 100vw，避免滚动条宽度导致页面偏移 */
      height: 100vh;
      max-width: 430px;
      max-height: 932px;
      background: var(--phone-frame-color);
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-xl);
    }

    /* 手机边框效果 - 已移除多余的border细线 */
    .phone-frame {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* 这条1px的border看着很突兀，跟手机框不是一体的，已删除 */
      pointer-events: none;
      z-index: 9999;
    }

    /* 刘海屏设计 - 备份版本简单方式 */
    .notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 160px;
      height: 32px;
      background: var(--phone-notch-color);
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 20px;
    }

    .notch::before {
      content: '';
      width: 12px;
      height: 12px;
      background: var(--bg-tertiary);
      border-radius: 50%;
      border: 1px solid var(--border-color);
    }

    .notch::after {
      content: '';
      width: 80px;
      height: 6px;
      background: var(--bg-tertiary);
      border-radius: 3px;
      border: 1px solid var(--border-color);
    }

    /* Screen Content */
    .screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg-primary);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 10;
    }

    /* Boot Animation */
    .boot-screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: var(--bg-primary);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 9000;
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .boot-screen.hidden {
      opacity: 0;
      pointer-events: none;
    }

    /* 默认开机动画 - 三点加载样式 */
    .boot-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-bottom: 12px;
    }

    .boot-dot {
      width: 6px;
      height: 6px;
      background: var(--text-primary);
      border-radius: 50%;
      animation: bootDotPulse 1.4s ease-in-out infinite;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    }

    @media (prefers-color-scheme: dark) {
      .boot-dot {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
      }
    }

    .boot-dot:nth-child(1) {
      animation-delay: 0s;
    }

    .boot-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .boot-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes bootDotPulse {
      0%, 80%, 100% {
        transform: scale(0.5);
        opacity: 0.3;
      }
      40% {
        transform: scale(1.2);
        opacity: 1;
      }
    }

    .boot-text {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-primary);
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      letter-spacing: 0.15em;
      animation: bootTextFade 2s ease-in-out infinite;
      font-family: 'JetBrains Mono', monospace;
    }

    @media (prefers-color-scheme: dark) {
      .boot-text {
        text-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
      }
    }

    @keyframes bootTextFade {
      0%, 100% {
        opacity: 0.4;
      }
      50% {
        opacity: 1;
      }
    }

    /* 开机动画容器控制 */
    .boot-anim {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .boot-anim.active {
      display: flex;
    }

    /* Default开机动画样式 - 无背景，使用boot-screen的壁纸 */
    .boot-anim-default {
      /* 透明背景，显示壁纸 */
    }

    /* Blog开机动画样式 - 无背景，使用boot-screen的壁纸 */
    .boot-anim-blog {
      /* 透明背景，显示壁纸 */
      position: relative;
      overflow: hidden;
    }

    .boot-blog-container {
      width: 75%;
      max-width: 300px;
      background: white;
      border-radius: 20px 4px 20px 4px;
      padding: 24px 18px;
      box-shadow: 0 15px 50px rgba(0,0,0,0.15);
      position: relative;
      animation: blogCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @media (prefers-color-scheme: dark) {
      .boot-blog-container {
        background: #141414;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      }
    }

    @keyframes blogCardIn {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .boot-blog-date {
      font-size: 10px;
      color: #999;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
      font-family: 'Courier New', monospace;
      animation: fadeInUp 0.6s 0.3s both;
    }

    .boot-blog-title {
      font-size: 19px;
      font-weight: 600;
      color: #000000;
      margin-bottom: 10px;
      font-family: Georgia, serif;
      line-height: 1.3;
      animation: typewriter 1.2s 0.5s steps(20) both;
      overflow: hidden;
      white-space: nowrap;
      border-right: 2px solid #000000;
    }

    @media (prefers-color-scheme: dark) {
      .boot-blog-title {
        color: #e5e5e5;
        border-right-color: #e5e5e5;
      }
    }

    @keyframes typewriter {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }

    .boot-blog-tags {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
      animation: fadeInUp 0.6s 0.8s both;
    }

    .boot-blog-tag {
      padding: 3px 10px;
      background: #f0f0f0;
      border-radius: 10px 2px 10px 2px;
      font-size: 9px;
      color: #666;
      letter-spacing: 0.3px;
    }

    @media (prefers-color-scheme: dark) {
      .boot-blog-tag {
        background: #2a2a2a;
        color: #999;
      }
    }

    .boot-blog-loading {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: #999;
      animation: fadeInUp 0.6s 1s both;
    }

    .boot-blog-dots {
      display: flex;
      gap: 3px;
    }

    .boot-blog-dot {
      width: 3px;
      height: 3px;
      background: #999;
      border-radius: 50%;
      animation: dotPulse 1.4s infinite;
    }

    .boot-blog-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .boot-blog-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes dotPulse {
      0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1.2);
      }
    }

    .boot-blog-stars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .boot-blog-star {
      position: absolute;
      width: 5px;
      height: 5px;
      background: rgba(0, 0, 0, 0.08);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: starFloat 3s infinite;
    }

    @media (prefers-color-scheme: dark) {
      .boot-blog-star {
        background: rgba(255, 255, 255, 0.08);
      }
    }

    .boot-blog-star:nth-child(1) {
      top: 10%;
      left: 15%;
      animation-delay: 0s;
      animation-duration: 2.5s;
    }

    .boot-blog-star:nth-child(2) {
      top: 20%;
      right: 10%;
      animation-delay: 0.5s;
      animation-duration: 3s;
    }

    .boot-blog-star:nth-child(3) {
      bottom: 15%;
      left: 10%;
      animation-delay: 1s;
      animation-duration: 2.8s;
    }

    .boot-blog-star:nth-child(4) {
      bottom: 25%;
      right: 20%;
      animation-delay: 1.5s;
      animation-duration: 3.2s;
    }

    @keyframes starFloat {
      0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
      }
      50% {
        transform: translateY(-10px) rotate(180deg);
        opacity: 0.8;
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Ring开机动画样式 - 无背景，使用boot-screen的壁纸 */
    .boot-anim-ring {
      /* 透明背景，显示壁纸 */
    }

    .boot-ring-wrapper {
      position: relative;
      width: 140px;
      height: 140px;
      animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .boot-ring-circle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid rgba(0, 0, 0, 0.08);
      border-radius: 50%;
    }

    @media (prefers-color-scheme: dark) {
      .boot-ring-circle {
        border-color: rgba(255, 255, 255, 0.08);
      }
    }

    .boot-ring-progress {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid var(--text-primary);
      border-radius: 50%;
      border-right-color: transparent;
      border-bottom-color: transparent;
      animation: ringRotate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes ringRotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .boot-ring-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .boot-ring-text {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 6px;
      letter-spacing: 1px;
      animation: fadeInUp 0.6s 0.3s both;
    }

    .boot-ring-subtext {
      font-size: 10px;
      color: var(--text-secondary);
      font-family: 'Courier New', monospace;
      animation: fadeInUp 0.6s 0.5s both;
    }

    .boot-ring-dots-outer {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 110px;
      height: 110px;
      margin-left: -55px;
      margin-top: -55px;
    }

    .boot-ring-dot {
      position: absolute;
      width: 3px;
      height: 3px;
      background: var(--text-secondary);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      margin-left: -1.5px;
      margin-top: -1.5px;
    }

    .boot-ring-dot:nth-child(1) {
      transform: rotate(0deg) translateX(55px);
      animation: dotFade 2s 0s infinite;
    }

    .boot-ring-dot:nth-child(2) {
      transform: rotate(60deg) translateX(55px);
      animation: dotFade 2s 0.2s infinite;
    }

    .boot-ring-dot:nth-child(3) {
      transform: rotate(120deg) translateX(55px);
      animation: dotFade 2s 0.4s infinite;
    }

    .boot-ring-dot:nth-child(4) {
      transform: rotate(180deg) translateX(55px);
      animation: dotFade 2s 0.6s infinite;
    }

    .boot-ring-dot:nth-child(5) {
      transform: rotate(240deg) translateX(55px);
      animation: dotFade 2s 0.8s infinite;
    }

    .boot-ring-dot:nth-child(6) {
      transform: rotate(300deg) translateX(55px);
      animation: dotFade 2s 1s infinite;
    }

    @keyframes dotFade {
      0%, 100% {
        opacity: 0.2;
        transform: rotate(var(--rotate, 0deg)) translateX(55px) scale(0.8);
      }
      50% {
        opacity: 1;
        transform: rotate(var(--rotate, 0deg)) translateX(55px) scale(1.2);
      }
    }

    /* Pulse开机动画样式 - 无背景，使用boot-screen的壁纸 */
    .boot-anim-pulse {
      /* 透明背景，显示壁纸 */
    }

    .boot-pulse-container {
      position: relative;
      width: 150px;
      height: 150px;
    }

    .boot-pulse-square {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      margin-left: -30px;
      margin-top: -30px;
      border: 2px solid var(--text-primary);
      border-radius: 12px 2px 12px 2px;
      animation: squarePulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes squarePulse {
      0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
      50% {
        transform: scale(1.3) rotate(90deg);
        opacity: 0.6;
      }
    }

    .boot-pulse-square-2 {
      animation-delay: 0.3s;
      width: 44px;
      height: 44px;
      margin-left: -22px;
      margin-top: -22px;
      border-radius: 9px 2px 9px 2px;
    }

    .boot-pulse-square-3 {
      animation-delay: 0.6s;
      width: 28px;
      height: 28px;
      margin-left: -14px;
      margin-top: -14px;
      border-radius: 6px 1px 6px 1px;
    }

    .boot-pulse-text-wrapper {
      position: absolute;
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      width: 150px;
    }

    .boot-pulse-text {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 6px;
      letter-spacing: 2px;
      animation: fadeInUp 0.6s 0.5s both;
    }

    .boot-pulse-progress {
      width: 100%;
      height: 2px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 1px;
      overflow: hidden;
      animation: fadeInUp 0.6s 0.7s both;
    }

    @media (prefers-color-scheme: dark) {
      .boot-pulse-progress {
        background: rgba(255, 255, 255, 0.08);
      }
    }

    .boot-pulse-progress-bar {
      height: 100%;
      background: var(--text-primary);
      border-radius: 1px;
      animation: progressGrow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes progressGrow {
      0% {
        width: 0%;
      }
      50% {
        width: 70%;
      }
      100% {
        width: 100%;
      }
    }

    .boot-pulse-corners {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      margin-left: -50px;
      margin-top: -50px;
    }

    .boot-pulse-corner {
      position: absolute;
      width: 10px;
      height: 10px;
      border: 2px solid var(--text-secondary);
    }

    .boot-pulse-corner:nth-child(1) {
      top: 0;
      left: 0;
      border-right: none;
      border-bottom: none;
      border-radius: 4px 0 0 0;
      animation: cornerPulse 2s 0s infinite;
    }

    .boot-pulse-corner:nth-child(2) {
      top: 0;
      right: 0;
      border-left: none;
      border-bottom: none;
      border-radius: 0 4px 0 0;
      animation: cornerPulse 2s 0.5s infinite;
    }

    .boot-pulse-corner:nth-child(3) {
      bottom: 0;
      right: 0;
      border-left: none;
      border-top: none;
      border-radius: 0 0 4px 0;
      animation: cornerPulse 2s 1s infinite;
    }

    .boot-pulse-corner:nth-child(4) {
      bottom: 0;
      left: 0;
      border-right: none;
      border-top: none;
      border-radius: 0 0 0 4px;
      animation: cornerPulse 2s 1.5s infinite;
    }

    @keyframes cornerPulse {
      0%, 100% {
        opacity: 0.3;
      }
      50% {
        opacity: 1;
      }
    }

    /* Home Screen */
    .home-screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden; /* 防止内部组件溢出导致页面拉宽 */
      opacity: 0;
      animation: fadeIn 0.5s ease 2.2s forwards;
    }

    @keyframes fadeIn {
      to { opacity: 1; }
    }

    /* Status Bar */
    .status-bar {
      /* 高度需要考虑safe-area */
      height: calc(44px + var(--safe-area-top) + var(--custom-top-offset));
      padding: 0 24px;
      /* 🔥 使用全局顶栏padding变量 */
      padding-top: var(--total-top-padding);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
      position: relative;
      z-index: 100;
    }

    .status-left, .status-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    /* Clock Widget - 自适应网格大小 */
    .clock-widget {
      padding: 0;
      text-align: center;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .clock-time {
      font-size: clamp(36px, 8vw, 64px);
      font-weight: 200;
      letter-spacing: -2px;
      line-height: 1;
      font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    }

    .clock-date {
      font-size: clamp(12px, 3vw, 15px);
      color: var(--text-secondary);
      font-weight: 400;
      margin-top: 4px;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    /* App Grid - 32网格系统（8行×4列）*/
    .app-grid {
      flex: 1;
      padding: 20px;
      display: grid;
      /* 关键修复：允许网格项在小屏下收缩，避免被小组件/min-content 撑到横向溢出导致“整体右移” */
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(8, auto);
      gap: 16px;
      align-content: start;
      justify-items: center;
      overflow-x: hidden; /* 防止4x2组件等溢出导致页面拉宽 */
      overflow-y: auto;
      scrollbar-width: none;
      box-sizing: border-box;
      /* 防止加载时闪烁 */
      will-change: contents;
      min-width: 0;
    }

    /* 关键修复：Grid/Flex 子项默认 min-width:auto 可能导致撑爆；统一允许收缩 */
    .app-grid > * {
      min-width: 0;
      min-height: 0;
    }

    /* 🧭 Desktop Pager（双桌面）：默认隐藏，横向滑动/切换时短暂出现（INS / iOS小巧风格） */
    #desktopPagerIndicator {
      position: absolute;
      left: 50%;
      bottom: 110px; /* Dock上方 */
      z-index: 150;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(20, 20, 20, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);

      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%);
      transition: opacity 180ms ease;
      user-select: none;
      -webkit-user-select: none;
    }

    #desktopPagerIndicator.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%);
    }

    /* 覆盖通用 dot 样式：更小更 iOS */
    #desktopPagerIndicator .tgd-page-dot {
      width: 6px;
      height: 6px;
      opacity: 0.55;
      background: rgba(255, 255, 255, 0.38);
      transition: transform 200ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 200ms ease, background 200ms ease;
    }

    #desktopPagerIndicator .tgd-page-dot.active {
      opacity: 1;
      background: rgba(255, 255, 255, 0.95);
      transform: scale(1.35);
    }

    .app-grid::-webkit-scrollbar {
      display: none;
    }

    .home-screen.drag-lock,
    #homeScreen.drag-lock,
    .app-grid.drag-lock {
      touch-action: none;
    }

    /* Grid Cell - 每个网格单元（正方形）*/
    .grid-cell {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      transition: background 0.2s ease;
      box-sizing: border-box;
    }

    .app-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      animation: fadeInUp 0.5s ease backwards;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .app-icon:nth-child(1) { animation-delay: 2.5s; }
    .app-icon:nth-child(2) { animation-delay: 2.6s; }
    .app-icon:nth-child(3) { animation-delay: 2.7s; }
    .app-icon:nth-child(4) { animation-delay: 2.8s; }
    .app-icon:nth-child(5) { animation-delay: 2.9s; }
    .app-icon:nth-child(6) { animation-delay: 3.0s; }
    .app-icon:nth-child(7) { animation-delay: 3.1s; }
    .app-icon:nth-child(8) { animation-delay: 3.2s; }

    /* 首次开机可用入场动画；后续重渲染/切页不再跑延迟动画（避免切桌面时“消失等待”） */
    .app-grid.no-entrance .app-icon {
      animation: none !important;
      animation-delay: 0s !important;
    }

    /* 编辑模式 */
    .app-grid.edit-mode .app-icon {
      animation: wiggle 0.3s ease-in-out infinite alternate !important;
    }

    /* 自动移位动画期间暂时停掉抖动，避免 transform 冲突 */
    .app-grid.reflow-animating .app-icon,
    .app-grid.reflow-animating .desktop-widget {
      animation: none !important;
    }

    /* 拖动中也停止抖动，避免 transform 冲突 */
    .app-grid.edit-mode .app-icon.dragging,
    .app-grid.edit-mode .desktop-widget.dragging {
      animation: none !important;
    }

    /* 抖动动画 - iOS风格 */
    @keyframes wiggle {
      0% {
        transform: rotate(-1.5deg) translateY(-1px);
      }
      100% {
        transform: rotate(1.5deg) translateY(1px);
      }
    }

    /* 拖动中的图标样式 */
    .app-icon.dragging {
      opacity: 0.95;
      z-index: 10000;
      pointer-events: none;
      filter: none;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
      transition: none;
    }

    /* 拖拽抬起动画 */
    @keyframes dragLift {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.12);
      }
      100% {
        transform: scale(1.08);
      }
    }

    /* 占位符效果 */
    .grid-cell.drag-over {
      background: var(--bg-tertiary);
      border-radius: 16px;
      border: 2px dashed var(--accent-color);
      opacity: 0.5;
    }

    /* 编辑模式指示器 - 已被WIDGETS按钮替代，隐藏此元素 */
    .edit-mode-indicator {
      display: none !important;
      position: fixed;
      bottom: 120px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--accent-color);
      color: var(--bg-primary);
      padding: 10px 24px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      z-index: 10001;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      font-family: 'Inter', sans-serif;
      backdrop-filter: blur(10px);
    }

    .edit-mode-indicator.active {
      opacity: 1;
      animation: slideUpBounce 0.4s ease;
    }

    /* 完成按钮 - 移到底栏上方右侧 */
    .edit-done-btn {
      position: fixed;
      bottom: 120px;
      right: 24px;
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      z-index: 10002;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      font-family: 'Inter', sans-serif;
      backdrop-filter: blur(10px);
    }

    .edit-done-btn.active {
      opacity: 1;
      pointer-events: auto;
      animation: slideUpBounceRight 0.4s ease 0.1s backwards;
    }

    .edit-done-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .edit-done-btn:active {
      transform: translateY(0);
    }

    /* 弹出动画 - 修复transform冲突 */
    @keyframes slideUpBounce {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
      }
      60% {
        transform: translateX(-50%) translateY(-5px);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }

    /* 完成按钮弹出动画 */
    @keyframes slideUpBounceRight {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      60% {
        transform: translateY(-5px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ========== 🎨 桌面美化系统样式 - INS风格 ========== */

    /* 添加组件按钮 - 胶囊异形设计 */
    .add-widget-btn {
      position: fixed;
      bottom: 115px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--text-primary);
      color: var(--bg-primary);
      border: none;
      padding: 10px 18px 10px 12px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      z-index: 10002;
      opacity: 0;
      pointer-events: none;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      font-family: -apple-system, 'SF Pro Display', sans-serif;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: 0.5px;
    }

    .add-widget-btn-icon {
      width: 26px;
      height: 26px;
      background: var(--bg-primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .add-widget-btn-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      stroke-width: 1.5;
    }

    .add-widget-btn-text {
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .add-widget-btn-star {
      font-size: 10px;
      opacity: 0.6;
      animation: starFloat 2s ease-in-out infinite;
    }

    @keyframes starFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
    }

    .add-widget-btn.active {
      opacity: 1;
      pointer-events: auto;
      animation: buttonPopIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    @keyframes buttonPopIn {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

    .add-widget-btn:hover {
      transform: translateX(-50%) translateY(-2px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    }

    .add-widget-btn:active {
      transform: translateX(-50%) scale(0.96);
    }

    /* 桌面组件基础样式 - 严格按网格大小 */
    .desktop-widget {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      max-height: 100%;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 音乐播放器组件 */
    .desktop-widget.widget-music .ipod-widget {
      width: 100%;
      height: 100%;
    }

    /* Album组件允许唱片溢出 */
    .desktop-widget.widget-album {
      overflow: visible;
    }

    /* 编辑模式下允许删除按钮溢出 */
    .app-grid.edit-mode .desktop-widget {
      overflow: visible;
    }

    /* 组件装饰角标 */
    .desktop-widget::before {
      content: '✦';
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 8px;
      color: var(--text-tertiary);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .desktop-widget:hover::before {
      opacity: 0.5;
    }

    .desktop-widget:hover {
      transform: scale(1.015);
      border-color: var(--text-tertiary);
    }


    /* 编辑模式下组件样式 */
    .app-grid.edit-mode .desktop-widget {
      animation: widgetWiggle 0.35s ease-in-out infinite alternate !important;
      touch-action: none;
    }


    @keyframes widgetWiggle {
      0% { transform: rotate(-0.5deg); }
      100% { transform: rotate(0.5deg); }
    }

    /* 组件占位符 - 黑白风格 */
    .widget-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      height: 100%;
      padding: 14px;
      text-align: center;
      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    }

    .widget-placeholder-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--text-primary);
      border-radius: 10px;
      opacity: 0.9;
    }

    .widget-placeholder-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--bg-primary);
      stroke-width: 1.5;
    }

    .widget-placeholder-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: -0.2px;
    }

    /* 组件错误状态 */
    .widget-error {
      background: rgba(255, 59, 48, 0.1);
      border: 1px dashed rgba(255, 59, 48, 0.3);
    }

    .widget-error .widget-placeholder-icon svg {
      stroke: #ff3b30;
    }

    .widget-error .widget-placeholder-name {
      color: #ff3b30;
    }

    /* 自定义组件内容容器 */
    .custom-widget-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 16px;
      position: relative;
    }

    .custom-widget-content * {
      box-sizing: border-box;
    }

    /* 自定义组件：可点击换图目标 */
    .custom-widget-content .cw-image-target {
      cursor: pointer;
    }

    /* 自定义组件：可点击编辑文字目标 */
    .custom-widget-content .cw-text-target {
      cursor: text;
    }

    /* 自定义组件类型标识 */
    .widget-custom {
      background: transparent;
      padding: 0;
      border: none;
    }

    .widget-custom::before {
      display: none;
    }

    /* ========== 时钟组件 - 2x2尺寸 ========== */
    .widget-clock {
      background: transparent;
      border: none;
      aspect-ratio: 1;
    }

    .widget-clock::before {
      display: none;
    }

    .widget-clock .clock-widget {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .widget-clock .clock-time {
      font-size: clamp(32px, 8vw, 48px);
      font-weight: 200;
      letter-spacing: -2px;
      font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
      color: var(--text-primary);
      line-height: 1;
      margin-bottom: 2px;
    }

    .widget-clock .clock-date {
      font-size: clamp(10px, 2.5vw, 12px);
      color: var(--text-secondary);
      font-weight: 400;
      letter-spacing: 0.3px;
    }

    /* ========== iOS音乐组件 - 4x2尺寸 ========== */
    .widget-music {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
    }

    .widget-music::before,
    .widget-music::after {
      display: none !important;
    }

    .ios-music-widget {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 14px;
      gap: 14px;
      background: #404040;
      border-radius: 22px;
      position: relative;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    }

    /* 磨砂质感 - 噪点层 */
    .ios-music-widget::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      opacity: 0.04;
      pointer-events: none;
      z-index: 1;
      border-radius: 22px;
    }

    /* 微光泽层 */
    .ios-music-widget::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
      pointer-events: none;
      z-index: 1;
      border-radius: 22px;
    }

    /* 专辑封面 */
    .ios-music-widget .music-album {
      width: 142px;
      height: 142px;
      flex-shrink: 0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      position: relative;
      z-index: 2;
    }

    .ios-music-widget .music-album img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* 右侧内容 */
    .ios-music-widget .music-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-width: 0;
      justify-content: space-between;
      padding: 6px 0;
      position: relative;
      z-index: 2;
    }

    /* 歌曲信息 */
    .ios-music-widget .music-info {
      text-align: center;
    }

    .ios-music-widget .music-title {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.3px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ios-music-widget .music-artist {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 控制按钮 */
    .ios-music-widget .music-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
    }

    .ios-music-widget .music-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.9);
      transition: transform 0.1s ease, opacity 0.1s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .ios-music-widget .music-btn:active {
      transform: scale(0.9);
      opacity: 0.6;
    }

    .ios-music-widget .music-btn.skip-btn svg {
      width: 36px;
      height: 36px;
      fill: currentColor;
    }

    .ios-music-widget .music-btn.play-btn svg {
      width: 48px;
      height: 48px;
      fill: currentColor;
    }

    /* 进度条区域 */
    .ios-music-widget .music-progress {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ios-music-widget .progress-track {
      flex: 1;
      height: 5px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2.5px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .ios-music-widget .progress-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 2.5px;
      transition: width 0.15s linear;
    }

    .ios-music-widget .music-time {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.55);
      font-variant-numeric: tabular-nums;
      min-width: 32px;
    }

    .ios-music-widget .music-time.current {
      text-align: right;
    }

    .ios-music-widget .music-time.total {
      text-align: left;
    }

    /* 专辑封面编辑提示 */
    .ios-music-widget .music-album {
      cursor: pointer;
    }

    .ios-music-widget .music-album-edit-hint {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s ease;
      border-radius: 10px;
    }

    .ios-music-widget .music-album-edit-hint svg {
      width: 32px;
      height: 32px;
      stroke: #fff;
      stroke-width: 2;
      fill: none;
    }

    .ios-music-widget .music-album:hover .music-album-edit-hint,
    .ios-music-widget .music-album:active .music-album-edit-hint {
      opacity: 1;
    }

    /* 歌曲名/歌手名可编辑样式 */
    .ios-music-widget .music-title,
    .ios-music-widget .music-artist {
      cursor: pointer;
      transition: background 0.15s ease;
      border-radius: 4px;
      padding: 2px 6px;
      margin: -2px -6px;
    }

    .ios-music-widget .music-title:hover,
    .ios-music-widget .music-artist:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .ios-music-widget .music-title:active,
    .ios-music-widget .music-artist:active {
      background: rgba(255, 255, 255, 0.15);
    }

    /* ========== 组件选择器 - INS风格重设计 ========== */

    /* 遮罩层 - 毛玻璃效果 */
    .widget-picker-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 20000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .widget-picker-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* 主面板 - 异形设计 */
    .widget-picker-sheet {
      width: 100%;
      max-width: 400px;
      max-height: 75vh;
      background: var(--bg-primary);
      border-radius: 28px 28px 0 0;
      padding: 0;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
      position: relative;
    }

    /* 装饰星星 */
    .widget-picker-sheet::before {
      content: '✦';
      position: absolute;
      top: 16px;
      right: 60px;
      font-size: 10px;
      color: var(--text-tertiary);
      opacity: 0.5;
      animation: starTwinkle 2s ease-in-out infinite;
    }

    .widget-picker-sheet::after {
      content: '✧';
      position: absolute;
      top: 24px;
      right: 45px;
      font-size: 8px;
      color: var(--text-tertiary);
      opacity: 0.3;
      animation: starTwinkle 2s ease-in-out infinite 0.5s;
    }

    @keyframes starTwinkle {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.2); }
    }

    .widget-picker-overlay.active .widget-picker-sheet {
      transform: translateY(0);
    }

    /* 顶部拖拽手柄 - 像素风格 */
    .widget-picker-handle {
      width: 40px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 14px auto 6px;
      position: relative;
    }

    /* 头部区域 */
    .widget-picker-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px 14px;
      border-bottom: 1px solid var(--border-color);
    }

    .widget-picker-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.3px;
      font-family: -apple-system, 'SF Pro Display', sans-serif;
    }

    /* 关闭按钮 - 异形胶囊设计 */
    .widget-picker-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .widget-picker-close:hover {
      background: var(--text-primary);
    }

    .widget-picker-close:hover svg {
      stroke: var(--bg-primary);
    }

    .widget-picker-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
      stroke-width: 2;
    }

    /* 内容区域 */
    .widget-picker-grid {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px 28px;
      scroll-behavior: smooth;
    }

    .widget-picker-grid::-webkit-scrollbar {
      width: 3px;
    }

    .widget-picker-grid::-webkit-scrollbar-track {
      background: transparent;
    }

    .widget-picker-grid::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 2px;
    }

    /* 分类区块 */
    .widget-picker-category {
      margin-bottom: 18px;
    }

    .widget-picker-category:last-child {
      margin-bottom: 0;
    }

    /* 分类标题 - 胶囊标签样式 */
    .widget-picker-category-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 10px;
      padding: 4px 10px;
      background: var(--bg-secondary);
      border-radius: 20px;
      border: 1px solid var(--border-color);
    }

    .widget-picker-category-title::before {
      content: '◆';
      font-size: 6px;
      opacity: 0.6;
    }

    /* 组件网格 - 紧凑布局 */
    .widget-picker-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* ========== 桌面预设（Widget Picker 内） ========== */
    .desktop-presets-row {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 4px 2px 2px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      /* 隐藏横向滚动条（保留滚动能力） */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge Legacy */
    }

    .desktop-presets-row::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .desktop-presets-row::-webkit-scrollbar-track {
      background: transparent;
    }

    .desktop-presets-row::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 2px;
    }

    .desktop-preset-card {
      position: relative;
      min-width: 148px;
      flex: 0 0 auto;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 12px 12px 12px;
      cursor: pointer;
      transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease;
      scroll-snap-align: start;
      overflow: hidden;
    }

    .desktop-preset-card:hover {
      background: var(--bg-tertiary);
      border-color: var(--text-tertiary);
    }

    .desktop-preset-card:active {
      transform: scale(0.985);
    }

    .desktop-preset-card.active {
      border-color: var(--accent-color);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }

    .desktop-preset-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .desktop-preset-card-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .desktop-preset-card-meta {
      margin-top: 8px;
      font-size: 10px;
      color: var(--text-tertiary);
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .desktop-preset-card-badge {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 2px 8px;
      border-radius: 10px;
      background: var(--text-primary);
      color: var(--bg-primary);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.2px;
      opacity: 0.9;
    }

    .desktop-preset-card-action {
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .desktop-preset-card-action svg {
      width: 13px;
      height: 13px;
      stroke: var(--text-secondary);
    }

    .desktop-preset-card-action.delete:hover {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .desktop-preset-card-action.delete:hover svg {
      stroke: var(--bg-primary);
    }

    .desktop-preset-card-action.lock {
      opacity: 0.55;
      cursor: default;
    }

    .desktop-preset-card-action.lock:hover {
      background: var(--bg-primary);
      border-color: var(--border-color);
    }

    .desktop-presets-hint {
      margin-top: 8px;
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.4;
    }

    /* 组件项 - 列表卡片样式（仿文件列表） */
    .widget-picker-item {
      position: relative;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .widget-picker-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--text-tertiary);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .widget-picker-item:hover {
      background: var(--bg-tertiary);
      border-color: var(--text-tertiary);
      transform: translateX(4px);
    }

    .widget-picker-item:hover::before {
      opacity: 1;
    }

    .widget-picker-item:active {
      transform: translateX(4px) scale(0.99);
    }

    /* 图标容器 - 方形圆角 */
    .widget-picker-item-icon {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      font-size: 18px;
      flex-shrink: 0;
    }

    /* 使用SVG图标替代emoji */
    .widget-picker-item-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-primary);
      stroke-width: 1.5;
      fill: none;
    }

    /* 文字信息区 */
    .widget-picker-item-info {
      flex: 1;
      min-width: 0;
    }

    .widget-picker-item-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.2px;
      margin-bottom: 2px;
    }

    /* 尺寸标签 - 胶囊样式 */
    .widget-picker-item-size {
      display: inline-block;
      font-size: 10px;
      color: var(--text-tertiary);
      background: var(--bg-primary);
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      font-family: 'SF Mono', monospace;
    }

    /* 多尺寸标记 - 右侧箭头 */
    .widget-picker-item-multi {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      padding: 3px 8px;
      background: var(--text-primary);
      color: var(--bg-primary);
      font-size: 9px;
      border-radius: 8px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    /* 右侧箭头指示 */
    .widget-picker-item-arrow {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.4;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .widget-picker-item:hover .widget-picker-item-arrow {
      opacity: 0.8;
      transform: translateX(2px);
    }

    .widget-picker-item-arrow svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      stroke-width: 2;
    }

    /* Widget Picker 空状态 - 创建自定义组件提示 */
    .widget-picker-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 32px 24px;
      border-radius: 16px;
      background: var(--bg-secondary);
      border: 2px dashed var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    .widget-picker-empty:hover {
      border-color: var(--accent-color);
      background: rgba(var(--accent-rgb, 0, 122, 255), 0.08);
    }

    .widget-picker-empty svg {
      width: 40px;
      height: 40px;
      stroke: var(--text-secondary);
      transition: stroke 0.2s ease;
    }

    .widget-picker-empty:hover svg {
      stroke: var(--accent-color);
    }

    .widget-picker-empty span {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
      transition: color 0.2s ease;
    }

    .widget-picker-empty:hover span {
      color: var(--accent-color);
    }

    /* Widget Picker Header Actions */
    .widget-picker-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .widget-picker-action-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .widget-picker-action-btn:hover {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .widget-picker-action-btn:hover svg {
      stroke: #fff;
    }

    .widget-picker-action-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
      stroke-width: 1.5;
    }

    /* ========== 桌面预设导出弹窗（Widget Picker 内） ========== */
    .desktop-preset-export-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 20050;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .desktop-preset-export-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .desktop-preset-export-sheet {
      width: 100%;
      max-width: 400px;
      background: var(--bg-primary);
      border-radius: 28px 28px 0 0;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }

    .desktop-preset-export-overlay.active .desktop-preset-export-sheet {
      transform: translateY(0);
    }

    .desktop-preset-export-handle {
      width: 40px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 14px auto 6px;
    }

    .desktop-preset-export-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px 14px;
      border-bottom: 1px solid var(--border-color);
    }

    .desktop-preset-export-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.3px;
      font-family: -apple-system, 'SF Pro Display', sans-serif;
    }

    .desktop-preset-export-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .desktop-preset-export-close:hover {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .desktop-preset-export-close:hover svg {
      stroke: var(--bg-primary);
    }

    .desktop-preset-export-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
    }

    .desktop-preset-export-body {
      padding: 14px 18px 16px;
    }

    .desktop-preset-export-field {
      margin-bottom: 12px;
    }

    .desktop-preset-export-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .desktop-preset-export-input {
      width: 100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease;
      box-sizing: border-box;
    }

    .desktop-preset-export-input:focus {
      border-color: var(--accent-color);
      background: var(--bg-tertiary);
    }

    .desktop-preset-export-input::placeholder {
      color: var(--text-tertiary);
    }

    .desktop-preset-export-tip {
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.5;
      padding-top: 2px;
    }

    .desktop-preset-export-footer {
      display: flex;
      gap: 10px;
      padding: 12px 18px 16px;
      border-top: 1px solid var(--border-color);
    }

    .desktop-preset-export-btn {
      flex: 1;
      height: 36px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .desktop-preset-export-btn:hover {
      background: var(--bg-tertiary);
    }

    .desktop-preset-export-btn.primary {
      background: var(--accent-color);
      border-color: var(--accent-color);
      color: #ffffff;
    }

    .desktop-preset-export-btn.primary:hover {
      filter: brightness(1.03);
    }

    /* ========== 自定义组件工作台 - 匹配Widget Picker风格 ========== */

    /* 工作台遮罩层 */
    .cww-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 20000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .cww-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* 工作台主面板 */
    .cww-sheet {
      width: 100%;
      max-height: 80vh;
      background: var(--bg-primary);
      border-radius: 28px 28px 0 0;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    }

    .cww-overlay.active .cww-sheet {
      transform: translateY(0);
    }

    /* 拖拽手柄 */
    .cww-handle {
      width: 40px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 14px auto 6px;
    }

    /* 头部区域 */
    .cww-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px 14px;
      border-bottom: 1px solid var(--border-color);
    }

    .cww-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }

    .cww-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cww-action-btn, .cww-close-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .cww-action-btn:hover, .cww-close-btn:hover {
      background: var(--text-primary);
    }

    .cww-action-btn:hover svg, .cww-close-btn:hover svg {
      stroke: var(--bg-primary);
    }

    .cww-action-btn svg, .cww-close-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
      stroke-width: 2;
    }

    .cww-action-btn.active {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .cww-action-btn.active svg {
      stroke: #fff;
    }

    /* 选择栏 */
    .cww-select-bar {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 8px 18px;
      background: var(--bg-secondary);
      font-size: 12px;
      color: var(--text-secondary);
    }

    .cww-select-bar.active {
      display: flex;
    }

    .cww-select-bar span span {
      color: var(--accent-color);
      font-weight: 600;
    }

    .cww-select-actions {
      display: flex;
      gap: 8px;
    }

    .cww-select-actions button {
      padding: 5px 10px;
      font-size: 11px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-primary);
      cursor: pointer;
    }

    .cww-select-actions button.danger {
      color: #ff4757;
      border-color: rgba(255, 71, 87, 0.3);
    }

    /* 内容区域 */
    .cww-content {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px 28px;
      scroll-behavior: smooth;
    }

    .cww-content::-webkit-scrollbar {
      width: 3px;
    }

    .cww-content::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 2px;
    }

    /* 分类区块 */
    .cww-category {
      margin-bottom: 18px;
    }

    .cww-category:last-child {
      margin-bottom: 0;
    }

    /* 分类标题 - 胶囊标签样式 */
    .cww-category-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 10px;
      padding: 4px 10px;
      background: var(--bg-secondary);
      border-radius: 20px;
      border: 1px solid var(--border-color);
    }

    .cww-category-title::before {
      content: '◆';
      font-size: 6px;
      opacity: 0.6;
    }

    /* 创建项 - 列表卡片样式 */
    .cww-create-item {
      position: relative;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cww-create-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--accent-color);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .cww-create-item:hover {
      background: var(--bg-tertiary);
      border-color: var(--accent-color);
      transform: translateX(4px);
    }

    .cww-create-item:hover::before {
      opacity: 1;
    }

    /* 项目列表 */
    .cww-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* 项目项 - 列表卡片样式 */
    .cww-item {
      position: relative;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cww-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--text-tertiary);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .cww-item:hover {
      background: var(--bg-tertiary);
      border-color: var(--text-tertiary);
      transform: translateX(4px);
    }

    .cww-item:hover::before {
      opacity: 1;
    }

    .cww-item.selected {
      border-color: var(--accent-color);
    }

    .cww-item.selected::before {
      background: var(--accent-color);
      opacity: 1;
    }

    /* 图标容器 */
    .cww-item-icon {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      flex-shrink: 0;
    }

    .cww-item-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-primary);
      stroke-width: 1.5;
      fill: none;
    }

    /* 文字信息区 */
    .cww-item-info {
      flex: 1;
      min-width: 0;
    }

    .cww-item-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.2px;
      margin-bottom: 2px;
    }

    .cww-item-desc, .cww-item-size {
      display: inline-block;
      font-size: 10px;
      color: var(--text-tertiary);
      background: var(--bg-primary);
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      font-family: 'SF Mono', monospace;
    }

    /* 右侧箭头 */
    .cww-item-arrow {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.4;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .cww-item:hover .cww-item-arrow,
    .cww-create-item:hover .cww-item-arrow {
      opacity: 0.8;
      transform: translateX(2px);
    }

    .cww-item-arrow svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      stroke-width: 2;
    }

    /* 空状态 */
    .cww-empty {
      display: none;
      padding: 24px;
      text-align: center;
    }

    .cww-empty.show {
      display: block;
    }

    .cww-empty-text {
      font-size: 13px;
      color: var(--text-tertiary);
    }

    /* 组件列表项 - JS动态生成 */
    .cww-widget-item {
      position: relative;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 8px;
    }

    .cww-widget-item:last-child {
      margin-bottom: 0;
    }

    .cww-widget-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--text-tertiary);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .cww-widget-item:hover {
      background: var(--bg-tertiary);
      border-color: var(--text-tertiary);
      transform: translateX(4px);
    }

    .cww-widget-item:hover::before {
      opacity: 1;
    }

    .cww-widget-item.selected {
      border-color: var(--accent-color);
    }

    .cww-widget-item.selected::before {
      background: var(--accent-color);
      opacity: 1;
    }

    /* 选择框 */
    .cww-widget-checkbox {
      width: 20px;
      height: 20px;
      border: 2px solid var(--border-color);
      border-radius: 6px;
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s;
    }

    .cww-widget-checkbox svg {
      width: 14px;
      height: 14px;
      stroke: #fff;
      opacity: 0;
    }

    .select-mode .cww-widget-checkbox {
      display: flex;
    }

    .cww-widget-item.selected .cww-widget-checkbox {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .cww-widget-item.selected .cww-widget-checkbox svg {
      opacity: 1;
    }

    /* 预览图标 */
    .cww-widget-preview {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      flex-shrink: 0;
    }

    .cww-widget-preview svg {
      width: 22px;
      height: 22px;
      stroke: var(--text-secondary);
    }

    /* 组件信息 */
    .cww-widget-info {
      flex: 1;
      min-width: 0;
    }

    .cww-widget-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cww-widget-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .cww-widget-meta span {
      font-size: 10px;
      color: var(--text-tertiary);
      background: var(--bg-primary);
      padding: 2px 6px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
    }

    .cww-widget-meta span:first-child {
      color: var(--accent-color);
      font-weight: 600;
    }

    /* 操作按钮 */
    .cww-widget-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .cww-widget-action-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cww-widget-action-btn:hover {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .cww-widget-action-btn:hover svg {
      stroke: #fff;
    }

    .cww-widget-action-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
    }

    .cww-widget-action-btn.delete:hover {
      background: #ff4757;
      border-color: #ff4757;
    }

    /* 多选模式 */
    .cww-content.select-mode .cww-widget-actions {
      display: none;
    }

    /* 导出对话框 */
    .cww-export-dialog {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10;
      border-radius: 24px;
    }

    .cww-export-dialog.active {
      display: flex;
    }

    .cww-export-content {
      background: var(--bg-primary);
      border-radius: 16px;
      padding: 20px;
      width: 280px;
      border: 1px solid var(--border-color);
    }

    .cww-export-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .cww-export-count {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 16px;
    }

    .cww-export-author {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }

    .cww-export-author label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-primary);
      cursor: pointer;
    }

    .cww-export-author input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--accent-color);
    }

    .cww-export-author input[type="text"] {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s, opacity 0.2s;
      box-sizing: border-box;
    }

    .cww-export-author input[type="text"]:disabled {
      opacity: 0.5;
    }

    .cww-export-author input[type="text"]:focus {
      border-color: var(--accent-color);
    }

    .cww-export-actions {
      display: flex;
      gap: 10px;
    }

    .cww-export-actions button {
      flex: 1;
      padding: 12px;
      border-radius: 12px;
      border: none;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cww-export-cancel {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

    .cww-export-cancel:hover {
      background: var(--bg-tertiary, #3a3a3c);
    }

    .cww-export-confirm {
      background: var(--accent-color);
      color: #fff;
    }

    .cww-export-confirm:hover {
      filter: brightness(1.1);
    }

    /* 作者标签 */
    .cww-widget-author {
      font-size: 10px;
      color: var(--accent-color);
      background: rgba(var(--accent-rgb, 0, 122, 255), 0.15);
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
    }

    /* ========== 自定义组件编辑器 - 匹配Widget Picker风格 ========== */

    /* 编辑器遮罩层 */
    .cwe-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 20010;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .cwe-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* 编辑器主面板 */
    .cwe-sheet {
      width: 100%;
      max-height: 90vh;
      background: var(--bg-primary);
      border-radius: 28px 28px 0 0;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    }

    .cwe-overlay.active .cwe-sheet {
      transform: translateY(0);
    }

    /* 拖拽手柄 */
    .cwe-handle {
      width: 40px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 14px auto 6px;
    }

    /* 头部区域 */
    .cwe-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px 14px;
      border-bottom: 1px solid var(--border-color);
    }

    .cwe-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }

    .cwe-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cwe-save-btn {
      padding: 6px 14px;
      background: var(--accent-color);
      color: #000;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .cwe-save-btn:hover {
      filter: brightness(1.1);
    }

    .cwe-close-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .cwe-close-btn:hover {
      background: var(--text-primary);
    }

    .cwe-close-btn:hover svg {
      stroke: var(--bg-primary);
    }

    .cwe-close-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
      stroke-width: 2;
    }

    /* 内容区域 */
    .cwe-content {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px 28px;
      scroll-behavior: smooth;
    }

    .cwe-content::-webkit-scrollbar {
      width: 3px;
    }

    .cwe-content::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 2px;
    }

    /* 分类区块 */
    .cwe-category {
      margin-bottom: 18px;
    }

    .cwe-category:last-child {
      margin-bottom: 0;
    }

    /* 分类标题 */
    .cwe-category-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 10px;
      padding: 4px 10px;
      background: var(--bg-secondary);
      border-radius: 20px;
      border: 1px solid var(--border-color);
    }

    .cwe-category-title::before {
      content: '◆';
      font-size: 6px;
      opacity: 0.6;
    }

    /* 表单样式 */
    .cwe-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cwe-form-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .cwe-form-item label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .cwe-form-item input,
    .cwe-form-item select {
      width: 100%;
      padding: 10px 14px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-size: 14px;
      color: var(--text-primary);
      box-sizing: border-box;
      transition: border-color 0.2s;
    }

    .cwe-form-item input:focus,
    .cwe-form-item select:focus {
      outline: none;
      border-color: var(--accent-color);
    }

    /* 代码提示 */
    .cwe-code-hint {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-bottom: 8px;
      padding: 6px 10px;
      background: var(--bg-secondary);
      border-radius: 8px;
      border: 1px dashed var(--border-color);
    }

    /* 代码编辑区 */
    .cwe-code-area {
      width: 100%;
      min-height: 160px;
      padding: 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
      font-size: 12px;
      line-height: 1.5;
      color: var(--text-primary);
      resize: vertical;
      box-sizing: border-box;
      transition: border-color 0.2s;
    }

    .cwe-code-area:focus {
      outline: none;
      border-color: var(--accent-color);
    }

    .cwe-code-area::placeholder {
      color: var(--text-tertiary);
    }

    /* 图片槽 */
    .cwe-slots {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .cwe-slot {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
    }

    .cwe-slot-name {
      font-size: 12px;
      color: var(--text-primary);
      font-family: 'SF Mono', monospace;
    }

    .cwe-slot-btn {
      padding: 4px 10px;
      background: var(--accent-color);
      color: #000;
      border: none;
      border-radius: 6px;
      font-size: 11px;
      cursor: pointer;
    }

    /* 预览区域 */
    .cwe-preview-area {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 16px;
      overflow: auto;
      max-height: 420px;
    }

    .cwe-preview {
      background: var(--bg-primary);
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      margin: 0 auto;
    }

    .cwe-preview-size {
      font-size: 10px;
      font-weight: 400;
      color: var(--text-tertiary);
      font-family: 'SF Mono', monospace;
      margin-left: 6px;
    }

    /* 参考标签 */
    .cwe-ref-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 12px;
    }

    .cwe-ref-tabs button {
      flex: 1;
      padding: 10px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .cwe-ref-tabs button:hover {
      color: var(--text-primary);
    }

    .cwe-ref-tabs button.active {
      color: var(--accent-color);
      border-bottom-color: var(--accent-color);
    }

    /* 参考内容 */
    .cwe-ref-content {
      display: none;
    }

    .cwe-ref-content.active {
      display: block;
    }

    /* 变量列表 */
    .cwe-var-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .cwe-var-list span {
      padding: 5px 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 11px;
      font-family: 'SF Mono', monospace;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .cwe-var-list span:hover {
      border-color: var(--accent-color);
      background: var(--bg-tertiary);
    }

    /* 尺寸参考 */
    .cwe-size-ref {
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      font-size: 11px;
      font-family: 'SF Mono', monospace;
      color: var(--text-secondary);
      text-align: center;
    }

    /* 模板项 */
    .cwe-tpl-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cwe-tpl-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cwe-tpl-item:hover {
      border-color: var(--accent-color);
      background: var(--bg-tertiary);
    }

    .cwe-tpl-item span:first-child {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .cwe-tpl-size {
      font-size: 10px;
      color: var(--accent-color);
      background: rgba(0, 122, 255, 0.1);
      padding: 2px 8px;
      border-radius: 8px;
    }

    /* Sizes表格 */
    .cwe-size-table {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .cwe-size-group {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 10px;
    }

    .cwe-size-group-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--accent-color);
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border-color);
    }

    .cwe-size-row {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      font-size: 11px;
    }

    .cwe-size-row span:first-child {
      font-weight: 600;
      color: var(--text-primary);
    }

    .cwe-size-row span:last-child {
      color: var(--text-tertiary);
      font-family: 'SF Mono', monospace;
      font-size: 10px;
    }

    /* TXT提示词区 */
    .cwe-txt-prompt {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 14px;
    }

    .cwe-txt-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .cwe-txt-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-bottom: 12px;
    }

    .cwe-txt-box {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 12px;
      font-size: 11px;
      line-height: 1.6;
      color: var(--text-secondary);
      font-family: 'SF Mono', monospace;
      white-space: pre-wrap;
      max-height: 150px;
      overflow-y: auto;
      margin-bottom: 12px;
    }

    .cwe-txt-copy {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 10px;
      background: var(--accent-color);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cwe-txt-copy:hover {
      filter: brightness(1.1);
    }

    .cwe-txt-copy svg {
      width: 16px;
      height: 16px;
    }

    /* 预览空状态 */
    .cwe-preview-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px;
      text-align: center;
    }

    .cwe-preview-empty svg {
      width: 40px;
      height: 40px;
      stroke: rgba(255, 255, 255, 0.5);
      margin-bottom: 10px;
    }

    .cwe-preview-empty span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* ========================================
     * Theme Guide Drawer - 主题教程抽屉
     * ======================================== */

    /* 遮罩层 */
    .tgd-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 20011;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .tgd-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* 抽屉主面板 */
    .tgd-sheet {
      width: 100%;
      max-height: 85vh;
      background: var(--bg-primary);
      border-radius: 24px 24px 0 0;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .tgd-overlay.active .tgd-sheet {
      transform: translateY(0);
    }

    /* 拖拽手柄 */
    .tgd-handle {
      width: 36px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 10px auto 4px;
      opacity: 0.5;
    }

    /* 头部区域 */
    .tgd-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px 12px;
      border-bottom: 1px solid var(--border-color);
    }

    .tgd-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }

    .tgd-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* 页码指示器 */
    .tgd-page-indicator {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .tgd-page-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--text-tertiary);
      opacity: 0.3;
      transition: all 0.3s;
      cursor: pointer;
    }

    .tgd-page-dot.active {
      opacity: 1;
      background: var(--text-primary);
      transform: scale(1.2);
    }

    /* 关闭按钮 */
    .tgd-close-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .tgd-close-btn:hover {
      background: var(--text-primary);
    }

    .tgd-close-btn:hover svg {
      stroke: var(--bg-primary);
    }

    .tgd-close-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
    }

    /* 内容区域 */
    .tgd-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
    }

    /* 页面容器 */
    .tgd-page {
      padding: 20px 18px;
      display: none;
      animation: tgdFadeIn 0.3s ease;
    }

    .tgd-page.active {
      display: block;
    }

    @keyframes tgdFadeIn {
      from {
        opacity: 0;
        transform: translateX(20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .tgd-page-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 18px;
      letter-spacing: -0.3px;
    }

    .tgd-page-title svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-primary);
      flex-shrink: 0;
    }

    /* 内容区块 */
    .tgd-section {
      margin-bottom: 20px;
    }

    /* 分类标题 - 胶囊标签样式 */
    .tgd-section-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
      padding: 5px 10px;
      background: var(--bg-secondary);
      border-radius: 16px;
      border: 1px solid var(--border-color);
    }

    .tgd-section-title svg {
      width: 12px;
      height: 12px;
      stroke: var(--text-secondary);
      flex-shrink: 0;
    }

    .tgd-text {
      font-size: 12px;
      line-height: 1.7;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .tgd-text code {
      font-family: 'JetBrains Mono', 'SF Mono', monospace;
      background: var(--bg-secondary);
      color: var(--text-primary);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      border: 1px solid var(--border-color);
    }

    .tgd-text strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    /* 变量表格 */
    .tgd-var-table {
      background: var(--bg-secondary);
      border-radius: 10px;
      border: 1px solid var(--border-color);
      overflow: hidden;
    }

    .tgd-var-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border-color);
    }

    .tgd-var-row:last-child {
      border-bottom: none;
    }

    .tgd-var-name {
      font-family: 'JetBrains Mono', 'SF Mono', monospace;
      font-size: 10px;
      color: var(--text-primary);
      background: var(--bg-primary);
      padding: 3px 7px;
      border-radius: 5px;
      font-weight: 600;
      border: 1px solid var(--border-color);
    }

    .tgd-var-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      flex: 1;
      text-align: right;
      margin-left: 10px;
    }

    /* AI提示词框 */
    .tgd-prompt-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 12px;
      font-family: 'JetBrains Mono', 'SF Mono', monospace;
      font-size: 10px;
      line-height: 1.7;
      color: var(--text-secondary);
      margin-bottom: 10px;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 280px;
      overflow-y: auto;
    }

    .tgd-prompt-box strong {
      color: var(--text-primary);
      font-weight: 700;
    }

    .tgd-prompt-box em {
      color: var(--text-tertiary);
      font-style: italic;
    }

    /* 错误/正确标记 */
    .tgd-error-mark {
      color: var(--text-primary);
      opacity: 0.5;
      font-weight: 600;
    }

    .tgd-success-mark {
      color: var(--text-primary);
      font-weight: 600;
    }

    /* 复制按钮 - 黑白主题 */
    .tgd-copy-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 11px;
      background: var(--text-primary);
      color: var(--bg-primary);
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .tgd-copy-btn:hover {
      opacity: 0.85;
      transform: translateY(-1px);
    }

    .tgd-copy-btn:active {
      transform: translateY(0);
    }

    .tgd-copy-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--bg-primary);
    }

    /* 底部导航 */
    .tgd-footer {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-primary);
    }

    .tgd-nav-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 10px 14px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .tgd-nav-btn:hover:not(:disabled) {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
    }

    .tgd-nav-btn:hover:not(:disabled) svg {
      stroke: var(--bg-primary);
    }

    .tgd-nav-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .tgd-nav-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
    }

    /* 滚动条样式 */
    .tgd-content::-webkit-scrollbar {
      width: 4px;
    }

    .tgd-content::-webkit-scrollbar-track {
      background: transparent;
    }

    .tgd-content::-webkit-scrollbar-thumb {
      background: var(--text-tertiary);
      border-radius: 2px;
      opacity: 0.3;
    }

    .tgd-prompt-box::-webkit-scrollbar {
      width: 4px;
    }

    .tgd-prompt-box::-webkit-scrollbar-track {
      background: transparent;
    }

    .tgd-prompt-box::-webkit-scrollbar-thumb {
      background: var(--text-tertiary);
      border-radius: 2px;
      opacity: 0.3;
    }

    /* ========== 组件删除按钮 - 轻磨砂风格 ========== */
    .widget-delete-btn {
      position: absolute;
      top: -6px;
      left: -6px;
      width: 18px;
      height: 18px;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      transition: all 0.15s ease;
    }

    [data-theme="dark"] .widget-delete-btn {
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .widget-delete-btn:hover {
      transform: scale(1.15);
      background: rgba(220, 50, 50, 0.75);
      border-color: rgba(255, 100, 100, 0.4);
    }

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

    .widget-delete-btn svg {
      width: 9px;
      height: 9px;
      stroke: #fff;
      stroke-width: 2.5;
    }

    .app-grid.edit-mode .widget-delete-btn {
      display: flex;
      animation: deleteButtonPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* 🔥 【老王修复】编辑模式下禁用Widget内部所有交互元素的事件响应
     * 问题：Widget内部的可编辑元素使用了 event.stopPropagation()
     *       导致事件无法冒泡到 appGrid，拖动失效且误触编辑功能
     * 方案：编辑模式下用 pointer-events: none 禁用内部元素
     *       只保留删除按钮可点击
     */
    .app-grid.edit-mode .desktop-widget > *:not(.widget-delete-btn) {
      pointer-events: none;
    }

    @keyframes deleteButtonPop {
      0% { transform: scale(0); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* 拖拽中的组件样式 */
    .desktop-widget.dragging {
      opacity: 0.92;
      z-index: 10000;
      pointer-events: none;
      filter: none;
      box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
      transition: none;
    }

    /* ========== Spotify音乐组件 - 4x2 ========== */
    .spotify-widget {
      width: 100%;
      height: 100%;
      border-radius: 22px;
      display: flex;
      padding: 16px 20px;
      gap: 16px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    }

    /* 黑色主题 */
    .spotify-widget.theme-dark {
      background: #000;
    }
    .spotify-widget.theme-dark .spotify-album-label { color: #fff; }
    .spotify-widget.theme-dark .spotify-song-title { color: #fff; }
    .spotify-widget.theme-dark .spotify-artist { color: #b3b3b3; }
    .spotify-widget.theme-dark .spotify-heart svg { stroke: #b3b3b3; }
    .spotify-widget.theme-dark .spotify-progress-bar { background: #4d4d4d; }
    .spotify-widget.theme-dark .spotify-progress-fill { background: #fff; }
    .spotify-widget.theme-dark .spotify-progress-thumb { background: #fff; }
    .spotify-widget.theme-dark .spotify-time { color: #b3b3b3; }
    .spotify-widget.theme-dark .spotify-ctrl-btn svg { fill: #fff; }
    .spotify-widget.theme-dark .spotify-play-btn { background: #fff; }
    .spotify-widget.theme-dark .spotify-play-btn svg { fill: #000; }

    /* 白色主题 */
    .spotify-widget.theme-light {
      background: #fff;
    }
    .spotify-widget.theme-light .spotify-album-label { color: #000; }
    .spotify-widget.theme-light .spotify-song-title { color: #000; }
    .spotify-widget.theme-light .spotify-artist { color: #666; }
    .spotify-widget.theme-light .spotify-heart svg { stroke: #666; }
    .spotify-widget.theme-light .spotify-progress-bar { background: #ddd; }
    .spotify-widget.theme-light .spotify-progress-fill { background: #000; }
    .spotify-widget.theme-light .spotify-progress-thumb { background: #000; }
    .spotify-widget.theme-light .spotify-time { color: #666; }
    .spotify-widget.theme-light .spotify-ctrl-btn svg { fill: #000; }
    .spotify-widget.theme-light .spotify-play-btn { background: #000; }
    .spotify-widget.theme-light .spotify-play-btn svg { fill: #fff; }

    /* 左侧专辑区域 */
    .spotify-album-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 120px;
      flex-shrink: 0;
    }

    .spotify-album-label {
      font-size: 7px;
      text-align: center;
      margin-bottom: 8px;
      letter-spacing: 0.2px;
      line-height: 1.3;
      font-weight: 500;
      max-width: 100%;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      cursor: pointer;
    }

    .spotify-album-label span {
      font-style: italic;
    }

    .spotify-album-cover {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      cursor: pointer;
      position: relative;
    }

    .spotify-album-cover.playing {
      animation: spotifyAlbumSpin 8s linear infinite;
    }

    @keyframes spotifyAlbumSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

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

    .spotify-album-cover .upload-hint {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;
      border-radius: 50%;
    }

    .spotify-album-cover:hover .upload-hint {
      opacity: 1;
    }

    .spotify-album-cover .upload-hint svg {
      width: 24px;
      height: 24px;
      stroke: #fff;
      stroke-width: 2;
    }

    /* 右侧控制区域 */
    .spotify-control-section {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .spotify-song-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }

    .spotify-song-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      cursor: pointer;
    }

    .spotify-heart {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      flex-shrink: 0;
    }

    .spotify-heart svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke-width: 1.8;
    }

    .spotify-artist {
      font-size: 13px;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    /* 进度条 */
    .spotify-progress-wrapper {
      margin-bottom: 10px;
    }

    .spotify-progress-bar {
      width: 100%;
      height: 3px;
      border-radius: 1.5px;
      position: relative;
      cursor: pointer;
    }

    .spotify-progress-fill {
      height: 100%;
      border-radius: 1.5px;
      width: 25%;
      position: relative;
      transition: width 0.3s linear;
    }

    .spotify-progress-thumb {
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .spotify-time-row {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }

    .spotify-time {
      font-size: 10px;
      font-weight: 400;
    }

    /* 控制按钮 */
    .spotify-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
    }

    .spotify-ctrl-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .spotify-ctrl-btn svg {
      width: 22px;
      height: 22px;
    }

    .spotify-play-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .spotify-play-btn svg {
      width: 16px;
      height: 16px;
    }

    /* 颜色/效果选择预览 */
    .widget-color-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      padding: 12px;
    }

    .widget-color-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 8px;
      cursor: pointer;
      border-radius: 12px;
      background: var(--bg-secondary);
      border: 2px solid transparent;
      transition: all 0.2s ease;
    }

    .widget-color-option:hover {
      transform: translateY(-2px);
      border-color: var(--border-color);
      background: var(--bg-tertiary);
    }

    .widget-color-preview {
      width: 100%;
      aspect-ratio: 2/1;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .widget-color-option:hover .widget-color-preview {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .widget-color-label {
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 600;
      text-align: center;
    }

    /* 分组标题 */
    .widget-size-section-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-secondary);
      padding: 12px 16px 8px;
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .widget-size-section {
      margin-bottom: 8px;
    }

    /* ========== 尺寸选择器 - INS风格 ========== */
    .widget-size-selector {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 4px 0;
    }

    .widget-size-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 16px;
    }

    /* 返回按钮 - 方形圆角 */
    .widget-size-back {
      width: 32px;
      height: 32px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-primary);
      transition: all 0.2s ease;
    }

    .widget-size-back:hover {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .widget-size-back:hover svg {
      stroke: var(--bg-primary);
    }

    .widget-size-back svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
      stroke-width: 2;
    }

    .widget-size-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.2px;
    }

    /* 图标容器 - 使用SVG替代emoji */
    .widget-size-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }

    .widget-size-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      stroke-width: 1.5;
    }

    /* 尺寸选项网格 */
    .widget-size-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 12px;
    }

    /* 尺寸选项卡片 */
    .widget-size-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 14px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .widget-size-option::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--text-primary);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .widget-size-option:hover {
      border-color: var(--text-tertiary);
      background: var(--bg-tertiary);
      transform: translateY(-2px);
    }

    .widget-size-option:hover::before {
      opacity: 1;
    }

    .widget-size-option:active {
      transform: translateY(-2px) scale(0.98);
    }

    /* 选中状态 */
    .widget-size-option.selected {
      border-color: var(--text-primary);
      background: var(--bg-tertiary);
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .widget-size-option.selected::before {
      opacity: 1;
    }

    /* 尺寸预览框 - 黑白风格 */
    .widget-size-preview {
      background: var(--text-primary);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      min-height: 36px;
      max-width: 140px;
      max-height: 100px;
      position: relative;
    }

    /* 像素网格装饰 */
    .widget-size-preview::after {
      content: '';
      position: absolute;
      inset: 4px;
      border: 1px dashed var(--bg-primary);
      border-radius: 6px;
      opacity: 0.3;
    }

    .widget-size-preview-icon {
      font-size: 18px;
      color: var(--bg-primary);
      opacity: 0;
    }

    .widget-size-preview svg {
      width: 20px;
      height: 20px;
      stroke: var(--bg-primary);
      stroke-width: 1.5;
      opacity: 0.8;
    }

    /* 尺寸标签 */
    .widget-size-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'SF Mono', monospace;
      letter-spacing: 0.5px;
    }

    .widget-size-desc {
      font-size: 10px;
      color: var(--text-tertiary);
      padding: 2px 8px;
      background: var(--bg-primary);
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }

    .widget-picker-item {
      position: relative;
    }

    /* ========== 桌面美化系统样式结束 ========== */

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .app-icon-img {
      width: 64px;
      height: 64px;
      background: var(--bg-tertiary);
      /* border: 1px solid var(--border-color); */ /* 老王注释：取消图标边框，更简洁 */
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .app-icon-img::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, transparent 0%, var(--accent-color) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .app-icon:active .app-icon-img {
      transform: scale(0.92);
    }

    .app-icon:hover .app-icon-img {
      transform: scale(1.05);
      box-shadow: var(--shadow-md);
    }

    .app-icon:hover .app-icon-img::before {
      opacity: 0.03;
    }

    .app-icon-img svg {
      width: 32px;
      height: 32px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
      position: relative;
      z-index: 1;
    }

    /* 🔥 自定义图标样式 - 支持透明底 */
    .app-icon-img.has-custom-image {
      background: transparent !important;
      padding: 0;
      border: none !important; /* 🔥 移除边框 */
    }

    /* 🔥 禁用自定义图标的伪元素背景 */
    .app-icon-img.has-custom-image::before {
      display: none !important; /* 🔥 彻底禁用伪元素 */
    }

    .app-icon-img.has-custom-image img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* 改为contain，保持图标完整性，不裁剪 */
      border-radius: inherit;
      position: relative;
      z-index: 2;
    }

    .app-label {
      font-size: 11px;
      color: var(--home-app-label-color);
      font-weight: 500;
      text-align: center;
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Dock */
    .dock {
      /* 🔥 悬浮底栏 - 不占据空间，浮动在主屏幕上 */
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100; /* 确保在app-grid之上 */
      height: auto;
      padding: 0 24px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      animation: fadeInUp 0.6s ease 3.3s backwards;
      pointer-events: none; /* 背景区域不拦截点击 */
    }

    .dock-bg {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 12px 20px;
      display: flex;
      gap: 20px;
      backdrop-filter: blur(10px);
      pointer-events: auto; /* 🔥 恢复点击事件 */
      transition: width 220ms cubic-bezier(0.22, 0.61, 0.36, 1), padding 220ms ease, box-shadow 220ms ease;
    }

    .dock-bg.dock-empty {
      width: 88px !important;
      padding: 10px 0;
      gap: 0;
      background: rgba(0, 0, 0, 0.08);
      border-color: rgba(0, 0, 0, 0.12);
      opacity: 0.9;
    }

    [data-theme='dark'] .dock-bg.dock-empty {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .dock-bg.drag-over {
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    }

    .dock-icon {
      width: 60px;
      height: 60px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      touch-action: none;
    }

    .dock-icon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, transparent 0%, var(--accent-color) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .dock-icon:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .dock-icon:hover::before {
      opacity: 0.05;
    }

    .dock-icon:active {
      transform: translateY(-2px);
    }

    .dock-icon svg {
      width: 28px;
      height: 28px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
      position: relative;
      z-index: 1;
    }

    /* 🔥 Dock自定义图标样式 - 支持透明底 */
    .dock-icon.has-custom-image {
      background: transparent !important;
      border: none !important;
      padding: 0;
    }

    /* 🔥 禁用Dock自定义图标的伪元素背景 */
    .dock-icon.has-custom-image::before {
      display: none !important; /* 🔥 彻底禁用伪元素 */
    }

    .dock-icon.has-custom-image img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* 保持图标完整性，不裁剪 */
      border-radius: inherit;
      position: relative;
      z-index: 2;
    }

    /* Decorative Elements */
    .deco-stars {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }

    .star {
      position: absolute;
      width: 3px;
      height: 3px;
      background: var(--text-tertiary);
      opacity: 0.4;
      animation: starTwinkle 3s ease-in-out infinite;
    }

    .star:nth-child(1) {
      top: 15%;
      left: 10%;
      animation-delay: 0s;
    }

    .star:nth-child(2) {
      top: 25%;
      right: 15%;
      animation-delay: 1s;
    }

    .star:nth-child(3) {
      top: 60%;
      left: 20%;
      animation-delay: 2s;
    }

    .star:nth-child(4) {
      top: 70%;
      right: 10%;
      animation-delay: 1.5s;
    }

    .star:nth-child(5) {
      top: 40%;
      right: 25%;
      animation-delay: 0.5s;
    }

    @keyframes starTwinkle {
      0%, 100% {
        opacity: 0.2;
        transform: scale(1);
      }
      50% {
        opacity: 0.6;
        transform: scale(1.5);
      }
    }

    .pixel-border {
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--text-tertiary);
      opacity: 0.2;
    }

    .pixel-border:nth-child(6) {
      top: 100px;
      left: 0;
    }

    .pixel-border:nth-child(7) {
      top: 200px;
      right: 0;
    }

    .pixel-border:nth-child(8) {
      bottom: 150px;
      left: 0;
    }

    /* App Screen Base */
    /* App Screen - 确保完全覆盖无缝隙 */
    .app-screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: var(--bg-primary);
      /* 确保背景图片正确覆盖 */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 8000;
      display: none;
      flex-direction: column;
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-screen.active {
      display: flex;
      opacity: 1;
      transform: scale(1);
    }

    /* 防止点击穿透：app刚打开时短暂阻止点击事件 */
    .app-screen.just-opened {
      pointer-events: none;
    }

    /* 但允许header（返回按钮）始终可点击 */
    .app-screen.just-opened > .app-header {
      pointer-events: auto;
    }

    /* X App (Twitter) Screen - Special handling */
    /* JavaScript 会动态设置位置和尺寸，让它完美对齐手机框 */
    #x-social-screen {
      /* 视觉效果 */
      z-index: 8000;
      overflow: hidden;
      box-shadow: var(--shadow-xl);

      /* 隐藏状态 */
      display: none !important;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;

      /* 平滑过渡（不包括 transform，避免干扰 JS 设置的位置）*/
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #x-social-screen.active {
      display: flex !important;
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }

    /* X 页面底栏 - 使用safe-area处理底部安全区域 */
    #x-social-screen.active .x-bottom-nav {
      padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
      transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* X私信详情页面输入框 - 使用safe-area处理底部安全区域 */
    #x-message-detail-page .message-input-area {
      padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
      transition: all 0.15s ease-out !important;
    }

    /* X私信输入框 - 键盘弹起时的固定定位 */
    #x-message-detail-page .message-input-area.keyboard-visible {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 9999 !important;
      max-width: 430px !important;
      margin: 0 auto !important;
    }

    /* X 的所有全屏页面 - JavaScript 会动态设置位置和尺寸 */
    #x-askbox-page,
    #account-askbox-page,
    #x-live-page,
    #x-article-page,
    #x-message-detail-page,
    #live-room-container,
    #x-map-container {
      width: 100% !important; /* 修复：使用 100% 避免滚动条宽度导致偏移 */
      height: var(--app-height) !important;
      max-width: none !important;
      max-height: none !important;
      overflow: hidden !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    /* App Header */
    .app-header {
      /* 🔥 使用全局App Header padding变量 */
      padding: var(--app-header-total-padding) 16px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-primary);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .app-back-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .app-back-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .app-back-btn:active {
      transform: scale(0.95);
    }

    .app-title {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .app-header-actions {
      width: 36px;
    }

    /* App Content */
    /* App Content - 确保背景完全覆盖无缝隙 */
    .app-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      /* 🔥 默认使用全局App Header padding变量 */
      padding-top: var(--app-header-total-padding);
      scrollbar-width: none;
      /* 确保背景图片正确覆盖 */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-origin: border-box;
    }

    .app-content::-webkit-scrollbar {
      display: none;
    }

    /* 🔥 chatScreen的app-content不需要padding-top（因为chat-app-header有自己的padding） */
    #chatScreen > .app-content {
      padding-top: 0;
      padding-bottom: 80px;
    }

    #chatScreen.chat-dock-style-music > .app-content {
      padding-bottom: 130px;
    }

    /* Blog App Styles */
    .blog-post-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 16px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .blog-post-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .blog-post-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .blog-post-card:hover::before {
      opacity: 0.6;
    }

    .blog-post-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
    }

    .blog-post-meta-dot {
      width: 3px;
      height: 3px;
      background: var(--text-tertiary);
      border-radius: 50%;
    }

    .blog-post-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .blog-post-excerpt {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 12px;
    }

    .blog-post-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .blog-tag {
      padding: 4px 10px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Profile App Styles */
    .profile-header-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 24px;
      margin-bottom: 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .profile-header-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(135deg, var(--accent-color) 0%, transparent 100%);
      opacity: 0.03;
    }

    .profile-avatar-large {
      width: 96px;
      height: 96px;
      border-radius: 24px;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      font-weight: 600;
      position: relative;
      overflow: hidden;
    }

    .profile-avatar-large::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      animation: shine 3s infinite;
    }

    .profile-name {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    .profile-username {
      font-size: 13px;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: 16px;
    }

    .profile-bio-text {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .profile-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 20px;
    }

    .profile-stat-item {
      text-align: center;
      padding: 16px;
      background: var(--bg-primary);
      border-radius: 16px;
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
    }

    .profile-stat-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .profile-stat-value {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .profile-stat-label {
      font-size: 11px;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .profile-section {
      margin-bottom: 20px;
    }

    .profile-section-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .profile-link-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .profile-link-card:hover {
      background: var(--hover-bg);
      transform: translateX(4px);
    }

    .profile-link-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .profile-link-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .profile-link-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .profile-link-text {
      font-size: 14px;
      font-weight: 500;
    }

    /* Mail App Styles */
    .mail-item {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .mail-item.unread {
      background: var(--bg-secondary);
      border-left: 3px solid var(--accent-color);
    }

    .mail-item:hover {
      transform: translateX(4px);
      box-shadow: var(--shadow-sm);
    }

    .mail-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin-bottom: 8px;
    }

    .mail-sender {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .mail-time {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
    }

    .mail-subject {
      font-size: 13px;
      color: var(--text-primary);
      margin-bottom: 6px;
      font-weight: 500;
    }

    .mail-preview {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    /* TV App Styles */
    .tv-player {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      aspect-ratio: 16/9;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tv-player::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(
        0deg,
        var(--bg-tertiary) 0px,
        var(--border-color) 2px,
        var(--bg-tertiary) 4px
      );
      opacity: 0.1;
      animation: tvScanlines 8s linear infinite;
    }

    @keyframes tvScanlines {
      0% { transform: translateY(0); }
      100% { transform: translateY(20px); }
    }

    .tv-play-btn {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--accent-color);
      border: 2px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 1;
    }

    .tv-play-btn:hover {
      transform: scale(1.1);
      box-shadow: var(--shadow-lg);
    }

    .tv-play-btn svg {
      width: 28px;
      height: 28px;
      stroke: var(--bg-primary);
      fill: var(--bg-primary);
      stroke-width: 2;
    }

    .tv-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      margin-bottom: 20px;
    }

    .tv-control-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tv-control-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .tv-control-btn svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .tv-video-list {
      display: grid;
      gap: 12px;
    }

    .tv-video-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 12px;
      display: flex;
      gap: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tv-video-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .tv-video-thumb {
      width: 100px;
      height: 60px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tv-video-thumb svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 2;
    }

    .tv-video-info {
      flex: 1;
    }

    .tv-video-title {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--text-primary);
    }

    .tv-video-meta {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
    }

    /* Settings App Styles */
    .settings-header-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
      animation: slideDown 0.6s ease;
    }

    .settings-logo-area {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .settings-logo-icon {
      width: 40px;
      height: 40px;
      background: var(--accent-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bg-primary);
    }

    .settings-logo-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--bg-primary);
      fill: none;
      stroke-width: 2;
    }

    .settings-logo-text {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .settings-header-actions {
      display: flex;
      gap: 8px;
    }

    .settings-icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .settings-icon-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .settings-icon-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }


    /* ==================== 多开聊天框样式 V2 - INS简约风 ==================== */

    /* 聊天框卡片 */
    .chat-session-card-v2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .chat-session-card-v2::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 100%;
      background: transparent;
      transition: all 0.25s ease;
    }

    .chat-session-card-v2:hover {
      border-color: var(--text-tertiary);
      transform: translateX(2px);
    }

    .chat-session-card-v2.active {
      background: var(--bg-primary);
      border-color: var(--text-primary);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .chat-session-card-v2.active::before {
      background: var(--text-primary);
    }

    /* 左侧内容区 */
    .chat-session-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    /* 图标 */
    .chat-session-icon-v2 {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-tertiary);
      border-radius: 10px;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .chat-session-icon-v2 svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 2;
      transition: stroke 0.2s ease;
    }

    .chat-session-card-v2:hover .chat-session-icon-v2 {
      background: var(--bg-primary);
    }

    .chat-session-card-v2:hover .chat-session-icon-v2 svg {
      stroke: var(--text-primary);
    }

    .chat-session-card-v2.active .chat-session-icon-v2 {
      background: var(--bg-secondary);
    }

    .chat-session-card-v2.active .chat-session-icon-v2 svg {
      stroke: var(--text-primary);
    }

    /* 信息区 */
    .chat-session-info-v2 {
      flex: 1;
      min-width: 0;
    }

    .chat-session-name-v2 {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chat-session-meta-v2 {
      font-size: 11px;
      color: var(--text-tertiary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 操作按钮容器 */
    .chat-session-actions-v2 {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    /* 操作按钮图标 */
    .session-action-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
      position: relative;
    }

    .session-action-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 2;
      transition: all 0.2s ease;
    }

    .session-action-icon:hover {
      background: var(--bg-tertiary);
    }

    .session-action-icon:hover svg {
      stroke: var(--text-secondary);
    }

    .session-action-icon:active {
      transform: scale(0.95);
    }

    /* 同步按钮特殊样式 */
    .session-action-icon[data-synced="false"] .sync-icon {
      fill: none;
      stroke: var(--text-tertiary);
    }

    .session-action-icon[data-synced="true"] .sync-icon {
      fill: var(--text-primary);
      stroke: var(--text-primary);
    }

    .session-action-icon[data-synced="false"]:hover .sync-icon {
      stroke: var(--text-secondary);
      fill: none;
    }

    .session-action-icon[data-synced="true"]:hover {
      background: var(--bg-secondary);
    }

    .session-action-icon[data-synced="true"]:hover .sync-icon {
      fill: var(--text-primary);
      stroke: var(--text-primary);
    }

    /* 删除按钮 */
    .session-action-icon.delete svg {
      stroke: var(--text-tertiary);
    }

    .session-action-icon.delete:hover {
      background: rgba(239, 68, 68, 0.1);
    }

    .session-action-icon.delete:hover svg {
      stroke: #ef4444;
    }

    /* Dark主题优化 */
    [data-theme='dark'] .chat-session-card-v2 {
      background: #151515;
      border-color: #2a2a2a;
    }

    [data-theme='dark'] .chat-session-card-v2:hover {
      border-color: #404040;
    }

    [data-theme='dark'] .chat-session-card-v2.active {
      background: #141414;
      border-color: #505050;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    [data-theme='dark'] .chat-session-icon-v2 {
      background: #1f1f1f;
    }

    [data-theme='dark'] .chat-session-card-v2:hover .chat-session-icon-v2 {
      background: #252525;
    }

    [data-theme='dark'] .chat-session-card-v2.active .chat-session-icon-v2 {
      background: #202020;
    }

    [data-theme='dark'] .session-action-icon:hover {
      background: #202020;
    }

    /* Light主题优化 */
    [data-theme='light'] .chat-session-card-v2 {
      background: #ffffff;
      border-color: #e5e5e5;
    }

    [data-theme='light'] .chat-session-card-v2:hover {
      border-color: #d4d4d4;
    }

    [data-theme='light'] .chat-session-card-v2.active {
      background: #fafafa;
      border-color: #a3a3a3;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    [data-theme='light'] .chat-session-icon-v2 {
      background: #fafafa;
    }

    [data-theme='light'] .chat-session-card-v2:hover .chat-session-icon-v2 {
      background: #ffffff;
    }

    [data-theme='light'] .chat-session-card-v2.active .chat-session-icon-v2 {
      background: #f5f5f5;
    }

    [data-theme='light'] .session-action-icon:hover {
      background: #fafafa;
    }

    /* ==================== 多开聊天框样式结束 ==================== */

    .settings-section {
      margin-bottom: 28px;
    }

    .settings-section-header {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-secondary);
      margin-bottom: 12px;
      padding-left: 4px;
      position: relative;
    }

    .settings-section-header::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 4px;
      background: var(--accent-color);
      border-radius: 50%;
    }

    .settings-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 12px;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .settings-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, transparent, var(--accent-color));
      opacity: 0.02;
      border-radius: 0 16px 0 100%;
    }

    .settings-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    /* ==================== Chat Token UI ==================== */
    .token-card {
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

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

    .token-summary-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .token-title {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }

    .token-value {
      font-size: 28px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      line-height: 1;
    }

    .token-unit {
      font-size: 10px;
      letter-spacing: 0.24em;
      color: var(--text-tertiary);
    }

    .token-orbit {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .token-orbit-ring {
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      border: 1px dashed var(--text-tertiary);
      opacity: 0.4;
      animation: tokenOrbitSpin 12s linear infinite;
    }

    .token-orbit-core {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--text-primary);
      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
    }

    @keyframes tokenOrbitSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .token-breakdown {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .token-row {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .token-label {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .token-bar {
      height: 6px;
      border-radius: 999px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      overflow: hidden;
      position: relative;
    }

    .token-bar-fill {
      display: block;
      height: 100%;
      background: var(--text-primary);
      transition: width 0.3s ease;
    }

    .token-number {
      font-size: 12px;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      min-width: 28px;
      text-align: right;
    }

    .token-divider {
      height: 1px;
      background: var(--border-color);
      opacity: 0.6;
      margin-top: 2px;
    }

    .token-toggle-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .token-toggle-heading {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .token-toggle-note {
      font-size: 10px;
      color: var(--text-tertiary);
    }

    .token-toggles {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .token-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--border-color);
    }

    .token-toggle-row:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .token-toggle-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .token-toggle-name {
      font-size: 13px;
      color: var(--text-primary);
    }

    .token-toggle-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.4;
    }

    .token-footnote {
      font-size: 11px;
      color: var(--text-tertiary);
      border-top: 1px dashed var(--border-color);
      padding-top: 10px;
    }

    [data-theme='dark'] .token-orbit {
      background: var(--bg-secondary);
    }

    [data-theme='dark'] .token-orbit-core {
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
    }

    [data-theme='dark'] .token-bar {
      background: rgba(255, 255, 255, 0.06);
    }

    .settings-input-group {
      margin-bottom: 16px;
    }

    .settings-input-group:last-child {
      margin-bottom: 0;
    }

    .settings-label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 8px;
      font-family: inherit;
    }

    .settings-input,
    .settings-textarea,
    .settings-select {
      width: 100%;
      padding: 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-size: 13px;
      color: var(--text-primary);
      font-family: inherit;
      transition: all 0.2s ease;
      resize: none;
    }

    .settings-textarea {
      min-height: 120px;
      line-height: 1.6;
      font-family: inherit;
    }

    .settings-input:focus,
    .settings-textarea:focus,
    .settings-select:focus {
      outline: none;
      border-color: var(--accent-color);
      box-shadow: 0 0 0 3px rgba(42, 42, 42, 0.05);
    }

    [data-theme='dark'] .settings-input:focus,
    [data-theme='dark'] .settings-textarea:focus,
    [data-theme='dark'] .settings-select:focus {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
    }

    .settings-btn-group {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .settings-btn {
      flex: 1;
      padding: 10px 16px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Inter', sans-serif;
      text-align: center;
    }

    .settings-btn.primary {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .settings-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .settings-btn:active {
      transform: translateY(0);
    }

    .settings-btn.danger {
      background: transparent;
      border-color: var(--text-primary);
      color: var(--text-primary);
      letter-spacing: 0.5px;
    }

    .settings-btn.danger:hover {
      box-shadow: var(--shadow-sm);
    }

    /* ==================== Chat Data Cleaner ==================== */
    .chat-data-cleaner-overlay {
      position: absolute;
      inset: 0;
      z-index: 1500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    [data-theme='dark'] .chat-data-cleaner-overlay {
      background: rgba(0, 0, 0, 0.45);
    }

    .chat-data-cleaner-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .chat-data-cleaner-card {
      position: relative;
      width: 100%;
      max-width: 360px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 22px;
      padding: 18px;
      box-shadow: var(--shadow-lg);
      transform: translateY(8px) scale(0.98);
      transition: transform 0.25s ease;
      overflow: hidden;
    }

    .chat-data-cleaner-overlay.active .chat-data-cleaner-card {
      transform: translateY(0) scale(1);
    }

    .chat-data-cleaner-stars {
      position: absolute;
      top: 12px;
      right: 14px;
      display: grid;
      gap: 6px;
      opacity: 0.25;
      pointer-events: none;
    }

    .chat-data-cleaner-stars span {
      width: 8px;
      height: 8px;
      background: var(--text-primary);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

    .chat-data-cleaner-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
    }

    .chat-data-cleaner-title {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .chat-data-cleaner-close {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .chat-data-cleaner-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 2;
    }

    .chat-data-cleaner-close:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .chat-data-cleaner-sub {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-bottom: 12px;
    }

    .chat-data-cleaner-select-all {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px dashed var(--border-color);
      background: var(--bg-secondary);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .chat-data-cleaner-select-all:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .chat-data-cleaner-select-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.4px;
    }

    .chat-data-cleaner-select-meta {
      margin-left: auto;
      font-size: 10px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }

    .chat-data-cleaner-list {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .chat-data-cleaner-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      cursor: pointer;
      text-align: left;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .chat-data-cleaner-item:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .chat-data-cleaner-item.is-empty {
      opacity: 0.5;
      cursor: default;
    }

    .chat-data-cleaner-check {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      position: relative;
      flex-shrink: 0;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .chat-data-cleaner-item.is-selected .chat-data-cleaner-check,
    .chat-data-cleaner-select-all.is-selected .chat-data-cleaner-check {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .chat-data-cleaner-item.is-selected .chat-data-cleaner-check::after,
    .chat-data-cleaner-select-all.is-selected .chat-data-cleaner-check::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 10px;
      border: 2px solid var(--bg-primary);
      border-top: 0;
      border-left: 0;
      transform: translate(-50%, -55%) rotate(45deg);
      top: 50%;
      left: 50%;
    }

    .chat-data-cleaner-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .chat-data-cleaner-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .chat-data-cleaner-meta {
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }

    .chat-data-cleaner-note {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.4px;
    }

    .chat-data-cleaner-actions {
      margin-top: 14px;
      display: flex;
      gap: 8px;
    }

    .chat-block-group {
      margin-bottom: 12px;
    }

    .chat-block-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }

    .chat-block-status-main {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .chat-block-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.6;
    }

    .chat-block-status-text {
      font-size: 12px;
      color: var(--text-primary);
      letter-spacing: 0.4px;
    }

    .chat-block-status-meta {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    .chat-block-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 6px;
      line-height: 1.6;
    }

    /* 数据管理区域样式 */
    .data-management-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
    }

    .data-management-info {
      flex: 1;
      margin-right: 16px;
    }

    .data-management-title {
      display: flex;
      align-items: center;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .data-management-title svg {
      stroke: var(--text-secondary);
      flex-shrink: 0;
    }

    .data-management-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.4;
    }

    .data-management-divider {
      height: 1px;
      background: var(--border-color);
      margin: 4px 0;
    }

    .data-management-item .settings-btn {
      flex: 0 0 auto;
      min-width: 60px;
    }

    /* 自动备份设置弹窗 */
    .auto-backup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 9850;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0s 0.25s;
    }

    .auto-backup-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.25s ease, visibility 0s 0s;
    }

    .auto-backup-modal {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -46%);
      width: min(420px, 92vw);
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      box-shadow: var(--shadow-xl);
      z-index: 9860;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
    }

    .auto-backup-modal.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, -50%);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0s;
    }

    .auto-backup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--border-color);
    }

    .auto-backup-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.4px;
    }

    .auto-backup-close {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid var(--border-color);
      background: transparent;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .auto-backup-close svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .auto-backup-close:hover {
      border-color: var(--text-secondary);
      color: var(--text-primary);
    }

    .auto-backup-body {
      padding: 14px 18px 4px;
    }

    .auto-backup-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .auto-backup-hint {
      font-size: 10px;
      color: var(--text-tertiary);
      margin-top: 6px;
      line-height: 1.4;
    }

    .auto-backup-preview {
      margin: 8px 0 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--bg-tertiary);
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .auto-backup-actions {
      display: flex;
      gap: 10px;
      padding: 12px 18px 16px;
      border-top: 1px solid var(--border-color);
    }

    .auto-backup-actions .settings-btn {
      flex: 1;
    }

    /* 数据管理面板 */
    .data-manager-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 9800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 16px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0s 0.25s;
    }

    .data-manager-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.25s ease, visibility 0s 0s;
    }

    .data-manager-sheet {
      width: min(440px, 94vw);
      max-height: 90vh;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .data-manager-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 20px 12px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-primary);
    }

    .data-manager-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .data-manager-subtitle {
      margin-top: 4px;
      font-size: 11px;
      color: var(--text-tertiary);
    }

    .data-manager-close {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .data-manager-close svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 2;
    }

    .data-manager-close:hover {
      background: var(--hover-bg);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .data-manager-summary {
      padding: 10px 20px;
      font-size: 11px;
      color: var(--text-secondary);
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      line-height: 1.6;
    }

    .data-manager-actions {
      padding: 12px 20px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
    }

    .data-manager-action-btn {
      padding: 8px 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.2s ease;
      flex: 0 0 auto;
      letter-spacing: 0.2px;
    }

    .data-manager-action-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .data-manager-action-btn:active {
      transform: translateY(0);
    }

    .data-manager-action-btn.danger {
      background: transparent;
      border-color: var(--text-primary);
      color: var(--text-primary);
    }

    .data-manager-action-btn.disabled,
    .data-manager-action-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }

    .data-manager-list {
      padding: 16px 20px 20px;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .data-manager-list::-webkit-scrollbar {
      display: none;
    }

    .data-manager-category {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 12px;
    }

    .data-manager-category-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
    }

    .data-manager-category-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .data-manager-category-meta {
      font-size: 11px;
      color: var(--text-tertiary);
      white-space: nowrap;
    }

    .data-manager-category-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .data-manager-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 0;
      border-top: 1px dashed var(--border-color);
    }

    .data-manager-category-body .data-manager-item:first-child {
      border-top: none;
      padding-top: 0;
    }

    .data-manager-item-checkbox {
      width: 16px;
      height: 16px;
      accent-color: var(--accent-color);
      margin-top: 2px;
      flex: 0 0 auto;
    }

    .data-manager-item-info {
      flex: 1;
      min-width: 0;
    }

    .data-manager-item-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .data-manager-item-meta {
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.4;
    }

    .data-manager-item-note {
      font-size: 10px;
      color: var(--text-tertiary);
      margin-top: 4px;
      line-height: 1.4;
      opacity: 0.85;
    }

    .data-manager-item-btn {
      flex: 0 0 auto;
      padding: 6px 10px;
      font-size: 10px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .data-manager-item-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .data-manager-item-btn.danger {
      background: transparent;
      border-color: var(--text-primary);
    }

    .data-manager-empty,
    .data-manager-loading {
      padding: 20px;
      text-align: center;
      font-size: 12px;
      color: var(--text-tertiary);
    }

    .knowledge-item {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .knowledge-item:hover {
      background: var(--hover-bg);
      transform: translateX(4px);
    }

    .knowledge-item-info {
      flex: 1;
    }

    .knowledge-item-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .knowledge-item-category {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .knowledge-item-actions {
      display: flex;
      gap: 8px;
    }

    .knowledge-item-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .knowledge-item-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .knowledge-item-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .preset-selector {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
      /* 🔥 【老王修复】覆盖父容器的overflow:hidden，确保按钮热区不被裁剪 */
      overflow: visible;
      position: relative;
      z-index: 1;
    }

    .preset-selector select {
      flex: 1;
    }

    .preset-manager-btn {
      /* 🔥 【老王优化】增大按钮到44px（iOS最佳触摸尺寸） */
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
      /* 🔥 确保不被遮挡 */
      position: relative;
      z-index: 10;
      /* 🔥 确保点击事件有效 */
      pointer-events: auto;
    }

    /* 🔥 【老王新增】扩大点击热区（视觉44px，实际触摸区域52px） */
    .preset-manager-btn::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      /* 用于调试时可视化热区（生产环境注释掉）
      background: rgba(255, 0, 0, 0.1);
      */
    }

    .preset-manager-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    /* 🔥 点击时视觉反馈 */
    .preset-manager-btn:active {
      transform: scale(0.95);
      opacity: 0.7;
    }

    .preset-manager-btn svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
      /* 🔥 确保SVG不阻止点击 */
      pointer-events: none;
    }

    .empty-state {
      text-align: center;
      padding: 32px 16px;
      color: var(--text-tertiary);
    }

    .empty-state-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 12px;
      opacity: 0.3;
    }

    .empty-state-text {
      font-size: 13px;
      line-height: 1.6;
    }

    /* Irregular Modal/Popup Styles */
    .irregular-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      padding: 24px;
      z-index: 9500;
      min-width: 280px;
      max-width: 90%;
      box-shadow: var(--shadow-xl);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  visibility 0s 0.3s;
      /* Irregular shape using clip-path */
      clip-path: polygon(
        0 8px,
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px)
      );
    }

    .irregular-modal.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  visibility 0s 0s;
    }

    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      z-index: 9400;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, visibility 0s 0.3s;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.3s ease, visibility 0s 0s;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }

    .modal-content {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }

    .modal-btn {
      padding: 10px 20px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .modal-btn.primary {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .modal-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    /* ==================== New Contact Sheet - 新建联系人底部抽屉 ==================== */
    .new-contact-sheet-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 200;
      display: flex;
      align-items: flex-end;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .new-contact-sheet-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .new-contact-sheet {
      width: 100%;
      max-height: 85vh;
      background: var(--bg-primary);
      border-radius: 24px 24px 0 0;
      padding: 0;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
    }

    .new-contact-sheet-overlay.active .new-contact-sheet {
      transform: translateY(0);
    }

    .new-contact-sheet-header {
      padding: 16px 20px 12px;
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
      text-align: center;
    }

    .new-contact-sheet-handle {
      width: 40px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 0 auto 16px;
      opacity: 0.6;
    }

    .new-contact-sheet-title {
      font-family: 'Inter', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .new-contact-sheet-subtitle {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-secondary);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .new-contact-sheet-content {
      padding: 20px;
      overflow-y: auto;
      flex: 1;
    }

    /* Avatar Section */
    .new-contact-avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 24px;
    }

    .new-contact-avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 3px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .new-contact-avatar:hover {
      border-color: var(--accent-color);
      transform: scale(1.08);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .new-contact-avatar svg {
      width: 44px;
      height: 44px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
    }

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

    .new-contact-avatar-hint {
      margin-top: 10px;
      font-size: 12px;
      color: var(--text-tertiary);
    }

    /* Input Groups */
    .new-contact-input-group {
      margin-bottom: 16px;
    }

    .new-contact-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .new-contact-input {
      width: 100%;
      padding: 14px 16px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-size: 15px;
      color: var(--text-primary);
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .new-contact-input:focus {
      outline: none;
      border-color: var(--accent-color);
      box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
    }

    .new-contact-input.readonly {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      cursor: default;
    }

    .new-contact-input::placeholder {
      color: var(--text-tertiary);
    }

    /* Persona Info Box */
    .new-contact-persona-info,
    .new-contact-character-info {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 16px;
      margin-top: 16px;
    }

    .new-contact-persona-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
    }

    .new-contact-persona-title svg {
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 2;
    }

    .new-contact-persona-content {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.7;
    }

    .new-contact-persona-content .persona-item {
      display: flex;
      margin-bottom: 6px;
    }

    .new-contact-persona-content .persona-label {
      color: var(--text-tertiary);
      min-width: 65px;
      flex-shrink: 0;
    }

    .new-contact-persona-content .persona-value {
      color: var(--text-primary);
    }

    .new-contact-persona-note {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-color);
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.6;
    }

    .new-contact-character-name {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-primary);
    }

    /* Bottom Actions */
    .new-contact-sheet-actions {
      display: flex;
      gap: 12px;
      padding: 16px 20px 24px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-primary);
    }

    .new-contact-sheet-btn {
      flex: 1;
      padding: 14px 20px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .new-contact-sheet-btn.cancel {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
    }

    .new-contact-sheet-btn.cancel:hover {
      background: var(--bg-secondary);
    }

    .new-contact-sheet-btn.primary {
      background: var(--accent-color);
      color: #fff;
      border: none;
    }

    .new-contact-sheet-btn.primary:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* Dark mode adjustments */
    [data-theme="dark"] .new-contact-sheet-overlay {
      background: rgba(0, 0, 0, 0.8);
    }

    [data-theme="dark"] .new-contact-input.readonly {
      background: rgba(255, 255, 255, 0.03);
    }

    [data-theme="dark"] .new-contact-sheet-btn.primary {
      color: #000;
    }
    /* ==================== End New Contact Sheet ==================== */

    /* Icon Management Modal Styles */
    .icon-management-content {
      max-height: 60vh;
      overflow-y: auto;
      padding: 4px;
    }

    .icon-mgmt-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }

    @media (max-width: 600px) {
      .icon-mgmt-grid {
        grid-template-columns: 1fr;
      }
    }

    .icon-mgmt-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px 4px 16px 4px;
      padding: 16px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .icon-mgmt-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--text-tertiary);
    }

    .icon-mgmt-preview {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    .icon-mgmt-preview-icon {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 14px 2px 14px 2px;
      transition: all 0.2s ease;
    }

    .icon-mgmt-preview-icon svg {
      width: 32px;
      height: 32px;
      fill: none;
      stroke: var(--text-primary);
      stroke-width: 1.5;
    }

    .icon-mgmt-preview-icon.has-custom-image {
      padding: 0;
      border: none !important; /* 🔥 强制移除边框 */
      background: transparent !important; /* 🔥 支持透明底 */
    }

    .icon-mgmt-preview-icon.has-custom-image img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* 🔥 改为contain，保持图标完整性，不裁剪 */
      border-radius: 14px 2px 14px 2px;
      position: relative;
      z-index: 2;
    }

    .icon-mgmt-preview-icon.dock-icon-preview {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .icon-mgmt-preview-icon.dock-icon-preview svg {
      fill: var(--bg-primary);
      stroke: none;
    }

    .icon-mgmt-name {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 12px;
      color: var(--text-primary);
      /* 可点击编辑 */
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid transparent;
      transition: all 0.2s ease;
      min-width: 60px;
    }

    .icon-mgmt-name:hover {
      background: var(--bg-tertiary);
      border-color: var(--border-color);
    }

    /* 编辑模式 */
    .icon-mgmt-name.editing {
      background: var(--bg-primary);
      border-color: var(--accent-color);
      outline: none;
      box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 255,255,255), 0.2);
    }

    .icon-mgmt-name-hint {
      font-size: 10px;
      color: var(--text-tertiary);
      text-align: center;
      margin-top: -8px;
      margin-bottom: 8px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .icon-mgmt-card:hover .icon-mgmt-name-hint {
      opacity: 1;
    }

    .icon-mgmt-controls {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }

    .icon-mgmt-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px 2px 8px 2px;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
    }

    .icon-mgmt-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
    }

    .icon-mgmt-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
      border-color: var(--text-tertiary);
    }

    .icon-mgmt-btn:active {
      transform: translateY(0);
    }

    .icon-mgmt-btn.upload:hover {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .icon-mgmt-btn.upload:hover svg {
      stroke: var(--bg-primary);
    }

    .icon-mgmt-btn.apply {
      background: rgba(76, 175, 80, 0.1);
      border-color: rgba(76, 175, 80, 0.3);
    }

    .icon-mgmt-btn.apply:hover {
      background: rgb(76, 175, 80);
      border-color: rgb(76, 175, 80);
    }

    .icon-mgmt-btn.apply:hover svg {
      stroke: white;
    }

    .icon-mgmt-btn.restore {
      background: rgba(244, 67, 54, 0.1);
      border-color: rgba(244, 67, 54, 0.3);
    }

    .icon-mgmt-btn.restore:hover {
      background: rgb(244, 67, 54);
      border-color: rgb(244, 67, 54);
    }

    .icon-mgmt-btn.restore:hover svg {
      stroke: white;
    }

    .icon-mgmt-url-input {
      flex: 1;
      min-width: 0;
      padding: 6px 10px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px 2px 8px 2px;
      font-size: 12px;
      color: var(--text-primary);
      transition: all 0.2s ease;
      outline: none;
    }

    .icon-mgmt-url-input:focus {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
    }

    .icon-mgmt-url-input::placeholder {
      color: var(--text-tertiary);
    }

    /* Icon Management Modal - 新样式 (与Typography Modal统一) */
    .icon-management-modal .wallpaper-container {
      max-height: 85vh;
    }

    .icon-management-container .typography-section {
      padding: 40px 20px 24px 20px;
    }

    .icon-management-container .typography-section:not(:last-child) {
      border-bottom: 1px solid var(--border-color);
    }

    .icon-management-container .icon-mgmt-grid {
      margin-top: 16px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .icon-management-container .icon-mgmt-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    /* Scrollbar styling for icon management */
    .icon-management-content::-webkit-scrollbar {
      width: 6px;
    }

    .icon-management-content::-webkit-scrollbar-track {
      background: var(--bg-secondary);
      border-radius: 3px;
    }

    .icon-management-content::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 3px;
    }

    .icon-management-content::-webkit-scrollbar-thumb:hover {
      background: var(--text-tertiary);
    }

    /* Modal subtitle style */
    .modal-subtitle {
      font-size: 13px;
      color: var(--text-secondary);
      margin-top: 4px;
      margin-bottom: 16px;
    }

    /* Dynamic Island - iOS Style (在手机框内部) */
    .dynamic-island {
      position: absolute;
      /* 考虑safe-area让Dynamic Island在正确位置显示 */
      top: calc(8px + env(safe-area-inset-top, 0));
      left: 50%;
      transform: translateX(-50%);
      /* 使用手机颜色专用变量，不受主题影响 */
      background: var(--phone-island-color);
      border-radius: 20px;
      /* 保持在所有全屏毛玻璃遮罩（如组件选择器）之上，避免被模糊遮挡 */
      z-index: 30010;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      overflow: hidden;
      /* 使用width/height过渡，配合cubic-bezier实现流畅动画 */
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      width: 160px;
      height: 32px;
      opacity: 1;
    }

    .dynamic-island.compact {
      width: 130px;
      height: 28px;
      border-radius: 16px;
      padding: 0;
    }

    .dynamic-island.expanded {
      width: 220px;
      height: 70px;
      border-radius: 20px;
      padding: 12px 16px;
    }

    .dynamic-island.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .island-content {
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transition: opacity 0.25s ease 0.15s;
      width: 100%;
    }

    .dynamic-island.expanded .island-content {
      opacity: 1;
    }

    .island-icon {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .island-icon svg {
      width: 18px;
      height: 18px;
      /* 始终使用白色图标 */
      stroke: #ffffff;
      fill: none;
      stroke-width: 2;
    }

    .island-text-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .island-title {
      font-size: 13px;
      font-weight: 600;
      /* 始终使用白色文字 */
      color: #ffffff;
      line-height: 1.2;
    }

    .island-subtitle {
      font-size: 11px;
      /* 始终使用半透明白色 */
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.2;
    }

    [data-theme='dark'] .island-subtitle {
      color: rgba(255, 255, 255, 0.75);
    }

    /* Responsive Design - 大屏幕样式（桌面端查看时有圆角效果）*/
    @media (min-width: 431px) {
      body {
        padding: 20px;
      }

      .phone-container {
        border-radius: 48px;
        border: 12px solid var(--phone-frame-color);
      }

      .phone-frame {
        border-radius: 36px;
      }

      .screen {
        border-radius: 36px;
      }

      .home-screen,
      .boot-screen {
        border-radius: 36px;
      }

      .app-screen {
        border-radius: 36px;
      }

      .char-profile-overlay {
        border-radius: 36px;
      }
    }

    @media (max-width: 430px) {
      .clock-time {
        font-size: 64px;
      }

      .app-grid {
        gap: 16px;
        padding: 16px;
      }

      .app-icon-img {
        width: 58px;
        height: 58px;
      }

      .dock-icon {
        width: 56px;
        height: 56px;
      }
    }

    /* 更小屏（如 320/360 宽）：进一步收紧间距与图标尺寸，确保四列稳定且不溢出 */
    @media (max-width: 360px) {
      .app-grid {
        gap: 12px;
        padding: 12px;
      }

      .app-icon-img {
        width: 52px;
        height: 52px;
      }

      .dock-icon {
        width: 50px;
        height: 50px;
      }

      .app-label {
        max-width: 64px;
      }
    }

    /* ==========================================
     * 排版管理Modal样式 - Typography Management
     * INS简约风格 + 黑白灰配色 + 精致动效
     * ========================================== */

    /* 排版区域 */
    .typography-section {
      padding: 20px;
      animation: fadeIn 0.6s ease;
    }

    .typography-section-header {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 16px;
      font-family: 'Inter', sans-serif;
    }

    /* 主题切换卡片网格 */
    .theme-toggle-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    /* 主题卡片 - 异形设计 */
    .theme-card {
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      /* 异形圆角 */
      border-radius: 16px 4px 16px 4px;
      padding: 0;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .theme-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      border-color: var(--text-primary);
    }

    .theme-card.active {
      border-color: var(--text-primary);
      border-width: 2px;
      background: var(--bg-tertiary);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .theme-card.active .theme-card-checkmark {
      opacity: 1;
      transform: scale(1);
    }

    /* 主题预览区域 */
    .theme-card-preview {
      position: relative;
      height: 120px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* 浅色主题预览 */
    .light-preview {
      background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
    }

    /* 深色主题预览 */
    .dark-preview {
      background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
    }

    /* 预览窗口 - 模拟界面 */
    .preview-window {
      width: 100%;
      max-width: 100px;
      background: transparent;
      border-radius: 8px 2px 8px 2px;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .preview-bar {
      height: 4px;
      border-radius: 2px;
      margin-bottom: 6px;
    }

    .light-bar {
      background: #e0e0e0;
    }

    .dark-bar {
      background: #2a2a2a;
    }

    .preview-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .preview-box {
      height: 8px;
      border-radius: 4px 1px 4px 1px;
      animation: previewPulse 2s ease-in-out infinite;
    }

    .preview-box.small {
      height: 6px;
      opacity: 0.7;
    }

    .light-box {
      background: #ffffff;
      border: 1px solid #e0e0e0;
    }

    .dark-box {
      background: #141414;
      border: 1px solid #2a2a2a;
    }

    @keyframes previewPulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.6;
      }
    }

    /* 主题图标覆盖层 */
    .theme-icon-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      opacity: 0.3;
      transition: all 0.3s ease;
    }

    .theme-card:hover .theme-icon-overlay {
      opacity: 0.6;
      transform: translate(-50%, -50%) scale(1.1);
    }

    .theme-card.active .theme-icon-overlay {
      opacity: 0.8;
    }

    .theme-icon-overlay svg {
      width: 100%;
      height: 100%;
      stroke: var(--text-primary);
      fill: none;
    }

    .light-preview .theme-icon-overlay svg {
      stroke: #000000;
    }

    .dark-preview .theme-icon-overlay svg {
      stroke: #ffffff;
    }

    /* 主题卡片标签 */
    .theme-card-label {
      padding: 12px 14px;
      background: var(--bg-primary);
      border-top: 1px solid var(--border-color);
    }

    .theme-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
      font-family: 'Inter', sans-serif;
    }

    .theme-card-desc {
      font-size: 10px;
      color: var(--text-tertiary);
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.01em;
      line-height: 1.4;
    }

    /* 选中标记 */
    .theme-card-checkmark {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      background: var(--text-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .theme-card-checkmark svg {
      width: 12px;
      height: 12px;
      stroke: var(--bg-primary);
      fill: none;
    }

    /* 预留区域占位符 */
    .typography-placeholder {
      padding: 40px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0.5;
    }

    /* 移动端适配 */
    @media (max-width: 430px) {
      .theme-toggle-cards {
        gap: 10px;
      }

      .theme-card-preview {
        height: 100px;
        padding: 12px;
      }

      .preview-window {
        max-width: 80px;
      }

      .theme-icon-overlay {
        width: 32px;
        height: 32px;
      }
    }

    /* ==========================================
     * 字体管理样式 - Font Management
     * ========================================== */

    /* 字体卡片网格 */
    .font-cards-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0 8px 0;
      margin: 0 -2px 20px -2px;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }

    .font-cards-grid::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    /* 横向滚动中的默认字体卡片 */
    .font-cards-grid .font-card {
      flex-shrink: 0;
      width: 160px;
      min-width: 160px;
    }

    /* 字体卡片 - 异形设计 */
    .font-card {
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      /* 异形圆角 */
      border-radius: 16px 4px 16px 4px;
      padding: 0;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .font-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      border-color: var(--text-primary);
    }

    .font-card.active {
      border-color: var(--text-primary);
      border-width: 2px;
      background: var(--bg-tertiary);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .font-card.active .font-card-checkmark {
      opacity: 1;
      transform: scale(1);
    }

    /* 字体预览区域 */
    .font-card-preview {
      position: relative;
      height: 100px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
      border-bottom: 1px solid var(--border-color);
    }

    .font-preview-text {
      font-size: 36px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .font-preview-sample {
      font-size: 11px;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
      opacity: 0.8;
    }

    /* 字体卡片标签 */
    .font-card-label {
      padding: 12px 14px;
      background: var(--bg-primary);
    }

    .font-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
      font-family: 'Inter', sans-serif;
    }

    .font-card-type {
      font-size: 10px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.01em;
    }

    /* 选中标记 */
    .font-card-checkmark {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      background: var(--text-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .font-card-checkmark svg {
      width: 12px;
      height: 12px;
      stroke: var(--bg-primary);
      fill: none;
    }

    /* 添加自定义字体区域 */
    .add-custom-font-area {
      margin-top: 20px;
      padding: 16px;
      background: var(--bg-secondary);
      border: 1.5px dashed var(--border-color);
      border-radius: 16px 4px 16px 4px;
      animation: fadeIn 0.6s ease 0.2s both;
    }

    .custom-font-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
      font-family: inherit;
    }

    .custom-font-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 10px;
    }

    .custom-font-input {
      width: 100%;
      padding: 10px 14px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px 2px 8px 2px;
      font-size: 12px;
      color: var(--text-primary);
      font-family: inherit;
      transition: all 0.25s ease;
      outline: none;
    }

    .custom-font-input:focus {
      border-color: var(--text-primary);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .custom-font-input::placeholder {
      color: var(--text-tertiary);
      opacity: 0.6;
    }

    .custom-font-add-btn {
      width: 100%;
      padding: 12px;
      background: var(--text-primary);
      color: var(--bg-primary);
      border: none;
      border-radius: 8px 2px 8px 2px;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .custom-font-add-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .custom-font-add-btn:active {
      transform: translateY(0);
    }

    .custom-font-hint {
      display: flex;
      align-items: center;
      font-size: 10px;
      color: var(--text-tertiary);
      font-family: 'Inter', sans-serif;
      opacity: 0.7;
      line-height: 1.4;
    }

    /* 🔥 顶部间距调整样式 */
    /* 预设按钮容器 */
    .padding-preset-buttons {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }

    /* 预设按钮 */
    .padding-preset-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 6px;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Inter', sans-serif;
    }

    .padding-preset-btn:hover {
      background: var(--bg-secondary);
      border-color: var(--text-tertiary);
      transform: translateY(-2px);
    }

    .padding-preset-btn.active {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .padding-preset-btn.active .preset-value,
    .padding-preset-btn.active .preset-label {
      color: var(--bg-primary);
    }

    .preset-value {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 2px;
      letter-spacing: -0.02em;
    }

    .preset-label {
      font-size: 9px;
      font-weight: 500;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* 自定义输入行 */
    .custom-padding-input-row {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }

    .custom-padding-input-wrapper {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
    }

    .custom-padding-input {
      width: 100%;
      padding: 12px 40px 12px 16px;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
      transition: all 0.2s ease;
    }

    .custom-padding-input:focus {
      outline: none;
      border-color: var(--text-primary);
      background: var(--bg-secondary);
    }

    .padding-input-unit {
      position: absolute;
      right: 16px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-tertiary);
      font-family: 'Inter', sans-serif;
      pointer-events: none;
    }

    .custom-padding-input-row .custom-font-add-btn {
      width: auto;
      min-width: 100px;
      flex-shrink: 0;
    }

    /* 当前值显示 */
    .current-padding-display {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 16px;
      background: var(--bg-tertiary);
      border: 1px dashed var(--border-color);
      border-radius: 6px;
      margin-bottom: 12px;
      font-family: 'Inter', sans-serif;
    }

    .current-padding-label {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-right: 8px;
    }

    .current-padding-value {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: -0.02em;
    }

    /* 字体区域标签 */
    .font-section-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
      font-family: 'Inter', sans-serif;
      opacity: 0.8;
    }

    /* 默认字体横向滚动容器 - 所有默认字体在一行滑动 */
    .default-fonts-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0 8px 0;
      margin: 0 -2px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .default-fonts-scroll::-webkit-scrollbar {
      display: none;
    }

    /* 默认字体横向滚动中的卡片 */
    .default-fonts-scroll .font-card {
      flex-shrink: 0;
      width: 140px;
      min-width: 140px;
    }

    /* 自定义字体区域 */
    .custom-fonts-section {
      margin-top: 20px;
      animation: fadeIn 0.5s ease;
    }

    /* 自定义字体横向滚动容器 */
    .custom-fonts-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0 8px 0;
      margin: 0 -2px;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }

    .custom-fonts-scroll::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    /* 横向滚动中的字体卡片 */
    .custom-fonts-scroll .font-card {
      flex-shrink: 0;
      width: 160px;
      min-width: 160px;
    }

    /* 自定义字体删除按钮（卡片右下角圆形×，适配日间/夜间） */
    .custom-fonts-scroll .custom-font-delete-btn {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      z-index: 3;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      opacity: 0.75;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .custom-fonts-scroll .font-card:hover .custom-font-delete-btn {
      opacity: 1;
    }

    .custom-fonts-scroll .custom-font-delete-btn:hover {
      background: var(--text-primary);
      border-color: var(--text-primary);
      color: var(--bg-primary);
      transform: scale(1.05);
    }

    .custom-fonts-scroll .custom-font-delete-btn:active {
      transform: scale(0.95);
    }

    /* 自定义字体卡片标签留出按钮空间（避免压住文字） */
    .custom-fonts-scroll .font-card-label {
      padding-right: 44px;
    }

    /* 删除过渡动画 */
    .font-card.removing,
    .font-card.removing:hover {
      opacity: 0;
      transform: scale(0.96);
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
    }

    /* ==========================================
       手机颜色管理样式 - Phone Color Management
       ========================================== */

    /* 颜色方案横向滚动容器 */
    .color-schemes-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0 8px 0;
      margin: 0 -2px 20px -2px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .color-schemes-scroll::-webkit-scrollbar {
      display: none;
    }

    /* 颜色方案卡片 */
    .color-scheme-card {
      flex-shrink: 0;
      width: 160px;
      min-width: 160px;
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 16px 4px 16px 4px;
      padding: 0;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .color-scheme-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      border-color: var(--text-primary);
    }

    .color-scheme-card.active {
      border-color: var(--text-primary);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* 颜色方案预览区域 */
    .color-scheme-preview {
      height: 120px;
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border-bottom: 1px solid var(--border-color);
    }

    /* 手机预览 */
    .color-preview-phone {
      width: 80px;
      height: 100px;
      position: relative;
      background: var(--bg-secondary);
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 手机框预览 */
    .color-preview-frame {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 2px solid #000000;
      border-radius: 12px;
      pointer-events: none;
    }

    /* 刘海屏预览 */
    .color-preview-notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 8px;
      background: #0a0a0a;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }

    /* 灵动岛预览 */
    .color-preview-island {
      position: absolute;
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 6px;
      background: #1a1a1a;
      border-radius: 3px;
    }

    /* 颜色方案标签 */
    .color-scheme-label {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .color-scheme-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
    }

    .color-scheme-colors {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .color-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid var(--border-color);
    }

    /* 颜色方案选中标记 */
    .color-scheme-checkmark {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      background: var(--text-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .color-scheme-checkmark svg {
      width: 12px;
      height: 12px;
      stroke: var(--bg-primary);
    }

    .color-scheme-card.active .color-scheme-checkmark {
      opacity: 1;
      transform: scale(1);
    }

    /* ==========================================
       🎨 底栏切换选择器样式
       ========================================== */

    .dock-styles-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0 8px 0;
      margin: 0 -2px 20px -2px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .dock-styles-scroll::-webkit-scrollbar {
      display: none;
    }

    /* 底栏样式卡片 */
    .dock-style-card {
      flex-shrink: 0;
      width: 120px;
      min-width: 120px;
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 16px 4px 16px 4px;
      padding: 0;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .dock-style-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      border-color: var(--text-primary);
    }

    .dock-style-card.active {
      border-color: var(--text-primary);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* 底栏样式预览区域 - 黑白灰风格 */
    .dock-style-preview {
      height: 80px;
      background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0 0 10px 0;
      border-bottom: 1px solid var(--border-color);
    }

    /* 底栏预览背景 */
    .dock-preview-bg {
      display: flex;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 20px;
    }

    /* 默认样式预览 */
    .dock-preview-default {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
    }

    /* 磨砂样式预览 - 纯净磨砂玻璃，根据背景取色 */
    .dock-preview-frosted {
      background-color: rgba(120, 120, 120, 0.25);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      border: none;
      box-shadow: none;
    }

    /* 液态样式预览 - 烟雾感玻璃效果 */
    .dock-preview-liquid {
      background-color: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(6px) contrast(1.05) brightness(0.95);
      -webkit-backdrop-filter: blur(6px) contrast(1.05) brightness(0.95);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.05);
    }

    /* 预览图标 */
    .dock-preview-icon {
      width: 20px;
      height: 20px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.1);
    }

    /* 底栏样式标签区域 */
    .dock-style-label {
      padding: 12px;
      text-align: center;
    }

    .dock-style-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .dock-style-desc {
      font-size: 10px;
      color: var(--text-tertiary);
    }

    /* 底栏样式选中标记 */
    .dock-style-checkmark {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      background: var(--text-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dock-style-checkmark svg {
      width: 12px;
      height: 12px;
      stroke: var(--bg-primary);
    }

    .dock-style-card.active .dock-style-checkmark {
      opacity: 1;
      transform: scale(1);
    }

    /* ==========================================
       🎨 真实Dock样式变体 - 完全复刻dock-effects.html
       ========================================== */

    /* 磨砂质地 Dock - Frosted */
    /* 磨砂质地 Dock - 纯净磨砂玻璃，根据背景取色 */
    .dock-bg.dock-style-frosted {
      background-color: rgba(120, 120, 120, 0.25) !important;
      backdrop-filter: blur(20px) saturate(150%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* 液态轻模糊 Dock - Liquid */
    /* 液态轻模糊 Dock - 烟雾感玻璃效果 */
    .dock-bg.dock-style-liquid {
      background-color: rgba(0, 0, 0, 0.4) !important;
      backdrop-filter: blur(6px) contrast(1.05) brightness(0.95) !important;
      -webkit-backdrop-filter: blur(6px) contrast(1.05) brightness(0.95) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.05) !important;
    }

    /* 磨砂和液态模式下的图标样式调整 */
    .dock-bg.dock-style-frosted .dock-icon,
    .dock-bg.dock-style-liquid .dock-icon {
      background-color: rgba(0, 0, 0, 0.2);
      border: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(255, 255, 255, 0.1);
    }

    .dock-bg.dock-style-frosted .dock-icon:hover,
    .dock-bg.dock-style-liquid .dock-icon:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }

    .dock-bg.dock-style-frosted .dock-icon svg,
    .dock-bg.dock-style-liquid .dock-icon svg {
      stroke: rgba(255, 255, 255, 0.9);
    }

    /* 自定义颜色区域 */
    .add-custom-color-area {
      margin-top: 20px;
      padding: 16px;
      background: var(--bg-secondary);
      border: 1.5px dashed var(--border-color);
      border-radius: 16px 4px 16px 4px;
      animation: fadeIn 0.6s ease 0.2s both;
    }

    .custom-color-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 10px;
    }

    .custom-color-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .custom-color-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      font-family: 'Inter', sans-serif;
      flex-shrink: 0;
    }

    .custom-color-input {
      width: 60px;
      height: 36px;
      border: 1px solid var(--border-color);
      border-radius: 8px 2px 8px 2px;
      cursor: pointer;
      transition: all 0.25s ease;
      background: var(--bg-primary);
    }

    .custom-color-input:hover {
      border-color: var(--text-primary);
    }

    .custom-color-input::-webkit-color-swatch-wrapper {
      padding: 4px;
    }

    .custom-color-input::-webkit-color-swatch {
      border: none;
      border-radius: 4px;
    }

    /* ==================== 全屏适配选项样式 ==================== */

    /* 全屏适配选项列表容器 */
    .fullscreen-options-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 12px 4px 12px 4px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    /* 全屏适配选项单项 */
    .fullscreen-option-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: var(--bg-primary);
      transition: background 0.2s ease;
    }

    .fullscreen-option-item:hover {
      background: var(--bg-secondary);
    }

    /* 分隔线效果 - 除了最后一个 */
    .fullscreen-option-item:not(:last-child) {
      border-bottom: 1px solid var(--border-color);
    }

    /* 选项信息区域 */
    .fullscreen-option-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .fullscreen-option-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
    }

    .fullscreen-option-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'Inter', sans-serif;
      opacity: 0.8;
    }

    /* ==================== 全屏适配功能类 ==================== */

    /* 隐藏刘海屏 */
    .notch-hidden .notch {
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }

    /* 时间框贴顶 - 移除safe-area偏移 */
    .status-bar-top .status-bar {
      height: 44px !important;
      padding-top: 8px !important;
    }

    /* 灵动岛贴顶 - 移除safe-area偏移 */
    .dynamic-island-top .dynamic-island {
      top: 8px !important;
    }

    /* 刘海屏贴顶 (配合隐藏刘海时使用，让其他元素补位) */
    .notch-hidden .notch-holder {
      display: none !important;
    }

    /* 🔥 【老王新增】隐藏时间框 - 解决iOS时间重叠问题 */
    /* 只隐藏视觉效果，保留占位高度，防止app-grid扩展导致内容"放大" */
    .status-bar-hidden .status-bar {
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
      /* 不设置 height/padding/margin: 0，保持原有布局占位 */
    }

    /* 🔥 【老王新增】全局时间栏覆盖层 - 独立于homeScreen */
    .global-status-bar-overlay {
      display: none; /* 默认隐藏 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: calc(44px + env(safe-area-inset-top, 0));
      padding: 0 24px;
      padding-top: calc(12px + env(safe-area-inset-top, 0));
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      z-index: 9999;
      /* 无背景色，与原status-bar保持一致 */
      color: var(--text-primary);
      pointer-events: none;
    }

    .global-status-bar-overlay .status-left,
    .global-status-bar-overlay .status-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .global-status-bar-overlay .status-icon {
      opacity: 0.8;
    }

    /* 开启全局时间栏时显示覆盖层 */
    .global-status-bar .global-status-bar-overlay {
      display: flex !important;
    }

    /* 开启全局时间栏时，隐藏homeScreen内的原status-bar避免重复 */
    .global-status-bar .home-screen .status-bar {
      opacity: 0 !important;
      visibility: hidden !important;
    }

    /* 启动画面时隐藏全局时间栏 */
    .boot-screen:not(.hidden) ~ .global-status-bar-overlay,
    .global-status-bar .boot-screen:not(.hidden) ~ * .global-status-bar-overlay {
      display: none !important;
    }

    /* 时间栏贴顶时的全局时间栏适配 */
    .status-bar-top .global-status-bar-overlay {
      height: 44px !important;
      padding-top: 8px !important;
    }

    /* 隐藏时间框时也隐藏全局时间栏 */
    .status-bar-hidden .global-status-bar-overlay {
      display: none !important;
    }

    /* 移动端适配 */
    @media (max-width: 430px) {
      .font-cards-grid {
        gap: 10px;
      }

      .font-card-preview {
        height: 90px;
        padding: 12px;
      }

      .font-preview-text {
        font-size: 32px;
      }

      .font-preview-sample {
        font-size: 10px;
      }
    }

    /* ==========================================
       贴纸系统样式 - Sticker System
       ========================================== */

    /* 贴纸上传区域 */
    .sticker-upload-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 16px;
    }

    /* 当前贴纸预览 */
    .sticker-current-preview {
      width: 100%;
      height: 200px;
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 16px 4px 16px 4px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .sticker-preview-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--text-tertiary);
    }

    .sticker-preview-empty svg {
      width: 48px;
      height: 48px;
      opacity: 0.4;
    }

    .sticker-preview-empty p {
      font-size: 14px;
      margin: 0;
    }

    /* 贴纸预览图片 */
    .sticker-preview-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 按钮组 */
    .sticker-button-group {
      display: flex;
      gap: 12px;
    }

    /* 上传按钮 */
    .sticker-upload-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      background: var(--text-primary);
      color: var(--bg-primary);
      border: none;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Inter', sans-serif;
    }

    .sticker-upload-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .sticker-upload-btn svg {
      width: 18px;
      height: 18px;
    }

    /* 移除按钮 */
    .sticker-remove-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Inter', sans-serif;
    }

    .sticker-remove-btn:hover {
      border-color: #ff4757;
      color: #ff4757;
      background: rgba(255, 71, 87, 0.1);
      transform: translateY(-2px);
    }

    .sticker-remove-btn svg {
      width: 18px;
      height: 18px;
    }


    /* ==========================================
       CHARACTER SYSTEM STYLES
       ========================================== */

    /* Character Header */
    .character-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding: 0 20px;
      animation: slideDown 0.6s ease;
    }

    .character-logo-area {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .character-logo-icon {
      width: 40px;
      height: 40px;
      background: var(--accent-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bg-primary);
    }

    .character-logo-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--bg-primary);
      fill: none;
      stroke-width: 2;
    }

    .character-logo-text {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .character-header-actions {
      display: flex;
      gap: 8px;
    }

    .character-icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .character-icon-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .character-icon-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    /* Worldview Tabs */
    .worldview-tabs {
      display: flex;
      gap: 8px;
      margin: 0 20px 20px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 4px;
      animation: fadeIn 0.6s ease 0.1s both;
    }

    .worldview-tabs::-webkit-scrollbar {
      display: none;
    }

    .worldview-tab {
      flex-shrink: 0;
      padding: 8px 16px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Noto Sans JP', sans-serif;
      position: relative;
    }

    .worldview-tab:hover {
      background: var(--hover-bg);
    }

    .worldview-tab.active {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .worldview-tab.active::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      background: var(--accent-color);
      border-radius: 50%;
    }

    /* Character Grid */
    .character-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 0 20px 20px;
      animation: fadeIn 0.6s ease 0.2s both;
    }

    /* Character Card */
    .character-card {
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 16px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      min-height: 200px;
      display: flex;
      flex-direction: column;
    }

    .character-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, transparent, var(--accent-color));
      opacity: 0.02;
      border-radius: 0 16px 0 100%;
    }

    .character-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--accent-color);
    }

    /* Card Header */
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .card-id {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-tertiary);
      letter-spacing: 0.05em;
      background: var(--bg-primary);
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .card-status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-tertiary);
    }

    .card-status.active {
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
    }

    /* Character Avatar */
    .character-avatar {
      width: 100%;
      aspect-ratio: 1;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      color: var(--text-tertiary);
      overflow: hidden;
      position: relative;
    }

    .character-avatar svg {
      width: 60%;
      height: 60%;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
    }

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

    .character-avatar::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30%;
      background: linear-gradient(to top, var(--bg-primary), transparent);
      pointer-events: none;
    }

    /* Character Info */
    .character-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .character-meta {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: auto;
    }

    .character-tag {
      font-size: 9px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-tertiary);
      background: var(--bg-primary);
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Create New Card */
    .create-card {
      background: var(--bg-primary);
      border: 2px dashed var(--border-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .create-card:hover {
      border-color: var(--accent-color);
      background: var(--bg-tertiary);
    }

    .create-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .create-card:hover .create-icon {
      transform: rotate(90deg);
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .create-icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .create-card:hover .create-icon svg {
      stroke: var(--bg-primary);
    }

    .create-text {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    /* ========== 角色卡导入/导出（黑白灰风格） ========== */

    .character-share-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 12000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .character-share-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .character-share-sheet {
      width: 100%;
      max-height: 86vh;
      background: var(--bg-primary);
      border-radius: 28px 28px 0 0;
      border: 1px solid var(--border-color);
      padding: 16px 16px 18px;
      box-sizing: border-box;
      transform: translateY(14px);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .character-share-overlay.active .character-share-sheet {
      transform: translateY(0);
    }

    .character-share-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .character-share-title {
      font-size: 16px;
      font-weight: 650;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .character-share-subtitle {
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    .character-share-close {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .character-share-close:hover {
      background: var(--hover-bg);
      transform: scale(1.03);
    }

    .character-share-close svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .character-share-list {
      max-height: 40vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-right: 2px;
      margin-bottom: 14px;
      scrollbar-width: none;
    }

    .character-share-list::-webkit-scrollbar {
      display: none;
    }

    .character-share-item {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 10px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
      -webkit-user-select: none;
    }

    .character-share-item:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
      border-color: rgba(0, 0, 0, 0.15);
    }

    [data-theme='dark'] .character-share-item:hover {
      border-color: rgba(255, 255, 255, 0.12);
    }

    .character-share-item.selected {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), var(--shadow-sm);
    }

    [data-theme='dark'] .character-share-item.selected {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-sm);
    }

    .character-share-item-check {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .character-share-item.selected .character-share-item-check {
      border-color: var(--accent-color);
      background: var(--accent-color);
    }

    .character-share-item-check svg {
      width: 12px;
      height: 12px;
      stroke: #fff;
      fill: none;
      stroke-width: 3;
      opacity: 0;
      transform: scale(0.9);
      transition: all 0.18s ease;
    }

    .character-share-item.selected .character-share-item-check svg {
      opacity: 1;
      transform: scale(1);
    }

    .character-share-avatar {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }

    .character-share-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .character-share-avatar svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 2;
    }

    .character-share-info {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .character-share-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .character-share-meta {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .character-share-author {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 12px;
      margin-bottom: 14px;
    }

    .character-share-author-label {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 8px;
      font-weight: 600;
    }

    .character-share-author-input {
      width: 100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s ease;
      box-sizing: border-box;
    }

    .character-share-author-input:focus {
      border-color: var(--accent-color);
    }

    .character-share-author-hint {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 8px;
      line-height: 1.4;
    }

    .character-share-actions {
      display: flex;
      gap: 10px;
    }

    .character-share-btn {
      flex: 1;
      padding: 12px 12px;
      border-radius: 14px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 650;
      transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
    }

    .character-share-btn:active {
      transform: scale(0.98);
    }

    .character-share-btn.secondary {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }

    .character-share-btn.primary {
      background: var(--accent-color);
      color: #fff;
    }

    /* 夜间模式：accent-color 默认是白色，避免白底白字看不清 */
    [data-theme='dark'] .character-share-btn.primary {
      background: var(--bg-tertiary);
      color: #fff;
      border: 1px solid var(--accent-color);
    }

    [data-theme='dark'] .character-share-btn.primary:disabled {
      border-color: rgba(255, 255, 255, 0.22);
    }

    .character-share-btn.primary:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      filter: grayscale(0.2);
    }

    /* ========== 角色圈（黑白灰风格） ========== */

    .character-circle-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 12050;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .character-circle-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .character-circle-sheet {
      width: 100%;
      max-height: 90vh;
      background: var(--bg-primary);
      border-radius: 28px 28px 0 0;
      border: 1px solid var(--border-color);
      padding: 16px 16px 18px;
      box-sizing: border-box;
      transform: translateY(14px);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    .character-circle-overlay.active .character-circle-sheet {
      transform: translateY(0);
    }

    .character-circle-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .character-circle-title {
      font-size: 16px;
      font-weight: 650;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .character-circle-subtitle {
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 2px;
      line-height: 1.5;
    }

    .character-circle-close {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .character-circle-close:hover {
      background: var(--hover-bg);
      transform: scale(1.03);
    }

    .character-circle-close svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .character-circle-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      padding-right: 2px;
      max-height: calc(90vh - 80px);
      scrollbar-width: none;
    }

    .character-circle-content::-webkit-scrollbar {
      display: none;
    }

    .character-circle-graph-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .character-circle-graph-header {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .character-circle-graph-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .character-circle-graph-subtitle {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    .character-circle-graph-stage {
      position: relative;
      width: 100%;
      min-height: 420px;
      height: 62vh;
      max-height: 640px;
      border-radius: 16px;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(180deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--bg-primary);
      border: 1px solid var(--border-color);
      overflow: hidden;
    }

    [data-theme='dark'] .character-circle-graph-stage {
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--bg-primary);
    }

    .character-circle-graph-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      color: var(--text-tertiary);
      pointer-events: none;
    }

    .character-circle-graph-line {
      stroke: currentColor;
      stroke-width: 1.4;
      fill: none;
      opacity: 0.7;
    }

    .character-circle-graph-label {
      font-size: 22px;
      font-weight: 700;
      fill: var(--text-primary);
      paint-order: stroke;
      stroke: var(--bg-primary);
      stroke-width: 8px;
      opacity: 0.98;
    }

    .character-circle-graph-nodes {
      position: absolute;
      inset: 0;
    }

    .character-circle-graph-node {
      position: absolute;
      width: 56px;
      height: 74px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: var(--text-primary);
      transform: translate(-50%, -50%);
      cursor: pointer;
      transition: transform 0.15s ease;
      touch-action: none;
    }

    .character-circle-graph-node.is-selected .character-circle-graph-avatar {
      box-shadow: 0 0 0 2px var(--text-primary), 0 0 0 4px var(--bg-primary);
    }

    .character-circle-graph-node.is-dragging {
      transform: translate(-50%, -50%) scale(1.02);
      cursor: grabbing;
    }

    .character-circle-graph-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--bg-primary);
      box-shadow: 0 0 0 1px var(--border-color);
      background: var(--bg-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .character-circle-graph-avatar svg {
      width: 22px;
      height: 22px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 1.8;
    }

    .character-circle-graph-name {
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .character-circle-graph-empty {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--text-tertiary);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65));
      text-align: center;
      padding: 12px;
      pointer-events: none;
    }

    [data-theme='dark'] .character-circle-graph-empty {
      background: linear-gradient(180deg, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.7));
    }

    .character-circle-fab {
      position: absolute;
      right: 18px;
      bottom: 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      z-index: 3;
      width: 46px;
      height: 46px;
    }

    .character-circle-fab-main {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      border: 1px solid var(--border-color);
      background: var(--text-primary);
      color: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .character-circle-fab-main svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .character-circle-fab-main:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    }

    .character-circle-fab-actions {
      position: absolute;
      right: 0;
      bottom: 56px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: all 0.2s ease;
    }

    .character-circle-fab.active .character-circle-fab-actions {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .character-circle-fab.active .character-circle-fab-main {
      transform: rotate(45deg);
    }

    .character-circle-fab-action {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease;
      white-space: nowrap;
      box-shadow: var(--shadow-sm);
    }

    .character-circle-fab-action svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .character-circle-fab-action span {
      font-size: 12px;
      font-weight: 600;
    }

    .character-circle-fab-action:hover {
      background: var(--hover-bg);
      transform: translateY(-1px);
    }

    [data-theme='dark'] .character-circle-fab-main {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
    }

    .character-circle-action-panel {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      padding: 12px;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: all 0.2s ease;
      z-index: 4;
    }

    .character-circle-action-panel.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .character-circle-action-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .character-circle-action-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .character-circle-action-close {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .character-circle-action-close:hover {
      background: var(--hover-bg);
    }

    .character-circle-action-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .character-circle-action-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .character-circle-action-section {
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .character-circle-action-panel[data-action="create"] .character-circle-action-section[data-action="create"],
    .character-circle-action-panel[data-action="manage"] .character-circle-action-section[data-action="manage"],
    .character-circle-action-panel[data-action="add-member"] .character-circle-action-section[data-action="add-member"],
    .character-circle-action-panel[data-action="remove-member"] .character-circle-action-section[data-action="remove-member"],
    .character-circle-action-panel[data-action="add-relation"] .character-circle-action-section[data-action="add-relation"] {
      display: flex;
    }

    .character-circle-manage-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 180px;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .character-circle-manage-list::-webkit-scrollbar {
      display: none;
    }

    .character-circle-manage-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .character-circle-manage-item.active {
      background: var(--bg-primary);
      border-color: var(--text-primary);
    }

    .character-circle-manage-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .character-circle-manage-meta {
      font-size: 10px;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    .character-circle-manage-actions {
      display: flex;
      gap: 6px;
    }

    .character-circle-manage-btn {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .character-circle-manage-btn:hover {
      background: var(--hover-bg);
    }

    .character-circle-manage-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .character-circle-manage-block {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .character-circle-manage-title {
      font-size: 11px;
      color: var(--text-tertiary);
      letter-spacing: 0.02em;
    }

    .character-circle-multi-toolbar {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .character-circle-mini-btn {
      height: 26px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .character-circle-mini-btn:hover {
      background: var(--hover-bg);
    }

    .character-circle-multi-list {
      max-height: 180px;
      overflow-y: auto;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      scrollbar-width: none;
    }

    .character-circle-multi-list::-webkit-scrollbar {
      display: none;
    }

    .character-circle-multi-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .character-circle-multi-item:hover {
      background: var(--hover-bg);
    }

    .character-circle-multi-item input {
      width: 14px;
      height: 14px;
      accent-color: var(--text-primary);
    }

    .character-circle-multi-name {
      font-size: 12px;
      color: var(--text-primary);
      font-weight: 600;
    }

    .character-circle-panel {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .character-circle-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .character-circle-panel-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .character-circle-panel-subtitle {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    .character-circle-panel-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .character-circle-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .character-circle-label {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    .character-circle-relation-hint {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.5;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px dashed var(--border-color);
      background: rgba(0, 0, 0, 0.04);
    }

    [data-theme='dark'] .character-circle-relation-hint {
      background: rgba(255, 255, 255, 0.04);
    }

    .character-circle-input {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 12px;
      outline: none;
      transition: border-color 0.2s ease;
    }

    .character-circle-input:focus {
      border-color: var(--text-secondary);
    }

    .character-circle-action-btn {
      height: 30px;
      padding: 0 12px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .character-circle-action-btn:hover {
      background: var(--hover-bg);
    }

    .character-circle-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .character-circle-btn {
      height: 32px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .character-circle-btn.primary {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
    }

    .character-circle-btn.secondary:hover,
    .character-circle-btn.primary:hover {
      transform: translateY(-1px);
    }

    .character-circle-btn:active {
      transform: scale(0.98);
    }

    .character-circle-chip-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }

    .character-circle-chip-row::-webkit-scrollbar {
      display: none;
    }

    .character-circle-chip {
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      font-size: 11px;
      color: var(--text-secondary);
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .character-circle-chip.active {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
    }

    .character-circle-member-toolbar {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .character-circle-select {
      flex: 1 1 180px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 160px;
    }

    .character-circle-select-input {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 12px;
      outline: none;
    }

    .character-circle-member-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .character-circle-member-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px;
      border-radius: 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
    }

    .character-circle-member-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .character-circle-avatar {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }

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

    .character-circle-avatar svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 1.8;
    }

    .character-circle-member-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .character-circle-member-meta {
      font-size: 10px;
      color: var(--text-tertiary);
    }

    .character-circle-remove-btn {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .character-circle-remove-btn:hover {
      background: var(--hover-bg);
    }

    .character-circle-remove-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .character-circle-relation-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .character-circle-relation-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .character-circle-relation-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .character-circle-relation-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
    }

    .character-circle-relation-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .character-circle-relation-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .character-circle-relation-note {
      font-size: 10px;
      color: var(--text-tertiary);
    }

    .character-circle-empty {
      font-size: 12px;
      color: var(--text-tertiary);
      padding: 8px 2px;
    }

    /* 导入后刷新动画 */
    @keyframes characterGridRefresh {
      0% { opacity: 0.6; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .character-grid.refreshing {
      animation: characterGridRefresh 0.55s ease both;
    }

    /* Character Detail Modal */
    .character-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(8px);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.3s ease;
    }

    .character-modal.active {
      display: flex;
    }

    .character-modal.closing {
      animation: fadeOut 0.3s ease;
    }

    .character-modal.closing .id-card {
      animation: modalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ID Card Container */
    .id-card {
      width: 100%;
      max-width: 380px;
      background: var(--bg-primary);
      border-radius: 24px;
      position: relative;
      overflow: hidden;
      animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      max-height: 90vh;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .id-card::-webkit-scrollbar {
      width: 6px;
    }

    .id-card::-webkit-scrollbar-track {
      background: transparent;
    }

    .id-card::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 3px;
    }

    /* ID Card Header */
    .id-card-header {
      background: var(--accent-color);
      color: var(--bg-primary);
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .id-card-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: repeating-linear-gradient(
        90deg,
        var(--bg-primary) 0px,
        var(--bg-primary) 4px,
        transparent 4px,
        transparent 8px
      );
    }

    .id-card-title {
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.9;
    }

    .id-card-number {
      font-size: 13px;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      letter-spacing: 0.05em;
    }

    .id-card-close {
      position: absolute;
      top: -40px;
      right: 0;
      width: 32px;
      height: 32px;
      background: var(--bg-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 2;
    }

    .id-card-close:hover {
      transform: scale(1.1) rotate(90deg);
      background: var(--accent-color);
    }

    .id-card-close svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .id-card-close:hover svg {
      stroke: var(--bg-primary);
    }

    /* ID Card Body */
    .id-card-body {
      padding: 24px 20px;
    }

    /* Profile Section */
    .id-profile {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 2px dashed var(--border-color);
      position: relative;
    }

    .id-profile::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 4px;
      background: var(--accent-color);
      opacity: 0.2;
    }

    .id-avatar-large {
      width: 100px;
      height: 120px;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .id-avatar-large svg {
      width: 50%;
      height: 50%;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
    }

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

    .id-avatar-large::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to top, var(--bg-tertiary), transparent);
    }

    /* Barcode */
    .id-barcode {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 1px;
      height: 24px;
      opacity: 0.4;
      z-index: 1;
    }

    .barcode-line {
      width: 2px;
      background: var(--text-primary);
      height: 100%;
    }

    .barcode-line:nth-child(odd) {
      height: 80%;
    }

    .barcode-line:nth-child(3n) {
      height: 60%;
    }

    .id-info-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .id-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 4px;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .id-role {
      font-size: 12px;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: var(--bg-tertiary);
      padding: 4px 8px;
      border-radius: 6px;
      display: inline-block;
      align-self: flex-start;
    }

    .id-meta-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 12px;
      margin-top: auto;
      font-size: 11px;
    }

    .id-meta-label {
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .id-meta-value {
      color: var(--text-primary);
      font-weight: 500;
    }

    /* Bio Section */
    .id-section {
      margin-bottom: 20px;
    }

    .id-section:last-child {
      margin-bottom: 0;
    }

    .id-section-header {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-tertiary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .id-section-header::before {
      content: '';
      width: 12px;
      height: 2px;
      background: var(--accent-color);
      opacity: 0.3;
    }

    .id-bio-text {
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-secondary);
      background: var(--bg-tertiary);
      padding: 12px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      font-family: 'Noto Sans JP', sans-serif;
      max-height: 150px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border-color) transparent;
    }

    .id-bio-text::-webkit-scrollbar {
      width: 6px;
    }

    .id-bio-text::-webkit-scrollbar-track {
      background: transparent;
    }

    .id-bio-text::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 3px;
    }

    /* Action Buttons */
    .char-action-btn {
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .char-action-btn:hover {
      background: var(--bg-tertiary);
      transform: scale(1.02);
    }

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

    .char-action-btn.primary {
      color: var(--accent-color);
      border-color: var(--accent-color);
    }

    .char-action-btn.primary:hover {
      background: var(--accent-color);
      color: var(--bg-primary);
    }

    .char-action-btn.danger {
      color: #ef4444;
      border-color: #ef4444;
    }

    .char-action-btn.danger:hover {
      background: #ef4444;
      color: white;
    }

    /* ID Card Footer */
    .id-card-footer {
      background: var(--bg-tertiary);
      padding: 12px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--border-color);
      position: sticky;
      bottom: 0;
    }

    .id-watermark {
      font-size: 9px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.05em;
    }

    .id-status-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .id-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
      animation: pulse 2s infinite;
    }

    /* Corner Decorations */
    .corner-decoration {
      position: absolute;
      width: 40px;
      height: 40px;
      opacity: 0.1;
      pointer-events: none;
    }

    .corner-decoration.top-left {
      top: 0;
      left: 0;
      border-top: 3px solid var(--accent-color);
      border-left: 3px solid var(--accent-color);
      border-top-left-radius: 24px;
    }

    .corner-decoration.bottom-right {
      bottom: 0;
      right: 0;
      border-bottom: 3px solid var(--accent-color);
      border-right: 3px solid var(--accent-color);
      border-bottom-right-radius: 24px;
    }

    /* Modal Animations */
    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes modalSlideOut {
      from {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
      to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
      }
    }

    /* Character Edit/Create Modal */
    .character-edit-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(10px);
      z-index: 10001;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.3s ease;
    }

    .character-edit-modal.active {
      display: flex;
    }

    .character-edit-modal.closing {
      animation: fadeOut 0.3s ease;
    }

    .character-edit-modal.closing .edit-card {
      animation: modalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Edit Card */
    .edit-card {
      width: 100%;
      max-width: 420px;
      background: var(--bg-primary);
      border-radius: 24px;
      overflow: hidden;
      animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
    }

    /* Edit Card Header */
    .edit-card-header {
      background: var(--accent-color);
      color: var(--bg-primary);
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }

    .edit-card-title {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .edit-card-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .edit-card-close:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: rotate(90deg);
    }

    .edit-card-close svg {
      width: 16px;
      height: 16px;
      stroke: var(--bg-primary);
      fill: none;
      stroke-width: 2;
    }

    /* Edit Card Body */
    .edit-card-body {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
      scrollbar-width: thin;
      scrollbar-color: var(--border-color) transparent;
    }

    .edit-card-body::-webkit-scrollbar {
      width: 6px;
    }

    .edit-card-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .edit-card-body::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 3px;
    }

    /* Edit Section */
    .edit-section {
      margin-bottom: 20px;
    }

    .edit-section:last-child {
      margin-bottom: 0;
    }

    .edit-section-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }

    /* Edit Input */
    .edit-input {
      width: 100%;
      padding: 12px 16px;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      font-size: 14px;
      color: var(--text-primary);
      transition: all 0.2s ease;
      font-family: inherit;
    }

    .edit-input:focus {
      outline: none;
      border-color: var(--accent-color);
      background: var(--bg-secondary);
    }

    .edit-input::placeholder {
      color: var(--text-tertiary);
    }

    /* Edit Textarea */
    .edit-textarea {
      width: 100%;
      min-height: 120px;
      padding: 12px 16px;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      font-size: 14px;
      color: var(--text-primary);
      transition: all 0.2s ease;
      font-family: inherit;
      resize: vertical;
    }

    .edit-textarea:focus {
      outline: none;
      border-color: var(--accent-color);
      background: var(--bg-secondary);
    }

    .edit-textarea::placeholder {
      color: var(--text-tertiary);
    }

    /* Edit Section Hint - 小提示文字 */
    .edit-section-hint {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-tertiary);
      margin-left: 6px;
    }

    /* ==================== BaoBaoBook Binding Selector - 百宝书绑定选择器 ==================== */

    .baobaobook-binding-container {
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.2s ease;
    }

    .baobaobook-binding-container.active {
      border-color: var(--accent-color);
    }

    .baobaobook-binding-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .baobaobook-binding-header:hover {
      background: var(--bg-secondary);
    }

    .baobaobook-binding-summary {
      font-size: 14px;
      color: var(--text-secondary);
      font-family: 'Inter', sans-serif;
    }

    .baobaobook-binding-summary.has-selection {
      color: var(--text-primary);
      font-weight: 500;
    }

    .baobaobook-binding-arrow {
      width: 18px;
      height: 18px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 2;
      transition: transform 0.3s ease;
    }

    .baobaobook-binding-container.expanded .baobaobook-binding-arrow {
      transform: rotate(180deg);
    }

    .baobaobook-binding-list {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      border-top: 1px solid transparent;
    }

    .baobaobook-binding-container.expanded .baobaobook-binding-list {
      max-height: 220px;
      overflow-y: auto;
      border-top-color: var(--border-color);
    }

    .baobaobook-binding-empty {
      padding: 20px 16px;
      text-align: center;
      font-size: 13px;
      color: var(--text-tertiary);
    }

    .baobaobook-binding-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.15s ease;
      border-bottom: 1px solid var(--border-color);
    }

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

    .baobaobook-binding-item:hover {
      background: var(--bg-secondary);
    }

    .baobaobook-binding-item.selected {
      background: rgba(var(--accent-rgb, 0, 0, 0), 0.08);
    }

    [data-theme="dark"] .baobaobook-binding-item.selected {
      background: rgba(255, 255, 255, 0.08);
    }

    .baobaobook-binding-checkbox {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border-color);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .baobaobook-binding-item.selected .baobaobook-binding-checkbox {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .baobaobook-binding-checkbox svg {
      width: 12px;
      height: 12px;
      stroke: var(--bg-primary);
      fill: none;
      stroke-width: 2.5;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.2s ease;
    }

    .baobaobook-binding-item.selected .baobaobook-binding-checkbox svg {
      opacity: 1;
      transform: scale(1);
    }

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

    .baobaobook-binding-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .baobaobook-binding-category {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    /* 百宝书绑定 - 分类标签栏 */
    .baobaobook-binding-category-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 12px;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--border-color);
    }

    .baobaobook-binding-cat-tab {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .baobaobook-binding-cat-tab:hover {
      background: var(--bg-primary);
      border-color: var(--text-tertiary);
    }

    .baobaobook-binding-cat-tab:active {
      transform: scale(0.96);
    }

    .baobaobook-binding-cat-tab.all-selected {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
    }

    [data-theme="dark"] .baobaobook-binding-cat-tab.all-selected {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
    }

    .baobaobook-binding-cat-tab .cat-count {
      font-size: 10px;
      font-weight: 400;
      opacity: 0.7;
    }

    .baobaobook-binding-cat-tab.all-selected .cat-count {
      opacity: 0.9;
    }

    /* 百宝书绑定 - 分组标题 */
    .baobaobook-binding-group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px 6px;
      background: var(--bg-tertiary);
      border-top: 1px solid var(--border-color);
      margin-top: 4px;
    }

    .baobaobook-binding-group-header:first-of-type {
      margin-top: 0;
      border-top: none;
    }

    .baobaobook-binding-group-header .group-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .baobaobook-binding-group-header .group-count {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    .baobaobook-binding-group-header .group-count.all-selected {
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* 百宝书位置徽章 - 黑白灰风格 */
    .baobaobook-position-badge {
      padding: 1px 6px;
      border-radius: 8px;
      font-size: 9px;
      margin-left: 6px;
      font-weight: 600;
      display: inline-block;
      vertical-align: middle;
    }

    /* 日间模式 - 深到浅的灰度渐变 */
    .baobaobook-position-badge.position-before {
      background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
      color: #ffffff;
    }

    .baobaobook-position-badge.position-middle {
      background: linear-gradient(135deg, #4a4a4a 0%, #666666 100%);
      color: #ffffff;
    }

    .baobaobook-position-badge.position-mid_after {
      background: linear-gradient(135deg, #888888 0%, #a0a0a0 100%);
      color: #ffffff;
    }

    .baobaobook-position-badge.position-after {
      background: linear-gradient(135deg, #b0b0b0 0%, #c8c8c8 100%);
      color: #333333;
    }

    /* 夜间模式 - 反向灰度保持可读性 */
    [data-theme="dark"] .baobaobook-position-badge.position-before {
      background: linear-gradient(135deg, #e0e0e0 0%, #c8c8c8 100%);
      color: #1a1a1a;
    }

    [data-theme="dark"] .baobaobook-position-badge.position-middle {
      background: linear-gradient(135deg, #a0a0a0 0%, #888888 100%);
      color: #1a1a1a;
    }

    [data-theme="dark"] .baobaobook-position-badge.position-mid_after {
      background: linear-gradient(135deg, #666666 0%, #555555 100%);
      color: #ffffff;
    }

    [data-theme="dark"] .baobaobook-position-badge.position-after {
      background: linear-gradient(135deg, #444444 0%, #333333 100%);
      color: #e0e0e0;
    }

    /* ==================== Chatbox Binding Selector - 聊天框绑定选择器 ==================== */

    .chatbox-binding-container {
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.2s ease;
    }

    .chatbox-binding-container.active {
      border-color: var(--accent-color);
    }

    .chatbox-binding-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .chatbox-binding-header:hover {
      background: var(--bg-secondary);
    }

    .chatbox-binding-summary {
      font-size: 14px;
      color: var(--text-secondary);
      font-family: 'Inter', sans-serif;
    }

    .chatbox-binding-summary.has-selection {
      color: var(--text-primary);
      font-weight: 500;
    }

    .chatbox-binding-arrow {
      width: 18px;
      height: 18px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 2;
      transition: transform 0.3s ease;
    }

    .chatbox-binding-container.expanded .chatbox-binding-arrow {
      transform: rotate(180deg);
    }

    .chatbox-binding-list {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      border-top: 1px solid transparent;
    }

    .chatbox-binding-container.expanded .chatbox-binding-list {
      max-height: 220px;
      overflow-y: auto;
      border-top-color: var(--border-color);
    }

    .chatbox-binding-empty {
      padding: 18px 16px;
      text-align: center;
      font-size: 13px;
      color: var(--text-tertiary);
      line-height: 1.5;
    }

    .chatbox-binding-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.15s ease;
      border-bottom: 1px solid var(--border-color);
      user-select: none;
      -webkit-user-select: none;
    }

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

    .chatbox-binding-item:hover {
      background: var(--bg-secondary);
    }

    .chatbox-binding-item.selected {
      background: rgba(var(--accent-rgb, 0, 0, 0), 0.08);
    }

    [data-theme="dark"] .chatbox-binding-item.selected {
      background: rgba(255, 255, 255, 0.08);
    }

    .chatbox-binding-checkbox {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border-color);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .chatbox-binding-item.selected .chatbox-binding-checkbox {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .chatbox-binding-checkbox svg {
      width: 12px;
      height: 12px;
      stroke: var(--bg-primary);
      fill: none;
      stroke-width: 2.5;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.2s ease;
    }

    .chatbox-binding-item.selected .chatbox-binding-checkbox svg {
      opacity: 1;
      transform: scale(1);
    }

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

    .chatbox-binding-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chatbox-binding-meta {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Avatar Upload Area */
    .avatar-upload-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 20px;
      background: var(--bg-tertiary);
      border: 2px dashed var(--border-color);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .avatar-upload-area:hover {
      border-color: var(--accent-color);
      background: var(--bg-secondary);
    }

    .avatar-preview {
      width: 100px;
      height: 100px;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .avatar-preview svg {
      width: 50%;
      height: 50%;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
    }

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

    .avatar-upload-hint {
      font-size: 12px;
      color: var(--text-secondary);
      text-align: center;
    }

    /* Edit Card Footer */
    .edit-card-footer {
      padding: 20px;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-color);
      display: flex;
      gap: 12px;
      flex-shrink: 0;
    }

    .edit-btn {
      flex: 1;
      padding: 14px 20px;
      border-radius: 12px;
      border: 2px solid var(--border-color);
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Inter', sans-serif;
    }

    .edit-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .edit-btn.primary {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .edit-btn.primary:hover {
      box-shadow: var(--shadow-md);
    }

    /* ==================== Chat App Styles ==================== */

    /* Chat Header */
    .chat-app-header {
      /* 🔥 使用全局App Header padding变量 */
      padding: var(--app-header-total-padding) 20px 12px;
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(20px);
      animation: slideDown 0.6s ease;
    }

    .chat-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .chat-user-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .chat-user-avatar-mini {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      overflow: hidden;
    }

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

    .chat-user-text-mini {
      flex: 1;
    }

    .chat-user-name-mini {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Noto Sans JP', sans-serif;
      margin-bottom: 2px;
    }

    .chat-user-status-mini {
      font-size: 12px;
      color: var(--text-secondary);
      font-family: 'Inter', sans-serif;
      font-style: italic;
    }

    .chat-header-actions-mini {
      display: flex;
      gap: 8px;
    }

    .chat-icon-btn-mini {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .chat-icon-btn-mini:hover {
      background: var(--accent-color);
      transform: scale(1.1);
    }

    .chat-icon-btn-mini svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-primary);
      fill: none;
    }

    .chat-search-bar-mini {
      position: relative;
    }

    .chat-search-input-mini {
      width: 100%;
      height: 36px;
      padding: 0 16px;
      border-radius: 18px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: all 0.3s ease;
    }

    .chat-search-input-mini:focus {
      border-color: var(--accent-color);
      background: var(--bg-primary);
    }

    /* Stories Section */
    .chat-stories-section {
      padding: 16px 0 16px 20px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      scrollbar-width: none;
      animation: fadeIn 0.6s ease 0.2s both;
    }

    .chat-stories-section::-webkit-scrollbar {
      display: none;
    }

    .chat-stories-inner-scroll {
      display: inline-flex;
      gap: 12px;
      padding-right: 20px;
    }

    .story-item-mini {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .story-item-mini:hover {
      transform: translateY(-4px);
    }

    .story-avatar-mini {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      position: relative;
      background: var(--bg-tertiary);
      overflow: hidden;
      border: 2px solid var(--accent-color);
      padding: 3px;
    }

    .story-avatar-mini.add-story-mini {
      border: 2px dashed var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .story-avatar-mini.add-story-mini.inbox-mini {
      overflow: visible;
    }

    .story-avatar-mini.add-story-mini svg {
      width: 24px;
      height: 24px;
      stroke: var(--text-secondary);
    }

    .story-avatar-mini.add-story-mini.inbox-mini svg {
      stroke: var(--text-primary);
      opacity: 1;
    }

    .story-avatar-mini.add-story-mini.list-mini svg {
      stroke: var(--text-primary);
      opacity: 0.75;
    }

    .story-avatar-mini.add-story-mini.inbox-mini.has-alert::after {
      content: '';
      position: absolute;
      left: calc(50% + 12px);
      top: calc(50% - 12px);
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--text-primary);
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .story-avatar-mini img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .story-name-mini {
      font-size: 11px;
      color: var(--text-secondary);
      max-width: 64px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: 'Inter', sans-serif;
    }

    /* Chat Requests Section */
    .chat-requests-mini {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      margin: 0 16px 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      animation: slideRight 0.4s ease;
    }

    .chat-requests-mini.has-requests {
      display: flex;
    }

    .chat-requests-mini:hover {
      background: var(--bg-tertiary);
    }

    .requests-left-mini {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .requests-icon-mini {
      width: 36px;
      height: 36px;
      background: var(--bg-tertiary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .requests-icon-mini svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-primary);
    }

    .requests-icon-mini::after {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      width: 8px;
      height: 8px;
      background: var(--badge-color);
      border-radius: 50%;
      animation: pulse 2s ease infinite;
    }

    .requests-text-mini {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .requests-count-mini {
      font-size: 12px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
    }

    .requests-arrow-mini svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-tertiary);
    }

    /* Chat List */
    .chat-list-container {
      padding: 8px 16px 16px;
    }

    .chat-list-header-mini {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 4px;
      margin-bottom: 8px;
    }

    .chat-list-title-mini {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Noto Sans JP', sans-serif;
    }

    .chat-list-count-mini {
      font-size: 12px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
    }

    .chat-list-items {
      min-height: 200px;
    }

    .chat-item-mini {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      margin-bottom: 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      animation: slideRight 0.4s ease backwards;
      overflow: visible;
      position: relative;
      touch-action: pan-y;
    }

    .chat-item-mini:hover {
      background: var(--bg-tertiary);
      transform: translateX(4px);
    }

    .chat-item-mini.is-swipe-open {
      padding-right: 32px;
      transform: translateX(-6px);
    }

    .chat-item-mini.is-swipe-open:hover {
      transform: translateX(-6px);
    }

    .chat-item-delete-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%) scale(0.95);
      width: 18px;
      height: 18px;
      border: none;
      background: transparent;
      color: var(--text-tertiary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
      padding: 0;
      border-radius: 0;
    }

    .chat-item-delete-btn svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .chat-item-mini.is-swipe-open .chat-item-delete-btn {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%) scale(1);
      color: var(--text-primary);
    }

    .chat-item-delete-btn:hover {
      color: var(--text-primary);
    }

    .chat-item-delete-btn:active {
      transform: translateY(-50%) scale(0.95);
    }

    .chat-item-mini.pinned::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--accent-color);
    }

    .chat-avatar-mini {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      overflow: visible;
      flex-shrink: 0;
      position: relative;
      background: var(--bg-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }

    .chat-unread-badge {
      position: absolute;
      top: -5px;
      right: -10px;
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      background: var(--badge-color);
      color: var(--badge-text-color);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      transform: translateZ(0);
      z-index: 2;
      pointer-events: none;
    }

    .chat-unread-badge::before {
      content: '';
      position: absolute;
      left: -5px;
      bottom: -5px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--badge-color);
    }

    .chat-avatar-mini img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .chat-avatar-mini svg {
      width: 26px;
      height: 26px;
      stroke: currentColor;
      fill: none;
    }

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

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

    .chat-name-mini {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Noto Sans JP', sans-serif;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chat-time-mini {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
      flex-shrink: 0;
      margin-left: 8px;
    }

    .chat-preview-mini {
      font-size: 13px;
      color: var(--text-secondary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'Inter', sans-serif;
    }

    .chat-badge-mini {
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      background: var(--badge-color);
      color: var(--badge-text-color);
      border-radius: 9px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      margin-left: 8px;
    }

    /* Empty State */
    .chat-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }

    .chat-empty-state svg {
      width: 80px;
      height: 80px;
      stroke: var(--border-color);
      margin-bottom: 20px;
    }

    .empty-text {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .empty-subtext {
      font-size: 13px;
      color: var(--text-secondary);
    }

    /* Bottom Navigation */
    .chat-bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: auto;
      min-height: 72px;
      background: var(--bg-primary);
      border-top: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 12px 12px 20px 12px;
      z-index: 1000;
      backdrop-filter: blur(20px);
    }

    #chatScreen.chat-dock-style-music .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-default .chat-bottom-nav-default {
      display: flex;
    }

    .chat-bottom-dock {
      position: fixed;
      left: 50%;
      bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      width: min(92%, 420px);
      z-index: 1000;
      display: none;
      animation: chatDockFloatUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #chatScreen.chat-dock-style-music .chat-bottom-dock-music {
      display: block;
    }

    .chat-music-dock {
      position: relative;
    }

    .chat-music-dock-bar {
      position: relative;
      height: 72px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--border-color);
      border-radius: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
    }

    [data-theme='dark'] .chat-music-dock-bar {
      background: rgba(20, 20, 20, 0.85);
      box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
    }

    .chat-music-nav-group {
      display: flex;
      gap: 4px;
      flex: 1;
      justify-content: space-around;
      align-items: center;
    }

    .chat-music-nav-btn {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      color: var(--text-secondary);
    }

    .chat-music-nav-btn:hover {
      background: var(--bg-secondary);
      transform: translateY(-2px);
    }

    .chat-music-nav-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      transition: all 0.3s ease;
    }

    .chat-music-nav-btn .chat-music-star {
      position: absolute;
      top: 4px;
      width: 8px;
      height: 8px;
      opacity: 0;
      transform: scale(0) rotate(0deg);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      fill: currentColor;
      stroke: none;
    }

    .chat-music-nav-btn.active {
      color: var(--text-primary);
    }

    .chat-music-nav-btn.active .chat-music-star {
      opacity: 1;
      transform: scale(1) rotate(180deg);
    }

    .chat-music-nav-btn.active svg:not(.chat-music-star) {
      stroke-width: 2;
      transform: translateY(-1px);
    }

    .chat-music-center {
      position: relative;
      width: 58px;
      height: 58px;
      margin: 0 8px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .chat-music-orbit {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid var(--border-color);
      border-radius: 50%;
      opacity: 0.6;
      transition: all 0.4s ease;
    }

    .chat-music-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--accent-color);
      background: var(--bg-primary);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
      position: relative;
      z-index: 2;
    }

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

    .chat-music-waves {
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 3px;
      height: 12px;
      align-items: flex-end;
      opacity: 0.1;
      transition: opacity 0.3s ease;
    }

    .chat-music-wave {
      width: 3px;
      background: var(--text-secondary);
      border-radius: 2px;
      animation: chatDockWave 1.2s ease-in-out infinite;
    }

    .chat-music-wave:nth-child(1) { height: 5px; animation-delay: 0.1s; }
    .chat-music-wave:nth-child(2) { height: 9px; animation-delay: 0.2s; }
    .chat-music-wave:nth-child(3) { height: 7px; animation-delay: 0.3s; }
    .chat-music-wave:nth-child(4) { height: 4px; animation-delay: 0.4s; }

    .chat-music-dock.is-playing .chat-music-orbit {
      border-color: var(--text-primary);
      border-style: dashed;
      transform: scale(1.08);
      animation: chatDockSpin 8s linear infinite;
      opacity: 0.9;
    }

    .chat-music-dock.is-playing .chat-music-avatar {
      animation: chatDockSpin 4s linear infinite;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .chat-music-dock.is-playing .chat-music-waves {
      opacity: 1;
    }

    @keyframes chatDockFloatUp {
      from { transform: translate(-50%, 50px); opacity: 0; }
      to { transform: translate(-50%, 0); opacity: 1; }
    }

    @keyframes chatDockSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes chatDockWave {
      0%, 100% { height: 4px; opacity: 0.5; }
      50% { height: 12px; opacity: 1; }
    }

    /* Starline Floating Dock */
    #chatScreen.chat-dock-style-starline {
      --bg-body: #f2f2f2;
      --dock-bg: rgba(255, 255, 255, 0.85);
      --dock-border: rgba(0, 0, 0, 0.08);
      --icon-color: #999999;
      --icon-active: #111111;
      --avatar-border: #ffffff;
      --accent: #111111;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
      --orbit-color: rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] #chatScreen.chat-dock-style-starline {
      --bg-body: #050505;
      --dock-bg: rgba(20, 20, 20, 0.85);
      --dock-border: rgba(255, 255, 255, 0.12);
      --icon-color: #666666;
      --icon-active: #ffffff;
      --avatar-border: #000000;
      --accent: #ffffff;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
      --orbit-color: rgba(255, 255, 255, 0.15);
    }

    #chatScreen.chat-dock-style-starline .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-starline .chat-bottom-dock-starline {
      display: block;
      left: auto;
      right: 0;
      bottom: 0;
      transform: none;
      width: auto;
      animation: none;
      overflow: visible;
    }

    #chatScreen.chat-dock-style-starline .starline-dock-container {
      position: fixed;
      right: 20px;
      bottom: calc(34px + env(safe-area-inset-bottom, 0px));
      z-index: 1000;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: calc(100% - 74px - 38px);
      box-sizing: border-box;
    }

    #chatScreen.chat-dock-style-starline .starline-dock,
    .chat-dock-preview-starline .starline-dock {
      position: relative;
      height: 72px;
      padding: 0 24px;
      background: var(--dock-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--dock-border);
      border-radius: 24px 8px 24px 24px;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      gap: 24px;
      transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
      animation: floatIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      transform-origin: bottom right;
      overflow: visible;
    }

    #chatScreen.chat-dock-style-starline .starline-dock {
      width: 100%;
      box-sizing: border-box;
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-icon,
    .chat-dock-preview-starline .starline-dock .dock-icon {
      width: 24px;
      height: 24px;
      color: var(--icon-color);
      cursor: pointer;
      position: relative;
      transition: color 0.3s ease, transform 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 0;
      overflow: visible !important;
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-icon svg,
    .chat-dock-preview-starline .starline-dock .dock-icon svg {
      width: 100%;
      height: 100%;
      stroke-width: 1.5;
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-icon:active,
    .chat-dock-preview-starline .starline-dock .dock-icon:active {
      transform: scale(0.9);
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-icon.active,
    .chat-dock-preview-starline .starline-dock .dock-icon.active {
      color: var(--icon-active);
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-icon.active::after,
    .chat-dock-preview-starline .starline-dock .dock-icon.active::after,
    .starline-dock .dock-icon.active::after {
      content: '';
      position: absolute;
      bottom: -8px;
      width: 4px;
      height: 4px;
      background: var(--accent, #111111);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--accent, #111111);
      z-index: 2;
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-avatar-wrapper,
    .chat-dock-preview-starline .starline-dock .dock-avatar-wrapper {
      position: relative;
      width: 56px;
      height: 56px;
      margin-top: -24px;
      flex-shrink: 0;
      cursor: pointer;
      z-index: 10;
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-avatar,
    .chat-dock-preview-starline .starline-dock .dock-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #333;
      border: 4px solid var(--dock-bg);
      overflow: hidden;
      position: relative;
      transition: border-color 0.4s ease, transform 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-avatar img,
    .chat-dock-preview-starline .starline-dock .dock-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-avatar:active,
    .chat-dock-preview-starline .starline-dock .dock-avatar:active {
      transform: scale(0.95);
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-orbit,
    .chat-dock-preview-starline .starline-dock .dock-orbit {
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      border: 1px dashed var(--orbit-color);
      border-radius: 50%;
      animation: spin 20s linear infinite;
      pointer-events: none;
      z-index: -1;
    }

    #chatScreen.chat-dock-style-starline .starline-dock .dock-orbit::before,
    .chat-dock-preview-starline .starline-dock .dock-orbit::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -2px;
      width: 4px;
      height: 4px;
      background: var(--icon-active);
      border-radius: 50%;
    }

    @keyframes floatIn {
      from { opacity: 0; transform: translateY(40px) scale(0.9); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Minimal Floating Dock */
    #chatScreen.chat-dock-style-minimal {
      --bg-body: #f4f4f4;
      --dock-bg: rgba(255, 255, 255, 0.85);
      --dock-border: rgba(0, 0, 0, 0.08);
      --dock-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
      --icon-color: #999999;
      --icon-active: #000000;
      --indicator-bg: #f0f0f0;
      --avatar-ring: #ffffff;
      --avatar-border: #e0e0e0;
    }

    [data-theme="dark"] #chatScreen.chat-dock-style-minimal {
      --bg-body: #000000;
      --dock-bg: rgba(20, 20, 20, 0.85);
      --dock-border: rgba(255, 255, 255, 0.1);
      --dock-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      --icon-color: #666666;
      --icon-active: #ffffff;
      --indicator-bg: #333333;
      --avatar-ring: #1a1a1a;
      --avatar-border: #333333;
    }

    #chatScreen.chat-dock-style-minimal .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-minimal .chat-bottom-dock-minimal {
      display: block;
      left: auto;
      right: auto;
      bottom: 0;
      transform: none;
      width: auto;
      animation: none;
      overflow: visible;
    }

    #chatScreen.chat-dock-style-minimal .dock-container,
    .chat-dock-preview-minimal .dock-container {
      position: fixed;
      bottom: 30px;
      width: 90%;
      max-width: 400px;
      height: 72px;
      background: var(--dock-bg);
      border: 1px solid var(--dock-border);
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: var(--dock-shadow);
      z-index: 100;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      margin-bottom: env(safe-area-inset-bottom);
      left: 50%;
      transform: translateX(-50%);
    }

    #chatScreen.chat-dock-style-minimal .dock-inner,
    .chat-dock-preview-minimal .dock-inner {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
      align-items: center;
      justify-items: center;
    }

    #chatScreen.chat-dock-style-minimal .active-indicator,
    .chat-dock-preview-minimal .active-indicator {
      position: absolute;
      width: 48px;
      height: 48px;
      background: var(--indicator-bg);
      border-radius: 16px;
      z-index: -1;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      left: 0;
      opacity: 0;
    }

    #chatScreen.chat-dock-style-minimal .dock-item,
    .chat-dock-preview-minimal .dock-item {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: transform 0.1s ease;
    }

    #chatScreen.chat-dock-style-minimal .dock-item:active,
    .chat-dock-preview-minimal .dock-item:active {
      transform: scale(0.9);
    }

    #chatScreen.chat-dock-style-minimal .dock-icon,
    .chat-dock-preview-minimal .dock-icon {
      width: 24px;
      height: 24px;
      stroke: var(--icon-color);
      stroke-width: 1.8;
      fill: none;
      transition: stroke 0.3s ease;
      stroke-linecap: round;
      stroke-linejoin: round;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    #chatScreen.chat-dock-style-minimal .dock-icon::before,
    .chat-dock-preview-minimal .dock-icon::before {
      display: none;
      content: none;
    }

    #chatScreen.chat-dock-style-minimal .dock-item.active .dock-icon,
    .chat-dock-preview-minimal .dock-item.active .dock-icon {
      stroke: var(--icon-active);
      stroke-width: 2.2;
    }

    #chatScreen.chat-dock-style-minimal .center-avatar-wrapper,
    .chat-dock-preview-minimal .center-avatar-wrapper {
      position: relative;
      width: 60px;
      height: 60px;
      margin-top: -20px;
      border-radius: 50%;
      background: var(--bg-body);
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.4s ease;
      cursor: pointer;
    }

    #chatScreen.chat-dock-style-minimal .avatar-inner,
    .chat-dock-preview-minimal .avatar-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #333;
      overflow: hidden;
      position: relative;
      border: 2px solid var(--icon-active);
      z-index: 2;
    }

    #chatScreen.chat-dock-style-minimal .avatar-img,
    .chat-dock-preview-minimal .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: none;
      display: block;
    }

    .chat-dock-preview-minimal .avatar-img {
      background: #333;
    }

    #chatScreen.chat-dock-style-minimal .avatar-glow,
    .chat-dock-preview-minimal .avatar-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid var(--icon-active);
      opacity: 0;
      z-index: 1;
      animation: ripple 3s infinite cubic-bezier(0, 0.2, 0.8, 1);
    }

    #chatScreen.chat-dock-style-minimal .center-avatar-wrapper:active .avatar-inner,
    .chat-dock-preview-minimal .center-avatar-wrapper:active .avatar-inner {
      transform: scale(0.95);
      transition: transform 0.1s;
    }

    @keyframes ripple {
      0% { width: 100%; height: 100%; opacity: 0.5; }
      100% { width: 140%; height: 140%; opacity: 0; }
    }

    #chatScreen.chat-dock-style-minimal .dock-container {
      animation: minimalDockSlideUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.2s backwards;
    }

    @keyframes minimalDockSlideUp {
      from { transform: translateX(-50%) translateY(100px); opacity: 0; }
      to { transform: translateX(-50%) translateY(0); opacity: 1; }
    }

    .chat-dock-preview-minimal {
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 10px;
      --bg-body: #f4f4f4;
      --dock-bg: rgba(255, 255, 255, 0.85);
      --dock-border: rgba(0, 0, 0, 0.08);
      --dock-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
      --icon-color: #999999;
      --icon-active: #000000;
      --indicator-bg: #f0f0f0;
      --avatar-ring: #ffffff;
      --avatar-border: #e0e0e0;
    }

    [data-theme="dark"] .chat-dock-preview-minimal {
      --bg-body: #000000;
      --dock-bg: rgba(20, 20, 20, 0.85);
      --dock-border: rgba(255, 255, 255, 0.1);
      --dock-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      --icon-color: #666666;
      --icon-active: #ffffff;
      --indicator-bg: #333333;
      --avatar-ring: #1a1a1a;
      --avatar-border: #333333;
    }

    .chat-dock-preview-minimal .chat-dock-preview-minimal-bar {
      width: 100%;
      height: 34px;
      border-radius: 18px;
      background: var(--dock-bg);
      border: 1px solid var(--dock-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      gap: 6px;
      box-shadow: var(--dock-shadow);
    }

    .chat-dock-preview-minimal .chat-dock-preview-minimal-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--icon-color);
      opacity: 0.6;
    }

    .chat-dock-preview-minimal .chat-dock-preview-minimal-dot.center {
      width: 14px;
      height: 14px;
      background: var(--icon-active);
      opacity: 0.9;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
    }

    /* Vertical Floating Dock */
    #chatScreen.chat-dock-style-vertical {
      --bg-body: #eef2f5;
      --dock-bg: rgba(255, 255, 255, 0.7);
      --dock-border: rgba(255, 255, 255, 1);
      --dock-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
      --icon-color: #999999;
      --icon-active: #ffffff;
      --text-color: #000000;
      --blob-color: #111111;
      --core-ring-idle: #cccccc;
      --core-ring-active: #000000;
      --avatar-filter: none;
      --tooltip-bg: #111111;
      --tooltip-text: #ffffff;
    }

    [data-theme="dark"] #chatScreen.chat-dock-style-vertical {
      --bg-body: #050505;
      --dock-bg: rgba(20, 20, 20, 0.6);
      --dock-border: rgba(255, 255, 255, 0.08);
      --dock-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      --icon-color: #666666;
      --icon-active: #000000;
      --text-color: #ffffff;
      --blob-color: #ffffff;
      --core-ring-idle: #444444;
      --core-ring-active: #ffffff;
      --avatar-filter: none;
      --tooltip-bg: #ffffff;
      --tooltip-text: #000000;
    }

    #chatScreen.chat-dock-style-vertical .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-vertical .chat-bottom-dock-vertical {
      display: block;
      left: auto;
      right: 0;
      bottom: 0;
      transform: none;
      width: auto;
      animation: none;
      overflow: visible;
    }

    #chatScreen.chat-dock-style-vertical .dock-container {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      z-index: 1000;
    }

    #chatScreen.chat-dock-style-vertical .glass-pillar {
      position: relative;
      width: 68px;
      padding: 14px 0 20px 0;
      background: var(--dock-bg);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid var(--dock-border);
      border-radius: 40px;
      box-shadow: var(--dock-shadow);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      transition: all 0.4s ease;
    }

    #chatScreen.chat-dock-style-vertical .liquid-blob {
      position: absolute;
      left: 6px;
      width: 56px;
      height: 56px;
      background: var(--blob-color);
      border-radius: 22px;
      z-index: 0;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      transition: top 0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
                  transform 0.3s ease,
                  border-radius 0.3s ease;
    }

    #chatScreen.chat-dock-style-vertical .liquid-blob.morphing {
      transform: scale(0.85, 1.15);
      border-radius: 28px;
    }

    #chatScreen.chat-dock-style-vertical .nav-slot {
      position: relative;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      cursor: pointer;
      border-radius: 18px;
      transition: transform 0.2s;
    }

    #chatScreen.chat-dock-style-vertical .nav-slot:active {
      transform: scale(0.92);
    }

    #chatScreen.chat-dock-style-vertical .nav-slot svg {
      width: 24px;
      height: 24px;
      stroke: var(--icon-color);
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease, transform 0.3s ease;
    }

    #chatScreen.chat-dock-style-vertical .nav-slot.active svg {
      stroke: var(--icon-active);
      stroke-width: 2.2;
      transform: scale(1.05);
    }

    #chatScreen.chat-dock-style-vertical .tooltip-box {
      position: absolute;
      right: 90px;
      background: var(--tooltip-bg);
      color: var(--tooltip-text);
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      opacity: 0;
      transform: translateX(15px) scale(0.95);
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
      white-space: nowrap;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      letter-spacing: 0.5px;
    }

    #chatScreen.chat-dock-style-vertical .tooltip-box::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -4px;
      transform: translateY(-50%) rotate(45deg);
      width: 8px;
      height: 8px;
      background: var(--tooltip-bg);
    }

    #chatScreen.chat-dock-style-vertical .nav-slot:hover .tooltip-box,
    #chatScreen.chat-dock-style-vertical .flux-avatar-container:hover .tooltip-box {
      opacity: 1;
      transform: translateX(0) scale(1);
    }

    #chatScreen.chat-dock-style-vertical .pill-divider {
      width: 24px;
      height: 2px;
      background: var(--icon-color);
      opacity: 0.15;
      border-radius: 2px;
      margin: 4px 0;
    }

    #chatScreen.chat-dock-style-vertical .flux-avatar-container {
      position: relative;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1;
      margin-top: 4px;
    }

    #chatScreen.chat-dock-style-vertical .user-img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      object-fit: cover;
      filter: var(--avatar-filter);
      z-index: 2;
      transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      border: 2px solid transparent;
    }

    #chatScreen.chat-dock-style-vertical .flux-ring {
      position: absolute;
      width: 54px;
      height: 54px;
      border: 1.5px solid var(--core-ring-idle);
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      animation: breathe-morph 8s ease-in-out infinite;
      z-index: 1;
      transition: border-color 0.4s, transform 0.4s;
    }

    #chatScreen.chat-dock-style-vertical .flux-ring::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      border: 1px dashed var(--core-ring-idle);
      border-radius: 50%;
      opacity: 0.3;
      animation: rotate-slow 20s linear infinite;
    }

    #chatScreen.chat-dock-style-vertical .flux-avatar-container:hover .flux-ring {
      border-color: var(--core-ring-active);
      animation-duration: 3s;
    }

    #chatScreen.chat-dock-style-vertical .flux-avatar-container.active .flux-ring {
      border-color: var(--blob-color);
      border-width: 2px;
      animation: spin-morph 2s linear infinite;
    }

    /* Pendant Floating Dock */
    #chatScreen.chat-dock-style-pendant .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant {
      display: block;
      left: 0;
      right: 0;
      bottom: 0;
      transform: none;
      width: 100%;
      animation: none;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant {
      --bg-color: #fcfcfc;
      --text-primary: #111111;
      --text-secondary: #555555;
      --line-color: rgba(0, 0, 0, 0.8);
      --line-faint: rgba(0, 0, 0, 0.1);
      --dock-bg-blur: rgba(255, 255, 255, 0.1);
      --node-bg: #ffffff;
      --accent-highlight: #000000;
    }

    [data-theme="dark"] #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant {
      --bg-color: #050505;
      --text-primary: #eeeeee;
      --text-secondary: #888888;
      --line-color: rgba(255, 255, 255, 0.6);
      --line-faint: rgba(255, 255, 255, 0.15);
      --dock-bg-blur: rgba(0, 0, 0, 0.1);
      --node-bg: #000000;
      --accent-highlight: #ffffff;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-container {
      position: fixed;
      bottom: 20px;
      left: 0;
      width: 100%;
      height: 80px;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 10px;
      pointer-events: auto;
      touch-action: manipulation;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-arc-line {
      position: absolute;
      bottom: 25px;
      left: 10%;
      width: 80%;
      height: 40px;
      z-index: -1;
      pointer-events: none;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-arc-path {
      fill: none;
      stroke: var(--text-primary);
      stroke-width: 0.5;
      stroke-dasharray: 2 4;
      opacity: 0.5;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-items-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 85%;
      max-width: 380px;
      pointer-events: auto;
      position: relative;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      cursor: pointer;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 50%;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item:active {
      transform: scale(0.9);
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-icon-svg {
      width: 22px;
      height: 22px;
      stroke: var(--text-primary);
      stroke-width: 1.2;
      fill: none;
      transition: all 0.3s ease;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item.active .dock-icon-svg {
      fill: var(--text-primary);
      stroke: var(--text-primary);
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item.active::after {
      content: '';
      position: absolute;
      top: -5px;
      width: 4px;
      height: 4px;
      background: var(--text-primary);
      border-radius: 50%;
      box-shadow: 0 0 10px var(--text-primary);
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item.main-avatar {
      width: 60px;
      height: 60px;
      margin-bottom: 20px;
      border-radius: 50%;
      background: var(--bg-color);
      border: 1px solid var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      position: relative;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .avatar-img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      filter: none;
      transition: filter 0.3s;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item.main-avatar:hover .avatar-img {
      filter: none;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .avatar-ring {
      position: absolute;
      top: -5px;
      left: -5px;
      width: 70px;
      height: 70px;
      border: 1px solid var(--line-faint);
      border-radius: 50%;
      animation: spinSlow 20s linear infinite;
      pointer-events: none;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .avatar-ring::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 4px;
      height: 4px;
      background: var(--text-primary);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item:nth-child(1),
    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item:nth-child(5) {
      margin-bottom: 0px;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item:nth-child(2),
    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item:nth-child(4) {
      margin-bottom: 8px;
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-label {
      position: absolute;
      bottom: -16px;
      font-family: 'Inter', sans-serif;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0;
      transform: translateY(-5px);
      transition: all 0.3s;
      color: var(--text-primary);
    }

    #chatScreen.chat-dock-style-pendant .chat-bottom-dock-pendant .dock-item.active .dock-label {
      opacity: 1;
      transform: translateY(0);
    }

    /* Time Flow Dock */
    #chatScreen.chat-dock-style-time .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time {
      display: block;
      left: 0;
      right: 0;
      bottom: 0;
      transform: none;
      width: 100%;
      animation: none;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time {
      --bg: #f2f2f2;
      --text: #1a1a1a;
      --sub-text: #666666;
      --line: #1a1a1a;
      --card-bg: rgba(255, 255, 255, 0.5);
      --accent: #000000;
      --dock-blur: rgba(255, 255, 255, 0.6);
      --font-serif: 'Times New Roman', 'Songti SC', serif;
      --font-sans: 'Helvetica Neue', sans-serif;
      --blob-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    [data-theme="dark"] #chatScreen.chat-dock-style-time .chat-bottom-dock-time {
      --bg: #0a0a0a;
      --text: #e0e0e0;
      --sub-text: #888888;
      --line: #e0e0e0;
      --card-bg: rgba(20, 20, 20, 0.5);
      --dock-blur: rgba(10, 10, 10, 0.6);
      --accent: #ffffff;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .river-dock {
      position: fixed;
      bottom: 20px;
      left: 0;
      width: 100%;
      height: 80px;
      z-index: 200;
      display: flex;
      justify-content: center;
      pointer-events: none; /* 允许点击穿透到列表底部 */
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-wave-bg {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      height: 60px;
      fill: none;
      stroke: var(--text);
      stroke-width: 1;
      opacity: 0.3;
      /* 模拟水流起伏 */
      animation: tide 6s ease-in-out infinite alternate;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-items {
      position: relative;
      width: 90%;
      max-width: 400px;
      height: 100%;
      pointer-events: auto; /* 恢复点击 */
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item::before {
      content: '';
      position: absolute;
      width: 140%;
      height: 140%;
      background: var(--dock-blur);
      border-radius: 50%;
      backdrop-filter: blur(8px);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item.active::before {
      opacity: 1;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item svg {
      stroke: var(--text);
      stroke-width: 1.5;
      fill: none;
      transition: all 0.3s;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item.active svg {
      stroke-width: 2;
      fill: var(--text); /* 部分填充 */
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item.active svg path {
       /* 反色处理 */
       stroke: var(--bg);
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item:nth-child(1) { left: 0%; top: 10%; width: 40px; height: 40px; animation: float 5s ease-in-out infinite; }
    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item:nth-child(2) { left: 22%; top: 40%; width: 40px; height: 40px; animation: float 5s ease-in-out infinite 1s; }
    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item:nth-child(3) { 
      left: 50%; 
      top: 55%; 
      transform: translate(-50%, -20%); /* 修正居中 */
      width: 56px; 
      height: 56px; 
      animation: float-main 6s ease-in-out infinite;
    }
    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item:nth-child(4) { right: 22%; top: 40%; width: 40px; height: 40px; animation: float 5s ease-in-out infinite 1.5s; }
    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item:nth-child(5) { right: 0%; top: 10%; width: 40px; height: 40px; animation: float 5s ease-in-out infinite 0.5s; }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .my-avatar {
      width: 100%;
      height: 100%;
      border-radius: var(--blob-radius);
      overflow: hidden;
      border: 2px solid var(--text);
      position: relative;
      z-index: 2;
    }
    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .my-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: none;
    }

    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .ripple {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid var(--text);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }
    
    #chatScreen.chat-dock-style-time .chat-bottom-dock-time .dock-item.clicked .ripple {
      animation: rippleEffect 0.6s ease-out;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes float-main {
      0%, 100% { transform: translate(-50%, -20%) translateY(0); }
      50% { transform: translate(-50%, -20%) translateY(-10px); }
    }

    @keyframes tide {
      0% { d: path("M0,20 Q100,50 200,20 T400,20"); }
      100% { d: path("M0,25 Q100,60 200,25 T400,25"); }
    }

    @keyframes rippleEffect {
      0% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(2.5); opacity: 0; }
    }

    @keyframes spinSlow {
      to { transform: rotate(360deg); }
    }

    @keyframes breathe-morph {
      0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); }
      50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(180deg) scale(0.95); }
      100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg) scale(1); }
    }

    @keyframes rotate-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes spin-morph {
      0% { transform: rotate(0deg) scale(1.1); border-radius: 50%; border-style: solid; }
      50% { transform: rotate(180deg) scale(1.2); border-radius: 40%; border-style: dashed; }
      100% { transform: rotate(360deg) scale(1.1); border-radius: 50%; border-style: solid;}
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro {
      display: block;
      left: 0;
      bottom: 0;
      transform: none;
      width: 100%;
      animation: none;
      --accent-red: #CC181E;
      --text-meta: #666666;
      --dock-gradient: linear-gradient(to bottom, #f0f0f0, #d3d3d3);
      --dock-border: #999;
    }

    html[data-theme="dark"] #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro {
      --accent-red: #ff3333;
      --text-meta: #999999;
      --dock-gradient: linear-gradient(to bottom, #2a2a2a, #111111);
      --dock-border: #555;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .retro-dock {
      position: fixed;
      bottom: 0; left: 0; width: 100%;
      height: 70px;
      background: var(--dock-gradient);
      border-top: 1px solid var(--dock-border);
      padding-bottom: env(safe-area-inset-bottom);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 100;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .scrubber-bar {
      width: 100%; height: 4px; background: #999;
      position: relative;
    }
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .scrubber-progress {
      width: 60%; height: 100%; background: var(--accent-red);
    }
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .scrubber-handle {
      position: absolute; left: 60%; top: -3px;
      width: 10px; height: 10px; background: #fff; border: 1px solid #666;
      border-radius: 50%;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-controls {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 10px;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-btn {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: none; border: none;
      cursor: pointer;
      position: relative;
      width: 50px;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-icon {
      width: 24px; height: 24px;
      fill: #444;
      margin-bottom: 2px;
      background: none;
      border: none;
      border-radius: 0;
      display: block;
      align-items: initial;
      justify-content: initial;
      position: relative;
      overflow: visible;
      touch-action: auto;
      transition: none;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-icon::before {
      display: none;
      content: none;
    }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-icon:hover,
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-icon:active {
      transform: none;
      box-shadow: none;
    }
    html[data-theme="dark"] #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-icon { fill: #ccc; }
    
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-btn.active .dock-icon { fill: var(--accent-red); }
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-label { font-size: 9px; color: var(--text-meta); font-family: sans-serif; }

    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-btn.avatar-slot {
      transform: translateY(-15px);
    }
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .avatar-wrapper {
      width: 54px; height: 54px;
      background: #fff;
      border: 3px solid #ccc;
      border-radius: 50%;
      overflow: hidden;
      display: flex; justify-content: center; align-items: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
    
    #chatScreen.chat-dock-style-retro .chat-bottom-dock-retro .dock-btn.avatar-slot::after {
      content: '';
      position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
      width: 60px; height: 60px;
      border: 2px dashed var(--accent-red);
      border-radius: 50%;
      opacity: 0.3;
      animation: spin-retro 10s linear infinite;
      pointer-events: none;
    }

    @keyframes spin-retro { to { transform: translateX(-50%) rotate(360deg); } }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-nav-default {
      display: none;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube {
      display: block;
      left: 0;
      bottom: 0;
      transform: none;
      width: 100%;
      animation: none;
      --accent-red: #CC181E;
      --text-meta: #666666;
      --dock-gradient: linear-gradient(to bottom, #f0f0f0, #d3d3d3);
      --dock-border: #999;
    }

    html[data-theme="dark"] #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube {
      --accent-red: #ff3333;
      --text-meta: #999999;
      --dock-gradient: linear-gradient(to bottom, #2a2a2a, #111111);
      --dock-border: #555;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .lovetube-dock {
      position: fixed;
      bottom: 0; left: 0; width: 100%;
      height: 70px;
      background: var(--dock-gradient);
      border-top: 1px solid var(--dock-border);
      padding-bottom: env(safe-area-inset-bottom);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 100;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .scrubber-bar {
      width: 100%; height: 4px; background: #999;
      position: relative;
    }
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .scrubber-progress {
      width: 60%; height: 100%; background: var(--accent-red);
      animation: lovetube-progress 12s ease-in-out infinite;
    }
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .scrubber-handle {
      position: absolute; left: 60%; top: -3px;
      width: 10px; height: 10px; background: #fff; border: 1px solid #666;
      border-radius: 50%;
      animation: lovetube-handle 12s ease-in-out infinite;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-controls {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 10px;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-btn {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: none; border: none;
      cursor: pointer;
      position: relative;
      width: 50px;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-icon {
      width: 24px; height: 24px;
      fill: #444;
      margin-bottom: 2px;
      background: none;
      border: none;
      border-radius: 0;
      display: block;
      align-items: initial;
      justify-content: initial;
      position: relative;
      overflow: visible;
      touch-action: auto;
      transition: none;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-icon::before {
      display: none;
      content: none;
    }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-icon:hover,
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-icon:active {
      transform: none;
      box-shadow: none;
    }
    html[data-theme="dark"] #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-icon { fill: #ccc; }
    
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-btn.active .dock-icon { fill: var(--accent-red); }
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-label { font-size: 9px; color: var(--text-meta); font-family: sans-serif; }

    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-btn.avatar-slot {
      transform: translateY(-15px);
    }
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .avatar-wrapper {
      width: 54px; height: 54px;
      background: #fff;
      border: 3px solid #ccc;
      border-radius: 50%;
      overflow: hidden;
      display: flex; justify-content: center; align-items: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
    
    #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .dock-btn.avatar-slot::after {
      content: '';
      position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
      width: 60px; height: 60px;
      border: 2px dashed var(--accent-red);
      border-radius: 50%;
      opacity: 0.3;
      animation: spin-lovetube 10s linear infinite;
      pointer-events: none;
    }

    @keyframes spin-lovetube { to { transform: translateX(-50%) rotate(360deg); } }
    @keyframes lovetube-progress {
      0% { width: 12%; }
      50% { width: 88%; }
      100% { width: 12%; }
    }
    @keyframes lovetube-handle {
      0% { left: 12%; }
      50% { left: 88%; }
      100% { left: 12%; }
    }

    @media (prefers-reduced-motion: reduce) {
      #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .scrubber-progress,
      #chatScreen.chat-dock-style-lovetube .chat-bottom-dock-lovetube .scrubber-handle {
        animation: none;
      }
    }

    .chat-dock-preview-vertical {
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 10px;
      --dock-bg: rgba(255, 255, 255, 0.7);
      --dock-border: rgba(255, 255, 255, 1);
      --dock-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
      --icon-color: #999999;
      --icon-active: #111111;
    }

    [data-theme="dark"] .chat-dock-preview-vertical {
      --dock-bg: rgba(20, 20, 20, 0.6);
      --dock-border: rgba(255, 255, 255, 0.08);
      --dock-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      --icon-color: #666666;
      --icon-active: #ffffff;
    }

    .chat-dock-preview-vertical .chat-dock-preview-vertical-bar {
      width: 34px;
      height: 110px;
      border-radius: 18px;
      background: var(--dock-bg);
      border: 1px solid var(--dock-border);
      box-shadow: var(--dock-shadow);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      gap: 8px;
    }

    .chat-dock-preview-vertical .chat-dock-preview-vertical-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--icon-color);
      opacity: 0.6;
    }

    .chat-dock-preview-vertical .chat-dock-preview-vertical-dot.active {
      background: var(--icon-active);
      opacity: 0.9;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
    }

    .chat-dock-preview-vertical .chat-dock-preview-vertical-dot.avatar {
      width: 10px;
      height: 10px;
      background: var(--icon-active);
      opacity: 0.9;
    }

    .chat-dock-preview-vertical .chat-dock-preview-vertical-divider {
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background: var(--icon-color);
      opacity: 0.2;
    }

    .chat-dock-preview-pendant {
      position: relative;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 10px;
    }

    .chat-dock-preview-pendant-arc {
      position: absolute;
      bottom: 8px;
      left: 10%;
      width: 80%;
      height: 24px;
      pointer-events: none;
    }

    .chat-dock-preview-pendant-arc path {
      fill: none;
      stroke: var(--text-secondary);
      stroke-width: 0.6;
      stroke-dasharray: 2 4;
      opacity: 0.5;
    }

    .chat-dock-preview-pendant-items {
      width: 90%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .chat-dock-preview-pendant-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.6;
    }

    .chat-dock-preview-pendant-avatar {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid var(--text-primary);
      background: var(--bg-secondary);
      opacity: 0.9;
    }

    .chat-dock-preview-time {
      position: relative;
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat-dock-preview-time-wave {
      position: absolute;
      bottom: 6px;
      left: 0;
      width: 100%;
      height: 18px;
      fill: none;
      stroke: var(--text-secondary);
      stroke-width: 1;
      opacity: 0.4;
    }

    .chat-dock-preview-time-items {
      width: 90%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      position: relative;
      z-index: 1;
    }

    .chat-dock-preview-time-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.6;
    }

    .chat-dock-preview-time-avatar {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid var(--text-primary);
      background: var(--bg-secondary);
      opacity: 0.9;
    }

    .chat-dock-preview-lovetube {
      position: relative;
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat-dock-preview-lovetube-bar {
      position: absolute;
      bottom: 6px;
      left: 0;
      width: 100%;
      height: 18px;
      border-radius: 8px;
      background: linear-gradient(to bottom, #f0f0f0, #d3d3d3);
      border: 1px solid var(--border-color);
      opacity: 0.75;
    }

    [data-theme="dark"] .chat-dock-preview-lovetube-bar {
      background: linear-gradient(to bottom, #2a2a2a, #111111);
      border-color: rgba(255, 255, 255, 0.08);
    }

    .chat-dock-preview-lovetube-items {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 1;
    }

    .chat-dock-preview-lovetube-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.6;
    }

    .chat-dock-preview-lovetube-avatar {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid var(--text-primary);
      background: var(--bg-secondary);
      box-shadow: 0 0 0 2px rgba(204, 24, 30, 0.25);
      opacity: 0.95;
    }

    .style-preview-card[data-style="poetry"] {
      --poetry-bg: #fcfcfc;
      --poetry-text-primary: #111111;
      --poetry-text-secondary: #555555;
      --poetry-line-strong: rgba(0, 0, 0, 0.8);
      --poetry-line-faint: rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .style-preview-card[data-style="poetry"] {
      --poetry-bg: #050505;
      --poetry-text-primary: #eeeeee;
      --poetry-text-secondary: #888888;
      --poetry-line-strong: rgba(255, 255, 255, 0.6);
      --poetry-line-faint: rgba(255, 255, 255, 0.15);
    }

    .style-preview-card[data-style="river"] {
      --river-bg: #f2f2f2;
      --river-text: #1a1a1a;
      --river-subtext: #666666;
      --river-line: #1a1a1a;
    }

    [data-theme="dark"] .style-preview-card[data-style="river"] {
      --river-bg: #0a0a0a;
      --river-text: #e0e0e0;
      --river-subtext: #888888;
      --river-line: #e0e0e0;
    }
    
    .style-preview-card[data-style="yutube"] {
      --yutube-preview-bg: #ffffff;
      --yutube-preview-panel: #f8f8f8;
      --yutube-preview-border: #cccccc;
      --yutube-preview-shadow: 2px 2px 0px rgba(0,0,0,0.08);
      --yutube-preview-accent: #cc181e;
      --yutube-preview-link: #0033cc;
      --yutube-preview-title: #333333;
      --yutube-preview-meta: #666666;
      --yutube-preview-bar: #e6e6e6;
      --yutube-preview-thumb: #000000;
    }

    [data-theme="dark"] .style-preview-card[data-style="yutube"] {
      --yutube-preview-bg: #111111;
      --yutube-preview-panel: #1b1b1b;
      --yutube-preview-border: #444444;
      --yutube-preview-shadow: 2px 2px 0px #000000;
      --yutube-preview-accent: #ff3333;
      --yutube-preview-link: #5faaff;
      --yutube-preview-title: #e0e0e0;
      --yutube-preview-meta: #999999;
      --yutube-preview-bar: #2a2a2a;
      --yutube-preview-thumb: #000000;
    }

    .chat-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: all 0.3s ease;
      position: relative;
    }

    .chat-nav-item:hover {
      transform: translateY(-2px);
      color: var(--text-primary);
    }

    .chat-nav-item.active .chat-nav-icon {
      background: var(--bg-secondary);
      border-color: var(--border-color);
      transform: scale(1.05);
    }

    .chat-nav-item.active .chat-nav-label {
      font-weight: 600;
    }

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

    .chat-nav-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .chat-nav-icon svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
    }

    .chat-nav-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .chat-nav-item.active .chat-nav-icon svg {
      fill: currentColor;
    }

    .chat-nav-item.center .chat-nav-icon {
      width: 48px;
      height: 48px;
      border: 2px solid var(--accent-color);
      transform: translateY(-8px);
    }

    .chat-nav-label {
      font-size: 10px;
      color: currentColor;
      font-family: 'Inter', sans-serif;
      transition: all 0.3s ease;
    }

    .chat-nav-item.center .chat-nav-label {
      display: none;
    }

    .chat-nav-badge {
      position: absolute;
      top: 4px;
      right: 8px;
      width: 14px;
      height: 14px;
      padding: 0;
      background: var(--badge-color);
      color: var(--badge-text-color);
      border-radius: 50%;
      font-size: 7.5px;
      font-weight: 700;
      display: none;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0;
      line-height: 1;
      overflow: hidden;
    }

    .chat-nav-badge:not(:empty) {
      display: flex;
    }

    /* ==================== Moments Screen (User Feed) ==================== */
    .moments-main-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 低于 Chat 底部栏（.chat-bottom-nav z-index: 1000），保持一致的“底栏常驻”体验 */
      z-index: 99999;
      display: none;
      flex-direction: column;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      background: var(--bg-primary);
    }

    .moments-main-screen.active {
      display: flex;
      opacity: 1;
      transform: translateX(0);
    }

    /* 评论抽屉打开时需要盖过底栏 */
    .moments-main-screen.comments-open {
      z-index: 1300;
    }

    #momentsScreen {
      --moments-page: #F2F2F2;
      --moments-card: #FFFFFF;
      --moments-comp: #E0E0E0;
      --moments-text-main: #000000;
      --moments-text-sub: #666666;
      --moments-text-meta: #888888;
      --moments-border: #E5E5E5;
      --moments-reply: #FAFAFA;
      --moments-input: #FAFAFA;
    }

    [data-theme='dark'] #momentsScreen {
      --moments-page: #050505;
      --moments-card: #141414;
      --moments-comp: #1F1F1F;
      --moments-text-main: #FFFFFF;
      --moments-text-sub: #A0A0A0;
      --moments-text-meta: #666666;
      --moments-border: #262626;
      --moments-reply: #1A1A1A;
      --moments-input: #1A1A1A;
    }

    #momentsScreen {
      color: var(--moments-text-main);
      background: var(--moments-page);
      transition: background 0.3s ease, color 0.3s ease;
    }

    #momentsScreen ::selection {
      background: var(--moments-text-main);
      color: var(--moments-card);
    }

    .moments-content {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      scrollbar-width: none;
      /* 给底栏留出空间 */
      padding: 48px 16px calc(110px + env(safe-area-inset-bottom, 0));
      padding-top: calc(48px + env(safe-area-inset-top, 0));
      background: var(--moments-page);
      color: var(--moments-text-main);
    }

    .moments-content::-webkit-scrollbar {
      display: none;
    }

    #momentsScreen .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    #momentsScreen .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    #momentsScreen .moments-aesthetic-img {
      filter: grayscale(100%) contrast(110%);
      transition: filter 0.5s ease;
    }

    #momentsScreen .moments-aesthetic-img:hover {
      filter: grayscale(0%) contrast(100%);
    }

    #momentsScreen .grayscale {
      filter: grayscale(100%);
    }

    .chat-moments-inner {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .moments-music-card {
      width: 100%;
      background: var(--moments-comp);
      border: 1px solid var(--moments-border);
      box-shadow: var(--shadow-sm);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .moments-music-play {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
    }

    .moments-music-play:active {
      transform: scale(0.98);
    }

    .moments-music-play-triangle {
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 14px solid rgba(0, 0, 0, 0.75);
      margin-left: 2px;
      transition: border-left-color 0.25s ease;
    }

    [data-theme='dark'] .moments-music-play-triangle {
      border-left-color: rgba(255, 255, 255, 0.85);
    }

    .moments-music-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .moments-music-title {
      font-size: 18px;
      font-weight: 400;
      color: var(--moments-text-main);
      line-height: 1.2;
    }

    .moments-music-subtitle {
      font-size: 11px;
      color: var(--moments-text-meta);
      font-weight: 300;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .moments-music-progress {
      font-size: 10px;
      color: var(--moments-text-meta);
      font-weight: 300;
      letter-spacing: 0.08em;
    }

    .moments-posts {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .moments-post {
      width: 100%;
      background: var(--moments-card);
      border: 1px solid var(--moments-border);
      box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
      padding: 28px;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    [data-theme='dark'] .moments-post {
      box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.35);
    }

    .moments-post-meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }

    .moments-post-meta-line {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      color: var(--moments-text-meta);
      font-weight: 300;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      flex-wrap: wrap;
    }

    .moments-post-meta-line .moments-dot {
      font-size: 8px;
      opacity: 0.8;
    }

    .moments-post-meta-action {
      color: var(--moments-text-meta);
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .moments-post-meta-action:hover {
      color: var(--moments-text-sub);
    }

    .moments-post-tags-line {
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.08em;
    }

    .moments-post-tags-prefix {
      color: var(--moments-text-meta);
    }

    .moments-post-tags {
      color: rgba(0, 0, 0, 0.8);
      cursor: pointer;
      transition: color 0.2s ease;
    }

    [data-theme='dark'] .moments-post-tags {
      color: rgba(255, 255, 255, 0.85);
    }

    .moments-post-tags:hover {
      color: var(--moments-text-main);
    }

    .moments-post-image {
      width: 100%;
      height: 350px;
      overflow: hidden;
      background: #f2f2f2;
      margin-bottom: 18px;
    }

    [data-theme='dark'] .moments-post-image {
      background: #0f0f0f;
    }

    .moments-post-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .moments-post-title {
      font-size: 32px;
      font-weight: 900;
      letter-spacing: -0.02em;
      color: var(--moments-text-main);
      margin: 0 0 12px 0;
    }

    .moments-post-text {
      font-size: 13px;
      color: var(--moments-text-sub);
      line-height: 1.8;
      text-align: justify;
      word-break: break-word;
    }

    .moments-post-text .moments-bold {
      font-weight: 700;
      color: var(--moments-text-sub);
    }

    .moments-post-extra {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dotted var(--moments-border);
      font-size: 10px;
      color: var(--moments-text-meta);
      line-height: 1.6;
      font-weight: 300;
    }

    .moments-post-stats {
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      color: var(--moments-text-meta);
      font-weight: 300;
      letter-spacing: 0.08em;
    }

    .moments-post-stats button {
      background: transparent;
      border: none;
      padding: 0;
      color: inherit;
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .moments-post-stats button:hover {
      color: var(--moments-text-main);
    }

    .moments-bottom-nav {
      width: 100%;
      background: var(--moments-comp);
      border: 1px solid var(--moments-border);
      padding: 12px;
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      color: var(--moments-text-meta);
    }

    .moments-nav-btn {
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      color: inherit;
      font-weight: 300;
      letter-spacing: 0.12em;
      transition: color 0.2s ease;
    }

    .moments-nav-btn:hover {
      color: var(--moments-text-main);
    }

    .moments-credits {
      margin-top: 14px;
      text-align: center;
      font-size: 10px;
      color: rgba(0, 0, 0, 0.35);
      font-weight: 300;
      letter-spacing: 0.08em;
    }

    [data-theme='dark'] .moments-credits {
      color: rgba(255, 255, 255, 0.25);
    }

    /* Comments Backdrop */
    .moments-comment-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.30);
      backdrop-filter: blur(2px);
      z-index: 1500;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.28s ease, visibility 0.28s ease;
    }

    .moments-comment-backdrop.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Comments Drawer */
    .moments-comment-drawer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 80%;
      background: var(--moments-card);
      border-top: 1px solid var(--moments-border);
      z-index: 1501;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    [data-theme='dark'] .moments-comment-drawer {
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
    }

    .moments-comment-drawer.active {
      transform: translateY(0);
    }

    .moments-comment-drawer-header {
      padding: 12px 18px 12px;
      border-bottom: 1px solid var(--moments-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
    }

    .moments-comment-drawer-header:active {
      cursor: grabbing;
    }

    .moments-comment-handle {
      width: 40px;
      height: 4px;
      background: rgba(0, 0, 0, 0.18);
    }

    [data-theme='dark'] .moments-comment-handle {
      background: rgba(255, 255, 255, 0.18);
    }

    .moments-comment-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--moments-text-main);
    }

    .moments-comment-divider {
      width: 32px;
      height: 1px;
      background: var(--moments-border);
    }

    .moments-comment-list {
      flex: 1;
      overflow-y: auto;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .moments-comment-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .moments-comment-row.reply {
      margin-left: 44px;
      background: var(--moments-reply);
      border: 1px solid var(--moments-border);
      padding: 12px;
    }

    .moments-comment-avatar {
      width: 32px;
      height: 32px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .moments-comment-row.reply .moments-comment-avatar {
      width: 24px;
      height: 24px;
    }

    .moments-comment-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: none;
      transition: opacity 0.5s ease;
    }

    .moments-comment-row:hover .moments-comment-avatar img {
      filter: none;
    }

    .moments-comment-body {
      flex: 1;
      min-width: 0;
    }

    .moments-comment-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }

    .moments-comment-user {
      font-size: 13px;
      font-weight: 800;
      color: var(--moments-text-main);
    }

    .moments-comment-time {
      font-size: 10px;
      font-weight: 300;
      color: var(--moments-text-meta);
    }

    .moments-comment-text {
      font-size: 13px;
      color: var(--moments-text-sub);
      line-height: 1.6;
      margin-bottom: 8px;
      word-break: break-word;
    }

    .moments-comment-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.08em;
      color: var(--moments-text-meta);
    }

    .moments-comment-actions button {
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      color: inherit;
      transition: color 0.2s ease;
    }

    .moments-comment-actions button:hover {
      color: var(--moments-text-main);
    }

    .moments-comment-input-wrap {
      flex-shrink: 0;
      padding: 14px 18px;
      border-top: 1px solid var(--moments-border);
      background: var(--moments-card);
    }

    .moments-comment-input-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .moments-comment-input {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--moments-input);
      border: 1px solid var(--moments-border);
      padding: 10px 12px;
      transition: border-color 0.2s ease;
    }

    .moments-comment-input:focus-within {
      border-color: var(--moments-text-meta);
    }

    .moments-comment-input input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: var(--moments-text-main);
      font-size: 13px;
    }

    .moments-comment-input input::placeholder {
      color: var(--moments-text-meta);
    }

    .moments-comment-send {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      color: var(--moments-text-sub);
      transition: color 0.2s ease;
    }

    .moments-comment-send:hover {
      color: var(--moments-text-main);
    }

    .moments-comment-send svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
    }

    /* ==================== Moments Screen (Cinematic - 观影版) ==================== */
    /* 说明：这个块放在旧 Moments 样式之后，用于完全覆盖旧实现。 */

    #momentsScreen {
      --cine-black: #0a0a0a;
      --cine-dark: #121212;
      --cine-gray: #2a2a2a;
      --cine-light: #e5e5e5;
      --cine-white: #ffffff;

      --moments-cine-bg: var(--cine-light);
      --moments-cine-shell: var(--cine-white);
      --moments-cine-text: var(--cine-black);
      --moments-cine-border: #e5e5e5;
      --moments-cine-border-2: #dcdcdc;
      --moments-cine-muted: rgba(0, 0, 0, 0.55);
      --moments-cine-muted-2: rgba(0, 0, 0, 0.40);
    }

    [data-theme='dark'] #momentsScreen {
      --moments-cine-bg: var(--cine-black);
      --moments-cine-shell: var(--cine-black);
      --moments-cine-text: var(--cine-white);
      --moments-cine-border: #111111;
      --moments-cine-border-2: #202020;
      --moments-cine-muted: rgba(255, 255, 255, 0.55);
      --moments-cine-muted-2: rgba(255, 255, 255, 0.40);
    }

    /* 覆盖旧的 moments-main-screen 行为：不使用 display:none，保证退出动画存在 */
    #momentsScreen.moments-main-screen {
      z-index: 2200;
      display: flex;
      background: var(--moments-cine-bg);
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.35s cubic-bezier(0.28, 0.84, 0.42, 1),
                  opacity 0.35s cubic-bezier(0.28, 0.84, 0.42, 1);
      will-change: transform, opacity;
      contain: layout style paint;
      touch-action: pan-y;
    }

    #momentsScreen.moments-main-screen.active {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    #momentsScreen.moments-main-screen.moments-dragging {
      transition: none !important;
    }

    #momentsScreen ::selection {
      background: var(--moments-cine-text);
      color: var(--moments-cine-shell);
    }

    #momentsScreen .hide-scrollbar::-webkit-scrollbar { display: none; }
    #momentsScreen .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    #momentsScreen .moments-film-grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 50;
      opacity: 0.05;
      background-image: url("moments-grain.svg");
    }

    #momentsScreen .moments-cine-shell {
      position: relative;
      width: 100%;
      height: 100%;
      background: var(--moments-cine-shell);
      color: var(--moments-cine-text);
      font-family: 'Inter', sans-serif;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }

    #momentsScreen .moments-cine-topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 16px;
      /* 🔥 同步全局顶栏padding管理系统（避免遮挡系统状态栏/刘海区域） */
      padding-top: calc(var(--total-top-padding) + 4px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 120;
      color: #ffffff;
      mix-blend-mode: difference;
      pointer-events: none;
    }

    #momentsScreen .moments-cine-top-left,
    #momentsScreen .moments-cine-top-right {
      display: flex;
      align-items: center;
      gap: 12px;
      pointer-events: auto;
    }

    #momentsScreen .moments-cine-top-right {
      gap: 16px;
    }

    #momentsScreen .moments-cine-top-btn {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      background: transparent;
      border: none;
      backdrop-filter: none;
      cursor: pointer;
      padding: 0;
      transition: opacity 0.2s ease, transform 0.15s ease;
      color: #ffffff;
      opacity: 0.92;
    }

    #momentsScreen .moments-cine-icon-btn {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      background: transparent;
      border: none;
      backdrop-filter: none;
      cursor: pointer;
      padding: 0;
      transition: opacity 0.2s ease, transform 0.15s ease;
      color: #ffffff;
      opacity: 0.92;
    }

    #momentsScreen .moments-cine-top-btn:hover { opacity: 1; }

    #momentsScreen .moments-cine-icon-btn:hover {
      opacity: 1;
    }

    #momentsScreen .moments-cine-top-btn:active,
    #momentsScreen .moments-cine-icon-btn:active {
      transform: scale(0.98);
    }

    #momentsScreen .moments-cine-top-btn svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    #momentsScreen .moments-cine-icon-btn svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    #momentsScreen .moments-cine-scroll {
      height: 100%;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background: var(--moments-cine-shell);
      padding-bottom: 84px;
      -webkit-overflow-scrolling: touch;
      position: relative;
    }

    /* Bottom Fade (固定在内容上方，不随滚动) */
    #momentsScreen .moments-cine-bottom-fade {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 80px;
      background: linear-gradient(to top, var(--moments-cine-shell), transparent);
      pointer-events: none;
      z-index: 40;
    }

    /* ==================== Moments Slate Modal（发动态编辑器，匹配原稿动效 + 适配 data-theme） ==================== */
    #momentsScreen .slate-modal {
      position: absolute;
      inset: 0;
      z-index: 2500; /* 低于 settings(2600)，高于内容/底栏 */
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      backdrop-filter: blur(12px) grayscale(100%);
      -webkit-backdrop-filter: blur(12px) grayscale(100%);
      background: rgba(255, 255, 255, 0.6);
    }

    [data-theme='dark'] #momentsScreen .slate-modal {
      background: rgba(0, 0, 0, 0.6);
    }

    #momentsScreen .slate-modal.active {
      opacity: 1;
      pointer-events: auto;
    }

    @media (min-width: 640px) {
      #momentsScreen .slate-modal { align-items: center; }
    }

    #momentsScreen .slate-content {
      width: 100%;
      max-width: 448px; /* max-w-md */
      background: #ffffff;
      border-top: 2px solid #d1d5db;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      transform: translateY(100%) scale(0.95);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    [data-theme='dark'] #momentsScreen .slate-content {
      background: #121212;
      border-top-color: #374151;
    }

    @media (min-width: 640px) {
      #momentsScreen .slate-content {
        border: 1px solid #d1d5db;
        border-top-width: 1px;
        border-radius: 2px; /* rounded-sm */
      }
      [data-theme='dark'] #momentsScreen .slate-content {
        border-color: #374151;
      }
    }

    #momentsScreen .slate-content.active {
      transform: translateY(0) scale(1);
    }

    #momentsScreen .slate-stripes {
      height: 16px;
      width: 100%;
      display: flex;
    }
    #momentsScreen .slate-stripe { width: 25%; height: 100%; }
    #momentsScreen .slate-stripe.dark { background: #000; }
    #momentsScreen .slate-stripe.light { background: #fff; }
    [data-theme='dark'] #momentsScreen .slate-stripe.dark { background: #000000; }
    [data-theme='dark'] #momentsScreen .slate-stripe.light { background: #bfbfbf; }

    #momentsScreen .slate-head {
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      border-bottom: 1px solid #f3f4f6;
      gap: 16px;
      color: #000;
    }
    [data-theme='dark'] #momentsScreen .slate-head {
      border-bottom-color: #1f2937;
      color: #fff;
    }

    #momentsScreen .slate-record {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #momentsScreen .slate-record-label {
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      letter-spacing: 0.2em;
      color: #6b7280;
    }

    /* 闪烁的 REC 灯 */
    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0.3; }
      100% { opacity: 1; }
    }
    #momentsScreen .rec-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #dc2626;
      animation: blink 2s infinite;
    }

    #momentsScreen .slate-scene {
      margin-top: 4px;
      font-size: 20px;
      font-family: 'Playfair Display', 'Noto Serif SC', serif;
      font-weight: 700;
      letter-spacing: 0.025em;
      text-transform: uppercase;
    }

    #momentsScreen .slate-head-right { text-align: right; }
    #momentsScreen .slate-date-label {
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: #9ca3af;
    }
    #momentsScreen .slate-date {
      margin-top: 4px;
      font-size: 12px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      font-weight: 700;
    }

    #momentsScreen .slate-body { padding: 24px; }

    #momentsScreen .slate-typebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding-bottom: 14px;
      border-bottom: 1px dashed #e5e7eb;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: 10px;
    }
    [data-theme='dark'] #momentsScreen .slate-typebar { border-bottom-color: #1f2937; }

    #momentsScreen .slate-type-group {
      display: flex;
      gap: 16px;
      align-items: center;
      min-width: 0;
    }

    #momentsScreen .slate-location-toggle {
      border: 1px solid #e5e7eb;
      background: transparent;
      color: #6b7280;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: inherit;
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }
    #momentsScreen .slate-location-toggle i {
      font-size: 12px;
      line-height: 1;
    }
    #momentsScreen .slate-location-toggle:hover {
      color: #111827;
      border-color: #cbd5f5;
      transform: translateY(-1px);
    }
    [data-theme='dark'] #momentsScreen .slate-location-toggle {
      border-color: #2b2b2b;
      color: #9ca3af;
    }
    [data-theme='dark'] #momentsScreen .slate-location-toggle:hover {
      color: #f3f4f6;
      border-color: #4b5563;
    }
    #momentsScreen .slate-location-toggle.is-active {
      background: #000;
      color: #fff;
      border-color: #000;
    }
    [data-theme='dark'] #momentsScreen .slate-location-toggle.is-active {
      background: #fff;
      color: #000;
      border-color: #fff;
    }

    #momentsScreen .slate-location-panel {
      position: relative;
      margin-bottom: 0;
      padding: 0 12px;
      border: 1px dashed transparent;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.02);
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-4px);
      pointer-events: none;
      transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
    }
    [data-theme='dark'] #momentsScreen .slate-location-panel {
      border-color: transparent;
      background: rgba(255, 255, 255, 0.03);
    }
    #momentsScreen .slate-location-panel.open {
      max-height: 80px;
      opacity: 1;
      transform: translateY(0);
      margin-bottom: 18px;
      border-color: #e5e7eb;
      pointer-events: auto;
    }
    [data-theme='dark'] #momentsScreen .slate-location-panel.open {
      border-color: #1f2937;
    }
    #momentsScreen .slate-location-panel::before,
    #momentsScreen .slate-location-panel::after {
      content: '';
      position: absolute;
      top: 8px;
      bottom: 8px;
      width: 6px;
      background: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.22),
        rgba(0, 0, 0, 0.22) 5px,
        transparent 5px,
        transparent 10px
      );
      opacity: 0.35;
      pointer-events: none;
    }
    #momentsScreen .slate-location-panel::before { left: 8px; }
    #momentsScreen .slate-location-panel::after { right: 8px; }
    [data-theme='dark'] #momentsScreen .slate-location-panel::before,
    [data-theme='dark'] #momentsScreen .slate-location-panel::after {
      background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0.22) 5px,
        transparent 5px,
        transparent 10px
      );
      opacity: 0.35;
    }
    #momentsScreen .slate-location-field {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
      min-width: 0;
    }
    #momentsScreen .slate-location-prefix {
      font-size: 9px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      letter-spacing: 0.18em;
      padding: 3px 8px;
      border: 1px solid #e5e7eb;
      border-radius: 999px;
      color: #6b7280;
      text-transform: uppercase;
      background: rgba(0, 0, 0, 0.04);
    }
    [data-theme='dark'] #momentsScreen .slate-location-prefix {
      border-color: #2b2b2b;
      color: #e5e7eb;
      background: rgba(255, 255, 255, 0.06);
    }
    #momentsScreen .slate-location-input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      font-family: 'Playfair Display', 'Noto Serif SC', serif;
      font-size: 14px;
      letter-spacing: 0.12em;
      color: #111827;
      text-transform: uppercase;
    }
    [data-theme='dark'] #momentsScreen .slate-location-input {
      color: #e5e7eb;
    }
    #momentsScreen .slate-location-input::placeholder { color: #cbd5e1; }
    [data-theme='dark'] #momentsScreen .slate-location-input::placeholder { color: #4b5563; }

    #momentsScreen .type-btn {
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 4px 8px;
      color: #6b7280;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    #momentsScreen .type-btn:hover { opacity: 0.8; color: #000; }
    [data-theme='dark'] #momentsScreen .type-btn:hover { color: #fff; }
    #momentsScreen .type-btn.is-active {
      background: #000;
      color: #fff;
    }
    [data-theme='dark'] #momentsScreen .type-btn.is-active {
      background: #fff;
      color: #000;
    }

    #momentsScreen .script-area {
      width: 100%;
      border: none;
      outline: none;
      background: transparent;
      font-family: 'Playfair Display', 'Noto Serif SC', serif;
      font-size: 18px;
      line-height: 2rem;
      color: #1f2937;
      background-image: linear-gradient(transparent 95%, rgba(100,100,100,0.1) 95%);
      background-size: 100% 2rem;
      resize: none;
    }
    [data-theme='dark'] #momentsScreen .script-area { color: #e5e7eb; }
    #momentsScreen .script-area::placeholder { color: #d1d5db; }
    [data-theme='dark'] #momentsScreen .script-area::placeholder { color: #374151; }

    #momentsScreen .slate-insert {
      margin-top: 16px;
      width: 100%;
      height: 64px;
      border: 1px dashed #d1d5db;
      background: transparent;
      cursor: pointer;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    [data-theme='dark'] #momentsScreen .slate-insert { border-color: #374151; }
    #momentsScreen .slate-insert:hover { background: #f9fafb; }
    [data-theme='dark'] #momentsScreen .slate-insert:hover { background: rgba(255,255,255,0.05); }

    #momentsScreen .slate-insert-text {
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: #9ca3af;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    #momentsScreen .slate-file-input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    #momentsScreen .slate-file-preview {
      margin-top: 12px;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 6px;
      scroll-snap-type: x mandatory;
    }

    #momentsScreen .slate-file-item {
      position: relative;
      border: 1px solid #e5e7eb;
      background: #f8f8f8;
      border-radius: 12px;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      width: 96px;
      flex: 0 0 auto;
      scroll-snap-align: start;
      animation: slateFileFadeIn 0.35s ease;
    }

    [data-theme='dark'] #momentsScreen .slate-file-item {
      border-color: #1f2937;
      background: #0f0f0f;
    }

    #momentsScreen .slate-file-thumb {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f3f4f6;
      font-size: 18px;
      background: #111;
    }

    [data-theme='light'] #momentsScreen .slate-file-thumb {
      background: #111;
      color: #f9fafb;
      border-color: #d1d5db;
    }

    [data-theme='dark'] #momentsScreen .slate-file-thumb {
      border-color: #2a2a2a;
    }

    #momentsScreen .slate-file-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    #momentsScreen .slate-file-remove {
      position: absolute;
      right: 8px;
      top: 8px;
      border: 1px solid rgba(255, 255, 255, 0.6);
      background: rgba(0, 0, 0, 0.55);
      color: #f9fafb;
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 999px;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
    }

    #momentsScreen .slate-file-remove:hover {
      background: rgba(0, 0, 0, 0.85);
      transform: translateY(-1px);
    }

    [data-theme='dark'] #momentsScreen .slate-file-remove {
      border-color: rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.6);
      color: #f9fafb;
    }

    [data-theme='dark'] #momentsScreen .slate-file-remove:hover {
      background: rgba(255, 255, 255, 0.9);
      color: #0b0b0b;
    }

    @keyframes slateFileFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #momentsScreen .slate-footer {
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #e5e7eb;
      background: #f9fafb;
      gap: 16px;
    }
    [data-theme='dark'] #momentsScreen .slate-footer {
      border-top-color: #1f2937;
      background: #0a0a0a;
    }

    #momentsScreen .slate-footer-btn {
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.1em; /* tracking-widest */
      text-transform: uppercase;
      transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }

    #momentsScreen .slate-footer-btn.secondary {
      color: #6b7280;
    }
    #momentsScreen .slate-footer-btn.secondary:hover {
      color: #000;
    }
    [data-theme='dark'] #momentsScreen .slate-footer-btn.secondary:hover {
      color: #fff;
    }

    #momentsScreen .slate-footer-btn.primary {
      background: #000;
      color: #fff;
      padding: 8px 24px;
      font-weight: 700; /* font-bold */
    }
    [data-theme='dark'] #momentsScreen .slate-footer-btn.primary {
      background: #fff;
      color: #000;
    }

    #momentsScreen .slate-footer-profiles {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      flex: 1;
    }

    #momentsScreen .slate-footer-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    #momentsScreen .slate-footer-label {
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #6b7280;
    }

    /* Reuse Slate's existing pill button language (slate-location-toggle) */
    #momentsScreen .slate-casting-mode-btn {
      padding: 3px 10px;
      font-size: 9px;
      letter-spacing: 0.14em;
      border-color: rgba(0, 0, 0, 0.16);
    }

    [data-theme='dark'] #momentsScreen .slate-casting-mode-btn {
      border-color: rgba(255, 255, 255, 0.16);
    }

    #momentsScreen .slate-casting-mode-btn[data-mode='categories'] {
      background: #000;
      color: #fff;
      border-color: #000;
    }

    [data-theme='dark'] #momentsScreen .slate-casting-mode-btn[data-mode='categories'] {
      background: #fff;
      color: #000;
      border-color: #fff;
    }

    #momentsScreen .slate-footer-sub {
      font-size: 11px;
      color: #9ca3af;
    }

    #momentsScreen .slate-footer-sub-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    #momentsScreen .slate-casting-categories {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    #momentsScreen .slate-casting-cat-list {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    #momentsScreen .slate-casting-cat-list::-webkit-scrollbar { display: none; }
    #momentsScreen .slate-casting-cat-list { -ms-overflow-style: none; scrollbar-width: none; }

    #momentsScreen .slate-casting-cat-item {
      border: 1px solid #e5e7eb;
      background: #ffffff;
      color: rgba(0, 0, 0, 0.82);
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 999px;
      cursor: pointer;
      flex: 0 0 auto;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    [data-theme='dark'] #momentsScreen .slate-casting-cat-item {
      border-color: #1f2937;
      background: #0a0a0a;
      color: rgba(255, 255, 255, 0.86);
    }

    #momentsScreen .slate-casting-cat-item.selected {
      background: #000;
      color: #fff;
      border-color: #000;
      transform: translateY(-1px);
    }

    [data-theme='dark'] #momentsScreen .slate-casting-cat-item.selected {
      background: #fff;
      color: #000;
      border-color: #fff;
    }

    #momentsScreen .slate-casting-empty {
      font-size: 11px;
      color: rgba(0, 0, 0, 0.45);
      padding: 2px 0;
    }

    [data-theme='dark'] #momentsScreen .slate-casting-empty {
      color: rgba(255, 255, 255, 0.42);
    }

    @media (max-width: 520px) {
      #momentsScreen .slate-footer-label-row {
        gap: 8px;
      }
      #momentsScreen .slate-casting-mode-btn {
        padding: 3px 8px;
      }
    }

    #momentsScreen .slate-profile-list {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    #momentsScreen .slate-profile-list::-webkit-scrollbar { display: none; }
    #momentsScreen .slate-profile-list { -ms-overflow-style: none; scrollbar-width: none; }

    #momentsScreen .slate-profile-item {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid #e5e7eb;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      flex: 0 0 auto;
      background: #ffffff;
      transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    [data-theme='dark'] #momentsScreen .slate-profile-item {
      background: #0a0a0a;
      border-color: #1f2937;
    }

    #momentsScreen .slate-profile-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #momentsScreen .slate-profile-item.selected {
      border-color: #111827;
      box-shadow: 0 6px 16px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }

    [data-theme='dark'] #momentsScreen .slate-profile-item.selected {
      border-color: #f9fafb;
      box-shadow: 0 6px 16px rgba(0,0,0,0.6);
    }

    #momentsScreen .slate-profile-item.selected::after {
      content: '';
      position: absolute;
      right: 3px;
      bottom: 3px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #111827;
      border: 1px solid #fff;
    }

    [data-theme='dark'] #momentsScreen .slate-profile-item.selected::after {
      background: #f9fafb;
      border-color: #111827;
    }
    #momentsScreen .slate-footer-btn.primary:hover {
      transform: scale(1.05);
    }

    /* ==================== Moments Settings Sheet (Cinematic) ==================== */
    #momentsScreen {
      --moments-settings-card-bg: rgba(0, 0, 0, 0.035);
      --moments-settings-muted: rgba(0, 0, 0, 0.55);
      --moments-settings-muted-2: rgba(0, 0, 0, 0.35);
      --moments-settings-backdrop: rgba(0, 0, 0, 0.55);
      --moments-visibility-rail: rgba(0, 0, 0, 0.04);
      --moments-visibility-indicator: rgba(0, 0, 0, 0.08);
      --moments-visibility-border: rgba(0, 0, 0, 0.18);
      --moments-visibility-perf: rgba(0, 0, 0, 0.18);
    }

    [data-theme='dark'] #momentsScreen {
      --moments-settings-card-bg: rgba(255, 255, 255, 0.06);
      --moments-settings-muted: rgba(255, 255, 255, 0.55);
      --moments-settings-muted-2: rgba(255, 255, 255, 0.35);
      --moments-settings-backdrop: rgba(0, 0, 0, 0.62);
      --moments-visibility-rail: rgba(255, 255, 255, 0.06);
      --moments-visibility-indicator: rgba(255, 255, 255, 0.12);
      --moments-visibility-border: rgba(255, 255, 255, 0.18);
      --moments-visibility-perf: rgba(255, 255, 255, 0.18);
    }

    #momentsScreen .moments-settings-overlay {
      position: absolute;
      inset: 0;
      z-index: 2600;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    #momentsScreen .moments-settings-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    #momentsScreen .moments-settings-backdrop {
      position: absolute;
      inset: 0;
      background: var(--moments-settings-backdrop);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    #momentsScreen .moments-settings-overlay.active .moments-settings-backdrop {
      opacity: 1;
    }

    #momentsScreen .moments-settings-sheet {
      position: relative;
      width: min(420px, 100%);
      max-height: calc(92% - env(safe-area-inset-top, 0px));
      background: var(--moments-cine-shell);
      color: var(--moments-cine-text);
      border: 1px solid var(--moments-cine-border);
      border-bottom: none;
      border-radius: 22px 22px 0 0;
      box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.35);
      overflow: hidden;
      transform: translateY(110%);
      transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #momentsScreen .moments-settings-overlay.active .moments-settings-sheet {
      transform: translateY(0);
    }

    #momentsScreen .moments-settings-handle {
      width: 54px;
      height: 4px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.18);
      margin: 10px auto 2px;
    }

    [data-theme='dark'] #momentsScreen .moments-settings-handle {
      background: rgba(255, 255, 255, 0.22);
    }

    /* 一点“异形”元素：斜切票根/胶片标识 */
    #momentsScreen .moments-settings-quirk {
      position: absolute;
      top: 10px;
      left: 16px;
      width: 72px;
      height: 18px;
      background: var(--moments-settings-card-bg);
      border: 1px solid var(--moments-cine-border);
      border-radius: 10px;
      clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%, 6% 50%);
      opacity: 0.9;
      pointer-events: none;
    }

    #momentsScreen .moments-settings-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 10px;
    }

    #momentsScreen .moments-settings-title {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
    }

    #momentsScreen .moments-settings-close {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      color: var(--moments-cine-text);
      cursor: pointer;
      padding: 0;
      opacity: 0.7;
      transition: opacity 0.2s ease, transform 0.15s ease;
    }

    #momentsScreen .moments-settings-close:hover { opacity: 1; }
    #momentsScreen .moments-settings-close:active { transform: scale(0.98); }
    #momentsScreen .moments-settings-close svg { width: 18px; height: 18px; display: block; }

    #momentsScreen .moments-settings-content {
      padding: 8px 16px 14px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      max-height: calc(92vh - 88px);
    }

    #momentsScreen .moments-settings-card {
      background: var(--moments-settings-card-bg);
      border: 1px solid var(--moments-cine-border);
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 12px;
    }

    #momentsScreen .moments-settings-card-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      margin-bottom: 10px;
      opacity: 0.9;
    }

    #momentsScreen .moments-settings-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid var(--moments-cine-border);
      background: transparent;
      color: var(--moments-cine-text);
      cursor: pointer;
      transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
    }

    #momentsScreen .moments-settings-row.disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    #momentsScreen .moments-settings-row-left { min-width: 0; }
    #momentsScreen .moments-settings-row-label {
      font-size: 13px;
      font-weight: 800;
    }
    #momentsScreen .moments-settings-row-desc {
      margin-top: 4px;
      font-size: 10px;
      color: var(--moments-settings-muted);
      letter-spacing: 0.02em;
    }
    #momentsScreen .moments-settings-row-right {
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: var(--moments-settings-muted-2);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    #momentsScreen .moments-cine-badge.circle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px 4px 6px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid var(--moments-cine-border);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    [data-theme='dark'] #momentsScreen .moments-cine-badge.circle {
      background: rgba(255, 255, 255, 0.08);
    }

    #momentsScreen .moments-cine-badge-avatar {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.08);
      border: 1px solid var(--moments-cine-border);
      flex: 0 0 auto;
    }

    [data-theme='dark'] #momentsScreen .moments-cine-badge-avatar {
      background: rgba(255, 255, 255, 0.12);
    }

    #momentsScreen .moments-cine-badge-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    #momentsScreen .moments-cine-badge-initial {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    #momentsScreen .moments-cine-badge-name {
      max-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #momentsScreen .moments-visibility-switch {
      --moments-visibility-gap: 6px;
      --moments-visibility-pad: 6px;
      --moments-visibility-step: calc((100% - 24px) / 3);
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--moments-visibility-gap);
      padding: var(--moments-visibility-pad);
      border-radius: 16px;
      border: 1px solid var(--moments-cine-border);
      background: linear-gradient(135deg, var(--moments-visibility-rail), transparent 60%);
      overflow: hidden;
    }

    #momentsScreen .moments-settings-overlay.active .moments-visibility-switch {
      animation: momentsSwitchReveal 0.45s ease both;
    }

    @keyframes momentsSwitchReveal {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #momentsScreen .moments-visibility-switch::before,
    #momentsScreen .moments-visibility-switch::after {
      content: '';
      position: absolute;
      left: 10px;
      right: 10px;
      height: 3px;
      background: repeating-linear-gradient(90deg, transparent 0 6px, var(--moments-visibility-perf) 6px 8px);
      opacity: 0.5;
      pointer-events: none;
    }

    #momentsScreen .moments-visibility-switch::before { top: 2px; }
    #momentsScreen .moments-visibility-switch::after { bottom: 2px; }

    #momentsScreen .moments-visibility-indicator {
      position: absolute;
      top: var(--moments-visibility-pad);
      bottom: var(--moments-visibility-pad);
      left: var(--moments-visibility-pad);
      width: var(--moments-visibility-step);
      border-radius: 12px;
      background: var(--moments-visibility-indicator);
      border: 1px solid var(--moments-visibility-border);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(0, 0, 0, 0.18);
      transform: translateX(0);
      transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
      pointer-events: none;
    }

    #momentsScreen .moments-visibility-switch[data-mode='circle'] .moments-visibility-indicator {
      left: calc(var(--moments-visibility-pad) + var(--moments-visibility-step) + var(--moments-visibility-gap));
    }

    #momentsScreen .moments-visibility-switch[data-mode='public'] .moments-visibility-indicator {
      left: calc(var(--moments-visibility-pad) + var(--moments-visibility-step) + var(--moments-visibility-gap) + var(--moments-visibility-step) + var(--moments-visibility-gap));
    }

    [data-theme='dark'] #momentsScreen .moments-visibility-indicator {
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.4);
    }

    #momentsScreen .moments-visibility-btn {
      position: relative;
      z-index: 1;
      border: none;
      background: transparent;
      color: var(--moments-cine-text);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      padding: 8px 0;
      border-radius: 10px;
      cursor: pointer;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    #momentsScreen .moments-visibility-btn.is-active {
      color: var(--moments-cine-text);
    }

    #momentsScreen .moments-visibility-btn:active {
      transform: translateY(1px);
    }

    #momentsScreen .moments-visibility-btn.disabled,
    #momentsScreen .moments-visibility-btn:disabled {
      cursor: not-allowed;
      opacity: 0.35;
    }

    #momentsScreen .moments-visibility-hint {
      margin-top: 10px;
      font-size: 10px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--moments-settings-muted);
    }

    #momentsScreen .moments-settings-field { margin-top: 10px; }
    #momentsScreen .moments-settings-label {
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--moments-settings-muted);
      letter-spacing: 0.02em;
    }

    #momentsScreen .moments-settings-input,
    #momentsScreen .moments-settings-textarea {
      width: 100%;
      border: 1px solid var(--moments-cine-border);
      background: transparent;
      color: var(--moments-cine-text);
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    #momentsScreen .moments-settings-textarea {
      resize: none;
      line-height: 1.5;
      min-height: 68px;
    }

    #momentsScreen .moments-settings-input:focus,
    #momentsScreen .moments-settings-textarea:focus {
      border-color: rgba(0, 0, 0, 0.45);
    }

    [data-theme='dark'] #momentsScreen .moments-settings-input:focus,
    [data-theme='dark'] #momentsScreen .moments-settings-textarea:focus {
      border-color: rgba(255, 255, 255, 0.35);
    }

    #momentsScreen .moments-settings-hint {
      margin-top: 8px;
      font-size: 10px;
      color: var(--moments-settings-muted-2);
      line-height: 1.4;
    }

    #momentsScreen .moments-settings-media {
      margin-top: 12px;
      border: 1px solid var(--moments-cine-border);
      border-radius: 16px;
      padding: 12px;
      background: transparent;
    }

    #momentsScreen .moments-settings-media-line {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #momentsScreen .moments-settings-media-preview {
      border: 1px solid var(--moments-cine-border);
      background: var(--moments-cine-bg);
      overflow: hidden;
      flex: 0 0 auto;
      position: relative;
    }

    #momentsScreen .moments-settings-media-preview.avatar {
      width: 46px;
      height: 46px;
      border-radius: 999px;
    }

    #momentsScreen .moments-settings-media-preview.cover {
      width: 78px;
      height: 46px;
      border-radius: 14px;
    }

    #momentsScreen .moments-settings-media-preview img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #momentsScreen .moments-settings-media-meta { min-width: 0; }
    #momentsScreen .moments-settings-media-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    #momentsScreen .moments-settings-media-sub {
      margin-top: 4px;
      font-size: 10px;
      color: var(--moments-settings-muted);
      line-height: 1.35;
    }

    #momentsScreen .moments-settings-media-actions {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }

    #momentsScreen .moments-settings-mini-btn {
      height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--moments-cine-border);
      background: transparent;
      color: var(--moments-cine-text);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease;
    }

    #momentsScreen .moments-settings-mini-btn:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }

    #momentsScreen .moments-settings-mini-btn.danger {
      color: rgba(180, 40, 40, 0.95);
      border-color: rgba(180, 40, 40, 0.35);
    }

    [data-theme='dark'] #momentsScreen .moments-settings-mini-btn.danger {
      color: rgba(255, 120, 120, 0.95);
      border-color: rgba(255, 120, 120, 0.25);
    }

    #momentsScreen .moments-settings-mini-btn:not(:disabled):hover {
      background: rgba(0, 0, 0, 0.04);
    }

    [data-theme='dark'] #momentsScreen .moments-settings-mini-btn:not(:disabled):hover {
      background: rgba(255, 255, 255, 0.06);
    }

    #momentsScreen .moments-settings-mini-btn:not(:disabled):active { transform: scale(0.98); }

    #momentsScreen .moments-settings-footer {
      position: sticky;
      bottom: 0;
      padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px));
      background: linear-gradient(to top, var(--moments-cine-shell), rgba(0, 0, 0, 0));
      display: flex;
      gap: 10px;
    }

    #momentsScreen .moments-settings-footer-btn {
      flex: 1;
      height: 42px;
      border-radius: 14px;
      border: 1px solid var(--moments-cine-border);
      background: transparent;
      color: var(--moments-cine-text);
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.2s ease;
    }

    #momentsScreen .moments-settings-footer-btn.primary {
      background: var(--moments-cine-text);
      color: var(--moments-cine-shell);
      border-color: transparent;
    }

    #momentsScreen .moments-settings-footer-btn:active { transform: scale(0.99); }

    #momentsScreen .moments-cine-img {
      filter: none;
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    /* Header */
    #momentsScreen .moments-cine-header {
      position: relative;
    }

    #momentsScreen .moments-cine-cover {
      position: relative;
      width: 100%;
      height: 256px;
      overflow: hidden;
    }

    #momentsScreen .moments-cine-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #momentsScreen .moments-cine-cover-grad {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.90));
      z-index: 10;
      pointer-events: none;
    }

    #momentsScreen .moments-cine-user-row {
      position: relative;
      z-index: 20;
      margin-top: -48px;
      padding: 0 24px;
      display: flex;
      align-items: flex-end;
      gap: 16px;
    }

    #momentsScreen .moments-cine-avatar {
      width: 96px;
      height: 96px;
      border-radius: 999px;
      overflow: hidden;
      border: 4px solid #ffffff;
      background: #1a1a1a;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
      flex-shrink: 0;
      transition: border-color 0.3s ease;
    }

    [data-theme='dark'] #momentsScreen .moments-cine-avatar {
      border-color: var(--cine-black);
    }

    #momentsScreen .moments-cine-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #momentsScreen .moments-cine-user-meta {
      padding-bottom: 8px;
      min-width: 0;
    }

    #momentsScreen .moments-cine-name {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--moments-cine-text);
    }

    #momentsScreen .moments-cine-since {
      margin-top: 6px;
      font-size: 12px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: var(--moments-cine-muted);
    }

    #momentsScreen .moments-cine-group {
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.60);
    }

    [data-theme='light'] #momentsScreen .moments-cine-group {
      color: rgba(0, 0, 0, 0.45);
    }

    #momentsScreen .moments-cine-group svg {
      width: 14px;
      height: 14px;
      opacity: 0.9;
    }

    /* Signature */
    #momentsScreen .moments-cine-signature {
      padding: 20px 40px 0;
      text-align: center;
      position: relative;
    }

    #momentsScreen .moments-cine-quote {
      position: absolute;
      top: 16px;
      left: 24px;
      font-size: 22px;
      opacity: 0.28;
      font-family: 'Playfair Display', serif;
      color: var(--moments-cine-muted);
    }

    #momentsScreen .moments-cine-signature-text {
      font-size: 13px;
      color: var(--moments-cine-muted);
      font-family: 'Playfair Display', serif;
      font-style: italic;
      line-height: 1.7;
      letter-spacing: 0.02em;
    }

    #momentsScreen .moments-cine-signature-line {
      width: 32px;
      height: 1px;
      background: var(--moments-cine-border-2);
      margin: 14px auto 0;
      opacity: 0.65;
    }

    /* Sections */
    #momentsScreen .moments-cine-section {
      padding: 0 16px;
      margin-top: 28px;
    }

    #momentsScreen .moments-cine-section-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--moments-cine-text);
      margin-bottom: 14px;
    }

    /* Stats Card */
    #momentsScreen .moments-cine-stats-card {
      background: #f3f4f6;
      border: 1px solid var(--moments-cine-border);
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
      cursor: pointer;
      transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    #momentsScreen .moments-cine-stats-card[data-moments-open-slate="true"] {
      position: relative;
      overflow: hidden;
    }

    #momentsScreen .moments-cine-stats-card:active {
      transform: translateY(1px) scale(0.995);
    }

    [data-theme='dark'] #momentsScreen .moments-cine-stats-card {
      background: #1A1A1A;
      border-color: #222;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    }

    #momentsScreen .moments-cine-stats-card:hover {
      border-color: rgba(156, 163, 175, 0.8);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
    }

    [data-theme='dark'] #momentsScreen .moments-cine-stats-card:hover {
      border-color: rgba(107, 114, 128, 0.9);
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
    }

    #momentsScreen .moments-cine-stats-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    #momentsScreen .moments-cine-info-btn {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;
      color: var(--moments-cine-muted);
    }

    #momentsScreen .moments-cine-info-btn svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    #momentsScreen .moments-cine-stats-icon {
      font-size: 18px;
      color: var(--moments-cine-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    #momentsScreen .moments-cine-stats-icon i {
      line-height: 1;
    }

    #momentsScreen .moments-cine-stats-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.04);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
      backdrop-filter: blur(1px);
    }

    [data-theme='dark'] #momentsScreen .moments-cine-stats-overlay {
      background: rgba(255, 255, 255, 0.04);
    }

    #momentsScreen .moments-cine-stats-overlay-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid #d1d5db;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    }

    [data-theme='dark'] #momentsScreen .moments-cine-stats-overlay-chip {
      background: #000000;
      border-color: #374151;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
    }

    #momentsScreen .moments-cine-rec-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #dc2626;
      animation: blink 2s infinite;
    }

    #momentsScreen .moments-cine-stats-overlay-text {
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #111827;
    }

    [data-theme='dark'] #momentsScreen .moments-cine-stats-overlay-text {
      color: #f9fafb;
    }

    #momentsScreen .moments-cine-stats-card:hover .moments-cine-stats-overlay,
    #momentsScreen .moments-cine-stats-card:active .moments-cine-stats-overlay {
      opacity: 1;
      transform: translateY(0);
    }


    #momentsScreen .moments-cine-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      text-align: center;
    }

    #momentsScreen .moments-cine-stat-split {
      border-left: 1px solid rgba(0, 0, 0, 0.16);
    }

    [data-theme='dark'] #momentsScreen .moments-cine-stat-split {
      border-left-color: rgba(255, 255, 255, 0.16);
    }

    #momentsScreen .moments-cine-stat-value {
      font-size: 20px;
      font-weight: 800;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: var(--moments-cine-text);
    }

    #momentsScreen .moments-cine-stat-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--moments-cine-muted);
      margin-top: 6px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
    }

    /* Favorites */
    #momentsScreen .moments-cine-favs {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 12px;
    }

    #momentsScreen .moments-cine-poster {
      flex: 0 0 auto;
      width: 112px;
      aspect-ratio: 2 / 3;
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      background: #111;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
      cursor: pointer;
      user-select: none;
      transition: transform 0.16s ease, box-shadow 0.2s ease;
    }

    #momentsScreen .moments-cine-poster:active {
      transform: translateY(1px) scale(0.99);
    }

    #momentsScreen .moments-cine-poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #momentsScreen .moments-cine-poster-grad {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 10px 10px 8px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
    }

    #momentsScreen .moments-cine-poster-title {
      font-size: 10px;
      color: #fff;
      text-align: center;
      font-family: 'Cinzel', serif;
      letter-spacing: 0.02em;
    }

    #momentsScreen .moments-cine-divider {
      border: none;
      height: 1px;
      background: rgba(0, 0, 0, 0.14);
      margin: 24px 16px 0;
      opacity: 0.6;
    }

    [data-theme='dark'] #momentsScreen .moments-cine-divider {
      background: rgba(255, 255, 255, 0.16);
    }

    /* Feed */
    #momentsScreen .moments-cine-feed {
      padding-bottom: 80px;
    }

    #momentsScreen .moments-cine-feed-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    #momentsScreen .moments-cine-rec {
      font-size: 12px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: var(--moments-cine-muted);
      letter-spacing: 0.08em;
    }

    #momentsScreen .moments-cine-timeline {
      position: relative;
      padding-left: 16px;
      border-left: 1px dashed rgba(255, 255, 255, 0.16);
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    [data-theme='light'] #momentsScreen .moments-cine-timeline {
      border-left-color: rgba(0, 0, 0, 0.18);
    }

    #momentsScreen .moments-cine-item {
      position: relative;
    }

    #momentsScreen .moments-cine-dot {
      position: absolute;
      left: -22px;
      top: 8px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.30);
      z-index: 10;
    }

    [data-theme='light'] #momentsScreen .moments-cine-dot {
      border-color: rgba(0, 0, 0, 0.24);
    }

    #momentsScreen .moments-cine-dot-dark { background: var(--cine-black); }
    #momentsScreen .moments-cine-dot-light { background: #ffffff; }
    #momentsScreen .moments-cine-dot-gray { background: #777; }

    #momentsScreen .moments-cine-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    #momentsScreen .moments-cine-time {
      font-size: 12px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: var(--moments-cine-muted);
    }

    #momentsScreen .moments-cine-badge {
      font-size: 10px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      padding: 2px 6px;
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 0.08em;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
    }

    [data-theme='light'] #momentsScreen .moments-cine-badge {
      border-color: rgba(0, 0, 0, 0.20);
      color: rgba(0, 0, 0, 0.45);
    }

    /* Frame Card */
    #momentsScreen .moments-cine-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
      overflow: hidden;
      border-top: 4px solid #000;
      border-bottom: 4px solid #000;
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20);
    }

    #momentsScreen .moments-cine-frame-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.86;
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    #momentsScreen .moments-cine-item:hover .moments-cine-frame-img {
      opacity: 1;
      transform: scale(1.02);
    }

    #momentsScreen .moments-cine-viewfinder {
      position: absolute;
      inset: 0;
      margin: 16px;
      border: 1px solid rgba(255, 255, 255, 0.20);
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #momentsScreen .moments-cine-vf-top,
    #momentsScreen .moments-cine-vf-bot {
      padding: 8px;
      display: flex;
      justify-content: space-between;
      font-size: 8px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: rgba(255, 255, 255, 0.70);
      letter-spacing: 0.08em;
    }

    #momentsScreen .moments-cine-vf-mid {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1;
    }

    #momentsScreen .moments-cine-caption {
      margin-top: 12px;
    }

    /* Multi-image frame track */
    #momentsScreen .moments-cine-frame-multi {
      background: #050505;
    }

    #momentsScreen .moments-cine-frame-multi::before,
    #momentsScreen .moments-cine-frame-multi::after {
      content: '';
      position: absolute;
      top: 10px;
      bottom: 10px;
      width: 10px;
      background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0.22) 6px,
        transparent 6px,
        transparent 12px
      );
      opacity: 0.35;
      pointer-events: none;
      z-index: 1;
    }

    [data-theme='light'] #momentsScreen .moments-cine-frame-multi::before,
    [data-theme='light'] #momentsScreen .moments-cine-frame-multi::after {
      background: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.24),
        rgba(0, 0, 0, 0.24) 6px,
        transparent 6px,
        transparent 12px
      );
      opacity: 0.35;
    }

    #momentsScreen .moments-cine-frame-multi::before {
      left: 6px;
      border-radius: 8px;
    }

    #momentsScreen .moments-cine-frame-multi::after {
      right: 6px;
      border-radius: 8px;
    }

    #momentsScreen .moments-cine-frame-track {
      display: flex;
      width: 100%;
      height: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      position: relative;
      z-index: 0;
    }

    #momentsScreen .moments-cine-frame-track::-webkit-scrollbar {
      display: none;
    }

    #momentsScreen .moments-cine-frame-track {
      scrollbar-width: none;
    }

    #momentsScreen .moments-cine-frame-slide {
      flex: 0 0 100%;
      height: 100%;
      scroll-snap-align: start;
      position: relative;
      animation: momentsFrameSlideIn 0.45s ease;
    }

    #momentsScreen .moments-cine-frame-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0.86;
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    #momentsScreen .moments-cine-item:hover .moments-cine-frame-slide img {
      opacity: 1;
      transform: scale(1.02);
    }

    #momentsScreen .moments-cine-frame-multi .moments-cine-viewfinder {
      z-index: 2;
    }

    @keyframes momentsFrameSlideIn {
      from { opacity: 0; transform: translateX(10px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* Empty state (Cinematic) */
    #momentsScreen .moments-cine-empty {
      margin: 24px 0 8px;
      padding-left: 6px;
    }

    #momentsScreen .moments-empty-card {
      border: 1px solid var(--moments-cine-border);
      background: var(--moments-cine-shell);
      color: var(--moments-cine-text);
      border-radius: 18px;
      padding: 16px 18px 18px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
    }

    #momentsScreen .moments-empty-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--moments-cine-muted);
      text-transform: uppercase;
    }

    #momentsScreen .moments-empty-slit {
      flex: 1;
      height: 1px;
      margin-left: 12px;
      background: var(--moments-cine-border-2);
      opacity: 0.6;
    }

    #momentsScreen .moments-empty-body {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 14px;
      align-items: center;
    }

    #momentsScreen .moments-empty-film {
      position: relative;
      width: 64px;
      height: 96px;
      border: 1px solid var(--moments-cine-border-2);
      background: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 6px,
        transparent 6px,
        transparent 12px
      );
      border-radius: 6px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
      gap: 6px;
      padding: 10px 8px;
    }

    [data-theme='dark'] #momentsScreen .moments-empty-film {
      background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.08) 6px,
        transparent 6px,
        transparent 12px
      );
    }

    #momentsScreen .moments-empty-perf {
      width: 10px;
      height: 6px;
      border: 1px solid var(--moments-cine-border-2);
      background: var(--moments-cine-bg);
      border-radius: 2px;
    }

    #momentsScreen .moments-empty-copy {
      min-width: 0;
    }

    #momentsScreen .moments-empty-title {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    #momentsScreen .moments-empty-sub {
      margin-top: 6px;
      font-size: 12px;
      color: var(--moments-cine-muted);
      line-height: 1.4;
    }

    #momentsScreen .moments-empty-tape {
      margin-top: 12px;
      height: 14px;
      display: grid;
      gap: 6px;
      opacity: 0.7;
    }

    #momentsScreen .moments-empty-tape-line {
      height: 2px;
      background: var(--moments-cine-border-2);
    }

    #momentsScreen .moments-empty-footer {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    #momentsScreen .moments-empty-tag {
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      color: var(--moments-cine-muted-2);
      text-transform: uppercase;
      border: 1px dashed var(--moments-cine-border-2);
      padding: 4px 8px;
      border-radius: 999px;
    }

    #momentsScreen .moments-cine-caption-text {
      font-size: 14px;
      font-family: 'Playfair Display', serif;
      font-style: italic;
      color: rgba(255, 255, 255, 0.70);
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
    }

    [data-theme='light'] #momentsScreen .moments-cine-caption-text {
      color: rgba(0, 0, 0, 0.62);
    }

    #momentsScreen .moments-cine-actions {
      margin-top: 12px;
      display: flex;
      gap: 16px;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.55);
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    [data-theme='light'] #momentsScreen .moments-cine-actions {
      color: rgba(0, 0, 0, 0.55);
    }

    #momentsScreen .moments-cine-actions button {
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      color: inherit;
      transition: color 0.2s ease;
      font-family: inherit;
    }

    #momentsScreen .moments-cine-actions button:hover {
      color: var(--moments-cine-text);
    }

    /* Comments (Cinematic) */
    #momentsScreen .moments-comments-container {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      margin-top: 0;
      transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.6s ease,
                  margin-top 0.6s ease;
      will-change: max-height, opacity;
    }

    #momentsScreen .moments-comments-container.open {
      max-height: 560px;
      opacity: 1;
      margin-top: 14px;
    }

    #momentsScreen .moments-comments-inner {
      margin-top: 16px;
      padding-left: 16px;
      border-left: 2px solid var(--moments-cine-border-2);
      position: relative;
    }

    [data-theme='light'] #momentsScreen .moments-comments-inner {
      border-left-color: var(--moments-cine-border-2);
    }

    #momentsScreen .moments-comments-label {
      position: absolute;
      top: -12px;
      left: 12px;
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.40);
      background: var(--cine-dark);
      padding: 2px 6px;
      user-select: none;
    }

    [data-theme='light'] #momentsScreen .moments-comments-label {
      color: rgba(0, 0, 0, 0.45);
      background: var(--moments-cine-shell);
    }

    #momentsScreen .moments-comments-list {
      display: block;
      padding-top: 10px;
      max-height: min(360px, 45vh);
      overflow-y: auto;
      padding-right: 6px;
    }

    #momentsScreen .moments-comment-item {
      display: block;
      margin-bottom: 14px;
      padding: 6px 8px;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.25s ease, border-color 0.25s ease;
      position: relative;
      float: none;
      clear: both;
      overflow: hidden;
      box-sizing: border-box;
    }

    #momentsScreen .moments-comments-list > .moments-comment-item:last-child {
      margin-bottom: 0;
    }

    #momentsScreen .moments-comment-swipewrap {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    #momentsScreen .moments-comment-item.is-swipe-open .moments-comment-swipewrap {
      transform: translateX(-44px);
    }

    #momentsScreen .moments-comment-delete {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      padding: 0;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.66);
      font-size: 16px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0;
      opacity: 0;
      pointer-events: none;
      cursor: pointer;
      z-index: 2;
    }

    [data-theme='light'] #momentsScreen .moments-comment-delete {
      color: rgba(0, 0, 0, 0.55);
    }

    #momentsScreen .moments-comment-item.is-swipe-open .moments-comment-delete {
      opacity: 1;
      pointer-events: auto;
    }

    #momentsScreen .moments-comment-delete:hover {
      opacity: 1;
      color: rgba(255, 255, 255, 0.92);
    }

    [data-theme='light'] #momentsScreen .moments-comment-delete:hover {
      color: rgba(0, 0, 0, 0.85);
    }

    #momentsScreen .moments-comment-item:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    [data-theme='light'] #momentsScreen .moments-comment-item:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    #momentsScreen .moments-comment-item.is-reply-target {
      background: rgba(255, 255, 255, 0.08);
      border: 1px dashed rgba(255, 255, 255, 0.18);
    }

    [data-theme='light'] #momentsScreen .moments-comment-item.is-reply-target {
      background: rgba(0, 0, 0, 0.06);
      border-color: rgba(0, 0, 0, 0.18);
    }

    #momentsScreen .moments-comment-replyto {
      margin-left: 8px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
    }

    [data-theme='light'] #momentsScreen .moments-comment-replyto {
      color: rgba(0, 0, 0, 0.45);
    }

    #momentsScreen .moments-comment-avatar {
      width: 24px;
      height: 24px;
      border-radius: 2px;
      overflow: hidden;
      flex: 0 0 auto;
      background: rgba(255, 255, 255, 0.10);
    }

    [data-theme='light'] #momentsScreen .moments-comment-avatar {
      background: rgba(0, 0, 0, 0.10);
    }

    #momentsScreen .moments-comment-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: none;
      opacity: 0.72;
    }

    #momentsScreen .moments-comment-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    #momentsScreen .moments-comment-name {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.78);
    }

    [data-theme='light'] #momentsScreen .moments-comment-name {
      color: rgba(0, 0, 0, 0.70);
    }

    #momentsScreen .moments-comment-time {
      font-size: 10px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: rgba(255, 255, 255, 0.38);
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    [data-theme='light'] #momentsScreen .moments-comment-time {
      color: rgba(0, 0, 0, 0.45);
    }

    #momentsScreen .moments-comment-text {
      margin-top: 6px;
      font-size: 12px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.55);
    }

    [data-theme='light'] #momentsScreen .moments-comment-text {
      color: rgba(0, 0, 0, 0.55);
    }

    #momentsScreen .moments-comment-inputrow {
      margin-top: 14px;
      display: flex;
      align-items: flex-end;
      gap: 12px;
      opacity: 0.6;
      transition: opacity 0.25s ease;
      flex-shrink: 0;
    }

    #momentsScreen .moments-comment-inputrow:hover {
      opacity: 1;
    }

    #momentsScreen .moments-comment-inputrow.is-replying {
      opacity: 1;
    }

    #momentsScreen .moments-comment-prompt {
      font-size: 12px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: rgba(255, 255, 255, 0.38);
      padding-bottom: 6px;
    }

    [data-theme='light'] #momentsScreen .moments-comment-prompt {
      color: rgba(0, 0, 0, 0.45);
    }

    #momentsScreen .moments-cine-input {
      background: transparent;
      border: none;
      border-bottom: 1px solid #444;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      width: 100%;
      padding: 8px 0;
      font-size: 12px;
      outline: none;
      border-radius: 0;
      color: rgba(255, 255, 255, 0.78);
      transition: border-color 0.3s ease;
    }

    [data-theme='light'] #momentsScreen .moments-cine-input {
      border-bottom-color: #444;
      color: rgba(0, 0, 0, 0.75);
    }

    #momentsScreen .moments-cine-input:focus {
      border-bottom-color: rgba(255, 255, 255, 0.9);
    }

    [data-theme='light'] #momentsScreen .moments-cine-input:focus {
      border-bottom-color: rgba(0, 0, 0, 0.9);
    }

    #momentsScreen .moments-comment-send {
      background: transparent;
      border: none;
      padding: 0 0 6px;
      cursor: pointer;
    }

    #momentsScreen .moments-record-dot {
      width: 10px;
      height: 10px;
      display: inline-block;
      background-color: #666;
      border-radius: 50%;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    [data-theme='light'] #momentsScreen .moments-record-dot {
      background-color: #666;
    }

    #momentsScreen .moments-comment-send:hover .moments-record-dot {
      background-color: #fff;
      transform: scale(1.15);
    }

    [data-theme='light'] #momentsScreen .moments-comment-send:hover .moments-record-dot {
      background-color: #000;
    }

    /* Script Card */
    #momentsScreen .moments-cine-script {
      position: relative;
      background: #181818;
      padding: 22px;
      border-left: 2px solid #ffffff;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
      overflow: hidden;
    }

    [data-theme='light'] #momentsScreen .moments-cine-script {
      background: #121212;
    }

    #momentsScreen .moments-cine-script-quote {
      position: absolute;
      top: -6px;
      right: 10px;
      font-size: 64px;
      color: rgba(255, 255, 255, 0.06);
      font-family: 'Playfair Display', serif;
      line-height: 1;
      user-select: none;
      pointer-events: none;
    }

    #momentsScreen .moments-cine-script-scene {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.45);
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.20em;
      margin-bottom: 10px;
    }

    #momentsScreen .moments-cine-script-text {
      font-size: 18px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.86);
      font-family: 'Playfair Display', serif;
      white-space: pre-wrap;
      word-break: break-word;
    }

    #momentsScreen .moments-cine-underline {
      font-style: italic;
      text-decoration: underline;
      text-decoration-color: rgba(255, 255, 255, 0.30);
      text-underline-offset: 3px;
    }

    #momentsScreen .moments-cine-script-sign {
      margin-top: 14px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      text-align: right;
    }

    /* Cassette Card */
    @keyframes momentsSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    #momentsScreen .moments-cine-cassette {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px;
      border-radius: 14px;
      background: #ffffff;
      color: #000000;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
      transform: translateY(0);
      transition: transform 0.25s ease;
    }

    [data-theme='dark'] #momentsScreen .moments-cine-cassette {
      background: #e5e5e5;
    }

    #momentsScreen .moments-cine-cassette:hover {
      transform: translateY(-2px);
    }

    #momentsScreen .moments-cine-cassette-icon {
      width: 48px;
      height: 48px;
      background: #000000;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    #momentsScreen .moments-cine-reel {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #ffffff;
      animation: momentsSpin 3s linear infinite;
    }

    #momentsScreen .moments-cine-reel-left {
      margin-right: 12px;
    }

    #momentsScreen .moments-cine-cassette-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      background: rgba(255, 255, 255, 0.20);
    }

    #momentsScreen .moments-cine-cassette-meta {
      flex: 1;
      min-width: 0;
    }

    #momentsScreen .moments-cine-cassette-title {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #momentsScreen .moments-cine-cassette-sub {
      margin-top: 2px;
      font-size: 11px;
      font-family: 'Space Mono', 'JetBrains Mono', monospace;
      color: rgba(0, 0, 0, 0.55);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #momentsScreen .moments-cine-play {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000000;
      flex-shrink: 0;
    }

    #momentsScreen .moments-cine-play svg {
      width: 28px;
      height: 28px;
      display: block;
    }

    /* ==========================================
       Chat Detail Screen Styles - 聊天详情页样式
       ========================================== */

    /* Chat Detail Container */
    .chat-detail-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg-primary);
      z-index: 1000;
      display: none;
      flex-direction: column;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .chat-detail-screen.active {
      display: flex;
      opacity: 1;
      transform: translateX(0);
    }

    /* Chat Detail Header */
    .chat-detail-header {
      /* 🔥 顶栏固定定位，不再受内容流影响 */
      position: fixed !important; /* 使用 fixed 定位 */
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 1000 !important; /* 确保在最上层 */
      /* 保持原有背景和边框 */
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border-color);
      /* 内部元素仍然使用 flex 布局 */
      display: flex;
      align-items: center;
      gap: 12px;
      /* 移除 min-height 和 flex-shrink，让高度自适应内容 */
      min-height: auto; /* 让高度根据内容自适应 */
      height: auto; /* 确保高度自适应 */
      /* 保持原有 padding，但需要考虑安全区域 */
      padding: var(--app-header-total-padding) 20px 12px;
    }

    /* 🎨 主题装饰层 - 提供额外的DOM元素用于复杂主题设计 */
    .theme-decor-layer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none; /* 不阻挡点击事件 */
      z-index: 0; /* 在内容层之下 */
      overflow: hidden;
    }

    .theme-decor {
      position: absolute;
      display: none; /* 默认隐藏，主题CSS可以激活 */
      pointer-events: none;
    }

    /* 确保内容层在装饰层之上 */
    .chat-detail-header > *:not(.theme-decor-layer) {
      position: relative;
      z-index: 1;
    }

    .chat-input-area > *:not(.theme-decor-layer) {
      position: relative;
      z-index: 1;
    }

    .chat-detail-back-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .chat-detail-back-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .chat-detail-back-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .chat-detail-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .chat-detail-avatar:hover {
      transform: scale(1.05);
      box-shadow: var(--shadow-md);
    }

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

    .chat-detail-info {
      flex: 1;
      min-width: 0;
      cursor: pointer;
    }

    .chat-detail-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .chat-detail-status {
      font-size: 11px;
      color: var(--text-secondary);
      margin-top: 2px;
      font-family: 'Inter', sans-serif;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 角色正在输入中（发送触发AI时临时显示，防止错过灵动岛提示） */
    .chat-detail-status.is-typing {
      font-style: italic;
      font-family: 'JetBrains Mono', 'Inter', sans-serif;
      color: var(--text-tertiary);
    }

    .chat-detail-status.is-typing::after {
      content: '...';
      display: inline-block;
      width: 0ch;
      overflow: hidden;
      vertical-align: bottom;
      margin-left: 1px;
      animation: chatDetailTypingDots 1.2s steps(4, end) infinite;
    }

    @keyframes chatDetailTypingDots {
      to { width: 3ch; }
    }

    /* 🎭 状态更新动画 */
    @keyframes statusPulse {
      0% { opacity: 0.5; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.02); }
      100% { opacity: 1; transform: scale(1); }
    }

    .chat-detail-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .chat-detail-icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .chat-detail-icon-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .chat-detail-icon-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    /* Messages Area */
    /* Chat Messages Area - 确保背景完全覆盖无缝隙 */
    .chat-messages-area {
      /* 🔥 消息区域绝对定位，占据头部和底部之间的空间 */
      position: absolute !important;
      top: var(--chat-header-height, 0px) !important;    /* 头部高度 */
      bottom: var(--chat-input-height, 0px) !important;  /* 底部高度 */
      left: 0 !important;
      right: 0 !important;
      z-index: 50 !important; /* 在头部和底部之下 */

      /* 保持滚动和Flex布局 */
      overflow-y: auto;
      padding: 16px; /* 内部padding，与 fixed header/input 留出的空间无关 */
      display: flex;
      flex-direction: column;
      gap: 12px;
      scrollbar-width: none;
      /* 确保背景图片正确覆盖 */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* 确保背景延伸到padding区域 */
      background-origin: border-box;
    }

    .chat-messages-area::-webkit-scrollbar {
      display: none;
    }

    /* Date Divider */
    .chat-date-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
      position: relative;
    }

    .chat-date-divider-line {
      flex: 1;
      height: 1px;
      background: var(--border-color);
    }

    .chat-date-divider-text {
      padding: 4px 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
      margin: 0 12px;
    }

    /* 🔥 通话记录系统消息样式（区别于时间分隔器） */
    .chat-call-record {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 12px 0;
      padding: 0 20px;
    }

    .chat-call-record-content {
      display: flex;
      align-items: center;
      padding: 6px 14px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      font-size: 12px;
      color: var(--text-secondary);
      font-family: 'Inter', sans-serif;
      opacity: 0.75;
      transition: opacity 0.2s;
    }

    .chat-call-record-content:hover {
      opacity: 1;
    }

    /* 🔥 Load More Messages Button */
    .load-more-messages-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 16px auto;
      padding: 10px 20px;
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .load-more-messages-btn:hover {
      background: var(--hover-bg);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .load-more-messages-btn:active {
      transform: translateY(0);
      box-shadow: none;
    }

    .load-more-messages-btn svg {
      flex-shrink: 0;
    }

    /* Message Group */
    .chat-message-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      animation: messageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative; /* 让反应气泡可以绝对定位 */
    }

    /* 角色撤回消息动画（先显示，再撤回消失） */
    .chat-message-group.recalling {
      animation: messageRecallOut 0.28s ease forwards !important;
      pointer-events: none;
      will-change: opacity, transform;
    }

    @keyframes messageRecallOut {
      from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
      to {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
        filter: blur(1px);
      }
    }

    @keyframes messageSlideIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .chat-message-group.user {
      align-items: flex-end;
    }

    .chat-message-group.character {
      align-items: flex-start;
    }

    .chat-message-group.system {
      align-items: center;  /* 🔥 系统消息（如通话记录）居中对齐 */
    }

    /* Message Bubble */
    .chat-message-bubble {
      max-width: 75%;
      padding: 10px 14px;
      border-radius: 18px;
      position: relative;
      word-wrap: break-word;
      line-height: 1.5;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    /* 禁止聊天详情页长按触发系统复制/选词气泡 */
    #chatDetailScreen #chatMessagesArea .chat-message-bubble,
    #chatDetailScreen #chatMessagesArea .chat-message-bubble *,
    #chatDetailScreen #chatMessagesArea .chat-message-sticker,
    #chatDetailScreen #chatMessagesArea .chat-message-image,
    #chatDetailScreen #chatMessagesArea .text-image-container,
    #chatDetailScreen #chatMessagesArea .chat-call-record {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .chat-bilingual-block {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .chat-bilingual-source,
    .chat-bilingual-target {
      white-space: pre-wrap;
    }

    .chat-bilingual-divider {
      height: 0.5px;
      background: linear-gradient(90deg, transparent, var(--bilingual-divider-color, rgba(0, 0, 0, 0.12)), transparent);
    }

    .chat-message-group.user .chat-bilingual-divider {
      --bilingual-divider-color: rgba(255, 255, 255, 0.28);
    }

    .chat-message-group.character .chat-bilingual-divider {
      --bilingual-divider-color: rgba(0, 0, 0, 0.12);
    }

    [data-theme='dark'] .chat-message-group.character .chat-bilingual-divider {
      --bilingual-divider-color: rgba(255, 255, 255, 0.22);
    }

    .chat-bilingual-target {
      opacity: 0.78;
    }

    .chat-message-group.user .chat-bilingual-target {
      opacity: 0.72;
    }

    .chat-message-bubble:hover {
      transform: scale(1.02);
    }

    /* User Messages (Right) */
    .chat-message-group.user .chat-message-bubble {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-bottom-right-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.08);  /* 日间模式也添加微妙边框 */
    }

    [data-theme='dark'] .chat-message-group.user .chat-message-bubble {
      background: #3a3a3a !important;  /* 提亮用户气泡：明显的中灰 */
      color: #ffffff !important;
      border: 1px solid #555555 !important;  /* 增强边框对比 */
    }

    /* Character Messages (Left) */
    .chat-message-group.character .chat-message-bubble {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border-bottom-left-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.06);  /* 日间模式添加微妙边框 */
    }

    [data-theme='dark'] .chat-message-group.character .chat-message-bubble {
      background: #252525 !important;  /* 提亮角色气泡：明显的深灰 */
      color: #e0e0e0 !important;
      border: 1px solid #3d3d3d !important;  /* 增强边框对比 */
    }

    /* ==================== Cute Chat v1 样式（侧边三角+标签） ==================== */
    /* 发送者标签 */
    .chat-sender-label {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 6px;
      opacity: 0.9;
      display: none;  /* 默认隐藏，只在cute-v1样式下显示 */
    }

    .chat-message-group.character .chat-sender-label {
      color: #FFFFFF;
      padding-left: 4px;
    }

    .chat-message-group.user .chat-sender-label {
      color: #E9A8D0;
      padding-right: 4px;
    }

    /* Cute v1 样式的容器标记 */
    #chatMessagesArea.cute-v1-style .chat-sender-label {
      display: block;  /* cute-v1样式下显示标签 */
    }

    #chatMessagesArea.cute-v1-style .chat-message-group {
      margin-bottom: 4px;
    }

    #chatMessagesArea.cute-v1-style .chat-message-group.new-conversation {
      margin-top: 16px;
    }

    #chatMessagesArea.cute-v1-style .chat-message-bubble {
      padding: 12px 16px;
      border-radius: 16px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      margin-top: 0;
    }

    /* 角色气泡 - 深灰色，左侧三角 */
    #chatMessagesArea.cute-v1-style .chat-message-group.character .chat-message-bubble {
      background: #2C2C2E !important;
      color: #FFFFFF !important;
      border: none !important;
      border-top-left-radius: 4px;
    }

    #chatMessagesArea.cute-v1-style .chat-message-group.character .chat-message-bubble::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 0;
      width: 12px;
      height: 12px;
      background: #2C2C2E;
      clip-path: polygon(100% 0, 0 0, 100% 100%);
    }

    /* 用户气泡 - 粉色，右侧三角 */
    #chatMessagesArea.cute-v1-style .chat-message-group.user .chat-message-bubble {
      background: #E9A8D0 !important;
      color: #FFFFFF !important;
      border: none !important;
      border-top-right-radius: 4px;
    }

    #chatMessagesArea.cute-v1-style .chat-message-group.user .chat-message-bubble::before {
      content: '';
      position: absolute;
      right: -6px;
      top: 0;
      width: 12px;
      height: 12px;
      background: #E9A8D0;
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    /* 暗色模式下保持Cute v1样式的颜色不变 */
    [data-theme='dark'] #chatMessagesArea.cute-v1-style .chat-message-group.character .chat-message-bubble {
      background: #2C2C2E !important;
      color: #FFFFFF !important;
    }

    [data-theme='dark'] #chatMessagesArea.cute-v1-style .chat-message-group.character .chat-message-bubble::before {
      background: #2C2C2E;
    }

    [data-theme='dark'] #chatMessagesArea.cute-v1-style .chat-message-group.user .chat-message-bubble {
      background: #E9A8D0 !important;
      color: #FFFFFF !important;
    }

    [data-theme='dark'] #chatMessagesArea.cute-v1-style .chat-message-group.user .chat-message-bubble::before {
      background: #E9A8D0;
    }

    /* ==================== Cute Chat v2 样式（上方三角+标签） ==================== */
    /* Cute v2 样式的容器标记 */
    #chatMessagesArea.cute-v2-style .chat-sender-label {
      display: block;  /* cute-v2样式下显示标签 */
    }

    #chatMessagesArea.cute-v2-style .chat-message-group {
      margin-bottom: 16px;
    }

    #chatMessagesArea.cute-v2-style .chat-message-group.new-conversation {
      margin-top: 16px;
    }

    #chatMessagesArea.cute-v2-style .chat-message-bubble {
      padding: 12px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      margin-top: 0;
    }

    /* 角色气泡 - 深灰色，上方三角 */
    #chatMessagesArea.cute-v2-style .chat-message-group.character .chat-message-bubble {
      background: #2C2C2E !important;
      color: #FFFFFF !important;
      border: none !important;
    }

    #chatMessagesArea.cute-v2-style .chat-message-group.character .chat-message-bubble::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 20px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 12px solid #2C2C2E;
    }

    /* 用户气泡 - 粉色，上方三角 */
    #chatMessagesArea.cute-v2-style .chat-message-group.user .chat-message-bubble {
      background: #E9A8D0 !important;
      color: #FFFFFF !important;
      border: none !important;
    }

    #chatMessagesArea.cute-v2-style .chat-message-group.user .chat-message-bubble::before {
      content: '';
      position: absolute;
      top: -8px;
      right: 20px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 12px solid #E9A8D0;
    }

    /* 暗色模式下保持Cute v2样式的颜色不变 */
    [data-theme='dark'] #chatMessagesArea.cute-v2-style .chat-message-group.character .chat-message-bubble {
      background: #2C2C2E !important;
      color: #FFFFFF !important;
    }

    [data-theme='dark'] #chatMessagesArea.cute-v2-style .chat-message-group.character .chat-message-bubble::before {
      border-bottom-color: #2C2C2E;
    }

    [data-theme='dark'] #chatMessagesArea.cute-v2-style .chat-message-group.user .chat-message-bubble {
      background: #E9A8D0 !important;
      color: #FFFFFF !important;
    }

    [data-theme='dark'] #chatMessagesArea.cute-v2-style .chat-message-group.user .chat-message-bubble::before {
      border-bottom-color: #E9A8D0;
    }

    /* ==================== Discord 样式（紧凑间距） ==================== */
    #chatMessagesArea.discord-style .chat-message-group {
      margin-bottom: 2px !important;  /* 紧凑间距 */
      gap: 2px !important;  /* 内部元素间距也缩小 */
    }

    #chatMessagesArea.discord-style .chat-message-bubble {
      border-radius: 20px !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    }

    #chatMessagesArea.discord-style .chat-message-group.character .chat-message-bubble {
      border-radius: 20px !important;
    }

    #chatMessagesArea.discord-style .chat-message-group.user .chat-message-bubble {
      border-radius: 20px !important;
    }

    /* Timestamp */
    .chat-message-timestamp {
      font-size: 10px;
      color: var(--text-tertiary);
      margin-top: 4px;
      font-family: 'JetBrains Mono', monospace;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .chat-message-group.user .chat-message-timestamp {
      justify-content: flex-end;
    }

    .chat-message-group.character .chat-message-timestamp {
      justify-content: flex-start;
    }

    /* Read Status */
    .chat-read-status {
      width: 12px;
      height: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .chat-read-status svg {
      width: 100%;
      height: 100%;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 2;
    }

    .chat-read-status.read svg {
      stroke: var(--accent-color);
    }

    /* System Message */
    .chat-message-system {
      align-self: center;
      padding: 6px 12px;
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      border-radius: 12px;
      font-size: 11px;
      text-align: center;
      max-width: 80%;
      line-height: 1.4;
      border: 1px solid var(--border-color);
    }

    /* ========== Reply Preview (引用预览) ========== */
    .chat-reply-preview {
      display: none;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-color);
      align-items: center;
      gap: 10px;
      /* 🔥 修复：改为 fixed 定位，固定在输入框上方 */
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: calc(68px + env(safe-area-inset-bottom, 0)) !important; /* 输入框高度约68px + 安全区域 */
      z-index: 999 !important; /* 低于输入框（1000），高于消息区域 */
      max-width: 430px;
      margin: 0 auto;
      animation: replyPreviewSlideIn 0.2s ease;
    }

    .chat-reply-preview.active {
      display: flex;
    }

    @keyframes replyPreviewSlideIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reply-preview-bar {
      width: 3px;
      height: 36px;
      background: var(--accent-color);
      border-radius: 2px;
      flex-shrink: 0;
    }

    .reply-preview-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .reply-preview-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent-color);
      line-height: 1.2;
    }

    .reply-preview-text {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .reply-preview-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .reply-preview-close:hover {
      background: var(--hover-bg);
      transform: scale(1.1);
    }

    .reply-preview-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
      stroke-width: 2;
      fill: none;
    }

    /* ========== Message Quote Bubble (气泡内引用显示) ========== */
    .chat-message-quote {
      background: var(--bg-tertiary);
      border-left: 3px solid var(--accent-color);
      border-radius: 0 8px 8px 0;
      padding: 8px 10px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .chat-message-quote:hover {
      background: var(--hover-bg);
    }

    .chat-message-quote-name {
      font-size: 11px;
      font-weight: 600;
      color: inherit;
      opacity: 0.9;
      margin-bottom: 2px;
      line-height: 1.2;
    }

    .chat-message-quote-text {
      font-size: 12px;
      color: inherit;
      opacity: 0.7;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 用户消息内的引用样式 - 反转颜色 */
    .chat-message-group.user .chat-message-quote {
      background: rgba(255, 255, 255, 0.15);
      border-left-color: rgba(255, 255, 255, 0.6);
    }

    .chat-message-group.user .chat-message-quote-name {
      color: inherit;
      opacity: 0.9;
    }

    .chat-message-group.user .chat-message-quote-text {
      color: inherit;
      opacity: 0.7;
    }

    /* 🔥 图片消息前的引用气泡独立样式 */
    .chat-message-group > .chat-message-quote {
      max-width: 85%;
      border-radius: 8px;
      background: var(--bg-secondary);
    }

    /* 用户图片消息前的引用 - 右对齐 */
    .chat-message-group.user > .chat-message-quote {
      margin-left: auto;
      background: rgba(0, 122, 255, 0.1);
      border-left-color: rgba(0, 122, 255, 0.6);
    }

    .chat-message-group.user > .chat-message-quote .chat-message-quote-name {
      color: inherit;
      opacity: 0.9;
    }

    .chat-message-group.user > .chat-message-quote .chat-message-quote-text {
      color: inherit;
      opacity: 0.7;
    }

    /* 角色引用用户消息：照抄用户引用样式（随主题/夜间模式自然适配） */
    .chat-message-group.character .chat-message-quote.quote-user,
    .chat-message-group.character > .chat-message-quote.quote-user {
      background: rgba(255, 255, 255, 0.15);
      border-left-color: rgba(255, 255, 255, 0.6);
    }

    /* 🔥 引用消息高亮动画（点击引用气泡滚动到原消息时） */
    .chat-message-group.highlight-quoted {
      animation: highlightQuoted 2s ease-out;
    }

    @keyframes highlightQuoted {
      0%, 20% {
        background-color: rgba(0, 122, 255, 0.2);
        border-radius: 12px;
      }
      100% {
        background-color: transparent;
      }
    }

    /* 暗色模式高亮 */
    [data-theme="dark"] .chat-message-group.highlight-quoted {
      animation: highlightQuotedDark 2s ease-out;
    }

    @keyframes highlightQuotedDark {
      0%, 20% {
        background-color: rgba(10, 132, 255, 0.3);
        border-radius: 12px;
      }
      100% {
        background-color: transparent;
      }
    }

    /* Chat Input Area - 添加底部安全区域支持 */
    .chat-input-area {
      /* 🔥 底部固定定位，不再受内容流影响 */
      position: fixed !important; /* 使用 fixed 定位 */
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 1000 !important; /* 确保在最上层 */
      /* 保持原有背景和边框 */
      padding: 12px 16px;
      padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)); /* 继续支持底部安全区域 */
      background: var(--bg-primary);
      border-top: 1px solid var(--border-color);
      /* 内部元素仍然使用 flex 布局 */
      display: flex;
      align-items: flex-end;
      gap: 10px;
      /* 移除 position: relative; 和 flex-shrink; */
      /* position: relative; 可能会影响 fixed 元素的 z-index */
      /* flex-shrink: 0; 对于 fixed 元素无意义 */
    }

    /* Chat Block Banner - 拉黑提示 */
    .chat-block-banner {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1105;
      padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0));
      background: var(--bg-primary);
      border-top: 1px solid var(--border-color);
      box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.08);
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity 0.28s ease, transform 0.28s ease;
    }

    .chat-block-banner.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .chat-block-banner-card {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      overflow: hidden;
    }

    .chat-block-banner-stars {
      position: absolute;
      right: 12px;
      top: 8px;
      display: flex;
      gap: 6px;
      opacity: 0.6;
      pointer-events: none;
    }

    .chat-block-banner-star {
      width: 8px;
      height: 8px;
      border: 1px solid var(--text-tertiary);
      transform: rotate(45deg);
      border-radius: 2px;
    }

    .chat-block-banner-star.small {
      width: 6px;
      height: 6px;
      opacity: 0.7;
    }

    .chat-block-banner-star.tiny {
      width: 4px;
      height: 4px;
      opacity: 0.6;
    }

    .chat-block-banner-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .chat-block-banner-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.6px;
    }

    .chat-block-banner-sub {
      font-size: 12px;
      color: var(--text-tertiary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-block-banner-btn {
      margin-left: auto;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--text-primary);
      color: var(--bg-primary);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.6px;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
      text-transform: uppercase;
    }

    [data-theme="dark"] .chat-block-banner-btn {
      background: var(--bg-primary);
      color: var(--text-primary);
    }

    .chat-block-banner-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .chat-detail-screen.chat-blocked .chat-input-area {
      pointer-events: none;
      opacity: 0.4;
      filter: grayscale(0.2);
    }

    /* 键盘弹起时的固定定位模式（备用方案） */
    .chat-input-area.keyboard-visible {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      max-width: 430px;
      margin: 0 auto;
    }

    .chat-detail-screen.ghost-typing-active .chat-input-area {
      bottom: var(--ghost-typing-keyboard-height, 220px) !important;
    }

    .chat-detail-screen.ghost-typing-active .chat-messages-area {
      bottom: calc(var(--chat-input-height, 0px) + var(--ghost-typing-keyboard-height, 0px)) !important;
    }

    .chat-ghost-typing-panel {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
      max-width: 430px;
      margin: 0 auto;
      padding: 10px 5px calc(30px + env(safe-area-inset-bottom, 0)) 5px;
      background: var(--bg-primary);
      border-top: 1px solid var(--border-color);
      box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.06);
      transform: translateY(100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .chat-ghost-typing-panel.active {
      transform: translateY(0);
      opacity: 1;
    }

    .chat-ghost-typing-keyboard {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
    }

    .ghost-typing-row {
      display: flex;
      gap: 4px;
      justify-content: center;
      width: 100%;
    }

    .ghost-key {
      height: 40px;
      width: 32px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      background: var(--bg-primary);
      text-transform: uppercase;
      transition: transform 0.05s ease, background 0.1s ease, color 0.1s ease;
    }

    .ghost-key-space {
      width: 140px;
    }

    .ghost-key-backspace,
    .ghost-key-enter {
      width: 44px;
      font-size: 10px;
      font-weight: 500;
    }

    .ghost-key-shift,
    .ghost-key-123 {
      width: 40px;
      font-size: 10px;
      font-weight: 500;
    }

    .ghost-key-enter {
      background: var(--text-primary);
      color: var(--bg-primary);
      box-shadow: none;
    }

    [data-theme="dark"] .ghost-key-enter {
      background: var(--text-primary);
      color: var(--bg-primary);
    }

    .ghost-key.active {
      background: var(--text-primary);
      color: var(--bg-primary);
      transform: scale(0.92);
    }

    /* Attachment Button */
    .chat-attach-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      position: relative;
      z-index: 10;
    }

    .chat-attach-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .chat-attach-btn.active {
      background: var(--accent-color);
      transform: rotate(45deg);
    }

    .chat-attach-btn.active svg {
      stroke: var(--bg-primary);
    }

    .chat-attach-btn svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
      transition: all 0.3s ease;
    }

    /* Attachment Menu */
    .chat-attachment-menu {
      position: absolute;
      bottom: 70px;
      left: 16px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 8px;
      box-shadow: var(--shadow-lg);
      display: none;
      flex-direction: column;
      gap: 4px;
      animation: menuSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 9999999;
    }

    .chat-attachment-menu.active {
      display: flex;
    }

    @keyframes menuSlideUp {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .chat-menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 150px;
    }

    .chat-menu-item:hover {
      background: var(--bg-tertiary);
    }

    .chat-menu-item.reverse-active {
      background: var(--bg-tertiary);
      box-shadow: inset 0 0 0 1px var(--accent-color);
    }

    .chat-menu-item.reverse-active .chat-menu-item-icon {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .chat-menu-item.reverse-active .chat-menu-item-icon svg {
      stroke: #ffffff;
    }

    .chat-menu-item-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .chat-menu-item-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .chat-menu-item-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .chat-input-wrapper {
      flex: 1;
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }

    .chat-message-input {
      flex: 1;
      min-height: 36px;
      max-height: 120px;
      padding: 8px 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      font-size: 14px;
      font-family: inherit;
      color: var(--text-primary);
      resize: none;
      outline: none;
      transition: all 0.2s ease;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .chat-message-input:focus {
      border-color: var(--accent-color);
      background: var(--bg-secondary);
    }

    .chat-message-input::placeholder {
      color: var(--text-tertiary);
    }

    .chat-send-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent-color);
      border: 1px solid var(--accent-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .chat-send-btn:hover {
      transform: scale(1.05);
      box-shadow: var(--shadow-md);
    }

    .chat-send-btn:active {
      transform: scale(0.95);
    }

    .chat-send-btn svg {
      width: 18px;
      height: 18px;
      stroke: var(--bg-primary);
      fill: none;
      stroke-width: 2;
    }

    [data-theme='dark'] .chat-send-btn {
      background: var(--bg-primary);
      border-color: var(--bg-primary);
    }

    [data-theme='dark'] .chat-send-btn svg {
      stroke: var(--accent-color);
    }

    /* Chat Message Image Styles - 聊天消息中的图片样式 */
    .chat-message-image {
      max-width: 200px;
      max-height: 200px;
      border-radius: 12px;
      overflow: hidden;
      margin-top: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chat-message-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .chat-message-image:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-md);
    }

    /* Chat Message Sticker Styles - 聊天消息中的表情包样式 */
    .chat-message-sticker {
      max-width: 120px;
      max-height: 120px;
      border-radius: 8px;
      overflow: hidden;
      margin-top: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chat-message-sticker img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .chat-message-sticker:hover {
      transform: scale(1.05);
    }

    /* Sticker Picker - 表情包选择框 */
    .sticker-picker-overlay {
      position: absolute;
      inset: 0;
      /* 高于聊天顶栏/底栏（它们是 1000）避免被遮挡 */
      z-index: 1200;
      display: flex;
      align-items: flex-end;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sticker-picker-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .sticker-picker-sheet {
      width: 100%;
      height: 360px;
      background: var(--bg-primary);
      border-radius: 20px 20px 0 0;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    }

    .sticker-picker-overlay.active .sticker-picker-sheet {
      transform: translateY(0);
    }

    .sticker-picker-handle {
      width: 36px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 12px auto 0;
      opacity: 0.5;
    }

    /* Sticker Picker Header */
    .sticker-picker-header {
      padding: 12px 20px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .sticker-picker-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .sticker-picker-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sticker-picker-action {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: var(--bg-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sticker-picker-action:active {
      transform: scale(0.95);
      background: var(--border-color);
    }

    .sticker-picker-action svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 2;
    }

    /* Sticker Category Bar - 表情包分类栏 */
    .sticker-category-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      overflow-x: auto;
      overflow-y: hidden;
      border-bottom: 1px solid var(--border-color);
      scrollbar-width: none;  /* Firefox隐藏滚动条 */
    }

    .sticker-category-bar::-webkit-scrollbar {
      display: none;  /* Chrome/Safari隐藏滚动条 */
    }

    .sticker-category-item {
      flex-shrink: 0;
      padding: 6px 14px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .sticker-category-item:hover {
      background: var(--hover-bg);
    }

    .sticker-category-item.active {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .sticker-category-manage {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sticker-category-manage:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .sticker-category-manage svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    /* Category Management Modal - 分类管理弹窗 */
    .category-management-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10001;
    }

    .category-management-modal.active {
      display: flex;
    }

    .category-management-content {
      width: 90%;
      max-width: 360px;
      max-height: 70vh;
      background: var(--bg-primary);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-xl);
      overflow: hidden;
    }

    .category-management-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .category-management-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .category-management-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .category-management-close:hover {
      background: var(--hover-bg);
    }

    .category-management-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .category-management-list {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }

    .category-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      background: var(--bg-secondary);
      border-radius: 8px;
      margin-bottom: 8px;
      border: 1px solid var(--border-color);
    }

    .category-list-item-name {
      font-size: 14px;
      color: var(--text-primary);
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .category-list-item-shared-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      background: var(--accent-color);
      color: var(--bg-primary);
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
    }

    .category-list-item-shared-badge svg {
      width: 12px;
      height: 12px;
      stroke: var(--bg-primary);
      fill: none;
      stroke-width: 2;
    }

    .category-list-item-delete {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .category-list-item-delete:hover {
      background: #ff4444;
      border-color: #ff4444;
    }

    .category-list-item-delete:hover svg {
      stroke: white;
    }

    .category-list-item-delete svg {
      width: 12px;
      height: 12px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .category-add-section {
      padding: 12px;
      border-top: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .category-add-checkbox-group {
      display: flex;
      align-items: center;
      padding: 0 4px;
    }

    .category-add-checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-secondary);
      user-select: none;
    }

    .category-add-checkbox-label:hover {
      color: var(--text-primary);
    }

    .category-add-checkbox {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--accent-color);
    }

    .category-add-input {
      flex: 1;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      color: var(--text-primary);
      outline: none;
      transition: all 0.2s ease;
    }

    .category-add-input:focus {
      border-color: var(--accent-color);
      background: var(--bg-primary);
    }

    .category-add-button {
      padding: 10px 20px;
      background: var(--accent-color);
      color: var(--bg-primary);
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .category-add-button:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .category-add-button:active {
      transform: translateY(0);
    }

    /* Sticker Batch Management Modal - 批量管理表情包弹窗 */
    .sticker-batch-management-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10002;
    }

    .sticker-batch-management-modal.active {
      display: flex;
    }

    .sticker-batch-management-content {
      width: 90%;
      max-width: 400px;
      max-height: 80vh;
      background: var(--bg-primary);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-xl);
      overflow: hidden;
    }

    .sticker-batch-management-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sticker-batch-management-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .sticker-batch-management-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sticker-batch-management-close:hover {
      background: var(--hover-bg);
    }

    .sticker-batch-management-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .sticker-batch-management-toolbar {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .sticker-batch-management-btn {
      flex: 1;
      min-width: 100px;
      padding: 8px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .sticker-batch-management-btn:hover {
      background: var(--hover-bg);
      transform: translateY(-1px);
    }

    .sticker-batch-management-btn.danger {
      background: #ff4444;
      border-color: #ff4444;
      color: white;
    }

    .sticker-batch-management-btn.danger:hover {
      background: #ff2222;
    }

    .sticker-batch-management-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .sticker-batch-management-list {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }

    .sticker-batch-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: var(--bg-secondary);
      border-radius: 8px;
      margin-bottom: 8px;
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
    }

    .sticker-batch-item.selected {
      background: var(--bg-tertiary);
      border-color: var(--accent-color);
    }

    .sticker-batch-item-checkbox {
      width: 20px;
      height: 20px;
      cursor: pointer;
      accent-color: var(--accent-color);
    }

    .sticker-batch-item-preview {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      overflow: hidden;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    .sticker-batch-item-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .sticker-batch-item-info {
      flex: 1;
      min-width: 0;
    }

    .sticker-batch-item-desc {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sticker-batch-item-category {
      font-size: 12px;
      color: var(--text-secondary);
      display: inline-block;
      padding: 2px 8px;
      background: var(--bg-tertiary);
      border-radius: 4px;
    }

    .sticker-batch-item-edit {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .sticker-batch-item-edit:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .sticker-batch-item-edit svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    /* Sticker Edit Modal - 编辑表情包弹窗 */
    .sticker-edit-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10003;
      padding: 20px;
    }

    .sticker-edit-modal.active {
      display: flex;
    }

    .sticker-edit-content {
      width: 100%;
      max-width: 360px;
      background: var(--bg-primary);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-xl);
      overflow: hidden;
    }

    .sticker-edit-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sticker-edit-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .sticker-edit-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sticker-edit-close:hover {
      background: var(--hover-bg);
    }

    .sticker-edit-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .sticker-edit-body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .sticker-edit-preview {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
    }

    .sticker-edit-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .sticker-edit-form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sticker-edit-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .sticker-edit-input {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      color: var(--text-primary);
      outline: none;
      transition: all 0.2s ease;
    }

    .sticker-edit-input:focus {
      border-color: var(--accent-color);
      background: var(--bg-primary);
    }

    .sticker-edit-footer {
      padding: 16px;
      border-top: 1px solid var(--border-color);
      display: flex;
      gap: 8px;
    }

    .sticker-edit-save-btn {
      flex: 1;
      padding: 10px 16px;
      background: var(--accent-color);
      color: var(--bg-primary);
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sticker-edit-save-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .sticker-edit-save-btn:active {
      transform: translateY(0);
    }

    .sticker-edit-cancel-btn {
      flex: 1;
      padding: 10px 16px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sticker-edit-cancel-btn:hover {
      background: var(--hover-bg);
    }

    /* ==================== Text Image Drawer - 文字图片抽屉 ==================== */
    .text-image-overlay {
      position: absolute;
      inset: 0;
      /* 高于聊天顶栏/底栏（它们是 1000）避免被遮挡 */
      z-index: 1200;
      display: flex;
      align-items: flex-end;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .text-image-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .text-image-sheet {
      width: 100%;
      background: var(--bg-primary);
      border-radius: 20px 20px 0 0;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    }

    .text-image-overlay.active .text-image-sheet {
      transform: translateY(0);
    }

    .text-image-handle {
      width: 36px;
      height: 4px;
      background: var(--text-tertiary);
      border-radius: 2px;
      margin: 12px auto 0;
      opacity: 0.5;
    }

    .text-image-header {
      padding: 12px 20px 16px;
      text-align: center;
      flex-shrink: 0;
    }

    .text-image-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .text-image-subtitle {
      font-size: 12px;
      color: var(--text-tertiary);
    }

    .text-image-body {
      padding: 0 16px;
      flex-shrink: 0;
    }

    .text-image-textarea {
      width: 100%;
      height: 100px;
      padding: 14px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      font-size: 15px;
      color: var(--text-primary);
      outline: none;
      resize: none;
      font-family: inherit;
      line-height: 1.5;
      transition: border-color 0.2s ease;
    }

    .text-image-textarea::placeholder {
      color: var(--text-tertiary);
    }

    .text-image-textarea:focus {
      border-color: var(--text-secondary);
    }

    .text-image-footer {
      padding: 16px;
      flex-shrink: 0;
    }

    .text-image-send-btn {
      width: 100%;
      padding: 14px;
      background: var(--text-primary);
      color: var(--bg-primary);
      border: none;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .text-image-send-btn:active {
      transform: scale(0.98);
      opacity: 0.9;
    }

    /* Sticker Picker Manage Button - 管理按钮 */
    .sticker-picker-manage {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sticker-picker-manage:hover {
      transform: scale(1.05);
      background: var(--hover-bg);
    }

    .sticker-picker-manage:active {
      transform: scale(0.95);
    }

    .sticker-picker-manage svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    /* Batch Import Modal */
    .batch-import-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px;
      animation: modalFadeIn 0.3s ease;
    }

    .batch-import-modal.active {
      display: flex;
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .batch-import-content {
      width: 100%;
      max-width: 400px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      max-height: 80vh;
      animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes modalSlideUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .batch-import-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .batch-import-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .batch-import-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .batch-import-close:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .batch-import-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .batch-import-body {
      padding: 20px;
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .batch-import-hint {
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-secondary);
      background: var(--bg-secondary);
      padding: 12px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }

    .batch-import-form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .batch-import-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .batch-import-select {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      color: var(--text-primary);
      outline: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .batch-import-select:focus {
      border-color: var(--accent-color);
      background-color: var(--bg-primary);
    }

    .batch-import-textarea {
      width: 100%;
      min-height: 200px;
      padding: 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 13px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
      resize: vertical;
      outline: none;
      transition: all 0.2s ease;
      line-height: 1.5;
    }

    .batch-import-textarea:focus {
      border-color: var(--accent-color);
      background: var(--bg-primary);
      box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
    }

    .batch-import-textarea::placeholder {
      color: var(--text-tertiary);
      opacity: 0.6;
    }

    .batch-import-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    .batch-import-btn {
      width: 100%;
      padding: 12px 16px;
      background: var(--accent-color);
      border: 1px solid var(--accent-color);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .batch-import-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .batch-import-btn:active {
      transform: translateY(0);
    }

    /* Sticker Import Area */
    .sticker-import-area {
      padding: 12px 16px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    .sticker-import-input-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sticker-import-input {
      width: 100%;
      padding: 8px 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 13px;
      color: var(--text-primary);
      outline: none;
      transition: all 0.2s ease;
    }

    .sticker-import-input:focus {
      border-color: var(--accent-color);
      background: var(--bg-primary);
    }

    .sticker-import-input::placeholder {
      color: var(--text-tertiary);
    }

    .sticker-import-btn {
      padding: 8px 16px;
      background: var(--accent-color);
      border: 1px solid var(--accent-color);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .sticker-import-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .sticker-import-btn:active {
      transform: translateY(0);
    }

    /* Sticker Grid - 4列固定尺寸，放大表情包 */
    .sticker-grid {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(4, 85px);  /* 每列85px，更清晰 */
      grid-auto-rows: 85px;  /* 每行85px，强制正方形 */
      gap: 10px;  /* 间距10px */
      justify-content: center;  /* 居中排列 */
      align-content: start;  /* 从上开始排列 */
      scrollbar-width: thin;
      contain: layout;  /* 优化布局性能 */
    }

    .sticker-grid::-webkit-scrollbar {
      width: 4px;
    }

    .sticker-grid::-webkit-scrollbar-track {
      background: transparent;
    }

    .sticker-grid::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 2px;
    }

    .sticker-item {
      width: 85px;  /* 固定宽度85px */
      height: 85px;  /* 固定高度85px */
      border-radius: 8px;
      overflow: hidden;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      animation: stickerItemIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes stickerItemIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .sticker-item:hover {
      transform: scale(1.05);
      border-color: var(--accent-color);
      box-shadow: var(--shadow-md);
    }

    .sticker-item:active {
      transform: scale(0.95);
    }

    .sticker-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .sticker-item-delete {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }

    .sticker-item:hover .sticker-item-delete {
      display: flex;
    }

    .sticker-item-delete svg {
      width: 10px;
      height: 10px;
      stroke: white;
      fill: none;
      stroke-width: 2;
    }

    .sticker-grid-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 40px 20px;
      color: var(--text-tertiary);
      font-size: 13px;
    }

    /* ==========================================
       User Profile Screen Styles - 用户资料页样式
       ========================================== */

    /* User Profile Main Container */
    .user-profile-main-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg-primary);
      z-index: 999;
      display: none;
      flex-direction: column;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .user-profile-main-screen.active {
      display: flex;
      opacity: 1;
      transform: translateX(0);
    }

    /* Profile Content Scroll */
    .user-profile-content {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      scrollbar-width: none;
      padding-bottom: 80px;
    }

    .user-profile-content::-webkit-scrollbar {
      display: none;
    }

    /* Decorative Top Lace Border */
    .profile-lace-top {
      position: sticky;
      top: 0;
      z-index: 10;
      height: 44px;
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border-color);
    }

    .lace-pattern-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 12px;
      background-image: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 8px,
        var(--border-color) 8px,
        var(--border-color) 9px
      );
    }

    .lace-pattern-bar::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 6px;
      background-image: radial-gradient(circle at 8px 0px, transparent 5px, var(--bg-primary) 5px);
      background-size: 16px 16px;
      background-repeat: repeat-x;
    }

    /* Decorative Stars */
    .profile-star-deco {
      position: absolute;
      width: 8px;
      height: 8px;
      opacity: 0.3;
      pointer-events: none;
    }

    .profile-star-deco::before,
    .profile-star-deco::after {
      content: '';
      position: absolute;
      background: var(--text-tertiary);
    }

    .profile-star-deco::before {
      width: 100%;
      height: 2px;
      top: 50%;
      transform: translateY(-50%);
    }

    .profile-star-deco::after {
      width: 2px;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
    }

    .profile-star-deco.star-1 { top: 80px; left: 30px; animation: starTwinkle 3s ease-in-out infinite; }
    .profile-star-deco.star-2 { top: 120px; right: 40px; animation: starTwinkle 3s ease-in-out 1s infinite; }
    .profile-star-deco.star-3 { top: 200px; left: 50px; animation: starTwinkle 3s ease-in-out 2s infinite; }

    /* Main Profile Card */
    .user-profile-main-card {
      margin: 20px 16px;
      background: var(--bg-secondary);
      border: 2px solid var(--border-color);
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      box-shadow: var(--shadow-md);
      animation: fadeIn 0.4s ease 0.1s backwards;
    }

    /* Irregular Border Decoration */
    .user-profile-main-card::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      height: 28px;
      background: repeating-linear-gradient(
        90deg,
        var(--border-color) 0px,
        var(--border-color) 8px,
        transparent 8px,
        transparent 16px
      );
      pointer-events: none;
    }

    .user-profile-main-card::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: -2px;
      right: -2px;
      height: 28px;
      background: repeating-linear-gradient(
        90deg,
        var(--border-color) 0px,
        var(--border-color) 8px,
        transparent 8px,
        transparent 16px
      );
      pointer-events: none;
    }

    /* Pixel Corner Decorations */
    .profile-pixel-corner {
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--border-color);
      opacity: 0.3;
    }

    .profile-pixel-corner.top-left { top: 8px; left: 8px; }
    .profile-pixel-corner.top-right { top: 8px; right: 8px; }
    .profile-pixel-corner.bottom-left { bottom: 8px; left: 8px; }
    .profile-pixel-corner.bottom-right { bottom: 8px; right: 8px; }

    /* Card Background Image Layer */
    .user-card-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.35;
      z-index: 0;
      border-radius: 20px;
      pointer-events: none;
    }

    /* Avatar Section */
    .user-profile-avatar-section {
      /* 🔥 使用全局App Header padding变量 */
      padding: var(--app-header-total-padding) 24px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .user-avatar-wrapper {
      position: relative;
      margin-bottom: 16px;
    }

    .user-avatar-large {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 3px solid var(--border-color);
      overflow: hidden;
      background: var(--bg-tertiary);
      position: relative;
      box-shadow: var(--shadow-md);
    }

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

    .user-avatar-large svg {
      width: 50%;
      height: 50%;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* Pixel Heart Badge */
    .user-pixel-heart {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      background: var(--accent-color);
      clip-path: polygon(
        50% 20%,
        60% 10%,
        70% 10%,
        80% 20%,
        80% 30%,
        50% 60%,
        20% 30%,
        20% 20%,
        30% 10%,
        40% 10%
      );
      animation: heartBeat 1.5s ease-in-out infinite;
    }

    @keyframes heartBeat {
      0%, 100% { transform: scale(1); }
      25% { transform: scale(1.1); }
      50% { transform: scale(1); }
    }

    .user-display-name {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .user-display-username {
      font-size: 13px;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: 4px;
    }

    .user-display-pronouns {
      display: inline-block;
      font-size: 11px;
      color: var(--text-tertiary);
      background: var(--bg-tertiary);
      padding: 4px 10px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: 16px;
    }

    .user-display-bio {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-secondary);
      max-width: 280px;
      margin: 0 auto 20px;
      white-space: pre-wrap;
    }

    /* Stats Row */
    .user-profile-stats-row {
      display: flex;
      gap: 16px;
      justify-content: center;
      padding: 16px 0;
      border-top: 1px solid var(--border-color);
    }

    .user-stat-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .user-stat-value {
      font-size: 18px;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
    }

    .user-stat-label {
      font-size: 11px;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Profile Section Container */
    .user-profile-section-box {
      margin: 16px 16px 0;
      background: var(--bg-secondary);
      border: 2px solid var(--border-color);
      border-radius: 16px;
      padding: 20px;
      position: relative;
      box-shadow: var(--shadow-sm);
      animation: fadeIn 0.4s ease backwards;
    }

    .user-profile-section-box:nth-child(2) { animation-delay: 0.2s; }
    .user-profile-section-box:nth-child(3) { animation-delay: 0.3s; }
    .user-profile-section-box:nth-child(4) { animation-delay: 0.4s; }

    .user-section-header-title {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-secondary);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
    }

    .user-section-header-title::before {
      content: '';
      width: 16px;
      height: 2px;
      background: var(--accent-color);
      opacity: 0.3;
    }

    /* About Me Text */
    .user-about-text {
      font-size: 13px;
      line-height: 1.7;
      color: var(--text-secondary);
      white-space: pre-wrap;
    }

    /* Tags Display */
    .user-tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .user-tag-badge {
      padding: 6px 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 12px;
      color: var(--text-primary);
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .user-tag-badge:hover {
      background: var(--hover-bg);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .user-tag-badge.tag-positive {
      border-color: var(--accent-color);
      font-weight: 500;
    }

    .user-tag-badge.tag-negative {
      opacity: 0.6;
      text-decoration: line-through;
    }

    /* List Display */
    .user-list-group {
      margin-bottom: 16px;
    }

    .user-list-group:last-child {
      margin-bottom: 0;
    }

    .user-list-group-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-tertiary);
      margin-bottom: 8px;
      font-family: 'JetBrains Mono', monospace;
    }

    .user-list-group-content {
      font-size: 13px;
      line-height: 1.8;
      color: var(--text-secondary);
    }

    /* Profile Action Buttons */
    .profile-action-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .profile-action-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .profile-action-btn:active {
      transform: scale(0.95);
    }

    .profile-action-btn svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    /* Floating Action Buttons at Bottom */
    .profile-floating-actions {
      position: fixed;
      bottom: 105px;
      right: 20px;
      display: flex;
      gap: 12px;
      z-index: 200;
    }

    /* Profile Edit Modal Styles */
    .profile-edit-modal-content {
      max-height: 70vh;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .profile-edit-modal-content::-webkit-scrollbar {
      display: none;
    }

    .profile-upload-area {
      width: 100%;
      padding: 20px;
      background: var(--bg-tertiary);
      border: 2px dashed var(--border-color);
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .profile-upload-area:hover {
      border-color: var(--accent-color);
      background: var(--hover-bg);
    }

    .profile-upload-area.has-image {
      padding: 0;
      border-style: solid;
      aspect-ratio: 1;
    }

    .profile-upload-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }

    .profile-upload-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      font-weight: 500;
    }

    .profile-upload-area:hover .profile-upload-overlay {
      display: flex;
    }

    .profile-tags-editor {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .profile-tag-editable {
      padding: 6px 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 12px;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .profile-tag-editable:hover {
      background: var(--hover-bg);
    }

    .profile-tag-remove {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--text-tertiary);
      color: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      transition: all 0.2s ease;
    }

    .profile-tag-remove:hover {
      background: var(--accent-color);
      transform: scale(1.1);
    }

    .profile-tag-add-btn {
      padding: 6px 12px;
      background: var(--bg-primary);
      border: 1px dashed var(--border-color);
      border-radius: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .profile-tag-add-btn:hover {
      border-color: var(--accent-color);
      color: var(--accent-color);
    }

    /* Profile Management Styles */
    .profile-mgmt-new-btn {
      width: 100%;
      padding: 14px;
      background: var(--bg-tertiary);
      border: 2px dashed var(--border-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
    }

    .profile-mgmt-new-btn:hover {
      border-color: var(--accent-color);
      color: var(--accent-color);
      background: var(--hover-bg);
    }

    .profile-mgmt-card {
      padding: 16px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      display: flex;
      gap: 12px;
      align-items: center;
      position: relative;
      transition: all 0.2s ease;
    }

    .profile-mgmt-card:hover {
      background: var(--hover-bg);
      border-color: var(--accent-color);
    }

    .profile-mgmt-card.active {
      border-color: var(--accent-color);
      background: var(--hover-bg);
    }

    .profile-mgmt-card.active::before {
      content: '●';
      position: absolute;
      top: 8px;
      right: 8px;
      color: var(--accent-color);
      font-size: 18px;
      animation: pulse 2s infinite;
    }

    .profile-mgmt-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      overflow: hidden;
      background: var(--bg-primary);
      flex-shrink: 0;
    }

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

    .profile-mgmt-avatar svg {
      width: 100%;
      height: 100%;
      padding: 10px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
    }

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

    .profile-mgmt-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .profile-mgmt-username {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .profile-mgmt-stats {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 4px;
    }

    .profile-mgmt-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .profile-mgmt-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .profile-mgmt-btn:hover {
      background: var(--hover-bg);
      border-color: var(--accent-color);
    }

    .profile-mgmt-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .profile-mgmt-btn.delete:hover {
      background: #ff4444;
      border-color: #ff4444;
    }

    .profile-mgmt-btn.delete:hover svg {
      stroke: white;
    }

    /* Profile Modals - Inbox Style Overrides */
    .profile-modal.irregular-modal {
      width: 360px;
      height: 560px;
      max-width: calc(100% - 32px);
      max-height: 560px;
      padding: 0;
      border: none;
      border-radius: 4px;
      clip-path: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    }

    .profile-modal .modal-title {
      margin: 0;
      padding: 24px 30px 0;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .profile-modal .modal-subtitle {
      margin: 6px 30px 0;
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .profile-modal .modal-content,
    .profile-modal .modal-content.profile-edit-modal-content {
      margin: 0;
      padding: 18px 30px 24px;
      flex: 1;
      overflow-y: auto;
      max-height: none;
      color: var(--text-primary);
    }

    .profile-modal .modal-actions {
      padding: 0 30px 24px;
      gap: 20px;
      justify-content: flex-end;
    }

    .profile-modal .modal-btn {
      background: none;
      border: none;
      border-radius: 0;
      padding: 0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-tertiary);
      box-shadow: none;
    }

    .profile-modal .modal-btn.primary {
      background: none;
      border: none;
      color: var(--text-primary);
    }

    .profile-modal .modal-btn:hover {
      transform: translateY(-1px);
      box-shadow: none;
      text-decoration: underline;
    }

    .profile-modal .settings-label {
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }

    .profile-modal .settings-input,
    .profile-modal .settings-textarea,
    .profile-modal .settings-select {
      border-radius: 4px;
      background: transparent;
    }

    .profile-modal .settings-input:focus,
    .profile-modal .settings-textarea:focus,
    .profile-modal .settings-select:focus {
      border-color: var(--text-tertiary);
      box-shadow: none;
    }

    .profile-modal .settings-btn {
      background: none;
      border-radius: 0;
      border: none;
      padding: 0;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }

    .profile-modal .settings-btn:hover {
      box-shadow: none;
      text-decoration: underline;
    }

    .profile-modal .profile-upload-area {
      background: transparent;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 16px;
    }

    .profile-modal .profile-upload-preview {
      border-radius: 4px;
    }

    .profile-modal .profile-tags-editor {
      margin-top: 6px;
    }

    .profile-modal::before,
    .profile-modal::after {
      content: '✦';
      position: absolute;
      color: var(--text-tertiary);
      opacity: 0.4;
      pointer-events: none;
    }

    .profile-modal::before {
      top: 16px;
      right: 20px;
      font-size: 10px;
    }

    .profile-modal::after {
      bottom: 18px;
      left: 20px;
      font-size: 8px;
    }

    .profile-modal .profile-media-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 8px;
    }

    .profile-modal .profile-media-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .profile-modal .profile-media-item .settings-label {
      margin-bottom: 0;
    }

    .profile-modal .profile-media-item .profile-upload-area {
      padding: 10px;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .profile-modal .profile-media-item .profile-upload-area.has-image {
      padding: 0;
      aspect-ratio: 1;
    }

    .profile-modal .profile-media-item .profile-upload-area svg {
      width: 24px;
      height: 24px;
      stroke: var(--text-tertiary);
      margin-bottom: 4px;
    }

    .profile-modal .profile-media-item .profile-upload-area div {
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.4px;
    }

    .profile-modal .profile-upload-overlay {
      background: rgba(0, 0, 0, 0.45);
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .profile-modal .profile-mgmt-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 10px;
    }

    .profile-modal .profile-tag-editable {
      background: transparent;
      border-radius: 4px;
      font-size: 11px;
      letter-spacing: 0.6px;
    }

    .profile-modal .profile-tag-add-btn {
      background: transparent;
      border-radius: 4px;
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .profile-modal .profile-tag-add-btn:hover {
      border-color: var(--text-tertiary);
      color: var(--text-primary);
    }

    .profile-modal .profile-mgmt-new-btn {
      background: transparent;
      border-radius: 4px;
      border-width: 1px;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .profile-modal .profile-mgmt-new-btn:hover {
      background: transparent;
      border-color: var(--text-tertiary);
      color: var(--text-primary);
    }

    .profile-modal #profileList {
      gap: 24px;
      margin-top: 10px;
    }

    .profile-modal .profile-mgmt-card {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0 0 14px 0;
      box-shadow: none;
      border-bottom: 1px solid var(--border-color);
    }

    .profile-modal .profile-mgmt-card:hover {
      background: transparent;
      border-color: transparent;
    }

    .profile-modal .profile-mgmt-card.active {
      background: transparent;
      border-color: transparent;
    }

    .profile-modal .profile-mgmt-avatar {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
    }

    .profile-modal .profile-mgmt-name {
      position: relative;
      display: inline-block;
      padding-bottom: 4px;
      letter-spacing: 0.5px;
    }

    .profile-modal .profile-mgmt-name::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--border-color);
    }

    .profile-modal .profile-mgmt-username {
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }

    .profile-modal .profile-mgmt-actions {
      gap: 6px;
    }

    .profile-modal .profile-mgmt-btn {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: transparent;
      border: 1px solid var(--border-color);
    }

    .profile-modal .profile-mgmt-btn svg {
      display: none;
    }

    .profile-modal .profile-mgmt-btn.delete {
      border: none;
      position: relative;
    }

    .profile-modal .profile-mgmt-btn.delete::before,
    .profile-modal .profile-mgmt-btn.delete::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 1px;
      background: var(--text-tertiary);
      transform-origin: center;
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .profile-modal .profile-mgmt-btn.delete::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .profile-modal .profile-mgmt-btn.delete:hover::before,
    .profile-modal .profile-mgmt-btn.delete:hover::after {
      background: var(--text-primary);
    }

    .profile-modal .profile-mgmt-card.active::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-primary);
      top: 10px;
      right: 0;
      animation: none;
    }

    .profile-modal .profile-mgmt-btn.delete:hover {
      background: transparent;
      border-color: var(--text-tertiary);
    }

    .profile-modal .profile-mgmt-btn.delete:hover svg {
      stroke: var(--text-primary);
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }

    /* Typing Indicator */
    .chat-typing-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--bg-tertiary);
      border-radius: 18px;
      border-bottom-left-radius: 4px;
      max-width: 75%;
    }

    .chat-typing-dots {
      display: flex;
      gap: 4px;
    }

    .chat-typing-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-secondary);
      animation: typingBounce 1.4s infinite ease-in-out;
    }

    .chat-typing-dot:nth-child(1) {
      animation-delay: 0s;
    }

    .chat-typing-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .chat-typing-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes typingBounce {
      0%, 60%, 100% {
        transform: translateY(0);
      }
      30% {
        transform: translateY(-8px);
      }
    }

    /* Empty Chat State */
    .chat-empty-messages {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 40px 20px;
      opacity: 0.5;
    }

    .chat-empty-messages svg {
      width: 64px;
      height: 64px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
    }

    .chat-empty-messages-text {
      font-size: 14px;
      color: var(--text-secondary);
      text-align: center;
    }

    .chat-empty-messages-subtext {
      font-size: 12px;
      color: var(--text-tertiary);
      text-align: center;
    }

    /* ==================== Chat Settings Screen ==================== */
    .chat-settings-screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg-primary);
      z-index: 8500;
      display: none;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .chat-settings-screen.active {
      display: block;
      opacity: 1;
      transform: translateX(0);
    }

    .chat-settings-screen .app-content {
      min-height: 100vh;
      min-height: 100dvh; /* 动态视口高度 */
      padding-bottom: 60px;
    }

    .chat-settings-avatar {
      width: 80px;
      height: 80px;
      border-radius: 20px;
      margin: 0 auto 12px;
      overflow: hidden;
      border: 2px solid var(--border-color);
      background: var(--bg-tertiary);
    }

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

    .chat-settings-original-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-top: 8px;
    }

    /* ========================================
       头像管理模块 - Avatar Manager
       ======================================== */
    .avatar-manager {
      position: relative;
      padding: 16px 12px 20px;
      background: var(--bg-secondary);
      border-radius: 16px;
      border: 1px solid var(--border-color);
      overflow: hidden;
    }

    /* 背景装饰层 */
    .avatar-deco-layer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      overflow: hidden;
    }

    /* 手绘星星 */
    .avatar-manager .deco-star {
      position: absolute;
      opacity: 0.15;
      animation: avatarTwinkle 3s ease-in-out infinite;
    }

    .avatar-manager .deco-star svg {
      width: 100%;
      height: 100%;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 1.5;
    }

    .avatar-manager .deco-star:nth-child(1) {
      top: 12%;
      left: 8%;
      width: 10px;
      height: 10px;
      animation-delay: 0s;
    }

    .avatar-manager .deco-star:nth-child(2) {
      top: 18%;
      right: 10%;
      width: 8px;
      height: 8px;
      animation-delay: 0.8s;
    }

    @keyframes avatarTwinkle {
      0%, 100% { opacity: 0.1; transform: scale(1); }
      50% { opacity: 0.25; transform: scale(1.1); }
    }

    /* 头像对容器 */
    .avatar-pair-container {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 0 12px;
    }

    /* 单个头像包装 */
    .avatar-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .avatar-wrapper:active {
      transform: scale(0.95);
    }

    /* 头像外框 */
    .avatar-frame {
      position: relative;
      width: 72px;
      height: 72px;
    }

    /* 头像图片容器 */
    .avatar-img-container {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--border-color);
      background: var(--bg-tertiary);
      position: relative;
      z-index: 2;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .avatar-wrapper:hover .avatar-img-container {
      border-color: var(--text-tertiary);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

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

    /* 头像占位符 */
    .avatar-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-tertiary);
    }

    .avatar-placeholder svg {
      width: 32px;
      height: 32px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
    }

    /* 头像标签 */
    .avatar-label {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
    }

    /* 更换提示 */
    .avatar-hint {
      font-size: 9px;
      color: var(--text-tertiary);
      margin-top: 2px;
      font-family: 'Caveat', cursive;
      letter-spacing: 0.05em;
    }

    /* 心形耳机线连接 */
    .connection-area {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 -8px;
      z-index: 3;
    }

    /* 心形SVG */
    .heart-connector {
      position: absolute;
      width: 28px;
      height: 26px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: avatarHeartbeat 2s ease-in-out infinite;
    }

    .heart-connector svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: var(--text-primary);
      stroke-width: 1.5;
      opacity: 0.4;
    }

    @keyframes avatarHeartbeat {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.08); }
    }

    /* 耳机线 */
    .headphone-line-left,
    .headphone-line-right {
      position: absolute;
      top: 50%;
      width: 50px;
      height: 40px;
      transform: translateY(-50%);
    }

    .headphone-line-left {
      left: -10px;
    }

    .headphone-line-right {
      right: -10px;
      transform: translateY(-50%) scaleX(-1);
    }

    .headphone-line-left svg,
    .headphone-line-right svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: var(--text-primary);
      stroke-width: 1.5;
      opacity: 0.25;
    }

    /* 统计信息区域 */
    .stats-area {
      text-align: center;
      margin-top: 4px;
      padding: 0 16px;
    }

    .stats-text {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'Noto Sans JP', 'Inter', sans-serif;
      letter-spacing: 0.08em;
      line-height: 1.6;
    }

    .stats-highlight {
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* 底部操作提示 */
    .action-hint {
      text-align: center;
      padding: 8px 16px 4px;
      border-top: 1px dashed var(--border-color);
      margin-top: 8px;
    }

    .action-hint-text {
      font-size: 10px;
      color: var(--text-tertiary);
      font-family: 'Caveat', cursive;
      letter-spacing: 0.1em;
    }

    /* 响应式适配 */
    @media (max-width: 360px) {
      .avatar-frame {
        width: 64px;
        height: 64px;
      }

      .connection-area {
        width: 60px;
        height: 60px;
      }
    }

    .chat-background-preview {
      width: 100%;
      height: 160px;
      border-radius: 12px;
      border: 2px dashed var(--border-color);
      background: var(--bg-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      overflow: hidden;
      position: relative;
    }

    .chat-background-preview:hover {
      border-color: var(--accent-color);
      background: var(--hover-bg);
    }

    .chat-background-preview.has-image {
      border-style: solid;
    }

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

    .background-preview-placeholder {
      text-align: center;
      padding: 20px;
    }

    .background-preview-placeholder svg {
      width: 48px;
      height: 48px;
      opacity: 0.3;
    }

    /* ==================== 剧情点系统样式 ==================== */

    /* 剧情点容器卡片 - 白色背景 */
    .plot-points-card {
      background: var(--bg-primary) !important;
    }

    /* 标题装饰星星 */
    .plot-point-header-stars {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 8px;
      vertical-align: middle;
    }

    .plot-point-mini-star {
      width: 4px;
      height: 4px;
      background: var(--text-primary);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: plot-star-twinkle 3s ease-in-out infinite;
      opacity: 0.4;
    }

    .plot-point-mini-star:nth-child(2) {
      animation-delay: 1s;
    }

    .plot-point-mini-star:nth-child(3) {
      animation-delay: 2s;
    }

    @keyframes plot-star-twinkle {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.3); }
    }

    /* 剧情点说明文字 */
    .plot-point-description {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-color);
      line-height: 1.5;
      letter-spacing: 0.3px;
    }

    /* 自动记忆设置面板 */
    .plot-point-auto-panel {
      position: relative;
      background: var(--bg-secondary);
      border: 1px dashed var(--border-color);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 16px;
      overflow: hidden;
    }

    .dock.edit-mode .dock-icon {
      animation: wiggle 0.3s ease-in-out infinite alternate;
    }

    .plot-point-auto-panel::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, transparent, var(--accent-color));
      opacity: 0.02;
      border-radius: 0 14px 0 100%;
      pointer-events: none;
    }

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

    .plot-point-auto-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.6px;
      color: var(--text-tertiary);
    }

    .plot-point-auto-stars {
      opacity: 0.45;
    }

    .plot-point-auto-mode {
      margin-bottom: 12px;
    }

    .plot-point-auto-mode-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-tertiary);
      margin-bottom: 6px;
    }

    .plot-point-auto-mode-toggle {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      padding: 4px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 999px;
    }

    .plot-point-auto-mode-btn {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .plot-point-auto-mode-btn.is-active {
      background: var(--accent-color);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    [data-theme='dark'] .plot-point-auto-mode-btn.is-active {
      color: #000000;
    }

    .plot-point-auto-mode-btn:focus-visible {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    .plot-point-auto-mode-desc {
      margin-top: 8px;
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.2px;
      line-height: 1.5;
    }

    .plot-point-auto-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .plot-point-auto-label {
      display: block;
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 6px;
      letter-spacing: 0.4px;
    }

    .plot-point-auto-select,
    .plot-point-auto-input {
      background: var(--bg-primary);
    }

    .plot-point-auto-hint {
      margin-top: 10px;
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.2px;
      line-height: 1.5;
    }

    @media (max-width: 360px) {
      .plot-point-auto-grid {
        grid-template-columns: 1fr;
      }
    }

    /* 剧情点列表容器 */
    .plot-points-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 16px;
      max-height: min(360px, 48vh);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 8px;
      margin-right: -8px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
      scrollbar-gutter: stable;
    }

    .plot-points-list::-webkit-scrollbar {
      width: 4px;
    }

    .plot-points-list::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.18);
      border-radius: 10px;
    }

    .plot-points-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .plot-point-item,
    .plot-points-empty {
      flex-shrink: 0;
    }

    [data-theme='dark'] .plot-points-list {
      scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }

    [data-theme='dark'] .plot-points-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
    }

    /* 空状态 */
    .plot-points-empty {
      text-align: center;
      padding: 32px 16px;
      color: var(--text-tertiary);
    }

    .plot-points-empty svg {
      width: 48px;
      height: 48px;
      stroke: var(--text-tertiary);
      fill: none;
      stroke-width: 1.5;
      margin-bottom: 12px;
      opacity: 0.5;
    }

    .plot-points-empty .empty-text {
      font-size: 13px;
      margin-bottom: 4px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .plot-points-empty .empty-subtext {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    /* 剧情点卡片 - 异形设计 */
    .plot-point-item {
      position: relative;
      background: var(--bg-primary);
      border: 1.5px solid var(--border-color);
      border-radius: 20px;
      padding: 20px;
      transition: all 0.3s ease;
      overflow: hidden;
      clip-path: polygon(
        0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px)
      );
    }

    .plot-point-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, var(--bg-secondary) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .plot-point-item:hover::before {
      opacity: 1;
    }

    .plot-point-item:hover {
      border-color: var(--text-tertiary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    /* 剧情点装饰星星 */
    .plot-point-item-stars {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 4px;
      opacity: 0.3;
    }

    .plot-point-item-star {
      width: 4px;
      height: 4px;
      background: var(--text-primary);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: plot-star-twinkle 3s ease-in-out infinite;
    }

    .plot-point-item-star:nth-child(2) {
      animation-delay: 1s;
    }

    .plot-point-item-star:nth-child(3) {
      animation-delay: 2s;
    }

    /* 剧情点头部：日期+地点 */
    .plot-point-item-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .plot-point-item-date,
    .plot-point-item-location {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: var(--bg-tertiary);
      border-radius: 12px;
      font-size: 12px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
    }

    .plot-point-item-location {
      background: var(--bg-secondary);
      border-style: dashed;
    }

    .plot-point-item-date svg,
    .plot-point-item-location svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* 剧情点内容 */
    .plot-point-item-content {
      position: relative;
      padding: 16px;
      background: var(--bg-secondary);
      border-radius: 12px;
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-primary);
      font-family: 'Noto Sans JP', sans-serif;
      white-space: pre-line;
      border-left: 3px solid var(--text-tertiary);
      border-image: repeating-linear-gradient(
        0deg,
        var(--text-tertiary) 0px,
        var(--text-tertiary) 4px,
        transparent 4px,
        transparent 8px
      ) 1;
      /* 长文本处理 */
      word-wrap: break-word;
      word-break: break-word;
      overflow-wrap: break-word;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      max-height: calc(1.6em * 4 + 32px);
    }

    .plot-point-item-content::before {
      content: '"';
      position: absolute;
      top: 8px;
      left: 8px;
      font-size: 32px;
      font-family: 'Caveat', cursive;
      color: var(--text-tertiary);
      opacity: 0.5;
      line-height: 1;
    }

    /* 剧情点操作按钮 */
    .plot-point-item-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      justify-content: flex-end;
    }

    .plot-point-item-btn {
      padding: 8px 14px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
    }

    .plot-point-item-btn:hover {
      background: var(--text-primary);
      color: var(--bg-primary);
      transform: translateY(-1px);
    }

    .plot-point-item-btn.danger:hover {
      background: #d32f2f;
      border-color: #d32f2f;
      color: #ffffff;
    }

    .plot-point-item-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* 添加剧情点按钮 */
    .add-plot-point-btn-main {
      width: 100%;
      padding: 16px;
      background: var(--bg-secondary);
      border: 2px dashed var(--border-color);
      border-radius: 16px;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: 'Inter', sans-serif;
    }

    .add-plot-point-btn-main:hover {
      background: var(--bg-tertiary);
      border-color: var(--text-tertiary);
      color: var(--text-primary);
      transform: translateY(-2px);
    }

    .add-plot-point-btn-main svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      transition: transform 0.3s ease;
    }

    .add-plot-point-btn-main:hover svg {
      animation: plot-btn-pulse 1.5s ease-in-out infinite;
    }

    @keyframes plot-btn-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    /* ========== 剧情点模态框 ========== */
    .plot-point-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .plot-point-modal.active {
      display: flex;
      opacity: 1;
    }

    .plot-point-modal-content {
      background: var(--bg-primary);
      border-radius: 20px;
      width: 100%;
      max-width: 420px;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-xl);
      clip-path: polygon(
        0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px)
      );
      border: 2px solid var(--border-color);
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }

    .plot-point-modal.active .plot-point-modal-content {
      transform: scale(1);
    }

    .plot-point-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }

    .plot-point-modal-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .plot-point-modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .plot-point-modal-close:hover {
      background: var(--text-primary);
      transform: rotate(90deg);
    }

    .plot-point-modal-close svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 2;
    }

    .plot-point-modal-close:hover svg {
      stroke: var(--bg-primary);
    }

    .plot-point-modal-body {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }

    .plot-point-form-group {
      margin-bottom: 20px;
    }

    .plot-point-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 10px;
    }

    .plot-point-label svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 2;
    }

    .plot-point-input,
    .plot-point-textarea {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 10px;
      font-size: 13px;
      color: var(--text-primary);
      font-family: inherit;
      transition: all 0.2s ease;
      outline: none;
    }

    .plot-point-input:focus,
    .plot-point-textarea:focus {
      border-color: var(--accent-color);
      background: var(--bg-primary);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    [data-theme='dark'] .plot-point-input:focus,
    [data-theme='dark'] .plot-point-textarea:focus {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
    }

    /* 日期选择器日历图标颜色修复（暗色模式） */
    [data-theme='dark'] .plot-point-input[type="date"] {
      color-scheme: dark;
    }

    [data-theme='dark'] .plot-point-input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
      opacity: 1;
      cursor: pointer;
    }

    /* 亮色模式保持原样 */
    .plot-point-input[type="date"]::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.7;
    }

    .plot-point-input[type="date"]::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
    }

    .plot-point-textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.6;
      font-family: inherit;
    }

    .plot-point-char-count {
      text-align: right;
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 6px;
      font-family: 'JetBrains Mono', monospace;
    }

    .plot-point-char-count span {
      color: var(--text-secondary);
      font-weight: 600;
    }

    .plot-point-modal-footer {
      display: flex;
      gap: 10px;
      padding: 16px 24px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }

    .plot-point-modal-btn {
      flex: 1;
      padding: 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1.5px solid var(--border-color);
      font-family: 'Inter', sans-serif;
    }

    .plot-point-modal-btn.secondary {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
    }

    .plot-point-modal-btn.secondary:hover {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
    }

    .plot-point-modal-btn.primary {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .plot-point-modal-btn.primary:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    [data-theme='dark'] .plot-point-modal-btn.primary {
      background: var(--bg-primary);
      color: var(--text-primary);
      border-color: var(--text-primary);
    }

    /* ==================== 温度设置样式开始 ==================== */

    /* 星星装饰 */
    .temp-header-stars {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .temp-mini-star {
      width: 4px;
      height: 4px;
      background: #000;
      clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
      );
      animation: temp-star-twinkle 3s ease-in-out infinite;
    }

    [data-theme='dark'] .temp-mini-star {
      background: #fff;
    }

    .temp-mini-star:nth-child(1) {
      animation-delay: 0s;
    }

    .temp-mini-star:nth-child(2) {
      animation-delay: 0.5s;
    }

    .temp-mini-star:nth-child(3) {
      animation-delay: 1s;
    }

    @keyframes temp-star-twinkle {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.3; transform: scale(0.8); }
    }

    /* 温度卡片 */
    .temp-card {
      background: #fafafa;
      border: 1px solid #e0e0e0;
      padding: 24px 20px;
      position: relative;
      clip-path: polygon(
        0 12px,
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px)
      );
      transition: all 0.3s ease;
    }

    [data-theme='dark'] .temp-card {
      background: #0f0f0f;
      border-color: #2a2a2a;
    }

    /* 温度显示 */
    .temp-display {
      text-align: center;
      margin-bottom: 24px;
    }

    .temp-label {
      font-size: 11px;
      font-weight: 500;
      color: #666;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 8px;
      font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    }

    [data-theme='dark'] .temp-label {
      color: #888;
    }

    .temp-value {
      font-size: 48px;
      font-weight: 700;
      color: #000;
      font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
      letter-spacing: -2px;
      line-height: 1;
    }

    [data-theme='dark'] .temp-value {
      color: #fff;
    }

    .temp-description {
      font-size: 12px;
      color: #888;
      margin-top: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      letter-spacing: 0.3px;
    }

    [data-theme='dark'] .temp-description {
      color: #666;
    }

    /* 滑动条容器 */
    .temp-slider-container {
      padding: 0 4px;
    }

    /* 滑动条轨道 */
    .temp-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      background: #e0e0e0;
      outline: none;
      border-radius: 0;
      position: relative;
      cursor: pointer;
      clip-path: polygon(
        0 2px,
        2px 0,
        calc(100% - 2px) 0,
        100% 2px,
        100% calc(100% - 2px),
        calc(100% - 2px) 100%,
        2px 100%,
        0 calc(100% - 2px)
      );
    }

    [data-theme='dark'] .temp-slider {
      background: #1a1a1a;
    }

    /* 滑块 - WebKit */
    .temp-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      background: #000;
      cursor: pointer;
      clip-path: polygon(
        0 6px,
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px)
      );
      transition: all 0.2s ease;
    }

    [data-theme='dark'] .temp-slider::-webkit-slider-thumb {
      background: #fff;
    }

    .temp-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }

    .temp-slider::-webkit-slider-thumb:active {
      transform: scale(1.05);
    }

    /* 滑块 - Firefox */
    .temp-slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      background: #000;
      cursor: pointer;
      border: none;
      clip-path: polygon(
        0 6px,
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px)
      );
      transition: all 0.2s ease;
    }

    [data-theme='dark'] .temp-slider::-moz-range-thumb {
      background: #fff;
    }

    .temp-slider::-moz-range-thumb:hover {
      transform: scale(1.15);
    }

    /* 范围标签 */
    .temp-range-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      padding: 0 4px;
    }

    .temp-range-label {
      font-size: 10px;
      color: #999;
      font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    [data-theme='dark'] .temp-range-label {
      color: #555;
    }

    .temp-range-label::before {
      content: '';
      width: 2px;
      height: 2px;
      background: currentColor;
      display: block;
    }

    /* 预设按钮 */
    .temp-presets {
      display: flex;
      gap: 8px;
      margin-top: 20px;
      flex-wrap: wrap;
    }

    .temp-preset-btn {
      flex: 1;
      min-width: 0;
      background: #fff;
      border: 1px solid #e0e0e0;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
      letter-spacing: 0.3px;
      transition: all 0.2s ease;
      clip-path: polygon(
        0 4px,
        4px 0,
        calc(100% - 4px) 0,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        0 calc(100% - 4px)
      );
    }

    [data-theme='dark'] .temp-preset-btn {
      background: #0f0f0f;
      border-color: #2a2a2a;
      color: #888;
    }

    .temp-preset-btn:hover {
      background: #000;
      color: #fff;
      border-color: #000;
      transform: translateY(-1px);
    }

    [data-theme='dark'] .temp-preset-btn:hover {
      background: #fff;
      color: #000;
      border-color: #fff;
    }

    .temp-preset-btn:active {
      transform: translateY(0);
    }

    .temp-preset-btn.active {
      background: #000;
      color: #fff;
      border-color: #000;
    }

    [data-theme='dark'] .temp-preset-btn.active {
      background: #fff;
      color: #000;
      border-color: #fff;
    }

    /* 说明信息 */
    .temp-info {
      margin-top: 20px;
      padding: 16px;
      background: #f5f5f5;
      border-left: 3px solid #000;
      font-size: 12px;
      color: #666;
      line-height: 1.6;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    [data-theme='dark'] .temp-info {
      background: #0a0a0a;
      border-left-color: #fff;
      color: #888;
    }

    .temp-info-title {
      font-weight: 600;
      color: #000;
      margin-bottom: 6px;
      font-size: 11px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    }

    [data-theme='dark'] .temp-info-title {
      color: #fff;
    }

    /* ==================== 聊天主题样式开始 ==================== */

    /* 主题卡片 - 异形设计 */
    .chat-theme-card {
      position: relative;
      clip-path: polygon(
        0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
      );
      border: none !important;
      overflow: visible;
    }

    .chat-theme-card::before {
      background: linear-gradient(135deg, transparent 30%, var(--accent-color));
      opacity: 0.03;
    }

    .chat-theme-card::after {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      background: linear-gradient(135deg, var(--border-color), transparent, var(--accent-color));
      clip-path: polygon(
        0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
      );
      z-index: -1;
      opacity: 0.3;
    }

    /* 星星图标动画 */
    .theme-star-icon {
      animation: theme-star-pulse 2s ease-in-out infinite;
      color: var(--accent-color);
      opacity: 0.6;
    }

    @keyframes theme-star-pulse {
      0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
      }
      50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
      }
    }

    /* 预览容器 */
    .theme-preview-container {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px dashed var(--border-color);
    }

    .theme-preview-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
      text-align: center;
      font-family: 'Inter', sans-serif;
    }

    .theme-preview-bubbles {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: var(--bg-primary);
      border-radius: 10px;
      padding: 12px;
      border: 1px solid var(--border-color);
    }

    .theme-preview-message {
      display: flex;
    }

    .theme-preview-message.character {
      justify-content: flex-start;
    }

    .theme-preview-message.user {
      justify-content: flex-end;
    }

    .theme-preview-bubble {
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 13px;
      line-height: 1.5;
      max-width: 75%;
      border: 1px solid #e0e0e0;
      transition: all 0.3s ease;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .theme-preview-message.character .theme-preview-bubble {
      background: #fafafa;
      color: #000000;
      border-top-left-radius: 4px;
    }

    .theme-preview-message.user .theme-preview-bubble {
      background: #ffffff;
      color: #000000;
      border-top-right-radius: 4px;
    }

    [data-theme='dark'] .theme-preview-bubbles {
      background: rgba(255,255,255,0.02);
    }

    [data-theme='dark'] .theme-preview-message.character .theme-preview-bubble {
      background: #2a2a2a;
      color: #e0e0e0;
    }

    [data-theme='dark'] .theme-preview-message.user .theme-preview-bubble {
      background: #3a3a3a;
      color: #ffffff;
    }

    /* 预览框iMessage样式 */
    .theme-preview-bubbles.imessage-style .theme-preview-bubble {
      border-radius: 18px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      border: none;
      position: relative;
      --preview-character-tail-color: #E5E5EA;
      --preview-user-tail-color: #0051D5;
    }

    .theme-preview-bubbles.imessage-style .theme-preview-message.character .theme-preview-bubble {
      border-top-left-radius: 2px;
    }

    .theme-preview-bubbles.imessage-style .theme-preview-message.character .theme-preview-bubble::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 0;
      width: 20px;
      height: 20px;
      background: var(--preview-character-tail-color);
      border-radius: 0 0 16px 0;
      clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .theme-preview-bubbles.imessage-style .theme-preview-message.user .theme-preview-bubble {
      border-top-right-radius: 2px;
    }

    .theme-preview-bubbles.imessage-style .theme-preview-message.user .theme-preview-bubble::before {
      content: '';
      position: absolute;
      right: -8px;
      top: 0;
      width: 20px;
      height: 20px;
      background: var(--preview-user-tail-color);
      border-radius: 0 0 0 16px;
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    [data-theme='dark'] .theme-preview-bubbles.imessage-style .theme-preview-message.character .theme-preview-bubble {
      --preview-character-tail-color: #3a3a3c;
    }

    /* 💜 Discord样式预览气泡 */
    .theme-preview-bubbles.discord-style .theme-preview-bubble {
      border-radius: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      border: none;
    }

    .theme-preview-bubbles.discord-style .theme-preview-message.character .theme-preview-bubble {
      border-radius: 20px;
    }

    .theme-preview-bubbles.discord-style .theme-preview-message.user .theme-preview-bubble {
      border-radius: 20px;
    }

    /* 🎀 Cute Chat v1样式预览气泡 */
    .theme-preview-bubbles.cute-v1-style .theme-preview-bubble {
      border-radius: 16px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      border: none;
      position: relative;
    }

    .theme-preview-bubbles.cute-v1-style .theme-preview-message.character .theme-preview-bubble {
      border-top-left-radius: 4px;
    }

    .theme-preview-bubbles.cute-v1-style .theme-preview-message.character .theme-preview-bubble::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 0;
      width: 12px;
      height: 12px;
      background: var(--preview-character-bg);
      clip-path: polygon(100% 0, 0 0, 100% 100%);
    }

    .theme-preview-bubbles.cute-v1-style .theme-preview-message.user .theme-preview-bubble {
      border-top-right-radius: 4px;
    }

    .theme-preview-bubbles.cute-v1-style .theme-preview-message.user .theme-preview-bubble::before {
      content: '';
      position: absolute;
      right: -6px;
      top: 0;
      width: 12px;
      height: 12px;
      background: var(--preview-user-bg);
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    /* 🎀 Cute Chat v2样式预览气泡（上方三角） */
    .theme-preview-bubbles.cute-v2-style .theme-preview-bubble {
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      border: none;
      position: relative;
    }

    .theme-preview-bubbles.cute-v2-style .theme-preview-message.character .theme-preview-bubble::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 12px;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 8px solid var(--preview-character-bg);
    }

    .theme-preview-bubbles.cute-v2-style .theme-preview-message.user .theme-preview-bubble::before {
      content: '';
      position: absolute;
      top: -6px;
      right: 12px;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 8px solid var(--preview-user-bg);
    }

    /* 控制组 */
    .theme-control-group {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px dashed var(--border-color);
      position: relative;
    }

    .theme-control-group:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    /* 样式选择器 - 横向滑动 */
    .theme-style-selector {
      display: flex;
      gap: 12px;
      margin-top: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--border-color) transparent;
    }

    .theme-style-selector::-webkit-scrollbar {
      height: 4px;
    }

    .theme-style-selector::-webkit-scrollbar-track {
      background: transparent;
    }

    .theme-style-selector::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 4px;
    }

    .theme-style-option {
      min-width: 120px;
      flex-shrink: 0;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .theme-style-option:hover {
      border-color: var(--accent-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .theme-style-option.active {
      border-color: var(--accent-color);
      background: rgba(0,122,255,0.05);
    }

    .theme-style-radio {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .theme-style-option.active .theme-style-radio {
      border-color: var(--accent-color);
    }

    .theme-style-radio-dot {
      width: 10px;
      height: 10px;
      background: var(--accent-color);
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.3s ease;
    }

    .theme-style-option.active .theme-style-radio-dot {
      transform: scale(1);
    }

    .theme-style-info {
      flex: 1;
    }

    .theme-style-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .theme-style-desc {
      font-size: 10px;
      color: var(--text-tertiary);
      font-family: 'Inter', sans-serif;
    }

    .theme-style-preview {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
    }

    .style-preview-bubble {
      width: 60px;
      height: 24px;
      position: relative;
    }

    .style-preview-bubble.default {
      background: var(--accent-color);
      border-radius: 12px;
      border-top-right-radius: 3px;
    }

    .style-preview-bubble.imessage {
      background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
      border-radius: 12px;
      border-top-right-radius: 2px;
    }

    .style-preview-bubble.imessage::before {
      content: '';
      position: absolute;
      right: -5px;
      top: 0;
      width: 12px;
      height: 12px;
      background: #0051D5;
      border-radius: 0 0 0 10px;
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    .style-preview-bubble.discord {
      background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
      border-radius: 14px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

    .style-preview-bubble.cute-v1 {
      background: #E9A8D0;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
      position: relative;
    }

    .style-preview-bubble.cute-v1::before {
      content: '';
      position: absolute;
      right: -4px;
      top: 0;
      width: 8px;
      height: 8px;
      background: #E9A8D0;
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    .style-preview-bubble.cute-v2 {
      background: #E9A8D0;
      border-radius: 10px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
      position: relative;
    }

    .style-preview-bubble.cute-v2::before {
      content: '';
      position: absolute;
      top: -5px;
      right: 15px;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 6px solid #E9A8D0;
    }

    .style-preview-bubble.tooltip {
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      position: relative;
      border: none;
    }

    .style-preview-bubble.tooltip::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 12px;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 7px solid #ffffff;
    }

    [data-theme='dark'] .style-preview-bubble.tooltip {
      background: #2a2a2a;
    }

    [data-theme='dark'] .style-preview-bubble.tooltip::after {
      border-top-color: #2a2a2a;
    }

    [data-theme='dark'] .theme-style-option {
      background: rgba(255,255,255,0.03);
    }

    [data-theme='dark'] .theme-style-option.active {
      background: rgba(0,122,255,0.15);
    }

    /* 标签样式 */
    .theme-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .theme-label-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.02em;
    }

    .theme-label-value {
      font-size: 14px;
      font-weight: 700;
      color: var(--accent-color);
      font-family: 'Courier New', monospace;
      background: var(--bg-primary);
      padding: 2px 10px;
      border-radius: 8px;
      min-width: 40px;
      text-align: center;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }

    /* 滑块容器 */
    .theme-slider-container {
      position: relative;
      padding: 8px 0 28px 0;
    }

    /* 滑块样式 */
    .theme-slider {
      width: 100%;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(to right, var(--border-color), var(--accent-color), var(--border-color));
      border-radius: 10px;
      outline: none;
      cursor: pointer;
      position: relative;
      z-index: 2;
      transition: all 0.3s ease;
    }

    .theme-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background: var(--accent-color);
      border: 3px solid var(--bg-tertiary);
      border-radius: 50%;
      cursor: grab;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      transition: all 0.2s ease;
      position: relative;
    }

    .theme-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .theme-slider::-webkit-slider-thumb:active {
      cursor: grabbing;
      transform: scale(1.1);
    }

    .theme-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: var(--accent-color);
      border: 3px solid var(--bg-tertiary);
      border-radius: 50%;
      cursor: grab;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      transition: all 0.2s ease;
    }

    .theme-slider::-moz-range-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .theme-slider::-moz-range-thumb:active {
      cursor: grabbing;
      transform: scale(1.1);
    }

    /* 滑块标签 */
    .theme-slider-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      padding: 0 2px;
    }

    .theme-slider-labels span {
      font-size: 10px;
      color: var(--text-tertiary);
      font-family: 'Noto Sans JP', sans-serif;
      letter-spacing: 0.05em;
      opacity: 0.7;
      transition: all 0.2s ease;
    }

    .theme-slider-labels span:hover {
      opacity: 1;
      color: var(--accent-color);
    }

    /* 分组标题 */
    .theme-group-header {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 10px;
      font-family: 'Noto Sans JP', sans-serif;
      letter-spacing: 0.03em;
      position: relative;
      padding-left: 4px;
    }

    .theme-group-header::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 12px;
      background: var(--accent-color);
      border-radius: 2px;
    }

    .theme-group-header svg {
      opacity: 0.6;
    }

    /* 颜色选择器网格 */
    .theme-color-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .theme-color-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .theme-color-label {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-tertiary);
      text-align: center;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* 颜色输入容器 */
    .theme-color-input-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid var(--border-color);
      transition: all 0.3s ease;
      cursor: pointer;
      background: var(--bg-primary);
    }

    .theme-color-input-wrapper:hover {
      border-color: var(--accent-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* 颜色输入 */
    .theme-color-input {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }

    /* 颜色预览 */
    .theme-color-preview {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background: var(--input-value);
      transition: all 0.3s ease;
    }

    .theme-color-input-wrapper:hover .theme-color-preview {
      transform: scale(0.9);
      border-radius: 8px;
    }

    /* 重置按钮 */
    .theme-reset-btn {
      width: 100%;
      padding: 12px;
      background: var(--bg-primary);
      border: 1px dashed var(--border-color);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      font-family: 'Noto Sans JP', sans-serif;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .theme-reset-btn:hover {
      background: var(--hover-bg);
      border-color: var(--accent-color);
      border-style: solid;
      color: var(--accent-color);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .theme-reset-btn:active {
      transform: translateY(0);
      box-shadow: none;
    }

    /* 暗色模式适配 */
    [data-theme='dark'] .theme-label-value {
      background: rgba(255,255,255,0.05);
      box-shadow: inset 0 1px 3px rgba(255,255,255,0.1);
    }

    [data-theme='dark'] .theme-slider {
      background: linear-gradient(to right, #333, var(--accent-color), #333);
    }

    [data-theme='dark'] .theme-color-input-wrapper {
      background: rgba(255,255,255,0.03);
    }

    [data-theme='dark'] .theme-reset-btn {
      background: rgba(255,255,255,0.03);
    }

    [data-theme='dark'] .theme-reset-btn:hover {
      background: rgba(255,255,255,0.08);
    }

    /* 移动端优化 */
    @media (max-width: 480px) {
      .theme-color-grid {
        gap: 10px;
      }

      .theme-slider::-webkit-slider-thumb,
      .theme-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
      }
    }

    /* ==================== 聊天主题样式结束 ==================== */

    /* 聊天框卡片样式 */
    .chat-session-card {
      padding: 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chat-session-card:hover {
      background: var(--hover-bg);
      border-color: var(--accent-color);
    }

    .chat-session-card.active {
      background: var(--accent-color);
      border-color: var(--accent-color);
    }

    .chat-session-card.active * {
      color: white !important;
    }

    .chat-session-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .chat-session-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

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

    .chat-session-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chat-session-meta {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    .chat-session-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .chat-session-action-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chat-session-action-btn:hover {
      background: var(--hover-bg);
      transform: scale(1.05);
    }

    .chat-session-action-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      fill: none;
      stroke-width: 2;
    }

    .chat-session-action-btn.delete:hover {
      background: #ef4444;
      border-color: #ef4444;
    }

    .chat-session-action-btn.delete:hover svg {
      stroke: white;
    }

    /* ==================== Message Selection Mode ==================== */
    .message-selection-mode .chat-message-group {
      padding-left: 40px;
      position: relative;
    }

    .message-checkbox-wrapper {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .message-selection-mode .message-checkbox-wrapper {
      display: block;
      opacity: 1;
    }

    .message-checkbox {
      width: 18px;
      height: 18px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: var(--bg-primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .message-checkbox:hover {
      border-color: var(--text-primary);
      background: var(--bg-secondary);
      transform: translateY(-1px);
    }

    .message-checkbox.checked {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .message-checkbox.checked svg {
      display: block;
    }

    .message-checkbox svg {
      width: 11px;
      height: 11px;
      stroke: var(--bg-primary);
      stroke-width: 2.4;
      fill: none;
      display: none;
    }

    /* Message selection toolbar */
    .message-selection-toolbar {
      position: fixed;
      bottom: 14px; /* 从底部抬起一点 */
      left: 50%; /* 水平居中 */
      transform: translateX(-50%) translateY(100%); /* 居中 + 隐藏动画 */
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 10px 18px;
      display: none;
      align-items: center;
      gap: 16px; /* 信息和按钮之间的间距 */
      z-index: 9000000;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      max-width: 92%; /* 限制最大宽度 */
      width: auto; /* 自适应内容宽度 */
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    }

    .message-selection-toolbar.active {
      display: flex;
      transform: translateX(-50%) translateY(0); /* 显示时只保留居中，不偏移Y */
      opacity: 1;
    }

    .selection-toolbar-info {
      font-size: 11px;
      color: var(--text-tertiary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      white-space: nowrap; /* 防止换行 */
    }

    .selection-toolbar-actions {
      display: flex;
      gap: 8px; /* 按钮之间更紧凑 */
    }

    .selection-toolbar-btn {
      padding: 6px 12px; /* 更紧凑的内边距 */
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
      border: 1px solid var(--border-color);
      background: transparent;
      color: var(--text-tertiary);
      white-space: nowrap; /* 防止换行 */
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .selection-toolbar-btn:hover {
      color: var(--text-primary);
      border-color: var(--text-primary);
      background: var(--bg-secondary);
      transform: translateY(-1px);
    }

    .selection-toolbar-btn:active {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
      transform: translateY(0);
    }

    .selection-toolbar-btn.danger {
      color: var(--text-primary);
      border-color: var(--text-primary);
    }

    .selection-toolbar-btn.danger:hover {
      background: #dc2626;
    }

    .selection-toolbar-btn.primary {
      background: var(--accent-color);
      border-color: var(--accent-color);
      color: white;
    }

    .message-selection-mode .chat-input-area {
      display: none;
    }

    /* 选择模式下，给消息区域底部留出空间，防止最底下的消息被工具栏遮挡 */
    .message-selection-mode .chat-messages-area {
      padding-bottom: 80px; /* 为工具栏留出足够的空间 */
    }

    /* ========== 文字图片卡片样式（缩小版本） ========== */
    /* 文字图片容器 - 中等大小 */
    .text-image-container {
      position: relative;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      height: 220px;
      width: 100%;
      max-width: 280px;
      margin: 8px 0;
    }

    [data-theme='dark'] .text-image-container {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
    }

    /* 内容区域 - 可滚动 */
    .text-image-content {
      height: 100%;
      padding: 16px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      z-index: 1;
    }

    /* 自定义滚动条 */
    .text-image-content::-webkit-scrollbar {
      width: 6px;
    }

    .text-image-content::-webkit-scrollbar-track {
      background: var(--bg-secondary);
      border-radius: 3px;
    }

    .text-image-content::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 3px;
    }

    .text-image-content::-webkit-scrollbar-thumb:hover {
      background: var(--text-tertiary);
    }

    /* 模糊效果 - v3版本核心特性 */
    .text-image-container.blurred .text-image-content {
      filter: blur(30px);
      -webkit-filter: blur(30px);
    }

    .text-image-container.revealed .text-image-content {
      filter: none;
      -webkit-filter: none;
      transition: filter 0.6s ease;
    }

    /* 文字样式 - v3版本 */
    .text-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 12px;
      letter-spacing: -0.01em;
      line-height: 1.4;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .text-body {
      font-size: 13px;
      line-height: 1.7;
      color: var(--text-secondary);
      font-family: 'Noto Serif JP', serif;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .text-meta {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-color);
    }

    /* ========== 敏感内容遮罩 - 缩小版本 ========== */
    .sensitive-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.8) 100%
      );
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    [data-theme='dark'] .sensitive-overlay {
      background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.95) 100%
      );
    }

    .sensitive-overlay.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* 遮罩图标 */
    .overlay-icon {
      width: 44px;
      height: 44px;
      margin-bottom: 14px;
      opacity: 0.9;
    }

    .overlay-icon svg {
      width: 100%;
      height: 100%;
      stroke: #ffffff;
      fill: none;
      stroke-width: 1.5;
    }

    /* 遮罩标题 */
    .overlay-title {
      font-size: 17px;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
      text-align: center;
    }

    /* 遮罩描述 */
    .overlay-description {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 18px;
      text-align: center;
      line-height: 1.5;
      max-width: 200px;
    }

    /* 查看按钮 */
    .reveal-button {
      padding: 8px 22px;
      background: rgba(255, 255, 255, 0.15);
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      border-radius: 8px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      letter-spacing: -0.01em;
    }

    .reveal-button:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    .reveal-button:active {
      transform: translateY(0);
    }

    /* 关闭按钮 */
    .text-image-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 100;
    }

    .text-image-close:hover {
      background: var(--bg-tertiary);
      transform: scale(1.05);
    }

    .text-image-close svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
      stroke-width: 2;
    }

    /* ==========================================
     * 外观设置页面样式 - Appearance Screen Styles
     * ========================================== */

    /* Profile Card - 主题统计卡片 */
    .appearance-profile-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 24px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      animation: fadeIn 0.6s ease 0.1s both;
    }

    .appearance-profile-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(135deg, var(--accent-color) 0%, transparent 100%);
      opacity: 0.03;
    }

    .appearance-profile-header {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
    }

    .appearance-profile-avatar {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 600;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .appearance-profile-avatar svg {
      width: 32px;
      height: 32px;
      stroke: var(--text-primary);
    }

    .appearance-profile-avatar::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      animation: shine 3s infinite;
    }

    @keyframes shine {
      0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
      }
      100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
      }
    }

    .appearance-profile-info {
      flex: 1;
    }

    .appearance-profile-name {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .appearance-profile-bio {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
      font-family: 'JetBrains Mono', monospace;
    }

    .appearance-feature-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .appearance-feature-badge::before {
      content: '';
      width: 4px;
      height: 4px;
      background: var(--accent-color);
      border-radius: 50%;
    }

    .appearance-profile-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 16px;
    }

    .appearance-stat-item {
      text-align: center;
      padding: 12px;
      background: var(--bg-primary);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .appearance-stat-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .appearance-stat-value {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 2px;
      color: var(--text-primary);
    }

    .appearance-stat-label {
      font-size: 11px;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Settings Grid - 设置网格 */
    .appearance-settings-grid {
      display: grid;
      gap: 12px;
      animation: fadeIn 0.6s ease 0.2s both;
    }

    .appearance-setting-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 20px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .appearance-setting-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, transparent 0%, var(--accent-color) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .appearance-setting-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .appearance-setting-card:hover::before {
      opacity: 0.02;
    }

    .appearance-setting-card:active {
      transform: translateY(-2px);
    }

    .appearance-setting-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
    }

    .appearance-setting-title {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-primary);
    }

    .appearance-setting-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .appearance-setting-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-primary);
    }

    .appearance-setting-desc {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
      position: relative;
      z-index: 1;
    }

    .appearance-code-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-tertiary);
      background: var(--bg-primary);
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
    }

    /* Section Divider - 分隔线 */
    .appearance-section-divider {
      height: 1px;
      background: var(--border-color);
      margin: 24px 0;
      position: relative;
    }

    .appearance-section-divider::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 4px;
      height: 4px;
      background: var(--accent-color);
      border-radius: 50%;
    }

    /* Action Buttons - 操作按钮 */
    .appearance-action-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 20px;
      animation: fadeIn 0.6s ease 0.3s both;
    }

    .appearance-action-btn {
      padding: 16px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      text-align: center;
      position: relative;
      overflow: hidden;
      color: var(--text-primary);
    }

    .appearance-action-btn.primary {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .appearance-action-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      transform: translate(-50%, -50%);
      transition: width 0.5s ease, height 0.5s ease;
    }

    .appearance-action-btn:hover::after {
      width: 300px;
      height: 300px;
    }

    .appearance-action-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .appearance-action-btn:active {
      transform: translateY(0);
    }

    /* Animations - 动画 */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Mobile Responsive - 移动端响应式 */
    @media (max-width: 430px) {
      .appearance-profile-card {
        padding: 20px;
      }

      .appearance-profile-avatar {
        width: 56px;
        height: 56px;
      }

      .appearance-profile-avatar svg {
        width: 28px;
        height: 28px;
      }

      .appearance-profile-name {
        font-size: 18px;
      }

      .appearance-setting-card {
        padding: 16px;
      }

      .appearance-action-btn {
        padding: 14px;
      }
    }

    /* ==========================================
     * 壁纸管理Modal样式 - Wallpaper Management V2
     * 精致INS风格 + 移动端优先 + 不对称网格
     * ========================================== */

    .wallpaper-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px 0;
      animation: fadeInModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
    }

    .wallpaper-modal.active {
      display: flex;
    }

    .wallpaper-container {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      /* 异形圆角 - 更精致 */
      border-radius: 24px 4px 24px 4px;
      width: min(420px, 100vw);
      max-height: 92vh;
      position: relative;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: slideUpBounceModal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      margin: auto;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .wallpaper-container::-webkit-scrollbar {
      display: none;
    }

    @media (min-width: 768px) {
      .wallpaper-modal {
        padding: 40px 20px;
        align-items: center;
      }

      .wallpaper-container {
        max-height: 85vh;
      }
    }

    @keyframes fadeInModal {
      from {
        opacity: 0;
        backdrop-filter: blur(0px);
      }
      to {
        opacity: 1;
        backdrop-filter: blur(20px);
      }
    }

    @keyframes slideUpBounceModal {
      0% {
        opacity: 0;
        transform: translateY(40px) scale(0.92);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* 装饰性星星元素 - 更精致 */
    .wallpaper-deco-pixels {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }

    .deco-pixel-dot {
      position: absolute;
      width: 2px;
      height: 2px;
      background: var(--text-tertiary);
      border-radius: 50%;
      opacity: 0.2;
      animation: floatPixel 4s ease-in-out infinite;
    }

    .deco-star-small {
      position: absolute;
      width: 3px;
      height: 3px;
      background: var(--text-tertiary);
      border-radius: 50%;
      opacity: 0.3;
      animation: twinkle 3s ease-in-out infinite;
      box-shadow: 0 0 4px var(--text-tertiary);
    }

    @keyframes floatPixel {
      0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.2;
      }
      50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 0.4;
      }
    }

    @keyframes twinkle {
      0%, 100% {
        opacity: 0.2;
        transform: scale(1);
      }
      50% {
        opacity: 0.6;
        transform: scale(1.5);
      }
    }

    /* Header - 精简设计 */
    .wallpaper-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      background: var(--bg-primary);
      backdrop-filter: blur(10px);
      z-index: 10;
    }

    .wallpaper-title-area {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .wallpaper-icon {
      width: 24px;
      height: 24px;
      stroke: var(--text-primary);
      flex-shrink: 0;
      opacity: 0.8;
    }

    .wallpaper-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.01em;
      font-family: 'Inter', sans-serif;
    }

    .wallpaper-subtitle {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-tertiary);
      margin-top: 1px;
      letter-spacing: 0.02em;
    }

    .wallpaper-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }

    .wallpaper-close:hover {
      background: var(--text-primary);
      border-color: var(--text-primary);
      transform: scale(1.05);
    }

    .wallpaper-close:hover svg {
      stroke: var(--bg-primary);
    }

    .wallpaper-close:active {
      transform: scale(0.95);
    }

    .wallpaper-close svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
      stroke-width: 2.5;
      fill: none;
      transition: stroke 0.25s ease;
    }

    /* 当前壁纸预览区 - 紧凑精致设计 */
    .wallpaper-preview-section {
      padding: 16px;
      position: relative;
      z-index: 2;
    }

    .wallpaper-dual-preview-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .wallpaper-preview-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 16px 4px 16px 4px;
      padding: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .wallpaper-preview-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-color: var(--text-tertiary);
    }

    .preview-label {
      font-size: 9px;
      font-weight: 600;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-family: 'Inter', sans-serif;
    }

    .preview-label svg {
      stroke: var(--text-secondary);
      margin-right: 4px;
    }

    .wallpaper-preview-frame {
      aspect-ratio: 9 / 19.5;
      background: linear-gradient(135deg, #141414 0%, #2a2a2a 100%);
      border: 1.5px solid var(--border-color);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      transition: all 0.3s ease;
    }

    .wallpaper-preview-card:hover .wallpaper-preview-frame {
      border-color: var(--text-secondary);
    }

    .preview-screen {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
      opacity: 0.9;
    }

    .preview-time {
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      letter-spacing: -0.02em;
    }

    .preview-date {
      font-size: 9px;
      color: #ffffff;
      opacity: 0.85;
      margin-top: 2px;
      font-family: 'Inter', sans-serif;
    }

    /* 开机动画预览 - 精致优化 */
    .boot-animation-preview {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    /* 预览专用样式 - 白色固定颜色 */
    .boot-animation-preview .boot-dot {
      background: #ffffff;
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    }

    .boot-animation-preview .boot-text {
      color: #ffffff;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    }

    /* 分类筛选区域 */
    .wallpaper-category-section {
      padding: 0 16px 16px;
      position: relative;
      z-index: 2;
    }

    .category-filter-scroll {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }

    .category-filter-scroll::-webkit-scrollbar {
      display: none;
    }

    .category-filter-btn {
      padding: 8px 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      flex-shrink: 0;
      font-family: 'Inter', sans-serif;
      letter-spacing: -0.01em;
    }

    .category-filter-btn:hover {
      background: var(--bg-tertiary);
      border-color: var(--text-tertiary);
      transform: scale(1.05);
    }

    .category-filter-btn.active {
      background: var(--text-primary);
      border-color: var(--text-primary);
      color: var(--bg-primary);
      font-weight: 600;
    }

    .category-filter-btn:active {
      transform: scale(0.95);
    }

    /* 预设壁纸网格 - 不对称布局 */
    .wallpaper-gallery-section {
      padding: 0 16px 16px;
      position: relative;
      z-index: 2;
    }

    .wallpaper-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-family: 'Inter', sans-serif;
    }

    .wallpaper-section-header svg {
      stroke: var(--text-secondary);
    }

    .wallpaper-gallery-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      animation: fadeInUp 0.4s ease;
    }

    .wallpaper-item {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      aspect-ratio: 1 / 1;
    }

    .wallpaper-item:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-color: var(--text-secondary);
      z-index: 5;
    }

    .wallpaper-item:active {
      transform: translateY(0) scale(1);
    }

    .wallpaper-item-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .wallpaper-item:hover .wallpaper-item-overlay {
      opacity: 1;
    }

    .wallpaper-item-title {
      font-size: 8px;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 1px;
      font-family: 'Inter', sans-serif;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
      line-height: 1.2;
    }

    .wallpaper-item-category {
      font-size: 6px;
      color: #ffffff;
      opacity: 0.75;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    }

    /* 壁纸生成器区域 */
    .wallpaper-generator-section {
      padding: 0 16px 16px;
      position: relative;
      z-index: 2;
      animation: fadeIn 0.3s ease;
    }

    /* 颜色选择网格 - 纯色 */
    .color-palette-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }

    .color-option {
      aspect-ratio: 1 / 1;
      border-radius: 8px;
      border: 2px solid var(--border-color);
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .color-option:hover {
      transform: scale(1.1);
      border-color: var(--text-primary);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 2;
    }

    .color-option:active {
      transform: scale(1.05);
    }

    /* 自定义颜色输入 */
    .generator-custom-input {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .generator-custom-input input[type="color"] {
      width: 50px;
      height: 40px;
      border: 2px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      background: transparent;
      transition: all 0.25s ease;
    }

    .generator-custom-input input[type="color"]:hover {
      border-color: var(--text-secondary);
      transform: scale(1.05);
    }

    /* 生成器预览 */
    .generator-preview {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      border: 2px solid var(--border-color);
      margin-bottom: 12px;
      background-size: cover;
      background-position: center;
      transition: all 0.3s ease;
    }

    /* 生成器控制 */
    .generator-controls {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 12px;
    }

    .control-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .control-group label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-family: 'Inter', sans-serif;
    }

    .control-group label span {
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
    }

    .control-group input[type="color"] {
      width: 100%;
      height: 40px;
      border: 2px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      background: transparent;
      transition: all 0.25s ease;
    }

    .control-group input[type="color"]:hover {
      border-color: var(--text-secondary);
    }

    .control-group input[type="range"] {
      width: 100%;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      background: var(--bg-tertiary);
      border-radius: 3px;
      outline: none;
      transition: all 0.25s ease;
    }

    .control-group input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: var(--text-primary);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .control-group input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .control-group input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: var(--text-primary);
      border-radius: 50%;
      cursor: pointer;
      border: none;
      transition: all 0.25s ease;
    }

    .control-group input[type="range"]::-moz-range-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .control-group select {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1.5px solid var(--border-color);
      border-radius: 8px;
      font-size: 12px;
      font-family: inherit;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .control-group select:hover {
      border-color: var(--text-secondary);
      background: var(--bg-tertiary);
    }

    .control-group select:focus {
      outline: none;
      border-color: var(--text-primary);
    }

    /* 应用按钮 */
    .generator-apply-btn {
      width: 100%;
      padding: 12px;
      background: var(--text-primary);
      color: var(--bg-primary);
      border: none;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .generator-apply-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .generator-apply-btn:active {
      transform: translateY(0);
    }

    /* 上传区域 - 精简设计 */
    .wallpaper-upload-section {
      padding: 0 16px 20px;
      position: relative;
      z-index: 2;
    }

    .wallpaper-upload-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .wallpaper-upload-card {
      background: var(--bg-secondary);
      border: 1.5px dashed var(--border-color);
      border-radius: 12px;
      padding: 20px 12px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .wallpaper-upload-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, transparent 0%, var(--text-primary) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .wallpaper-upload-card:hover {
      border-color: var(--text-primary);
      border-style: solid;
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    .wallpaper-upload-card:hover::before {
      opacity: 0.05;
    }

    .wallpaper-upload-card:active {
      transform: translateY(-1px);
    }

    .upload-card-icon {
      width: 36px;
      height: 36px;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .upload-card-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-primary);
      stroke-width: 2;
    }

    .upload-card-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 3px;
      position: relative;
      z-index: 1;
      font-family: 'Inter', sans-serif;
    }

    .upload-card-desc {
      font-size: 9px;
      color: var(--text-tertiary);
      position: relative;
      z-index: 1;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.02em;
    }

    /* 开机动画选择器 */
    .boot-animation-selector-section {
      padding: 0 16px 20px;
      position: relative;
      z-index: 2;
    }

    .boot-animation-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding: 4px 0;
    }

    .boot-animation-scroll::-webkit-scrollbar {
      display: none;
    }

    .boot-animation-option {
      flex-shrink: 0;
      width: 140px;
      aspect-ratio: 9/12;
      background: var(--bg-secondary);
      border: 2px solid var(--border-color);
      border-radius: 16px 4px 16px 4px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .boot-animation-option:hover {
      border-color: var(--text-primary);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .boot-animation-option.active {
      border-color: var(--text-primary);
      border-width: 2.5px;
      background: var(--bg-tertiary);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .boot-animation-option.active::after {
      content: '';
      position: absolute;
      top: 8px;
      right: 8px;
      width: 16px;
      height: 16px;
      background: var(--text-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .boot-animation-option.active::before {
      content: '✓';
      position: absolute;
      top: 8px;
      right: 8px;
      width: 16px;
      height: 16px;
      color: var(--bg-primary);
      font-size: 10px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .boot-animation-preview-mini {
      flex: 1;
      background: #fafafa;
      border-radius: 12px 2px 12px 2px;
      position: relative;
      overflow: hidden;
      margin-bottom: 8px;
    }

    @media (prefers-color-scheme: dark) {
      .boot-animation-preview-mini {
        background: #0f0f0f;
      }
    }

    .boot-animation-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-primary);
      text-align: center;
      font-family: 'Inter', sans-serif;
    }

    /* 迷你预览 - Default动画 */
    .mini-default {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .mini-default-dots {
      display: flex;
      gap: 4px;
    }

    .mini-default-dot {
      width: 4px;
      height: 4px;
      background: #666;
      border-radius: 50%;
      animation: miniDefaultPulse 1.4s ease-in-out infinite;
    }

    @media (prefers-color-scheme: dark) {
      .mini-default-dot {
        background: #999;
      }
    }

    .mini-default-dot:nth-child(1) {
      animation-delay: 0s;
    }

    .mini-default-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .mini-default-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes miniDefaultPulse {
      0%, 80%, 100% {
        transform: scale(0.5);
        opacity: 0.3;
      }
      40% {
        transform: scale(1.2);
        opacity: 1;
      }
    }

    /* 迷你预览 - Blog动画 */
    .mini-blog {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
      position: relative;
    }

    @media (prefers-color-scheme: dark) {
      .mini-blog {
        background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
      }
    }

    .mini-blog-card {
      width: 80%;
      background: white;
      border-radius: 12px 2px 12px 2px;
      padding: 12px 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      animation: miniBlogIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @media (prefers-color-scheme: dark) {
      .mini-blog-card {
        background: #141414;
      }
    }

    @keyframes miniBlogIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .mini-blog-line {
      height: 2px;
      background: #e5e5e5;
      margin-bottom: 4px;
      border-radius: 1px;
      animation: miniLineGrow 0.4s ease-out both;
    }

    @media (prefers-color-scheme: dark) {
      .mini-blog-line {
        background: #3a3a3a;
      }
    }

    .mini-blog-line:nth-child(1) {
      width: 60%;
      animation-delay: 0.3s;
    }

    .mini-blog-line:nth-child(2) {
      width: 80%;
      animation-delay: 0.5s;
    }

    .mini-blog-line:nth-child(3) {
      width: 50%;
      animation-delay: 0.7s;
    }

    @keyframes miniLineGrow {
      from {
        transform: scaleX(0);
        transform-origin: left;
      }
      to {
        transform: scaleX(1);
      }
    }

    /* 迷你预览 - Ring动画 */
    .mini-ring {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fafafa;
    }

    @media (prefers-color-scheme: dark) {
      .mini-ring {
        background: #0f0f0f;
      }
    }

    .mini-ring-circle {
      position: relative;
      width: 50px;
      height: 50px;
    }

    .mini-ring-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #e5e5e5;
      border-radius: 50%;
    }

    @media (prefers-color-scheme: dark) {
      .mini-ring-bg {
        border-color: #2a2a2a;
      }
    }

    .mini-ring-progress {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #000000;
      border-radius: 50%;
      border-right-color: transparent;
      border-bottom-color: transparent;
      animation: miniRingRotate 1.5s linear infinite;
    }

    @media (prefers-color-scheme: dark) {
      .mini-ring-progress {
        border-color: #e5e5e5;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }
    }

    @keyframes miniRingRotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* 迷你预览 - Pulse动画 */
    .mini-pulse {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
      position: relative;
    }

    @media (prefers-color-scheme: dark) {
      .mini-pulse {
        background: linear-gradient(135deg, #141414 0%, #0f0f0f 100%);
      }
    }

    .mini-pulse-squares {
      position: relative;
      width: 50px;
      height: 50px;
    }

    .mini-pulse-square {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 2px solid #000000;
      border-radius: 8px 2px 8px 2px;
      animation: miniSquarePulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @media (prefers-color-scheme: dark) {
      .mini-pulse-square {
        border-color: #e5e5e5;
      }
    }

    @keyframes miniSquarePulse {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(90deg);
        opacity: 0.6;
      }
    }

    .mini-pulse-square:nth-child(1) {
      width: 30px;
      height: 30px;
      animation-delay: 0s;
    }

    .mini-pulse-square:nth-child(2) {
      width: 22px;
      height: 22px;
      animation-delay: 0.3s;
      border-radius: 6px 2px 6px 2px;
    }

    .mini-pulse-square:nth-child(3) {
      width: 14px;
      height: 14px;
      animation-delay: 0.6s;
      border-radius: 4px 1px 4px 1px;
    }

    /* URL输入区域 */
    .wallpaper-url-input-section {
      padding: 0 24px 20px;
      position: relative;
      z-index: 2;
    }

    .wallpaper-url-input-card {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 16px;
    }

    .wallpaper-url-input {
      width: 100%;
      padding: 12px 16px;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      font-size: 13px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
      outline: none;
      transition: all 0.2s ease;
      margin-bottom: 12px;
    }

    .wallpaper-url-input:focus {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .wallpaper-url-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .wallpaper-url-btn {
      padding: 10px 16px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      outline: none;
    }

    .wallpaper-url-btn.cancel {
      background: var(--bg-primary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }

    .wallpaper-url-btn.cancel:hover {
      background: var(--hover-bg);
    }

    .wallpaper-url-btn.primary {
      background: var(--accent-color);
      color: var(--bg-primary);
      border: 1px solid var(--accent-color);
    }

    .wallpaper-url-btn.primary:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* 应用按钮 */
    .wallpaper-apply-section {
      padding: 0 24px 24px;
      position: relative;
      z-index: 2;
    }

    .wallpaper-apply-btn {
      width: 100%;
      padding: 16px 24px;
      background: var(--accent-color);
      color: var(--bg-primary);
      border: none;
      border-radius: 20px 6px 20px 6px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .wallpaper-apply-btn svg {
      width: 18px;
      height: 18px;
      stroke: var(--bg-primary);
    }

    .wallpaper-apply-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }

    .wallpaper-apply-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .wallpaper-apply-btn:hover::after {
      width: 400px;
      height: 400px;
    }

    .wallpaper-apply-btn:active {
      transform: translateY(0);
    }

    /* 移动端响应式 */
    @media (max-width: 430px) {
      .wallpaper-container {
        border-radius: 24px 8px 24px 8px;
      }

      .wallpaper-header {
        padding: 20px;
      }

      .wallpaper-preview-section,
      .wallpaper-category-switch,
      .wallpaper-upload-section,
      .wallpaper-url-input-section,
      .wallpaper-apply-section {
        padding-left: 20px;
        padding-right: 20px;
      }

      /* 【老王删除】wallpaper-grid responsive样式已删除 */

      .category-switch-btn {
        font-size: 12px;
        padding: 10px 12px;
      }

      .preview-time {
        font-size: 24px;
      }
    }

    /* ==========================================
     * CHAT APP STYLE SWITCHER - 聊天样式切换器
     * ========================================== */

    /* 样式切换弹窗 */
    /* Chat Style Popup - 从头像冒出的小对话框 */
    .chat-style-modal {
      position: fixed;
      bottom: 90px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #chatScreen.chat-dock-style-music .chat-style-modal {
      bottom: 130px;
    }

    #chatScreen.chat-dock-style-default .chat-style-modal {
      bottom: 90px;
    }

    .chat-style-modal.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .chat-style-container {
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 16px 4px 16px 4px;
      padding: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      position: relative;
      max-height: 70vh;
      max-width: 85vw;
      overflow: visible;
    }

    /* 内部滚动容器 */
    .chat-style-inner-scroll {
      max-height: 65vh;
      overflow-y: auto;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin: -12px;
      padding: 12px;
    }

    .chat-style-inner-scroll::-webkit-scrollbar {
      display: none;
    }

    /* 小三角指示器 */
    .chat-style-container::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid var(--border-color);
    }

    .chat-style-container::before {
      content: '';
      position: absolute;
      bottom: -7px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 9px solid var(--bg-primary);
      z-index: 1;
    }

    /* 横向排列样式选择 */
    .style-cards-scroll {
      display: flex;
      gap: 10px;
      align-items: center;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      padding-bottom: 8px;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
    }

    .style-cards-scroll::-webkit-scrollbar {
      display: none;
    }

    /* 样式选项卡片 - 小巧精致 */
    .style-preview-card {
      flex: 0 0 auto;
      width: 110px;
      background: var(--bg-secondary);
      border: 2px solid var(--border-color);
      border-radius: 10px 3px 10px 3px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .style-preview-card:hover {
      border-color: var(--text-tertiary);
      transform: scale(1.05);
    }

    .style-preview-card.active {
      border-color: var(--accent-color);
      border-width: 3px;
    }

    /* 实时样式预览框 - 缩小尺寸 */
    .style-preview-frame {
      width: 100%;
      height: 130px;
      background: var(--bg-primary);
      position: relative;
      overflow: hidden;
      border-radius: 8px 2px 0 0;
    }

    .style-preview-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      pointer-events: none;
      overflow: hidden;
    }

    .style-preview-card[data-style="starline"] .style-preview-content {
      justify-content: flex-start;
      overflow: hidden;
    }

    .style-preview-content > div {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    .style-preview-card[data-style="starline"] .style-preview-content > div {
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
    }

    .style-card-info {
      padding: 8px;
      border-top: 1px solid var(--border-color);
      position: relative;
      text-align: center;
    }

    .style-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .style-card-desc {
      font-size: 10px;
      color: var(--text-secondary);
      line-height: 1.3;
    }

    .style-card-checkmark {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent-color);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .style-preview-card.active .style-card-checkmark {
      display: flex;
    }

    .style-card-checkmark svg {
      width: 11px;
      height: 11px;
      stroke: var(--bg-primary);
      stroke-width: 3;
    }

    /* 样式设置区域 - 背景设置等 */
    .style-settings-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
    }

    .style-settings-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .style-settings-title svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
    }

    /* 背景类型选择按钮组 - 横向排列可滚动 */
    .bg-type-buttons {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      padding-bottom: 4px;
    }

    .bg-type-buttons::-webkit-scrollbar {
      display: none;
    }

    .bg-type-btn {
      flex: 0 0 auto;
      min-width: 80px;
      padding: 10px 16px;
      background: var(--bg-secondary);
      border: 2px solid var(--border-color);
      border-radius: 10px 3px 10px 3px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      white-space: nowrap;
    }

    .bg-type-btn:hover {
      background: var(--bg-tertiary);
      border-color: var(--text-tertiary);
    }

    .bg-type-btn.active {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    /* 背景设置容器 */
    .bg-setting-container {
      display: none;
      animation: fadeInUp 0.3s ease;
    }

    .bg-setting-container.active {
      display: block;
    }

    /* 上传图片区域 */
    .bg-upload-area {
      padding: 12px;
      background: var(--bg-secondary);
      border: 2px dashed var(--border-color);
      border-radius: 10px 3px 10px 3px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .bg-upload-area:hover {
      border-color: var(--text-tertiary);
      background: var(--bg-tertiary);
    }

    .bg-upload-area svg {
      width: 24px;
      height: 24px;
      stroke: var(--text-tertiary);
      margin-bottom: 6px;
    }

    .bg-upload-text {
      font-size: 11px;
      color: var(--text-secondary);
    }

    /* 颜色选择器 */
    .bg-color-picker {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .bg-color-input {
      flex: 1;
      height: 40px;
      border: 2px solid var(--border-color);
      border-radius: 8px 2px 8px 2px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .bg-color-input:hover {
      border-color: var(--text-tertiary);
    }

    .bg-color-label {
      font-size: 11px;
      color: var(--text-secondary);
      min-width: 60px;
    }

    /* 渐变颜色选择 */
    .bg-gradient-colors {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bg-gradient-preview {
      height: 50px;
      border: 2px solid var(--border-color);
      border-radius: 10px 3px 10px 3px;
      margin-bottom: 8px;
    }

    /* ==========================================
     * MINIMAL GRAY CHAT STYLE - 极简灰色风格
     * 一比一复刻whatsapp-pink-theme-preview.html
     * ========================================== */

    /* 整体布局 - 填充满屏幕 */
    .chat-style-minimal-gray .app-content {
      padding: 0 !important;
      height: 100%;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .chat-style-minimal-gray .app-content::-webkit-scrollbar {
      display: none;
    }

    /* 顶部横幅 - 居中布局 */
    .chat-style-minimal-gray .chat-app-header {
      background: linear-gradient(180deg, var(--bg-secondary) 0%, transparent 100%);
      /* 🔥 使用全局App Header padding变量 */
      padding: var(--app-header-total-padding) 20px 30px;
      border: none !important;
    }

    .chat-style-minimal-gray .chat-header-top {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0;
    }

    .chat-style-minimal-gray .chat-user-info {
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .chat-style-minimal-gray .chat-user-avatar-mini {
      width: 80px;
      height: 80px;
      border: 3px solid var(--border-color);
      box-shadow: 0 4px 12px var(--shadow);
      margin-bottom: 12px;
      background: var(--bg-tertiary);
      transition: all 0.3s ease;
    }

    .chat-style-minimal-gray .chat-user-text-mini {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .chat-style-minimal-gray .chat-user-name-mini {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .chat-style-minimal-gray .chat-user-status-mini {
      font-size: 13px;
      font-style: italic;
      font-weight: 300;
      color: var(--text-secondary);
    }

    .chat-style-minimal-gray .chat-header-actions-mini {
      position: absolute;
      top: 50px;
      right: 20px;
    }

    /* 搜索栏完全隐藏 */
    .chat-style-minimal-gray .chat-search-bar-mini {
      display: none !important;
    }

    /* Chats标题区 */
    .chat-style-minimal-gray .chat-list-header-mini {
      /* 🔥 使用全局App Header padding变量 */
      padding: var(--app-header-total-padding) 20px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: none !important;
    }

    .chat-style-minimal-gray .chat-list-title-mini {
      font-family: 'Caveat', cursive !important;
      font-size: 42px !important;
      font-weight: 700 !important;
      letter-spacing: 1px;
      color: var(--text-primary);
    }

    .chat-style-minimal-gray .chat-list-count-mini {
      display: none !important;
    }

    /* Stories样式 */
    .chat-style-minimal-gray .chat-stories-section {
      padding: 0 20px 20px;
      border: none !important;
    }

    .chat-style-minimal-gray .chat-stories-inner-scroll {
      gap: 16px;
    }

    .chat-style-minimal-gray .story-item-mini {
      gap: 6px;
    }

    .chat-style-minimal-gray .story-avatar-mini {
      width: 60px;
      height: 60px;
      border: 2px solid var(--border-color);
      background: var(--bg-tertiary);
      padding: 3px;
      transition: all 0.3s ease;
    }

    .chat-style-minimal-gray .story-avatar-mini:hover {
      transform: scale(1.05);
      border-color: var(--accent-color);
    }

    .chat-style-minimal-gray .story-name-mini {
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* 完全隐藏Chat Requests区块 */
    .chat-style-minimal-gray .chat-requests-mini {
      display: none !important;
    }

    /* 聊天列表容器 */
    .chat-style-minimal-gray .chat-list-container {
      padding: 0;
      border: none !important;
      background: transparent !important;
    }

    .chat-style-minimal-gray .chat-list-items {
      padding: 0 20px 100px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* 聊天列表项 - 移除所有分割线 */
    .chat-style-minimal-gray .chat-item-mini {
      background: var(--bg-secondary);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 12px 16px;
      transition: all 0.3s ease;
      position: relative;
      margin: 0;
    }

    .chat-dock-switcher {
      margin-top: 12px;
    }

    .chat-dock-switcher-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .chat-dock-cards {
      display: flex;
      gap: 10px;
      align-items: stretch;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
    }

    .chat-dock-cards::-webkit-scrollbar {
      display: none;
    }

    .chat-dock-card {
      flex: 0 0 auto;
      width: 120px;
      background: var(--bg-secondary);
      border: 2px solid var(--border-color);
      border-radius: 10px 3px 10px 3px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .chat-dock-card:hover {
      border-color: var(--text-tertiary);
      transform: scale(1.04);
    }

    .chat-dock-card.active {
      border-color: var(--accent-color);
      border-width: 3px;
    }

    .chat-dock-preview {
      height: 86px;
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    .chat-dock-preview-bar {
      width: 100%;
      height: 34px;
      border-radius: 18px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      gap: 6px;
      box-shadow: var(--shadow-sm);
    }

    .chat-dock-preview-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.6;
    }

    .chat-dock-preview-dot-center {
      width: 14px;
      height: 14px;
      background: var(--accent-color);
      opacity: 0.9;
    }

    .chat-dock-card-info {
      padding: 8px;
      border-top: 1px solid var(--border-color);
      position: relative;
      text-align: center;
    }

    .chat-dock-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .chat-dock-card-desc {
      font-size: 10px;
      color: var(--text-secondary);
      line-height: 1.3;
    }

    .chat-dock-card-checkmark {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent-color);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .chat-dock-card.active .chat-dock-card-checkmark {
      display: flex;
    }

    .chat-dock-card-checkmark svg {
      width: 11px;
      height: 11px;
      stroke: var(--bg-primary);
      stroke-width: 3;
    }

    .chat-dock-preview-music {
      padding: 6px;
    }

    .chat-music-dock-preview {
      width: 100%;
      pointer-events: none;
    }

    .chat-music-dock-preview .chat-music-dock-bar {
      height: 44px;
      border-radius: 22px;
      padding: 0 8px;
      box-shadow: var(--shadow-md);
    }

    .chat-music-dock-preview .chat-music-nav-btn {
      width: 24px;
      height: 24px;
    }

    .chat-music-dock-preview .chat-music-nav-btn svg:not(.chat-music-star) {
      display: none;
    }

    .chat-music-preview-icon {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.6;
      display: inline-block;
    }

    .chat-music-dock-preview .chat-music-nav-btn.active .chat-music-preview-icon {
      background: var(--text-primary);
      opacity: 0.9;
    }

    .chat-music-dock-preview .chat-music-center {
      width: 32px;
      height: 32px;
      margin: 0 6px;
    }

    .chat-music-dock-preview .chat-music-avatar {
      width: 26px;
      height: 26px;
      border-width: 1px;
      box-shadow: none;
    }

    .chat-music-preview-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: var(--accent-color);
      opacity: 0.85;
      display: block;
    }

    .chat-music-dock-preview .chat-music-orbit {
      opacity: 0.4;
    }

    .chat-music-dock-preview .chat-music-star {
      width: 6px;
      height: 6px;
      top: 2px;
    }

    .chat-music-dock-preview .chat-music-waves {
      display: none;
    }

    .chat-dock-preview-starline {
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 10px;
      --bg-body: #f2f2f2;
      --dock-bg: rgba(255, 255, 255, 0.85);
      --dock-border: rgba(0, 0, 0, 0.08);
      --icon-color: #999999;
      --icon-active: #111111;
      --avatar-border: #ffffff;
      --accent: #111111;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
      --orbit-color: rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .chat-dock-preview-starline {
      --bg-body: #050505;
      --dock-bg: rgba(20, 20, 20, 0.85);
      --dock-border: rgba(255, 255, 255, 0.12);
      --icon-color: #666666;
      --icon-active: #ffffff;
      --avatar-border: #000000;
      --accent: #ffffff;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
      --orbit-color: rgba(255, 255, 255, 0.15);
    }

    .chat-dock-preview-starline .starline-dock-container {
      position: relative;
      right: auto;
      bottom: auto;
      z-index: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      transform: scale(0.62);
      transform-origin: bottom right;
      pointer-events: none;
    }

    .chat-dock-preview-starline .starline-dock {
      animation: none;
    }

    .chat-dock-preview-starline .starline-dock .dock-icon.active::after {
      bottom: -2px;
    }

    .chat-style-minimal-gray .chat-item-mini.is-swipe-open,
    .chat-style-minimal-gray .chat-item-mini.is-swipe-open:hover {
      transform: translateX(-6px);
    }

    .chat-style-minimal-gray .chat-item-mini::after {
      display: none !important;
    }

    .chat-style-minimal-gray .chat-item-mini:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px var(--shadow);
      border-color: var(--text-tertiary);
      background: var(--hover-bg);
    }

    .chat-style-minimal-gray .chat-item-avatar-mini {
      width: 50px;
      height: 50px;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      flex-shrink: 0;
    }

    .chat-style-minimal-gray .chat-item-name-mini {
      font-size: 15px;
      font-weight: 600;
    }

    .chat-style-minimal-gray .chat-item-time-mini {
      font-size: 11px;
      color: var(--text-tertiary);
      font-style: italic;
    }

    .chat-style-minimal-gray .chat-item-preview-mini {
      font-size: 13px;
      color: var(--text-secondary);
    }

    /* 底部导航栏 - 保持默认样式，不做任何修改 */

    /* 空状态样式 */
    .chat-style-minimal-gray .chat-empty-state {
      padding: 60px 20px;
      text-align: center;
      color: var(--text-secondary);
    }

    .chat-style-minimal-gray .empty-text {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-top: 16px;
    }

    .chat-style-minimal-gray .empty-subtext {
      font-size: 13px;
      color: var(--text-tertiary);
      margin-top: 8px;
    }

    /* ==========================================
     * STARLINE CHAT STYLE - 星轨异形风格
     * 完整搬运自 星轨.html（已移除 Dock）
     * ========================================== */

    .chat-style-starline .layout-starline {
      /* 日间模式变量 */
      --bg-primary: #ffffff;
      --bg-secondary: #f6f6f6;
      --bg-tertiary: #efefef;
      --text-primary: #111111;
      --text-secondary: #7a7a7a;
      --text-tertiary: #9a9a9a;
      --border-color: #e3e3e3;
      --accent-color: #111111;
      --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
      --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
      --glass: rgba(255, 255, 255, 0.85);
      --star: #111111;
      --card-bg: #ffffff;
      --card-active: #f9f9f9;
    }

    [data-theme="dark"] .chat-style-starline .layout-starline {
      /* 夜间模式变量 */
      --bg-primary: #0b0b0b;
      --bg-secondary: #121212;
      --bg-tertiary: #1a1a1a;
      --text-primary: #f2f2f2;
      --text-secondary: #8c8c8c;
      --text-tertiary: #666666;
      --border-color: #2a2a2a;
      --accent-color: #f2f2f2;
      --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.6);
      --glass: rgba(20, 20, 20, 0.85);
      --star: #f2f2f2;
      --card-bg: #0b0b0b;
      --card-active: #151515;
    }

    .chat-style-starline .layout-starline * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }

    .chat-style-starline .layout-starline {
      width: 100%;
      height: 100%;
      overflow: hidden; /* 页面级禁止滚动，内容级允许滚动 */
    }

    .chat-style-starline .layout-starline {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      transition: background 0.4s ease, color 0.4s ease;
    }

    /* 
       ===========================
       布局结构：星轨异形 (Starline)
       ===========================
    */
    .chat-style-starline .layout-starline {
      display: grid;
      grid-template-columns: 74px 1fr; /* 左侧星轨固定，右侧自适应 */
      grid-template-rows: auto auto 1fr; /* 顶部标题、工具栏、列表区域 */
      width: 100%;
      height: 100%;
      background: var(--bg-primary);
      animation: starlineIn 0.6s ease;
    }

    /* 左侧：星轨导航区 */
.chat-style-starline .star-rail {
  grid-row: 1 / span 3;
  padding: var(--app-header-total-padding) 10px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-right: 1px solid var(--border-color);
      position: relative;
      z-index: 2;
      background: var(--bg-primary);
      transition: border-color 0.4s ease, background 0.4s ease;
    }

    /* 贯穿上下的星轨线 */
    .chat-style-starline .star-rail::after {
      content: '';
      position: absolute;
      top: 88px;
      bottom: 120px;
      width: 1px;
      background: linear-gradient(180deg, transparent, var(--border-color), transparent);
    }

    /* 头像（点击切换主题） */
    .chat-style-starline .rail-avatar {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      cursor: pointer;
      z-index: 5;
    }

    .chat-style-starline .rail-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.8;
    }

    /* 头像外圈旋转星轨 */
    .chat-style-starline .rail-avatar::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px dashed var(--border-color);
      animation: orbitSpin 10s linear infinite;
      opacity: 0.6;
      pointer-events: none;
    }

    .chat-style-starline .rail-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.7;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .chat-style-starline .rail-dot.active {
      background: var(--text-primary);
      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
      transform: scale(1.1);
    }

    /* 右侧：顶部标题栏 */
    .chat-style-starline .starline-top {
      grid-column: 2;
      padding: 24px 20px 10px 18px;
      display: flex;
      align-items: flex-end; /* 底部对齐 */
      justify-content: space-between;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-primary);
      transition: border-color 0.4s ease, background 0.4s ease;
    }

    .chat-style-starline .starline-title {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }

    .chat-style-starline .starline-meta {
      font-size: 11px;
      color: var(--text-secondary);
      font-family: 'JetBrains Mono', monospace;
    }

    /* 右侧：工具栏 (搜索 + 标签) */
    .chat-style-starline .starline-toolbar {
      grid-column: 2;
      display: flex;
      flex-direction: column; /* 垂直排列 */
      gap: 12px;
      padding: 16px 20px 16px 18px;
      background: var(--bg-primary);
      z-index: 1;
      transition: background 0.4s ease;
    }

    .chat-style-starline .starline-search {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      border-radius: 12px 4px 12px 4px; /* 异形圆角 */
      font-size: 12px;
      color: var(--text-primary);
      transition: all 0.3s ease;
    }

    .chat-style-starline .starline-search:focus {
      border-color: var(--text-secondary);
      background: var(--bg-primary);
    }

    .chat-style-starline .starline-search::placeholder {
      color: var(--text-tertiary);
    }

    .chat-style-starline .starline-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .chat-style-starline .starline-tag {
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--bg-primary);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .chat-style-starline .starline-tag.active {
      background: var(--text-primary);
      color: var(--bg-primary);
      border-color: var(--text-primary);
    }

    .chat-style-starline .starline-tags {
      align-items: center;
    }

    .chat-style-starline .starline-tags > .story-avatar-mini {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .chat-style-starline .starline-tags > .story-avatar-mini.add-story-mini {
      border-style: solid;
      border-width: 1px;
    }

    .chat-style-starline .starline-tags > .story-avatar-mini.add-story-mini svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
    }

    .chat-style-starline .starline-tags .story-item-mini {
      flex-direction: row;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      transition: all 0.2s ease;
      transform: none;
    }

    .chat-style-starline .starline-tags .story-item-mini:hover {
      transform: none;
    }

    .chat-style-starline .starline-tags .story-item-mini .story-avatar-mini {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      padding: 0;
    }

    .chat-style-starline .starline-tags .story-item-mini .story-avatar-mini.add-story-mini {
      border-style: solid;
      border-width: 1px;
    }

    .chat-style-starline .starline-tags .story-item-mini .story-avatar-mini svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-primary);
    }

    .chat-style-starline .starline-tags .story-name-mini {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.4px;
      text-transform: uppercase;
      margin: 0;
    }

    /* 右侧：列表区域 (核心滚动区) */
    .chat-style-starline .starline-list {
      grid-column: 2;
      padding: 0 20px 120px 18px; /* 底部预留足够空间给Dock */
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox 隐藏滚动条 */
    }
    
    .chat-style-starline .starline-list::-webkit-scrollbar {
      display: none; /* Chrome/Safari 隐藏滚动条 */
    }

    /* 列表左侧的装饰垂线 */
    .chat-style-starline .starline-list::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, transparent, var(--border-color), transparent);
      z-index: 0;
    }

    /* 列表卡片 */
    .chat-style-starline .starline-card {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 16px 4px 16px 4px; /* 异形圆角 */
      border: 1px solid var(--border-color);
      background: var(--card-bg);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      transition: transform 0.2s ease, background 0.2s ease;
      cursor: pointer;
    }

    .chat-style-starline .starline-card:active {
      transform: scale(0.98);
      background: var(--card-active);
    }

    /* 卡片背景纹理 */
    .chat-style-starline .starline-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 40%, var(--bg-tertiary));
      opacity: 0.15;
      pointer-events: none;
    }

    /* 异形排列逻辑：偶数卡片左缩进，制造错落感 */
    .chat-style-starline .starline-card:nth-child(2n) {
      margin-left: 24px;
    }

    .chat-style-starline .starline-avatar {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .chat-style-starline .starline-card-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0; /* 防止文本溢出撑开 */
    }

    .chat-style-starline .starline-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .chat-style-starline .starline-card-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .chat-style-starline .starline-time {
      font-size: 10px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
    }

    .chat-style-starline .starline-card-desc {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 动画定义 */
    @keyframes orbitSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes starlineIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 提示气泡 */
    .chat-style-starline .theme-hint {
        position: fixed;
        top: 80px;
        left: 20px;
        background: var(--accent-color);
        color: var(--bg-primary);
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 12px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s;
        z-index: 999;
    }
    
    .chat-style-starline .theme-hint.show {
        opacity: 1;
        animation: fadeOut 2s 1s forwards;
    }
    
    @keyframes fadeOut {
        to { opacity: 0; }
    }

    /* 星轨样式适配现有聊天结构 */
    #chatStarlineMeta {
      display: none;
    }

    .starline-tags {
      display: none;
    }

    #chatScreen .chat-list-view > .star-rail,
    #chatScreen .chat-list-view > .theme-hint {
      display: none;
    }

    #chatScreen.chat-style-starline .chat-list-view > .star-rail {
      display: flex;
    }

    #chatScreen.chat-style-starline .chat-list-view > .theme-hint {
      display: block;
    }

    #chatScreen.chat-style-starline > .app-content {
      padding: 0;
      overflow: hidden;
    }

    #chatScreen.chat-style-starline .starline-top {
      grid-row: 1;
    }

    #chatScreen.chat-style-starline .starline-toolbar {
      grid-row: 2;
    }

    #chatScreen.chat-style-starline .starline-list {
      grid-row: 3;
    }

    #chatScreen.chat-style-starline .chat-app-header {
      position: static;
      top: auto;
      border-bottom: none;
      animation: none;
      backdrop-filter: none;
      padding: 16px 20px 16px 18px;
      z-index: 1;
    }

    #chatScreen.chat-style-starline .chat-header-top {
      display: none;
    }

    #chatScreen.chat-style-starline .chat-search-bar-mini {
      margin: 0;
    }

    #chatScreen.chat-style-starline .chat-search-input-mini {
      height: auto;
    }

    #chatScreen.chat-style-starline .chat-stories-section,
    #chatScreen.chat-style-starline .chat-requests-mini {
      display: none !important;
    }

    #chatScreen.chat-style-starline .chat-list-container {
      display: contents;
      padding: 0;
    }

#chatScreen.chat-style-starline .chat-list-header-mini {
  padding: var(--app-header-total-padding) 4px 12px;
  margin-bottom: 0;
}

    #chatScreen.chat-style-starline .chat-list-title-mini {
      font-family: inherit;
    }

    #chatScreen.chat-style-starline #chatStarlineMeta {
      display: block;
    }

    #chatScreen.chat-style-starline #chatListCount {
      display: none;
    }

    #chatScreen.chat-style-starline .starline-card {
      margin: 0;
      animation: none;
    }

    #chatScreen.chat-style-starline .chat-item-mini:hover {
      transform: none;
      background: var(--card-bg);
    }

    #chatScreen.chat-style-starline .chat-unread-badge {
      display: none;
    }

    /* ==========================================
     * SEARCH CHAT STYLE - 搜索页风格
     * 一比一复刻 搜索.html（不含底部doker栏）
     * ========================================== */

    #chatScreen .chat-search-style-view {
      display: none;
    }

    #chatScreen.chat-style-search .app-content {
      padding: 0 !important;
      height: 100%;
      overflow: hidden;
      scrollbar-width: none;
    }
    #chatScreen.chat-style-search .chat-settings-screen .app-content {
      height: auto;
      overflow: visible;
      padding: 20px !important;
      padding-top: var(--app-header-total-padding) !important;
      padding-bottom: 60px !important;
    }

    #chatScreen.chat-style-search .app-content::-webkit-scrollbar {
      display: none;
    }

    #chatScreen.chat-style-search .chat-app-header,
    #chatScreen.chat-style-search .chat-stories-section,
    #chatScreen.chat-style-search .chat-requests-mini,
    #chatScreen.chat-style-search .chat-list-container,
    #chatScreen.chat-style-search .chat-list-view > .star-rail,
    #chatScreen.chat-style-search .chat-list-view > .theme-hint {
      display: none !important;
    }

    #chatScreen.chat-style-search .chat-search-style-view {
      --bg-body: #ffffff;
      --bg-input: #f2f2f2;
      --text-main: #000000;
      --text-link: #000000;
      --text-url: #5e5e5e;
      --text-desc: #444444;
      --border: #e0e0e0;
      --ad-badge-bg: #000000;
      --ad-badge-text: #ffffff;
      --divider: #f0f0f0;
      --shadow-bar: 0 1px 0px rgba(0,0,0,0.05);
      font-family: 'Inter', sans-serif;
      background: var(--bg-body);
      color: var(--text-main);
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      touch-action: pan-y;
      transition: background 0.4s ease, color 0.4s ease;
    }

    #chatScreen.chat-style-search .chat-list-view {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    html[data-theme="dark"] #chatScreen.chat-style-search .chat-search-style-view {
      --bg-body: #0a0a0a;
      --bg-input: #1c1c1c;
      --text-main: #ffffff;
      --text-link: #ffffff;
      --text-url: #a0a0a0;
      --text-desc: #b0b0b0;
      --border: #333333;
      --ad-badge-bg: #ffffff;
      --ad-badge-text: #000000;
      --divider: #1f1f1f;
      --shadow-bar: 0 1px 0px rgba(255,255,255,0.1);
    }

    #chatScreen.chat-style-search .chat-search-style-view * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }

#chatScreen.chat-style-search .chat-search-style-view .browser-header {
  padding: var(--app-header-total-padding) 16px 12px;
  background: var(--bg-body);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
      flex-shrink: 0;
      z-index: 10;
      transition: border-color 0.4s ease, background 0.4s ease;
    }

    #chatScreen.chat-style-search .chat-search-style-view .url-bar {
      flex: 1;
      height: 44px;
      background: var(--bg-input);
      border-radius: 12px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 10px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      color: var(--text-main);
      transition: background 0.4s ease;
    }

    #chatScreen.chat-style-search .chat-search-style-view .lock-icon {
      width: 12px;
      height: 12px;
      opacity: 0.6;
    }

    #chatScreen.chat-style-search .chat-search-style-view .url-text {
      flex: 1;
      opacity: 0.8;
      font-weight: 500;
    }

    #chatScreen.chat-style-search .chat-search-style-view .theme-toggle-btn {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0.7;
    }

    #chatScreen.chat-style-search .chat-search-style-view .nav-tabs {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 20px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-body);
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
      transition: border-color 0.4s ease, background 0.4s ease;
    }

    #chatScreen.chat-style-search .chat-search-style-view .nav-tabs::-webkit-scrollbar {
      display: none;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-url);
      position: relative;
      padding-bottom: 4px;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item.active {
      color: var(--text-main);
      font-weight: 600;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -13px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--text-main);
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action {
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action,
    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action .story-avatar-mini,
    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action .story-item-mini {
      cursor: pointer;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action .story-avatar-mini {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: none;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-url);
      flex-shrink: 0;
      padding: 0;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action .story-item-mini {
      display: inline-flex;
      flex-direction: row !important;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--text-url);
      transform: none !important;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action .story-item-mini .story-avatar-mini {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: inherit;
      padding: 0;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action .story-name-mini {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-url);
      letter-spacing: -0.2px;
      line-height: 1;
      margin: 0;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action svg {
      width: 16px;
      height: 16px;
      stroke: currentColor !important;
    }

    #chatScreen.chat-style-search .chat-search-style-view .tab-item-action svg * {
      stroke: currentColor !important;
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-stats {
      padding: 14px 16px 4px;
      font-size: 11px;
      color: var(--text-url);
      font-family: 'Space Grotesk', sans-serif;
    }

    #chatScreen.chat-style-search .chat-search-style-view .search-results {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 16px 80px;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      min-height: 0;
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-card {
      padding: 24px 0;
      border-bottom: 1px solid var(--divider);
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      position: relative;
      overflow: visible;
      touch-action: pan-y;
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-card.is-swipe-open {
      padding-right: 32px;
      transform: translateX(-6px);
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-card.is-swipe-open:hover {
      transform: translateX(-6px);
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-card.is-swipe-open .chat-item-delete-btn {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%) scale(1);
      color: var(--text-main);
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }

    #chatScreen.chat-style-search .chat-search-style-view .favicon-wrap {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bg-input);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-main);
      overflow: hidden;
    }

    #chatScreen.chat-style-search .chat-search-style-view .favicon-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    #chatScreen.chat-style-search .chat-search-style-view .site-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.1;
    }

    #chatScreen.chat-style-search .chat-search-style-view .site-name {
      font-size: 11px;
      color: var(--text-main);
      font-weight: 600;
    }

    #chatScreen.chat-style-search .chat-search-style-view .site-url {
      font-size: 10px;
      color: var(--text-url);
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-title {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-link);
      letter-spacing: -0.3px;
      text-decoration: none;
      font-family: 'Playfair Display', serif;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-title:active {
      text-decoration: underline;
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-snippet {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-desc);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    #chatScreen.chat-style-search .chat-search-style-view .ad-badge {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 3px;
      background: var(--text-main);
      color: var(--bg-body);
      margin-right: 6px;
      font-family: sans-serif;
    }

    #chatScreen.chat-style-search .chat-search-style-view .msg-count {
      font-size: 10px;
      color: var(--text-url);
      border: 1px solid var(--border);
      padding: 1px 6px;
      border-radius: 10px;
      margin-left: auto;
    }

    #chatScreen.chat-style-search .chat-search-style-view .browser-footer {
      height: 60px;
      background: var(--bg-body);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 20;
      padding-bottom: env(safe-area-inset-bottom);
      transition: border-color 0.4s ease, background 0.4s ease;
    }

    #chatScreen.chat-style-search .chat-search-style-view .footer-icon {
      width: 24px;
      height: 24px;
      stroke: var(--text-url);
      stroke-width: 1.5;
      fill: none;
      cursor: pointer;
      transition: stroke 0.3s;
    }

    #chatScreen.chat-style-search .chat-search-style-view .footer-icon:hover,
    #chatScreen.chat-style-search .chat-search-style-view .footer-icon.active {
      stroke: var(--text-main);
    }

    @keyframes chatSearchFadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-card {
      animation: chatSearchFadeIn 0.5s ease backwards;
    }

    #chatScreen.chat-style-search .chat-search-style-view .result-card:nth-child(1) { animation-delay: 0.05s; }
    #chatScreen.chat-style-search .chat-search-style-view .result-card:nth-child(2) { animation-delay: 0.1s; }
    #chatScreen.chat-style-search .chat-search-style-view .result-card:nth-child(3) { animation-delay: 0.15s; }
    #chatScreen.chat-style-search .chat-search-style-view .result-card:nth-child(4) { animation-delay: 0.2s; }
    #chatScreen.chat-style-search .chat-search-style-view .result-card:nth-child(5) { animation-delay: 0.25s; }

    /* ==========================================
     * YUTUBE CHAT STYLE - 老版yutube风格
     * 完整搬运自 我去.html（已移除 Dock）
     * ========================================== */

    #chatScreen .chat-yutube-style-view {
      display: none;
    }

    #chatScreen.chat-style-yutube .app-content {
      padding: 0 !important;
      height: 100%;
      overflow: hidden;
      scrollbar-width: none;
    }
    #chatScreen.chat-style-yutube .chat-settings-screen .app-content {
      height: auto;
      overflow: visible;
      padding: 20px !important;
      padding-top: var(--app-header-total-padding) !important;
      padding-bottom: 60px !important;
    }
    #chatScreen.chat-style-minimal-gray .chat-settings-screen {
      padding-top: var(--app-header-total-padding);
    }
    #chatScreen.chat-style-minimal-gray .chat-settings-screen .app-content {
      height: auto;
      overflow: visible;
      padding: 0 20px 60px !important;
    }

    #chatScreen.chat-style-yutube .app-content::-webkit-scrollbar {
      display: none;
    }

    #chatScreen.chat-style-yutube .chat-app-header,
    #chatScreen.chat-style-yutube .chat-stories-section,
    #chatScreen.chat-style-yutube .chat-requests-mini,
    #chatScreen.chat-style-yutube .chat-list-container,
    #chatScreen.chat-style-yutube .chat-search-style-view,
    #chatScreen.chat-style-yutube .chat-poetry-style-view,
    #chatScreen.chat-style-yutube .chat-river-style-view,
    #chatScreen.chat-style-yutube .chat-list-view > .star-rail,
    #chatScreen.chat-style-yutube .chat-list-view > .theme-hint {
      display: none !important;
    }

    #chatScreen.chat-style-yutube .chat-list-view {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view {
      /* === 日间模式 (Classic 2006) === */
      --bg-body: #FFFFFF;
      --bg-container: #FFFFFF;
      --bg-header: #FFFFFF;
      --border-color: #CCCCCC;
      --text-main: #333333;
      --text-link: #0033CC;
      --text-meta: #666666;
      --accent-red: #CC181E;
      --accent-yellow: #FBF7AA; /* 高亮黄 */
      --dock-gradient: linear-gradient(to bottom, #f0f0f0, #d3d3d3);
      --dock-border: #999;
      --shadow-retro: 2px 2px 0px rgba(0,0,0,0.1);
      --danmaku-color: #000;
      --danmaku-bg: rgba(255, 255, 255, 0.8);
      /* === 新增按钮变量 (日间: 经典亮红) === */
      --btn-sub-bg: linear-gradient(to bottom, #ff5555, #cc181e);
      --btn-sub-border: #990000;
      --btn-sub-text: #ffffff;
      --btn-sub-shadow: 0 1px 2px rgba(0,0,0,0.2);

      background-color: var(--bg-body);
      color: var(--text-main);
      font-family: Arial, Helvetica, sans-serif;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
      position: relative;
    }

    html[data-theme="dark"] #chatScreen.chat-style-yutube .chat-yutube-style-view {
      /* === 夜间模式 (CRT / Lights Off) === */
      --bg-body: #111111;
      --bg-container: #1b1b1b;
      --bg-header: #000000;
      --border-color: #444444;
      --text-main: #e0e0e0;
      --text-link: #5faaff;
      --text-meta: #999999;
      --accent-red: #ff3333;
      --accent-yellow: #333300;
      --dock-gradient: linear-gradient(to bottom, #2a2a2a, #111111);
      --dock-border: #555;
      --shadow-retro: 2px 2px 0px #000;
      --danmaku-color: #fff;
      --danmaku-bg: rgba(0, 0, 0, 0.6);
      /* === 新增按钮变量 (夜间: 深红 + 荧光边框) === */
      --btn-sub-bg: linear-gradient(to bottom, #cc181e, #8a0e12); /* 更深邃的红 */
      --btn-sub-border: #ff6666; /* 亮边框，防止吞没在黑色背景里 */
      --btn-sub-text: #eeeeee;
      --btn-sub-shadow: 0 0 5px rgba(204, 24, 30, 0.4); /* 微弱红光 */
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    /* === 全局弹幕层 === */
    #chatScreen.chat-style-yutube .chat-yutube-style-view #danmaku-layer {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 50;
      overflow: hidden;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-item {
      position: absolute;
      white-space: nowrap;
      font-family: 'Courier New', Courier, monospace;
      font-size: 14px;
      color: var(--danmaku-color);
      background: var(--danmaku-bg);
      padding: 2px 6px;
      border: 1px solid var(--border-color);
      animation: flyBy 8s linear forwards;
      opacity: 0.8;
    }
    @keyframes flyBy {
      from { transform: translateX(100vw); }
      to { transform: translateX(-100%); }
    }

    /* === 顶部 Header === */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .header {
      background: var(--bg-header);
      padding: 10px 15px;
      padding-top: var(--total-top-padding);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 60;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .logo {
      font-family: 'Impact', sans-serif;
      font-size: 24px;
      letter-spacing: -1px;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .logo span { color: var(--accent-red); background: var(--bg-body); padding: 0 2px; border-radius: 4px; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .logo .tube-bg { background: var(--accent-red); color: white; padding: 2px 6px; border-radius: 4px; margin-left: 2px; }
    
    #chatScreen.chat-style-yutube .chat-yutube-style-view .header-controls { display: flex; gap: 10px; font-size: 12px; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .link-btn { color: var(--text-link); text-decoration: underline; cursor: pointer; font-weight: bold; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor-mask {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      z-index: 65;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor-mask.show {
      opacity: 1;
      pointer-events: auto;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor {
      position: absolute;
      top: calc(var(--total-top-padding) + 36px);
      left: 50%;
      transform: translateX(-50%) scale(0.98);
      width: min(320px, 90%);
      background: var(--bg-container);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-retro);
      padding: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
      z-index: 70;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) scale(1);
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor-title {
      font-size: 12px;
      font-weight: bold;
      color: var(--text-link);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor-input {
      width: 100%;
      min-height: 90px;
      resize: vertical;
      border: 1px solid var(--border-color);
      background: #fff;
      color: #111;
      font-size: 11px;
      font-family: "Courier New", Courier, monospace;
      padding: 6px;
      outline: none;
    }
    html[data-theme="dark"] #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor-input {
      background: #111;
      color: #eee;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-editor-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-btn {
      padding: 3px 8px;
      font-size: 10px;
      font-weight: bold;
      border: 1px solid #999;
      background: #f5f5f5;
      color: #111;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-btn.primary {
      background: #c00;
      border-color: #900;
      color: #fff;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .danmaku-btn:active {
      transform: translateY(1px);
      filter: brightness(0.9);
    }

    /* === 主滚动区 === */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .main-scroll {
      flex: 1;
      overflow-y: auto;
      padding-bottom: 100px; /* Dock 空间 */
      background: var(--bg-body);
    }

    /* === 1. 置顶区：播放器样式 (Featured) === */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .featured-video {
      background: var(--bg-container);
      margin: 15px;
      padding: 10px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-retro);
    }
    
    #chatScreen.chat-style-yutube .chat-yutube-style-view .player-window {
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px inset #999;
    }
    
    #chatScreen.chat-style-yutube .chat-yutube-style-view .player-bg-img {
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.7;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .play-btn-overlay {
      position: absolute;
      width: 60px; height: 40px;
      background: rgba(200, 0, 0, 0.9);
      border-radius: 8px;
      display: flex; justify-content: center; align-items: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      z-index: 2;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .play-triangle {
      width: 0; height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 14px solid white;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .featured-info { padding-top: 10px; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .video-title { font-size: 18px; font-weight: bold; color: var(--text-link); margin-bottom: 4px; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .video-meta { font-size: 11px; color: var(--text-meta); display: flex; gap: 10px; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .subscribe-btn {
      /* 调用上面定义的变量 */
      background: var(--btn-sub-bg);
      border: 1px solid var(--btn-sub-border);
      color: var(--btn-sub-text);
      box-shadow: var(--btn-sub-shadow);

      /* 布局样式 */
      padding: 3px 8px;
      font-size: 11px;
      font-weight: bold;
      font-family: Arial, sans-serif;
      border-radius: 3px;
      cursor: pointer;
      letter-spacing: 0.5px;
      
      /* 点击动画效果 */
      transition: all 0.1s;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .subscribe-btn:active {
      transform: scale(0.95);
      filter: brightness(0.8);
    }

    /* === 2. 列表区：侧边栏推荐样式 (Related Videos) === */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .section-header {
      padding: 0 15px;
      font-size: 14px;
      font-weight: bold;
      color: var(--text-main);
      display: flex; justify-content: space-between;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .section-header span.count { background: #eee; color: #333; padding: 1px 4px; font-size: 10px; border-radius: 2px; }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 15px;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item,
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item-mini {
      display: flex;
      gap: 10px;
      cursor: pointer;
      position: relative;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item-mini {
      align-items: flex-start;
      padding: 0;
      margin: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      animation: none;
      transition: none;
      overflow: visible;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item-mini:hover {
      background: transparent;
      transform: none;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item-mini.is-swipe-open {
      padding-right: 32px;
      transform: translateX(-6px);
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item-mini.is-swipe-open:hover {
      transform: translateX(-6px);
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item:active,
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-item-mini:active { opacity: 0.7; }

    /* 缩略图 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .thumbnail-box,
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-avatar-mini {
      width: 120px;
      height: 70px;
      background: transparent;
      border: none;
      position: relative;
      flex-shrink: 0;
      border-radius: 0;
      padding: 0;
      margin: 0;
      box-shadow: none;
      display: block;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .duration-badge {
      position: absolute;
      bottom: 2px; right: 2px;
      background: #000; color: #fff;
      font-size: 9px; padding: 1px 3px;
      font-weight: bold; opacity: 0.8;
    }
    
    /* 内容 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-info,
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-info-mini { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-name,
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-name-mini {
      font-size: 14px;
      color: var(--text-link);
      font-weight: bold;
      line-height: 1.2;
      margin-bottom: 4px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-snippet,
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-preview-mini { font-size: 11px; color: var(--text-meta); line-height: 1.3; }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-stats {
      margin-top: auto;
      font-size: 10px;
      color: var(--text-meta);
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .chat-stats span.views { color: var(--text-main); font-weight: bold; }

    /* 新消息标记 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .new-badge {
      display: inline-block;
      background: var(--accent-yellow);
      color: #b00;
      font-size: 9px; padding: 0 3px;
      border: 1px solid #cc9;
      margin-right: 4px;
      font-weight: bold;
      transform: rotate(-2deg);
    }

    /* === Dock栏：播放器控制条 === */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .retro-dock {
      position: fixed;
      bottom: 0; left: 0; width: 100%;
      height: 70px;
      background: var(--dock-gradient);
      border-top: 1px solid var(--dock-border);
      z-index: 100;
      padding-bottom: env(safe-area-inset-bottom);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    /* 进度条装饰 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .scrubber-bar {
      width: 100%; height: 4px; background: #999;
      position: relative;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .scrubber-progress {
      width: 60%; height: 100%; background: var(--accent-red);
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .scrubber-handle {
      position: absolute; left: 60%; top: -3px;
      width: 10px; height: 10px; background: #fff; border: 1px solid #666;
      border-radius: 50%;
    }

    /* 按钮区 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-controls {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 10px;
    }

    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-btn {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: none; border: none;
      cursor: pointer;
      position: relative;
      width: 50px;
    }

    /* 图标样式 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-icon {
      width: 24px; height: 24px;
      fill: #444;
      margin-bottom: 2px;
      background: none;
      border: none;
      border-radius: 0;
      display: block;
      align-items: initial;
      justify-content: initial;
      position: relative;
      overflow: visible;
      touch-action: auto;
      transition: none;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-icon::before {
      display: none;
      content: none;
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-icon:hover,
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-icon:active {
      transform: none;
      box-shadow: none;
    }
    html[data-theme="dark"] #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-icon { fill: #ccc; }
    
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-btn.active .dock-icon { fill: var(--accent-red); }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-label { font-size: 9px; color: var(--text-meta); font-family: sans-serif; }

    /* 中间头像特殊处理 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-btn.avatar-slot {
      transform: translateY(-15px);
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .avatar-wrapper {
      width: 54px; height: 54px;
      background: #fff;
      border: 3px solid #ccc;
      border-radius: 50%;
      overflow: hidden;
      display: flex; justify-content: center; align-items: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    #chatScreen.chat-style-yutube .chat-yutube-style-view .avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
    
    /* 模拟\"正在播放\"状态圆环 */
    #chatScreen.chat-style-yutube .chat-yutube-style-view .dock-btn.avatar-slot::after {
      content: '';
      position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
      width: 60px; height: 60px;
      border: 2px dashed var(--accent-red);
      border-radius: 50%;
      opacity: 0.3;
      animation: spin-retro 10s linear infinite;
      pointer-events: none;
    }

    /* ==================== 攻略模式样式 ==================== */

    /* 星星图标脉冲动画 - 参考聊天主题模块 */
    .affection-star-icon {
      animation: affection-star-pulse 2s ease-in-out infinite;
      color: var(--accent-color, var(--text-primary));
      opacity: 0.6;
    }

    @keyframes affection-star-pulse {
      0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
      }
      50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
      }
    }

    /* Toggle开关样式 - iOS风格标准尺寸 */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 28px;
      flex-shrink: 0;
    }

    .toggle-switch input[type="checkbox"] {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg-tertiary);
      border: 2px solid var(--border-color);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 28px;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      height: 20px;
      width: 20px;
      left: 2px;
      bottom: 2px;
      background: var(--text-primary);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .toggle-switch input:checked + .toggle-slider {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(20px);
      background: var(--bg-primary);
    }

    .toggle-switch:hover .toggle-slider {
      border-color: var(--text-primary);
    }

    .toggle-switch input:focus + .toggle-slider {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    }

    .toggle-switch input:disabled + .toggle-slider {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Toggle开关小尺寸变体 - 用于行内显示 */
    .toggle-switch-small {
      width: 36px;
      height: 20px;
    }

    .toggle-switch-small .toggle-slider::before {
      height: 14px;
      width: 14px;
      left: 1px;
      bottom: 1px;
    }

    .toggle-switch-small input:checked + .toggle-slider::before {
      transform: translateX(16px);
    }

    /* ==================== 攻略模式 V2 - INS风格重设计 ==================== */

    /* 主容器 - 异形外框设计 */
    .affection-container-v2 {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 0;
      margin-bottom: 16px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-theme='dark'] .affection-container-v2 {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* 顶部控制面板 */
    .affection-top-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border-color);
      position: relative;
    }

    /* 状态指示条 */
    .affection-status-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      background: var(--text-tertiary);
      border-radius: 50%;
      animation: statusPulse 2s ease-in-out infinite;
    }

    @keyframes statusPulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    .status-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* 现代开关 */
    .affection-toggle-modern {
      position: relative;
      width: 44px;
      height: 24px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .affection-toggle-modern input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-track {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg-tertiary);
      border: 1.5px solid var(--border-color);
      border-radius: 12px;
      transition: all 0.3s ease;
    }

    .toggle-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 16px;
      height: 16px;
      background: var(--text-primary);
      border-radius: 50%;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .affection-toggle-modern input:checked + .toggle-track {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .affection-toggle-modern input:checked + .toggle-track + .toggle-thumb {
      transform: translateX(20px);
      background: var(--bg-primary);
    }

    /* 内容区域 */
    .affection-content-v2 {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .affection-content-v2.show {
      max-height: 3000px;
      opacity: 1;
    }

    /* 网格容器 */
    .affection-grid-container {
      padding: 24px;
    }

    .affection-grid-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
    }

    .affection-grid-label span:first-child {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.3px;
    }

    .grid-count {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
    }

    .bilingual-setting-row {
      align-items: flex-start;
      gap: 16px;
    }

    .bilingual-setting-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .bilingual-setting-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.3px;
    }

    .bilingual-setting-star {
      width: 12px;
      height: 12px;
      opacity: 0.55;
    }

    .bilingual-setting-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.4;
    }

    .bilingual-setting-controls {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
      margin-top: 4px;
    }

    .bilingual-select-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1 1 0;
      min-width: 0;
    }

    .bilingual-select-label {
      font-size: 10px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }

    .bilingual-select {
      width: 100%;
      min-width: 0;
      padding: 8px 10px;
      font-size: 12px;
      border-radius: 10px;
    }

    .bilingual-select-arrow {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-tertiary);
      opacity: 0.7;
      margin-top: 18px;
    }

    .bilingual-select-arrow svg {
      width: 18px;
      height: 18px;
    }

    [data-theme='dark'] .bilingual-setting-star {
      opacity: 0.7;
    }

    .bilingual-setting-row.is-disabled {
      opacity: 0.55;
    }

    /* 样式网格 - 横向滚动布局 */
    .affection-styles-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--border-color) transparent;
    }

    .affection-styles-grid::-webkit-scrollbar {
      height: 4px;
    }

    .affection-styles-grid::-webkit-scrollbar-track {
      background: transparent;
    }

    .affection-styles-grid::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 4px;
    }

    /* 卡片V2 - INS风格 */
    .style-card-v2 {
      width: 160px;
      flex-shrink: 0;
      background: var(--bg-primary);
      border: 1.5px solid var(--border-color);
      border-radius: 16px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .style-card-v2:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: var(--text-primary);
    }

    [data-theme='dark'] .style-card-v2:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .style-card-v2.active {
      border-color: var(--text-primary);
      background: var(--bg-secondary);
    }

    .style-card-v2.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--text-primary);
    }

    /* 卡片头部 */
    .card-header-v2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      height: 20px;
    }

    .card-icon-v2 {
      width: 20px;
      height: 20px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .card-icon-v2 svg {
      width: 100%;
      height: 100%;
    }

    /* 勾选标记 */
    .card-check-v2 {
      width: 16px;
      height: 16px;
      border: 1.5px solid var(--border-color);
      border-radius: 50%;
      position: relative;
      transition: all 0.3s ease;
      flex-shrink: 0;
    }

    .style-card-v2.active .card-check-v2 {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .style-card-v2.active .card-check-v2::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 6px;
      width: 3px;
      height: 7px;
      border: solid var(--bg-primary);
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg);
    }

    /* 卡片预览区 */
    .card-preview-v2 {
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      background: var(--bg-secondary);
      border-radius: 12px;
      margin-bottom: 10px;
      flex: 1;
    }

    /* 卡片底部信息 */
    .card-footer-v2 {
      display: flex;
      flex-direction: column;
      gap: 2px;
      height: 36px;
    }

    .card-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      line-height: 1.2;
    }

    .card-desc {
      font-size: 10px;
      color: var(--text-tertiary);
      line-height: 1.3;
    }

    /* ==================== 样式1：信纸邮件风格 ==================== */
    .indicator-letter {
      position: relative;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      clip-path: polygon(
        0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
      );
      padding: 16px 20px;
      width: 100%;
      max-width: 280px;
      box-shadow: 0 4px 12px var(--shadow);
    }

    .letter-lines {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: repeating-linear-gradient(
        transparent,
        transparent 23px,
        var(--border-color) 23px,
        var(--border-color) 24px
      );
      opacity: 0.3;
      pointer-events: none;
    }

    .letter-stamp {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      border: 2px dashed var(--border-color);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      color: var(--text-tertiary);
      transform: rotate(12deg);
    }

    .letter-content {
      position: relative;
      z-index: 1;
      font-family: 'Courier New', monospace;
      font-size: 15px;
      font-weight: 500;
      color: var(--text-primary);
      line-height: 24px;
    }

    .letter-value {
      font-weight: 700;
      font-size: 18px;
    }

    /* ==================== 样式2：博客卡片风格 ==================== */
    .indicator-blog {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-left: 4px solid var(--text-primary);
      padding: 16px 20px;
      width: 100%;
      max-width: 280px;
      position: relative;
      box-shadow: 0 2px 8px var(--shadow);
      clip-path: polygon(
        0 0, calc(100% - 12px) 0, 100% 12px,
        100% 100%, 0 100%
      );
    }

    .blog-date {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 8px;
    }

    .blog-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 4px;
      letter-spacing: 0.3px;
    }

    .blog-value {
      font-size: 28px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -1px;
      line-height: 1;
    }

    .blog-meta {
      margin-top: 8px;
      font-size: 10px;
      color: var(--text-tertiary);
      display: flex;
      gap: 8px;
    }

    .blog-meta span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .blog-meta span::before {
      content: '•';
    }

    /* ==================== 样式3：徽章标签风格 ==================== */
    .indicator-badge {
      display: inline-flex;
      height: 32px;
      overflow: hidden;
      box-shadow: 0 2px 8px var(--shadow);
    }

    .badge-left {
      background: var(--text-primary);
      color: var(--bg-primary);
      padding: 0 12px;
      display: flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
    }

    .badge-right {
      background: var(--bg-primary);
      border: 1px solid var(--text-primary);
      border-left: none;
      color: var(--text-primary);
      padding: 0 16px 0 12px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      font-family: 'Courier New', monospace;
      letter-spacing: 1px;
    }

    .badge-right::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--border-color);
    }

    /* ==================== 样式5：星轨环绕风格 ==================== */
    .indicator-stars {
      position: relative;
      width: 140px;
      height: 140px;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      box-shadow: 0 4px 12px var(--shadow);
    }

    .stars-orbit {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px dashed var(--border-color);
      border-radius: 50%;
      animation: rotate 10s linear infinite;
    }

    .star {
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--text-primary);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: twinkle 2s ease-in-out infinite;
    }

    .star:nth-child(1) {
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: 0s;
    }

    .star:nth-child(2) {
      top: 50%;
      right: 10%;
      transform: translateY(-50%);
      animation-delay: 0.5s;
    }

    .star:nth-child(3) {
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: 1s;
    }

    .star:nth-child(4) {
      top: 50%;
      left: 10%;
      transform: translateY(-50%);
      animation-delay: 1.5s;
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.3; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    .stars-content {
      position: relative;
      z-index: 2;
      text-align: center;
      font-weight: 700;
      color: var(--text-primary);
    }

    .stars-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }

    .stars-value {
      font-size: 32px;
      letter-spacing: -1px;
    }

    /* ==================== 响应式 ==================== */
    @media (max-width: 480px) {
      .style-demo-card {
        padding: 20px 16px;
      }

      .indicator-preview-area {
        padding: 24px 12px;
      }
    }

    /* ==================== 好感度标识 Header 版本（聊天顶栏专用，42px高度）==================== */

    /* 容器样式 */
    .chat-affection-indicator {
      flex-shrink: 0;
    }

    /* ========== 样式1：信纸邮件风格 Header 版本 ========== */
    .indicator-letter-header {
      position: relative;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      clip-path: polygon(
        0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px,
        100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px)
      );
      padding: 8px 12px;
      height: 42px;
      min-width: 90px;
      box-shadow: 0 2px 6px var(--shadow);
      display: flex;
      align-items: center;
    }

    .letter-lines-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: repeating-linear-gradient(
        transparent,
        transparent 12px,
        var(--border-color) 12px,
        var(--border-color) 13px
      );
      opacity: 0.3;
      pointer-events: none;
    }

    .letter-stamp-header {
      position: absolute;
      top: 4px;
      right: 6px;
      width: 16px;
      height: 16px;
      border: 1px dashed var(--border-color);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 600;
      color: var(--text-tertiary);
      transform: rotate(12deg);
    }

    .letter-content-header {
      position: relative;
      z-index: 1;
      font-family: 'Courier New', monospace;
      font-size: 9px;
      font-weight: 500;
      color: var(--text-primary);
      line-height: 1.3;
    }

    .letter-value-header {
      font-weight: 700;
      font-size: 11px;
    }

    /* ========== 样式2：博客卡片风格 Header 版本 ========== */
    .indicator-blog-header {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-left: 3px solid var(--text-primary);
      padding: 4px 8px;
      height: 42px;
      min-width: 100px;
      position: relative;
      box-shadow: 0 2px 6px var(--shadow);
      clip-path: polygon(
        0 0, calc(100% - 8px) 0, 100% 8px,
        100% 100%, 0 100%
      );
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .blog-date-header {
      font-size: 6px;
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 1px;
      line-height: 1;
    }

    .blog-title-header {
      font-size: 7px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 1px;
      letter-spacing: 0.2px;
      line-height: 1;
    }

    .blog-value-header {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.5px;
      line-height: 1;
    }

    .blog-meta-header {
      margin-top: 2px;
      font-size: 5px;
      color: var(--text-tertiary);
      display: flex;
      gap: 3px;
      line-height: 1;
    }

    .blog-meta-header span {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .blog-meta-header span::before {
      content: '•';
    }

    /* ========== 样式3：徽章标签风格 Header 版本 ========== */
    .indicator-badge-header {
      display: inline-flex;
      height: 42px;
      overflow: hidden;
      box-shadow: 0 2px 6px var(--shadow);
    }

    .badge-left-header {
      background: var(--text-primary);
      color: var(--bg-primary);
      padding: 0 10px;
      display: flex;
      align-items: center;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%);
    }

    .badge-right-header {
      background: var(--bg-primary);
      border: 1px solid var(--text-primary);
      border-left: none;
      color: var(--text-primary);
      padding: 0 12px 0 10px;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Courier New', monospace;
    }

    /* ========== 样式4：星轨环绕风格 Header 版本 ========== */
    .indicator-stars-header {
      position: relative;
      width: 42px;
      height: 42px;
      background: var(--bg-primary);
      border: 2px solid var(--border-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      box-shadow: 0 2px 6px var(--shadow);
      flex-shrink: 0;
    }

    .stars-orbit-header {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px dashed var(--border-color);
      border-radius: 50%;
      animation: rotate 10s linear infinite;
    }

    .star-header {
      position: absolute;
      width: 5px;
      height: 5px;
      background: var(--text-primary);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: twinkle 2s ease-in-out infinite;
    }

    .star-header:nth-child(1) {
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: 0s;
    }

    .star-header:nth-child(2) {
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: 0.5s;
    }

    .star-header:nth-child(3) {
      left: 2px;
      top: 50%;
      transform: translateY(-50%);
      animation-delay: 1s;
    }

    .star-header:nth-child(4) {
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      animation-delay: 1.5s;
    }

    .stars-content-header {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0px;
    }

    .stars-label-header {
      font-size: 6px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .stars-value-header {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.5px;
      line-height: 1;
    }

    /* ==================== 自定义好感度标识样式 ==================== */

    /* 样式选择卡片 - Custom */
    .indicator-custom {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-secondary);
      border: 2px dashed var(--border-color);
      border-radius: 12px;
      transition: all 0.3s ease;
    }

    .indicator-custom img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 10px;
    }

    .indicator-custom:hover {
      border-color: var(--accent-color);
      background: var(--bg-tertiary);
    }

    /* 上传区域样式 */
    .custom-upload-section {
      margin-top: 20px;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .custom-upload-card {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 20px;
      box-shadow: var(--shadow-md);
    }

    .upload-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .upload-header svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-secondary);
      fill: none;
    }

    .upload-preview {
      width: 100%;
      aspect-ratio: 1;
      max-height: 200px;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 16px;
      position: relative;
    }

    .upload-placeholder {
      width: 100%;
      height: 100%;
      background: var(--bg-secondary);
      border: 2px dashed var(--border-color);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .upload-placeholder:hover {
      border-color: var(--accent-color);
      background: var(--bg-tertiary);
    }

    .upload-placeholder:active {
      transform: scale(0.98);
    }

    .upload-placeholder svg {
      width: 32px;
      height: 32px;
      stroke: var(--text-tertiary);
      fill: none;
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }

    .upload-placeholder:hover svg {
      stroke: var(--text-primary);
      transform: translateY(-2px);
    }

    .placeholder-text {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .placeholder-hint {
      font-size: 11px;
      color: var(--text-tertiary);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.3px;
    }

    .upload-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: var(--bg-secondary);
      border-radius: 12px;
    }

    .upload-actions {
      display: flex;
      gap: 10px;
    }

    .upload-action-btn {
      flex: 1;
      padding: 10px 14px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: 'Inter', sans-serif;
    }

    .upload-action-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
    }

    .upload-action-btn:hover {
      background: var(--bg-tertiary);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .upload-action-btn:active {
      transform: translateY(0);
    }

    .upload-action-btn.primary {
      background: var(--accent-color);
      color: var(--bg-primary);
      border-color: var(--accent-color);
    }

    .upload-action-btn.primary:hover {
      background: var(--text-primary);
      border-color: var(--text-primary);
    }

    .upload-action-btn.secondary {
      background: transparent;
      color: var(--text-secondary);
    }

    .upload-action-btn.secondary:hover {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

    /* ========== 聊天顶栏自定义标识 Header 版本 ========== */
    .indicator-custom-header {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: all 0.2s ease;
      flex-shrink: 0;
      border-radius: 6px;
      overflow: hidden;
    }

    .indicator-custom-header:hover {
      transform: scale(1.05);
    }

    .indicator-custom-header:active {
      transform: scale(0.95);
    }

    .indicator-custom-header img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* ========== 自定义好感度 Tooltip ========== */
    .custom-affection-tooltip {
      position: absolute;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 10000;
      transform: translateX(-50%);
      min-width: 140px;
      width: max-content;
      max-width: 145px;
    }

    [data-theme='dark'] .custom-affection-tooltip {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    }

    .custom-affection-tooltip.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* 小三角 - 固定在tooltip正中间 */
    .custom-affection-tooltip::before {
      content: '';
      position: absolute;
      top: -5px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 10px;
      height: 10px;
      background: var(--bg-primary);
      border-left: 1px solid var(--border-color);
      border-top: 1px solid var(--border-color);
    }

    .custom-tooltip-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    /* 单栏模式（默认） */
    .custom-tooltip-single {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .custom-tooltip-label {
      font-size: 9px;
      color: var(--text-tertiary);
      letter-spacing: 0.8px;
      text-transform: uppercase;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
    }

    .custom-tooltip-value {
      font-size: 24px;
      font-weight: 700;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      line-height: 1;
      letter-spacing: -0.5px;
    }

    .custom-tooltip-bar {
      width: 100%;
      height: 4px;
      background: var(--bg-tertiary);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 2px;
    }

    .custom-tooltip-bar-fill {
      height: 100%;
      background: var(--accent-color);
      border-radius: 2px;
      transition: width 0.5s ease;
    }

    /* 双栏模式样式（逆攻略，紧凑排列） */
    .custom-tooltip-dual {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .dual-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .dual-divider {
      display: none;
    }

    .dual-label {
      font-size: 7px;
      color: var(--text-tertiary);
      letter-spacing: 0.3px;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
    }

    .dual-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      line-height: 1;
      letter-spacing: -0.5px;
    }

    .dual-bar {
      width: 100%;
      height: 3px;
      background: var(--bg-tertiary);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 1px;
    }

    .dual-bar-fill {
      height: 100%;
      background: var(--accent-color);
      border-radius: 2px;
      transition: width 0.5s ease;
    }

    /* 响应式 */
    @media (max-width: 480px) {
      .custom-upload-card {
        padding: 16px;
      }

      .upload-preview {
        max-height: 180px;
      }

      .upload-action-btn {
        padding: 9px 12px;
        font-size: 11px;
      }
    }

    /* 悄悄话和原因样式 - 优化版 */
    .custom-tooltip-whisper {
      margin-top: 12px;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border-radius: 10px;
      border: 1px solid var(--border-color);
      display: flex;
      align-items: flex-start;
      gap: 8px;
      animation: whisperFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    [data-theme='dark'] .custom-tooltip-whisper {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    @keyframes whisperFadeIn {
      from {
        opacity: 0;
        transform: translateY(-5px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .whisper-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }

    /* 像素星星 */
    .pixel-star {
      width: 12px;
      height: 12px;
      position: relative;
      background: var(--text-primary);
      clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
      );
      animation: starTwinkle 2s ease-in-out infinite;
      opacity: 0.8;
    }

    @keyframes starTwinkle {
      0%, 100% {
        opacity: 0.6;
        transform: scale(0.9);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
    }

    .whisper-text {
      flex: 1;
      font-size: 10px;
      line-height: 1.5;
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.2px;
    }

    .custom-tooltip-reason {
      margin-top: 10px;
      padding: 8px 0 0 0;
      border-top: 1px dashed var(--border-color);
      animation: reasonFadeIn 0.4s ease;
    }

    @keyframes reasonFadeIn {
      from {
        opacity: 0;
        transform: translateY(-3px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reason-text {
      font-size: 9px;
      line-height: 1.4;
      color: var(--text-tertiary);
      text-align: center;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.3px;
    }

    /* 所有好感度标识的通用点击效果 */
    .indicator-letter-header,
    .indicator-blog-header,
    .indicator-badge-header,
    .indicator-stars-header,
    .indicator-note-header {
      transition: all 0.2s ease;
    }

    .indicator-letter-header:hover,
    .indicator-blog-header:hover,
    .indicator-badge-header:hover,
    .indicator-stars-header:hover,
    .indicator-note-header:hover {
      transform: scale(1.05);
      filter: brightness(1.1);
    }

    .indicator-letter-header:active,
    .indicator-blog-header:active,
    .indicator-badge-header:active,
    .indicator-stars-header:active,
    .indicator-note-header:active {
      transform: scale(0.95);
    }

    /* ==================== 好感度提醒样式 ==================== */
    /* 好感度提醒容器 */
    .affection-reminder-container {
      display: flex;
      justify-content: flex-start;
      padding: 2px 0 8px 0;
      margin-top: -4px;
      margin-left: 0;
    }

    .affection-reminder {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 0;
      padding: 4px 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      animation: affectionReminderFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      vertical-align: middle;
      cursor: pointer;
      max-width: 200px;
    }

    .affection-reminder:hover {
      background: var(--bg-tertiary);
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    [data-theme='dark'] .affection-reminder:hover {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    /* 展开状态 */
    .affection-reminder.expanded {
      max-width: 90%;
      padding: 6px 12px;
    }

    .affection-reminder.expanded .affection-reminder-text {
      max-width: none;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      word-break: break-word;
      line-height: 1.5;
    }

    @keyframes affectionReminderFadeIn {
      from {
        opacity: 0;
        transform: translateX(-5px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    /* 像素爱心 */
    .affection-reminder-heart {
      width: 10px;
      height: 10px;
      position: relative;
      flex-shrink: 0;
    }

    .pixel-heart {
      width: 10px;
      height: 10px;
      background: var(--text-primary);
      clip-path: polygon(
        50% 100%,
        0% 35%,
        0% 15%,
        15% 0%,
        35% 0%,
        50% 15%,
        65% 0%,
        85% 0%,
        100% 15%,
        100% 35%
      );
      animation: heartBeat 1.5s ease-in-out infinite;
      opacity: 0.85;
    }

    @keyframes heartBeat {
      0%, 100% {
        transform: scale(1);
        opacity: 0.85;
      }
      10% {
        transform: scale(1.15);
        opacity: 1;
      }
      20% {
        transform: scale(1);
        opacity: 0.85;
      }
    }

    /* 提醒文字 */
    .affection-reminder-text {
      font-size: 10px;
      line-height: 1.3;
      color: var(--text-secondary);
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.2px;
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.25s ease;
    }

    /* 移动端优化 */
    @media (max-width: 480px) {
      .affection-reminder {
        padding: 2px 6px;
        gap: 3px;
      }

      .affection-reminder-heart {
        width: 9px;
        height: 9px;
      }

      .pixel-heart {
        width: 9px;
        height: 9px;
      }

      .affection-reminder-text {
        font-size: 8px;
        max-width: 100px;
      }
    }

    /* ==========================================
       HTML卡片系统 - AI自由创作的富媒体内容
       ========================================== */

    .html-card-container {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      margin: 8px 0;
    }

    .chat-message-group.user .html-card-container {
      justify-content: flex-end;
    }

    .html-card-container > * {
      max-width: 280px;
    }

    .html-card-container .html-card-iframe {
      width: 100%;
      border: 0;
      border-radius: 16px;
      overflow: hidden;
      display: block;
      background: transparent;
      height: 360px; /* initial; will auto-resize via postMessage */
    }

    .html-card-container img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ==========================================
       一起听卡片 - 用户消息类型
       ========================================== */

    .together-card-container {
      --bg-color: #f2f2f2;
      --text-color: #000000;
      --card-bg: #ffffff;
      --card-border: #e0e0e0;
      --secondary-text: #888888;
      --accent-color: #000000;
      --inverse-bg: #000000;
      --inverse-text: #ffffff;
      --font-family: 'Helvetica Neue', Helvetica, sans-serif;
      --serif-font: 'Times New Roman', serif;
      width: fit-content;
      max-width: 75%;
      display: inline-flex;
      justify-content: flex-start;
      margin: 8px 0;
      color: var(--text-color);
      font-family: var(--font-family);
      line-height: normal;
      -webkit-tap-highlight-color: transparent;
    }

    .together-card-container,
    .together-card-container * {
      box-sizing: border-box;
    }

    .chat-message-group.user .together-card-container {
      justify-content: flex-end;
      align-self: flex-end;
    }

    .chat-message-group.character .together-card-container {
      align-self: flex-start;
    }

    /* 一起听卡片时间戳对齐（避免被卡片撑宽导致左移） */
    .chat-message-group.user .together-card-container + .chat-message-timestamp {
      align-self: flex-end;
      width: fit-content;
    }

    .chat-message-group.character .together-card-container + .chat-message-timestamp {
      align-self: flex-start;
      width: fit-content;
    }

    [data-theme='dark'] .together-card-container {
      --bg-color: #0a0a0a;
      --text-color: #ffffff;
      --card-bg: #141414;
      --card-border: #333333;
      --secondary-text: #666666;
      --accent-color: #ffffff;
      --inverse-bg: #ffffff;
      --inverse-text: #000000;
    }

    [data-theme='night'] .together-card-container {
      --bg-color: #0a0a0a;
      --text-color: #ffffff;
      --card-bg: #141414;
      --card-border: #333333;
      --secondary-text: #666666;
      --accent-color: #ffffff;
      --inverse-bg: #ffffff;
      --inverse-text: #000000;
    }

    .together-card-container .freq-card {
      width: 160px;
      height: 160px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 15px;
      transition: transform 0.2s, box-shadow 0.3s;
      cursor: pointer;
      overflow: hidden;
      color: var(--text-color);
      font-family: var(--font-family);
    }

    .together-card-container .card-meta {
      font-family: var(--serif-font);
      font-size: 14px;
      font-style: italic;
      font-weight: 600;
      z-index: 2;
    }

    .together-card-container .card-meta span {
      display: block;
      font-size: 9px;
      font-family: var(--font-family);
      font-style: normal;
      font-weight: 400;
      color: var(--secondary-text);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .together-card-container .card-status {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 2px;
      border-top: 1px solid var(--card-border);
      padding-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      width: 100%;
      height: auto;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .together-card-container .card-broadcast .center-visual {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .together-card-container .radar-star {
      width: 40px;
      height: 40px;
      border: 1px dashed var(--secondary-text);
      border-radius: 50%;
      animation: spin 10s linear infinite;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .together-card-container .radar-star::after {
      content: '✦';
      font-size: 14px;
      color: var(--text-color);
      animation: spin-rev 10s linear infinite;
    }

    .together-card-container .ripple {
      position: absolute;
      border: 1px solid var(--text-color);
      border-radius: 50%;
      opacity: 0;
      width: 10px;
      height: 10px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: ripple-anim 3s infinite cubic-bezier(0, 0.2, 0.8, 1) !important;
      pointer-events: none;
      will-change: transform, opacity;
      background: transparent !important;
      box-shadow: none !important;
      filter: none !important;
      mix-blend-mode: normal;
    }

    .together-card-container .ripple:nth-child(2) {
      animation-delay: 1.5s;
    }

    .together-card-container .card-invite {
      border-color: var(--text-color);
    }

    .together-card-container .card-invite:hover {
      transform: scale(1.02);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .together-card-container .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border: 1px solid var(--text-color);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
    }

    .together-card-container .play-icon {
      width: 0;
      height: 0;
      border-left: 8px solid var(--text-color);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      margin-left: 2px;
    }

    .together-card-container .card-invite:hover .play-btn {
      background: var(--text-color);
    }

    .together-card-container .card-invite:hover .play-icon {
      border-left-color: var(--inverse-text);
    }

    .together-card-container .card-synced {
      background: var(--inverse-bg);
      color: var(--inverse-text);
      border-color: var(--inverse-bg);
    }

    .together-card-container .card-synced .card-meta span,
    .together-card-container .card-synced .card-status {
      color: rgba(128, 128, 128, 0.8);
      border-color: rgba(255, 255, 255, 0.2);
    }

    [data-theme='dark'] .together-card-container .card-synced .card-meta span,
    [data-theme='dark'] .together-card-container .card-synced .card-status {
      color: rgba(200, 200, 200, 0.8);
      border-color: rgba(255, 255, 255, 0.2);
    }

    [data-theme='night'] .together-card-container .card-synced .card-meta span,
    [data-theme='night'] .together-card-container .card-synced .card-status {
      color: rgba(200, 200, 200, 0.8);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .together-card-container .synced-visual {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0.3;
    }

    .together-card-container .wave-container {
      display: flex;
      gap: 3px;
      align-items: center;
      height: 40px;
    }

    .together-card-container .wave-bar {
      width: 2px;
      background: var(--inverse-text);
      animation: jump 1s ease-in-out infinite;
    }

    .together-card-container .connection-line {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--inverse-text);
      opacity: 0.1;
    }

    /* 一起听卡片静态化（结束/拒绝/过期） */
    .together-card-container.is-static .ripple,
    .together-card-container.is-static .radar-star,
    .together-card-container.is-static .wave-bar {
      animation: none !important;
    }

    .together-card-container.is-static .synced-visual,
    .together-card-container.is-static .center-visual {
      display: none;
    }

    .together-card-container.is-static .freq-card {
      transition: none;
    }

    @keyframes spin { 100% { transform: rotate(360deg); } }
    @keyframes spin-rev { 100% { transform: rotate(-360deg); } }
    @keyframes ripple-anim {
      0% { width: 40px; height: 40px; opacity: 0.5; }
      100% { width: 140px; height: 140px; opacity: 0; }
    }
    @keyframes jump {
      0%, 100% { height: 10%; }
      50% { height: 100%; }
    }

/* ==================== 角色功能卡片 - 音乐播放器风格 ==================== */

/* 背景遮罩 - iOS灵动岛同步动画 */
.char-profile-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.28, 0.84, 0.42, 1);
}

.char-profile-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* 卡片容器 - iOS灵动岛原生spring动画 */
.char-profile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  z-index: 2000;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
  transform: translateY(-100%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  /* iOS原生spring动画：快速启动 + 流畅减速 + 精准停止 */
  transition: transform 0.45s cubic-bezier(0.28, 0.84, 0.42, 1),
              opacity 0.45s cubic-bezier(0.28, 0.84, 0.42, 1);
  will-change: transform, opacity;
  transform-origin: top center;
}

.char-profile-overlay.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Playlist模式下增加高度 */
.char-profile-overlay.show-playlist {
  height: 75%;
}

/* ==================== 音乐播放器CSS - 100%复制 ==================== */

/* ===== 视图切换 - iOS Dynamic Island 动画 ===== */
.music-player-view,
.playlist-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.28, 0.84, 0.42, 1),
              opacity 0.5s cubic-bezier(0.28, 0.84, 0.42, 1);
  will-change: transform, opacity;
}

/* Music Player默认显示 */
.music-player-view {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Music Player切换到Playlist时隐藏 */
.char-profile-overlay.show-playlist .music-player-view {
  transform: translateY(-15%) scale(0.92);
  opacity: 0;
  pointer-events: none;
}

/* Playlist默认隐藏 */
.playlist-view {
  transform: translateY(15%) scale(0.92);
}

/* Playlist激活显示 */
.char-profile-overlay.show-playlist .playlist-view {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

    /* ===== Now Playing Widget - Horizontal layout like the image ===== */
    .now-playing-widget {
      background: linear-gradient(145deg, #ffffff 0%, #f5f5f7 100%);
      border-radius: 24px;
      padding: 40px 20px 20px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    /* Dark mode styles */
    [data-theme='dark'] .now-playing-widget {
      background: linear-gradient(145deg, #2a2a2c 0%, #1a1a1c 100%);
      box-shadow: none;
    }

    /* Blur background effect */
    .now-playing-widget::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 50%, rgba(200, 200, 220, 0.2) 0%, transparent 50%);
      pointer-events: none;
    }

    [data-theme='dark'] .now-playing-widget::before {
      background: radial-gradient(circle at 30% 50%, rgba(100, 100, 120, 0.15) 0%, transparent 50%);
    }

    /* ===== Main player layout - horizontal symmetric ===== */
    .player-layout {
      display: flex;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    /* Album Cover - left side */
    .album-section {
      flex-shrink: 0;
    }

    .album-cover {
      width: 130px;
      height: 170px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      background: #000;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    }

    [data-theme='dark'] .album-cover {
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }

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

    /* Player controls section - right side */
    .player-controls-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
    }

    /* Device indicator - headphone icon + Heavenly */
    .device-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 2px;
    }

    .device-indicator svg {
      width: 12px;
      height: 12px;
      fill: currentColor;
    }

    /* Song title - Cigarettes After Sex — Heavenly */
    .song-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 6px;
    }

    /* Progress bar section */
    .progress-section {
      margin-bottom: 4px;
    }

    .progress-bar-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .progress-time {
      font-size: 10px;
      color: var(--text-tertiary);
      min-width: 26px;
      font-variant-numeric: tabular-nums;
    }

    .progress-time.end {
      text-align: right;
    }

    .progress-track {
      flex: 1;
      height: 3px;
      background: var(--progress-bg);
      border-radius: 2px;
      position: relative;
      cursor: pointer;
    }

    .progress-filled {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 20%;
      background: var(--progress-fill);
      border-radius: 2px;
    }

    /* Current lyric line - scrolling marquee */
    .current-lyric-line {
      font-size: 10px;
      color: var(--text-secondary);
      margin-top: 4px;
      font-style: italic;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
    }

    .current-lyric-line .lyric-text {
      display: inline-block;
      animation: scrollLyric 8s linear infinite;
      padding-right: 50px;
    }

    @keyframes scrollLyric {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Playback control buttons - smaller, inside right section */
    .playback-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 6px;
    }

    .ctrl-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-primary);
      opacity: 0.9;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .ctrl-btn:active {
      transform: scale(0.85);
      opacity: 0.6;
    }

    .ctrl-btn svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }

    .ctrl-btn.play-btn svg {
      width: 28px;
      height: 28px;
    }

    .ctrl-btn.small-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Extended lyrics section - iOS style with smooth scroll */
    .extended-lyrics {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(0,0,0,0.08);
      height: 78px;
      overflow: hidden;
      position: relative;
    }

    [data-theme='dark'] .extended-lyrics {
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .lyrics-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      transform: translateY(0);
      transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      perspective: 1000px;
    }

    .lyrics-line {
      font-size: 12px;
      color: var(--text-tertiary);
      line-height: 18px;
      height: 18px;
      text-align: right;
      opacity: 0.4;
      flex-shrink: 0;
      transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
      transform: scale(1);
      transform-origin: right center;
    }

    .lyrics-line.active {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      opacity: 1;
      text-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
      transform: scale(1.02);
    }

    [data-theme='dark'] .lyrics-line.active {
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
    }

    /* Volume slider */
    .volume-slider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
      padding-top: 12px;
    }

    .vol-icon {
      width: 16px;
      height: 16px;
      color: var(--text-tertiary);
    }

    .vol-icon svg {
      width: 100%;
      height: 100%;
      fill: currentColor;
    }

    .vol-track {
      flex: 1;
      height: 4px;
      background: var(--progress-bg);
      border-radius: 2px;
      position: relative;
      cursor: pointer;
      touch-action: none;
    }

    .vol-filled {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%;
      background: var(--progress-fill);
      border-radius: 2px;
      transition: width 0.18s ease;
    }

    .vol-filled::after {
      content: '';
      position: absolute;
      right: -4px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-color);
      opacity: 0.35;
      transform: translateY(-50%);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .volume-slider.is-adjusting .vol-filled {
      transition: width 0.05s linear;
    }

    .volume-slider.is-adjusting .vol-filled::after {
      opacity: 0.7;
      transform: translateY(-50%) scale(1.15);
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
    }

    [data-theme='dark'] .volume-slider.is-adjusting .vol-filled::after {
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
    }

    .volume-slider.is-muted .vol-filled::after {
      opacity: 0;
    }

/* ===== Playlist Section - 优化后的设计 ===== */
.playlist-section {
  margin: 20px;
  background: var(--bg-card, rgba(255, 255, 255, 0.5));
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 默认深色主题背景 - 会被动态颜色覆盖 */
[data-theme='dark'] .playlist-section {
  background: rgba(42, 42, 44, 0.6);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* 添加微妙的光晕效果 */
.playlist-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}

.playlist-section:hover::before {
  opacity: 1;
}

/* 确保内容在光晕之上 */
.playlist-section > * {
  position: relative;
  z-index: 1;
}

.playlist-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme='dark'] .playlist-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.playlist-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.playlist-thumb:active {
  transform: scale(0.95);
}

.playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.playlist-thumb:hover img {
  transform: scale(1.1);
}

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

.playlist-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #000);
  margin-bottom: 3px;
  letter-spacing: -0.2px;
}

.playlist-meta {
  font-size: 13px;
  color: var(--text-secondary, #666);
  font-weight: 500;
}

.playlist-play-btn {
  width: 40px;
  height: 40px;
  background: var(--text-primary, #000);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.playlist-play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.playlist-play-btn:active {
  transform: scale(0.95);
}

.playlist-play-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--bg-primary, #fff);
  margin-left: 2px;
}

/* Album grid - 4 columns */
.album-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.album-thumb {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.album-thumb:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.album-thumb:active {
  transform: scale(0.96);
}

.album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.album-thumb:hover img {
  transform: scale(1.05);
}

.album-thumb-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.2;
}

/* ==================== 专辑编辑按钮 - 整合到Playlist内 ==================== */

/* 编辑按钮区域 - 可折叠 */
.album-edit-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.28, 0.84, 0.42, 1),
              opacity 0.4s cubic-bezier(0.28, 0.84, 0.42, 1),
              margin-top 0.4s cubic-bezier(0.28, 0.84, 0.42, 1);
}

/* 展开状态 */
.album-edit-actions.active {
  max-height: 80px;
  opacity: 1;
  margin-top: 16px;
}

/* 单个编辑项 */
.edit-action-item {
  display: flex;
  gap: 4px;
  justify-content: center;
}

/* 编辑按钮 */
.edit-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--text-primary, #000);
  color: var(--bg-primary, #fff);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.edit-action-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.edit-action-btn:active {
  transform: scale(0.92);
}

.edit-action-btn svg {
  width: 14px;
  height: 14px;
}

[data-theme='dark'] .edit-action-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
}

/* ==================== End 专辑编辑按钮 ==================== */


/* ==================== End 角色功能卡片 ==================== */

/* ==================== 日记本系统 - 翻页界面 ==================== */

/* 日记本Overlay容器 */
.diary-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-secondary, #fafafa);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-top: max(
    calc(16px + env(safe-area-inset-top, 0px)),
    calc(16px + env(safe-area-inset-top, 0px) + var(--custom-top-offset))
  );
  overflow: hidden;
  /* 动画：初始隐藏 */
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.diary-overlay.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* 日记本容器 */
.diary-wrap {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  perspective: 2000px;
}

.diary-book {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.diary-book.diary-rendering {
  visibility: hidden;
}

.diary-book.diary-rendering .diary-page {
  transition: none !important;
}

/* 页面基础 */
.diary-page {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center;
}

.diary-page.flipped {
  transform: rotateY(-180deg);
}

/* 🔥 懒加载占位符样式 */
.diary-page.diary-lazy {
  background: var(--diary-bg, #f5f1e8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.diary-page.diary-lazy::after {
  content: '加载中...';
  font-size: 14px;
  color: var(--text-secondary, #999);
  opacity: 0.5;
}

.diary-page-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
}

/* 书脊 */
.diary-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.04) 50%, rgba(255,255,255,0.2) 100%);
  z-index: 10;
  pointer-events: none;
}

.diary-spine::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--border-color, rgba(0,0,0,0.08));
}

.diary-spine-inner {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, transparent 50%, rgba(255,255,255,0.08) 100%);
  border-right: 1px solid var(--border-color, rgba(0,0,0,0.05));
}

/* 装订孔 */
.diary-holes {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 45px;
  z-index: 11;
}

.diary-hole {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bg-secondary, #fafafa);
  border: 1px solid var(--border-color, #e0e0e0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}

/* 封面 */
.diary-cover .diary-page-face {
  background: var(--diary-cover);
  border-radius: 6px 20px 20px 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.diary-cover-inner {
  padding: 18px 18px 18px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 封面装饰 */
.diary-cover-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.diary-star-deco {
  position: absolute;
  background: var(--diary-cover-star);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: diary-twinkle 2.5s ease-in-out infinite;
}

.diary-star-deco:nth-child(1) { width: 5px; height: 5px; top: 10%; left: 12%; }
.diary-star-deco:nth-child(2) { width: 4px; height: 4px; top: 18%; right: 10%; animation-delay: 0.6s; }
.diary-star-deco:nth-child(3) { width: 3px; height: 3px; top: 50%; left: 10%; animation-delay: 1.2s; }
.diary-star-deco:nth-child(4) { width: 4px; height: 4px; top: 62%; right: 14%; animation-delay: 0.3s; }
.diary-star-deco:nth-child(5) { width: 3px; height: 3px; top: 78%; left: 18%; animation-delay: 0.9s; }

@keyframes diary-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* 封面边框 */
.diary-cover-frame {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  left: 26px;
  border: 1px solid var(--diary-cover-border);
  border-radius: 3px 14px 14px 3px;
  pointer-events: none;
}

/* 返回按钮 */
.diary-back-btn {
  position: absolute;
  top: 14px;
  left: 32px;
  width: 28px;
  height: 28px;
  background: var(--diary-cover-accent);
  border: 1px solid var(--diary-cover-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 100;
}

.diary-back-btn:hover {
  background: var(--diary-cover-text);
  transform: scale(1.08);
}

.diary-back-btn:hover svg {
  stroke: var(--diary-cover);
}

.diary-back-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--diary-cover-text);
  fill: none;
  stroke-width: 2;
}

/* 浏览器风格头部 */
.diary-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  margin-top: 36px;
}

.diary-browser-dots {
  display: flex;
  gap: 3px;
}

.diary-browser-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--diary-cover-accent);
  border: 1px solid var(--diary-cover-border);
}

.diary-browser-url {
  flex: 1;
  height: 18px;
  background: var(--diary-cover-accent);
  border-radius: 9px;
  border: 1px solid var(--diary-cover-border);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 8px;
  color: var(--diary-cover-text-sub);
  font-family: 'JetBrains Mono', monospace;
}

/* 头像区 */
.diary-avatar-area {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.diary-avatar-wrap {
  width: 80px;
  height: 80px;
  position: relative;
}

.diary-avatar-frame {
  position: absolute;
  inset: -3px;
  border: 2px solid var(--diary-cover-text-sub);
  clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}

.diary-avatar-img {
  width: 100%;
  height: 100%;
  background: var(--diary-cover-accent);
  border: 1px solid var(--diary-cover-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--diary-cover-text-sub);
  overflow: hidden;
}

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

/* 角色名 */
.diary-char-name {
  text-align: center;
  margin: 8px 0;
}

.diary-char-name h2 {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  font-weight: 700;
  color: var(--diary-cover-text);
}

.diary-char-name span {
  font-size: 8px;
  color: var(--diary-cover-text-sub);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 2px;
}

/* 统计 */
.diary-stats-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
}

.diary-stat-box {
  background: var(--diary-cover-accent);
  border: 1px solid var(--diary-cover-border);
  padding: 8px 12px;
  text-align: center;
}

.diary-stat-box:nth-child(odd) { border-radius: 10px 3px 10px 3px; }
.diary-stat-box:nth-child(even) { border-radius: 3px 10px 3px 10px; }

.diary-stat-box strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--diary-cover-text);
  font-family: 'JetBrains Mono', monospace;
}

.diary-stat-box small {
  font-size: 7px;
  color: var(--diary-cover-text-sub);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 简介框 */
.diary-bio-box {
  background: var(--diary-cover-accent);
  border: 1px solid var(--diary-cover-border);
  border-radius: 6px;
  padding: 8px;
  flex: 1;
  margin: 8px 0;
  position: relative;
  overflow: hidden;
}

.diary-bio-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--diary-cover-border);
  margin-bottom: 5px;
}

.diary-bio-head svg {
  width: 12px;
  height: 12px;
  stroke: var(--diary-cover-text-sub);
  fill: none;
  stroke-width: 2;
}

.diary-bio-head span {
  font-size: 8px;
  color: var(--diary-cover-text-sub);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
}

.diary-bio-text {
  font-size: 9px;
  color: var(--diary-cover-text);
  line-height: 1.5;
  font-family: 'Noto Serif JP', serif;
  opacity: 0.8;
}

/* 封面底部 */
.diary-cover-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed var(--diary-cover-border);
  margin-top: auto;
}

.diary-cover-foot time {
  font-size: 7px;
  color: var(--diary-cover-text-sub);
  font-family: 'JetBrains Mono', monospace;
}

/* 翻页按钮 */
.diary-flip-btn {
  position: absolute;
  bottom: 14px;
  width: 32px;
  height: 32px;
  background: var(--diary-cover-accent);
  border: 1px solid var(--diary-cover-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 100;
}

.diary-flip-btn:hover {
  background: var(--diary-cover-text);
  transform: scale(1.08);
}

.diary-flip-btn:hover svg {
  stroke: var(--diary-cover);
}

.diary-flip-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--diary-cover-text);
  fill: none;
  stroke-width: 2;
}

.diary-flip-btn.next { right: 14px; }
.diary-flip-btn.prev { left: 32px; }

/* 内页翻页按钮 */
.diary-page-btn {
  position: absolute;
  bottom: 12px;
  width: 28px;
  height: 28px;
  background: var(--bg-tertiary, #f5f5f5);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 100;
}

.diary-page-btn:hover {
  background: var(--text-primary, #2a2a2a);
  transform: scale(1.08);
}

.diary-page-btn:hover svg {
  stroke: var(--bg-primary, #fff);
}

.diary-page-btn svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-primary, #000000);
  fill: none;
  stroke-width: 2;
}

.diary-page-btn.next { right: 12px; }
.diary-page-btn.prev { left: 24px; }

/* 内页通用 */
.diary-inner .diary-page-face {
  background: var(--diary-page);
  border-radius: 3px 18px 18px 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.diary-page-inner {
  padding: 14px 14px 14px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 横线背景 */
.diary-page-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 22px, rgba(0,0,0,0.05) 22px, rgba(0,0,0,0.05) 23px);
  pointer-events: none;
}

[data-theme="dark"] .diary-page-inner::before {
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 22px, rgba(255,255,255,0.04) 22px, rgba(255,255,255,0.04) 23px);
}

/* 目录页 */
.diary-idx-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--text-primary, #2a2a2a);
}

.diary-idx-head h3 {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #2a2a2a);
  display: flex;
  align-items: center;
  gap: 6px;
}

.diary-idx-head h3 svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-primary, #2a2a2a);
  fill: none;
  stroke-width: 2;
}

.diary-idx-head small {
  font-size: 8px;
  color: var(--text-tertiary, #999);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
}

/* 目录页右上角：笔记去重（简约黑白灰小纸条） */
.diary-idx-action-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 10px 8px 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 110;
  transform: rotate(-1.5deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  backdrop-filter: blur(8px);
}

/* 小纸条顶部的半透明胶带 */
.diary-idx-action-btn::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 6px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.diary-idx-action-btn:hover {
  transform: rotate(0deg) translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  border-color: rgba(0, 0, 0, 0.12);
}

.diary-idx-action-btn.armed {
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  animation: diary-note-pulse 1s ease-in-out infinite;
}

@keyframes diary-note-pulse {
  0%, 100% {
    transform: rotate(-1.5deg) scale(1);
    box-shadow:
      0 0 0 3px rgba(0, 0, 0, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  }
  50% {
    transform: rotate(-1.5deg) scale(1.04);
    box-shadow:
      0 0 0 4px rgba(0, 0, 0, 0.08),
      0 3px 8px rgba(0, 0, 0, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  }
}

.diary-idx-action-btn:active {
  transform: rotate(-1.5deg) scale(0.96);
}

.diary-note-heart {
  font-size: 16px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.65);
  transition: all 0.25s ease;
  user-select: none;
}

.diary-idx-action-btn:hover .diary-note-heart {
  color: rgba(0, 0, 0, 0.85);
  transform: scale(1.08);
}

.diary-idx-action-btn.armed .diary-note-heart {
  color: rgba(0, 0, 0, 0.75);
}

/* 手写字体文字 */
.diary-idx-action-btn .diary-note-text {
  font-family: 'Caveat', cursive;
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.diary-idx-action-btn:hover .diary-note-text {
  color: rgba(0, 0, 0, 0.9);
}

.diary-idx-action-btn.armed .diary-note-text {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
}

/* 暗黑模式适配 */
[data-theme="dark"] .diary-idx-action-btn {
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

[data-theme="dark"] .diary-idx-action-btn::before {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .diary-idx-action-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

[data-theme="dark"] .diary-idx-action-btn.armed {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

[data-theme="dark"] .diary-idx-action-btn .diary-note-text {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .diary-idx-action-btn:hover .diary-note-text {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .diary-idx-action-btn.armed .diary-note-text {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

[data-theme="dark"] .diary-note-heart {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .diary-idx-action-btn:hover .diary-note-heart {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .diary-idx-action-btn.armed .diary-note-heart {
  color: rgba(255, 255, 255, 0.85);
}

/* 目录列表 */
.diary-idx-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}

.diary-idx-list::-webkit-scrollbar { display: none; }

.diary-idx-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="dark"] .diary-idx-item {
  border-bottom-color: rgba(255,255,255,0.04);
}

.diary-idx-item:hover {
  padding-left: 4px;
  background: var(--bg-tertiary, #f5f5f5);
  margin: 0 -4px;
  padding-right: 4px;
  border-radius: 4px;
}

.diary-idx-date {
  width: 42px;
  font-size: 8px;
  color: var(--text-tertiary, #999);
  font-family: 'JetBrains Mono', monospace;
}

.diary-idx-title {
  flex: 1;
  font-size: 10px;
  color: var(--text-primary, #2a2a2a);
  font-family: 'Noto Serif JP', serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-idx-count {
  font-size: 7px;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255,250,205,0.92);
  color: var(--text-primary, #2a2a2a);
  margin-left: 6px;
}

[data-theme="dark"] .diary-idx-count {
  background: rgba(80,75,40,0.92);
}

.diary-idx-pg {
  width: 18px;
  text-align: right;
  font-size: 8px;
  color: var(--text-tertiary, #999);
  font-family: 'JetBrains Mono', monospace;
}

/* 空日记提示 */
.diary-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.diary-empty-hint svg {
  width: 48px;
  height: 48px;
  stroke: var(--text-tertiary, #999);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 16px;
  opacity: 0.5;
}

.diary-empty-hint p {
  font-size: 14px;
  color: var(--text-secondary, #666);
  margin-bottom: 8px;
  font-family: 'Noto Serif JP', serif;
}

.diary-empty-hint span {
  font-size: 11px;
  color: var(--text-tertiary, #999);
}

/* 页脚 */
.diary-page-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  margin-top: auto;
  border-top: 1px solid rgba(0,0,0,0.05);
}

[data-theme="dark"] .diary-page-foot {
  border-top-color: rgba(255,255,255,0.04);
}

.diary-page-num {
  font-size: 8px;
  color: var(--text-tertiary, #999);
  font-family: 'JetBrains Mono', monospace;
}

.diary-page-deco {
  display: flex;
  gap: 3px;
}

.diary-page-deco i {
  width: 3px;
  height: 3px;
  background: var(--text-tertiary, #999);
  opacity: 0.5;
}

.diary-page-deco i:nth-child(1) { border-radius: 50%; }
.diary-page-deco i:nth-child(2) { border-radius: 1px; }
.diary-page-deco i:nth-child(3) { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }

/* 响应式圆角 */
@media (min-width: 431px) {
  .diary-overlay {
    border-radius: 36px;
  }
}

/* 隐藏废弃的动态页面容器（不再使用，但HTML里还有这个div） */
#diaryDynamicPages {
  display: none;
}

/* ==================== 日记内容页面样式（仿 diary-preview.html） ==================== */

/* 日记内容页面容器 - 保持与目录页一致的padding */
.diary-content-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* 日期头部 - 仿 entry-head */
.diary-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--diary-line, rgba(0,0,0,0.05));
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .diary-entry-head {
  border-bottom-color: rgba(255,255,255,0.04);
}

.diary-entry-date {
  display: flex;
  flex-direction: column;
}

.diary-entry-date strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-secondary, #666);
  font-weight: 500;
}

.diary-entry-date small {
  font-size: 7px;
  color: var(--text-tertiary, #999);
}

.diary-entry-mood {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: var(--bg-tertiary, #f5f5f5);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  font-size: 7px;
  color: var(--text-secondary, #666);
}

[data-theme="dark"] .diary-entry-mood {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

/* 日记标题 - 仿 entry-title */
.diary-entry-title {
  font-family: 'Caveat', 'Noto Serif JP', cursive;
  font-size: 18px;
  font-weight: 600;
  color: var(--diary-ink-1, #000000);
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
  z-index: 1;
}

.diary-entry-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--diary-ink-1, #000000);
  opacity: 0.2;
  transform: skewX(-5deg);
}

[data-theme="dark"] .diary-entry-title {
  color: var(--diary-ink-1, #e0e0e0);
}

/* 日记正文容器 - 仿 entry-body */
.diary-entry-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}

.diary-entry-body::-webkit-scrollbar { display: none; }

/* 日记内容区域 */
.diary-entry-content {
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  line-height: 23px;
  color: var(--diary-ink-1, #000000);
}

.diary-entry-content.collapsible {
  position: relative;
}

.diary-entry-content.collapsible.collapsed {
  max-height: 360px;
  overflow: hidden;
}

.diary-entry-content.collapsible.collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--diary-page, #fdfcfa) 90%);
  pointer-events: none;
}

.diary-entry-toggle {
  margin: 10px auto 0;
  padding: 4px 12px;
  font-size: 9px;
  letter-spacing: 0.5px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.7);
  color: var(--diary-ink-2, #4a4a4a);
  cursor: pointer;
}

[data-theme="dark"] .diary-entry-content {
  color: var(--diary-ink-1, #e0e0e0);
}

[data-theme="dark"] .diary-entry-content.collapsible.collapsed::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--diary-page, #1a1a1a) 90%);
}

[data-theme="dark"] .diary-entry-toggle {
  border-color: rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: var(--diary-ink-2, #888888);
}

/* 时间标记 */
.diary-entry-content .time-mark {
  display: inline-block;
  font-size: 7px;
  color: var(--diary-ink-3, #7a7a7a);
  font-family: 'JetBrains Mono', monospace;
  margin: 8px 0 4px;
  padding: 1px 4px;
  background: var(--diary-line, rgba(0,0,0,0.05));
  border-radius: 2px;
}

/* ===== 便利贴笔记 - 仿 diary-preview.html ===== */
.diary-sticky {
  position: absolute;
  padding: 8px;
  font-size: 8px;
  line-height: 1.35;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  z-index: 50;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.diary-sticky:hover {
  transform: scale(1.04) !important;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.15);
  z-index: 51;
}

/* 便签拖动状态 */
.diary-sticky-dragging {
  opacity: 0.9;
  transform: scale(1.08) !important;
  box-shadow: 4px 8px 16px rgba(0,0,0,0.25) !important;
  z-index: 1000 !important;
  transition: none !important;
  cursor: grabbing !important;
}

/* 可拖动便签的光标提示 */
.diary-sticky[data-note-id] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.diary-sticky.s1 {
  background: rgba(255,250,205,0.92);
  border-left: 2px solid #d4b800;
}

.diary-sticky.s2 {
  background: rgba(255,228,235,0.92);
  border-left: 2px solid #c44569;
}

.diary-sticky.s3 {
  background: rgba(230,240,255,0.92);
  border-left: 2px solid #5588cc;
}

.diary-sticky.s4 {
  background: rgba(220,252,231,0.92);
  border-left: 2px solid #22c55e;
}

.diary-sticky.s5 {
  background: rgba(243,232,255,0.92);
  border-left: 2px solid #a855f7;
}

.diary-sticky.s6 {
  background: rgba(255,237,213,0.92);
  border-left: 2px solid #f97316;
}

/* 暗色主题便签 */
[data-theme="dark"] .diary-sticky.s1 {
  background: rgba(80,75,40,0.92);
}
[data-theme="dark"] .diary-sticky.s2 {
  background: rgba(80,50,60,0.92);
}
[data-theme="dark"] .diary-sticky.s3 {
  background: rgba(45,55,75,0.92);
}
[data-theme="dark"] .diary-sticky.s4 {
  background: rgba(40,70,50,0.92);
}
[data-theme="dark"] .diary-sticky.s5 {
  background: rgba(60,45,70,0.92);
}
[data-theme="dark"] .diary-sticky.s6 {
  background: rgba(70,55,40,0.92);
}

.diary-sticky-head {
  font-size: 6px;
  color: var(--text-tertiary, #999);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  opacity: 0.7;
  position: relative;
}

/* 便签头部左侧信息区域 */
.diary-sticky-head-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  gap: 4px;
}

/* 便签删除按钮 */
.diary-sticky-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  z-index: 10;
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 暗色主题删除按钮 */
[data-theme="dark"] .diary-sticky-delete {
  background: rgba(255, 255, 255, 0.8);
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}

/* 鼠标悬停便签时显示删除按钮 */
.diary-sticky:hover .diary-sticky-delete {
  opacity: 1;
}

/* 删除按钮hover效果 */
.diary-sticky-delete:hover {
  transform: scale(1.15);
  background: rgba(220, 38, 38, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
}

[data-theme="dark"] .diary-sticky-delete:hover {
  background: rgba(239, 68, 68, 0.9);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* 点击删除按钮时阻止便签拖动 */
.diary-sticky-delete:active {
  transform: scale(1.05);
}

.diary-sticky-body {
  font-family: 'Caveat', 'Noto Serif JP', cursive;
  font-size: 10px;
  color: var(--text-primary, #000000);
}

[data-theme="dark"] .diary-sticky-body {
  color: var(--text-primary, #ffffff);
}

/* 笔记区域标题 */
.diary-notes-section {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--diary-line, rgba(0,0,0,0.05));
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .diary-notes-section {
  border-top-color: rgba(255,255,255,0.04);
}

.diary-notes-title {
  font-size: 7px;
  font-weight: 600;
  color: var(--text-tertiary, #999);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: center;
  gap: 4px;
}

.diary-notes-title::before {
  content: '📌';
  font-size: 8px;
}

/* 目录项样式补充 */
.diary-idx-mood {
  font-size: 12px;
  margin-left: 4px;
}

.diary-idx-page {
  width: 20px;
  text-align: right;
  font-size: 9px;
  color: var(--text-tertiary, #999);
  font-family: 'JetBrains Mono', monospace;
}

/* ==================== End 日记本系统 ==================== */

/* ==================== 用户好感度调整系统 ==================== */

/* 模态框遮罩 - 不模糊 */
.user-affection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2000;
}

.user-affection-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 模态框 - 异形信封设计（屏幕正中间） */
.user-affection-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 100%;
  max-width: 320px;
  background: var(--bg-primary, #fff);
  clip-path: polygon(
    0 16px, 16px 0,
    calc(100% - 16px) 0, 100% 16px,
    100% 100%, 0 100%
  );
  padding: 28px 20px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2001;
}

.user-affection-modal.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* 装饰拖动条 */
.user-affection-modal::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--border-color, #ddd);
  border-radius: 2px;
}

/* 模态框头部 - 精致紧凑 */
.user-affection-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-color, #ddd);
  position: relative;
}

/* 头部爱心装饰 */
.user-affection-header::after {
  content: '♡';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary, #fff);
  padding: 0 10px;
  font-size: 12px;
  color: var(--text-tertiary, #999);
}

.user-affection-header h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #000);
  margin: 0 0 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.user-affection-header p {
  font-size: 9px;
  color: var(--text-tertiary, #999);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

/* 关闭按钮 - 异形 */
.user-affection-close {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border-color, #ddd);
  background: var(--bg-secondary, #f5f5f5);
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0 calc(100% - 5px), 0 5px
  );
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.user-affection-close:hover {
  background: var(--text-primary, #000);
  border-color: var(--text-primary, #000);
}

.user-affection-close::before,
.user-affection-close::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 2px;
  background: var(--text-secondary, #666);
  transition: background 0.3s ease;
}

.user-affection-close:hover::before,
.user-affection-close:hover::after {
  background: var(--bg-primary, #fff);
}

.user-affection-close::before {
  transform: rotate(45deg);
}

.user-affection-close::after {
  transform: rotate(-45deg);
}

/* 模态框主体 */
.user-affection-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-affection-slider-container,
.user-affection-reason-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 字段标签 - 带菱形装饰 */
.user-affection-slider-container label,
.user-affection-reason-container label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, #666);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-affection-slider-container label::before,
.user-affection-reason-container label::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--text-primary, #000);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.user-affection-slider-container span {
  color: var(--text-primary, #000);
  font-size: 14px;
  font-weight: 700;
}

/* 滑块样式 - 黑白灰 */
#userAffectionSlider {
  width: 100%;
  height: 4px;
  background: var(--border-color, #ddd);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#userAffectionSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--text-primary, #000);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  cursor: pointer;
  transition: transform 0.2s ease;
}

#userAffectionSlider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

#userAffectionSlider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--text-primary, #000);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease;
}

#userAffectionSlider::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* 文本框 - 异形 */
#userAffectionReason {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color, #ddd);
  background: var(--bg-secondary, #f8f8f8);
  font-size: 12px;
  color: var(--text-primary, #000);
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 70px;
  transition: all 0.3s ease;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0 calc(100% - 6px), 0 6px
  );
}

#userAffectionReason:focus {
  outline: none;
  border-color: var(--text-primary, #000);
  background: var(--bg-primary, #fff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#userAffectionReason::placeholder {
  color: var(--text-tertiary, #999);
  font-size: 11px;
}

/* 模态框底部 */
.user-affection-footer {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* 按钮 - 异形黑白灰 */
.user-affection-cancel,
.user-affection-save {
  flex: 1;
  padding: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0 calc(100% - 6px), 0 6px
  );
}

.user-affection-cancel {
  background: var(--bg-secondary, #f5f5f5);
  border: 1.5px solid var(--border-color, #ddd);
  color: var(--text-secondary, #666);
}

.user-affection-cancel:hover {
  background: var(--border-color, #ddd);
}

.user-affection-save {
  background: var(--text-primary, #000);
  border: 1.5px solid var(--text-primary, #000);
  color: var(--bg-primary, #fff);
  position: relative;
  overflow: hidden;
}

.user-affection-save::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.user-affection-save:hover::before {
  width: 200px;
  height: 200px;
}

.user-affection-save:active,
.user-affection-cancel:active {
  transform: scale(0.98);
}

/* 暗色模式适配 */
[data-theme="dark"] .user-affection-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] #userAffectionSlider {
  background: #333;
}

/* ==================== End 用户好感度调整系统 ==================== */

/* ==================== Phone Dialer 拨号页面 ==================== */

/* Dialer Screen Container */
/* ========== Phone Dialer App - 新设计 ========== */
.phone-dialer-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-primary);
  overflow: hidden;
}

/* ========== Theme/Close Switch ========== */
.phone-theme-switch {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  right: 16px;
  width: clamp(26px, 6.5vw, 28px);
  height: clamp(26px, 6.5vw, 28px);
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform 0.2s;
}

.phone-theme-switch:active {
  transform: scale(0.9);
}

.phone-theme-switch svg {
  width: clamp(13px, 3.2vw, 14px);
  height: clamp(13px, 3.2vw, 14px);
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 2;
}

/* ========== Main Content ========== */
.phone-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 🔥 使用全局App Header padding变量 */
  padding: var(--app-header-total-padding) 20px 12px;
  min-height: 0;
}

/* ========== Number Display Area ========== */
.phone-display-area {
  text-align: center;
  padding: 16px 0 20px;
  position: relative;
  flex-shrink: 0;
}

/* Decorative pixel dots */
.phone-pixel-deco {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--text-tertiary);
  opacity: 0.5;
}

.phone-pixel-deco:nth-child(1) { top: 10px; left: 20px; }
.phone-pixel-deco:nth-child(2) { top: 8px; left: 26px; }
.phone-pixel-deco:nth-child(3) { top: 14px; left: 23px; }
.phone-pixel-deco:nth-child(4) { top: 20px; right: 30px; }
.phone-pixel-deco:nth-child(5) { top: 16px; right: 24px; }

.phone-display-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.phone-display-number {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: 2px;
  min-height: 40px;
  transition: all 0.15s ease;
}

.phone-display-number.empty {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-tertiary);
  letter-spacing: 1px;
}

.phone-display-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.phone-display-hint.show {
  opacity: 1;
}

/* ========== Dialpad ========== */
.phone-dialpad {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  min-height: 0;
  max-height: 400px;
}

.phone-key-row {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 4vw, 20px);
  margin-bottom: clamp(10px, 2.5vh, 14px);
}

.phone-key-row:last-child {
  margin-bottom: 0;
}

.phone-key {
  width: clamp(60px, 18vw, 72px);
  height: clamp(60px, 18vw, 72px);
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
  position: relative;
  overflow: hidden;
}

.phone-key:active {
  background: var(--border-color);
  transform: scale(0.95);
}

.phone-key-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 7vw, 30px);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
}

.phone-key-letters {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(8px, 2vw, 9px);
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 1.5px;
  margin-top: 2px;
  text-transform: uppercase;
}

.phone-key.phone-symbol .phone-key-num {
  font-size: clamp(24px, 6vw, 28px);
  font-weight: 300;
}

/* ========== Action Row ========== */
.phone-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 6vw, 32px);
  padding: 16px 0 12px;
  flex-shrink: 0;
}

.phone-action-btn {
  width: clamp(40px, 10vw, 44px);
  height: clamp(40px, 10vw, 44px);
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  opacity: 0.6;
}

.phone-action-btn:hover {
  opacity: 1;
}

.phone-action-btn svg {
  width: clamp(18px, 4.5vw, 20px);
  height: clamp(18px, 4.5vw, 20px);
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
}

.phone-call-btn {
  width: clamp(56px, 14vw, 64px);
  height: clamp(56px, 14vw, 64px);
  border-radius: 50%;
  background: var(--accent-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.phone-call-btn:active {
  transform: scale(0.92);
}

.phone-call-btn svg {
  width: clamp(22px, 5.5vw, 26px);
  height: clamp(22px, 5.5vw, 26px);
  fill: none;
  stroke: var(--bg-primary);
  stroke-width: 2;
}

/* ========== Bottom Nav - 稍微放大版（适中好点）========== */
.phone-bottom-nav {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-around;
  padding: 8px 10px max(12px, calc(env(safe-area-inset-bottom, 8px) + 6px)); /* 继续缩短上下padding */
  flex-shrink: 0;
  margin: 0 12px 16px 12px;
  border-radius: 14px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.phone-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px clamp(14px, 3.2vw, 18px); /* 继续缩短上下padding */
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 10px;
  min-height: 48px; /* 继续缩短按钮高度 */
}

.phone-nav-item:active {
  background: var(--bg-tertiary);
  transform: scale(0.95);
}

.phone-nav-item svg {
  width: clamp(18px, 4.5vw, 20px); /* 继续缩小图标 */
  height: clamp(18px, 4.5vw, 20px);
  fill: none;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  transition: all 0.2s;
}

.phone-nav-item span {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(10px, 2.5vw, 11px);
  color: var(--text-tertiary);
  transition: all 0.2s;
  font-weight: 500;
}

.phone-nav-item.active svg {
  stroke: var(--text-primary);
}

.phone-nav-item.active span {
  color: var(--text-primary);
}

.phone-nav-item.active {
  background: var(--bg-tertiary);
}

/* ========== Animations ========== */
@keyframes phoneNumBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.phone-display-number.bounce {
  animation: phoneNumBounce 0.12s ease;
}

/* Floating pixel animation */
@keyframes phonePixelFloat {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-3px); opacity: 0.8; }
}

.phone-pixel-deco {
  animation: phonePixelFloat 3s ease-in-out infinite;
}

.phone-pixel-deco:nth-child(2) { animation-delay: 0.5s; }
.phone-pixel-deco:nth-child(3) { animation-delay: 1s; }
.phone-pixel-deco:nth-child(4) { animation-delay: 1.5s; }
.phone-pixel-deco:nth-child(5) { animation-delay: 2s; }

/* ========== Phone页面内部元素动画（参考外观页面）========== */
.phone-display-area {
  animation: fadeIn 0.6s ease 0.1s both;
}

.phone-dialpad {
  animation: fadeIn 0.6s ease 0.2s both;
}

.phone-action-row {
  animation: fadeIn 0.6s ease 0.3s both;
}

.phone-bottom-nav {
  animation: fadeIn 0.6s ease 0.4s both;
}

/* ==================== Phone Recent Calls 通话记录 ==================== */

.phone-recent-content {
  flex: 1;
  display: none; /* Hidden by default, shown when Recent tab is clicked */
  flex-direction: column;
  padding: 20px 0 0;
  min-height: 0;
  overflow: hidden;
}

/* Toolbar */
.recent-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  flex-shrink: 0;
}

.recent-toolbar-btn {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.2s;
}

.recent-toolbar-btn:hover {
  color: var(--text-primary);
}

/* Filter Tabs */
.recent-filter-tabs {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: 20px;
  padding: 3px;
}

.recent-filter-tab {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 17px;
  transition: all 0.2s;
}

.recent-filter-tab.active {
  color: var(--text-primary);
  background: var(--bg-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Filter Icon */
.recent-filter-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.recent-filter-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  fill: none;
}

.recent-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 9px;
}

/* Title Section */
.recent-title-section {
  padding: 12px 24px 8px;
  flex-shrink: 0;
  position: relative;
}

.recent-pixel-deco {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--text-tertiary);
  opacity: 0.5;
  animation: recentPixelFloat 3s ease-in-out infinite;
}

.recent-pixel-deco:nth-child(1) { top: 8px; right: 40px; animation-delay: 0s; }
.recent-pixel-deco:nth-child(2) { top: 12px; right: 34px; animation-delay: 0.5s; }
.recent-pixel-deco:nth-child(3) { top: 6px; right: 28px; animation-delay: 1s; }

@keyframes recentPixelFloat {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-3px); opacity: 0.8; }
}

.recent-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* Search Bar */
.recent-search-container {
  padding: 0 20px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.recent-search-bar {
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 10px 14px;
  gap: 10px;
}

.recent-search-bar svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

.recent-search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
}

.recent-search-bar input::placeholder {
  color: var(--text-tertiary);
}

/* Voice Button */
.recent-voice-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.recent-voice-btn:active {
  transform: scale(0.95);
}

.recent-voice-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  fill: none;
}

/* Content Scroll */
.recent-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  min-height: 0;
}

/* Promo Card */
.recent-promo-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border-color);
}

.recent-promo-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

[data-theme="dark"] .recent-promo-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.recent-promo-card:active {
  transform: scale(0.98);
}

.recent-promo-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.recent-promo-avatar svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-secondary);
  stroke-width: 1.2;
  fill: none;
}

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

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

.recent-promo-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.recent-promo-subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-tertiary);
}

.recent-promo-arrow {
  flex-shrink: 0;
}

.recent-promo-arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
}

/* Call List */
.recent-call-list {
  display: flex;
  flex-direction: column;
}

/* Call Item */
.recent-call-item {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 12px;
  margin-bottom: 2px;
  opacity: 0;
  transform: translateY(8px);
  animation: recentFadeInUp 0.3s ease forwards;
}

.recent-call-item:nth-child(1) { animation-delay: 0.05s; }
.recent-call-item:nth-child(2) { animation-delay: 0.1s; }
.recent-call-item:nth-child(3) { animation-delay: 0.15s; }
.recent-call-item:nth-child(4) { animation-delay: 0.2s; }
.recent-call-item:nth-child(5) { animation-delay: 0.25s; }
.recent-call-item:nth-child(6) { animation-delay: 0.3s; }
.recent-call-item:nth-child(7) { animation-delay: 0.35s; }
.recent-call-item:nth-child(8) { animation-delay: 0.4s; }
.recent-call-item:nth-child(9) { animation-delay: 0.45s; }
.recent-call-item:nth-child(10) { animation-delay: 0.5s; }

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

/* ========== Recent页面进入动画（与Keypad同步）========== */
.phone-recent-content.animating .recent-toolbar {
  animation: fadeIn 0.6s ease 0.1s both;
}

.phone-recent-content.animating .recent-title-section {
  animation: fadeIn 0.6s ease 0.15s both;
}

.phone-recent-content.animating .recent-search-bar {
  animation: fadeIn 0.6s ease 0.2s both;
}

.phone-recent-content.animating .recent-promo-card {
  animation: fadeIn 0.6s ease 0.25s both;
}

.phone-recent-content.animating .recent-call-list {
  animation: fadeIn 0.6s ease 0.3s both;
}

.recent-call-item:hover {
  background: var(--bg-tertiary);
}

.recent-call-item:active {
  background: var(--border-color);
}

/* Call Avatar */
.recent-call-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.recent-call-avatar svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-tertiary);
  stroke-width: 1.2;
  fill: none;
}

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

.recent-call-avatar.has-image {
  background: linear-gradient(135deg, var(--text-tertiary), var(--text-secondary));
}

.recent-call-avatar span {
  color: var(--bg-primary);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* Call Info */
.recent-call-info {
  flex: 1;
  min-width: 0;
}

.recent-call-number {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.recent-call-number.missed {
  color: #8a6a5a;
}

[data-theme="dark"] .recent-call-number.missed {
  color: #9a7a6a;
}

/* Call Type Icon */
.recent-call-type {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recent-call-type svg {
  width: 10px;
  height: 10px;
  stroke-width: 2;
  fill: none;
}

.recent-call-type.outgoing svg { stroke: #6a7a6a; }
.recent-call-type.missed svg { stroke: #8a6a5a; }
.recent-call-type.incoming svg { stroke: var(--text-secondary); }

[data-theme="dark"] .recent-call-type.outgoing svg { stroke: #7a8a7a; }
[data-theme="dark"] .recent-call-type.missed svg { stroke: #9a7a6a; }

/* Call Tag */
.recent-call-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-tertiary);
}

.recent-call-tag svg {
  width: 12px;
  height: 12px;
  stroke: #6a7a6a;
  stroke-width: 1.5;
  fill: none;
}

/* Call Meta */
.recent-call-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.recent-call-time {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--text-tertiary);
}

.recent-call-info-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.recent-call-info-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-secondary);
}

.recent-call-info-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  fill: none;
}

/* Divider */
.recent-call-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  margin: 2px 8px;
}

/* Empty State */
.recent-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.recent-empty-state svg {
  width: 48px;
  height: 48px;
  stroke: var(--text-tertiary);
  stroke-width: 1;
  fill: none;
  margin-bottom: 16px;
  opacity: 0.5;
}

.recent-empty-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.recent-empty-subtext {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ==================== End Phone Recent Calls ==================== */

/* 拨号按键点击动画 - 增强版 */
.phone-key.pressing {
  animation: phoneKeyPressEffect 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes phoneKeyPressEffect {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 0, 0, 0), 0.4);
  }
  50% {
    transform: scale(0.92);
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb, 0, 0, 0), 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 0, 0, 0), 0);
  }
}

/* 拨号呼叫按钮动画 - 波纹效果 */
.phone-call-btn.calling {
  animation: phoneCallPulse 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes phoneCallPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 0, 0, 0), 0.6);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(var(--accent-rgb, 0, 0, 0), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 0, 0, 0), 0);
  }
}

/* ========================================
   联系人详情页面 (Contact Detail View)
   ======================================== */

.phone-contact-detail {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.phone-contact-detail.show {
  transform: translateX(0);
}

/* Contact Detail Header */
.contact-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 🔥 使用全局App Header padding变量（max保留以确保最小值） */
  padding: max(var(--app-header-total-padding), 20px) 16px 12px;
  flex-shrink: 0;
}

.contact-back-btn,
.contact-more-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.contact-back-btn:hover,
.contact-more-btn:hover {
  background: var(--border-color);
}

.contact-back-btn:active,
.contact-more-btn:active {
  transform: scale(0.95);
}

.contact-back-btn svg,
.contact-more-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  fill: none;
}

/* Contact Detail Content */
.contact-detail-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 100px;
}

.contact-detail-content::-webkit-scrollbar {
  display: none;
}

/* Contact Avatar Section */
.contact-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 32px;
}

.contact-avatar-large {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.contact-avatar-main {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--bg-tertiary), var(--border-color));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.contact-avatar-main::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bg-primary);
  z-index: 0;
}

.contact-avatar-main svg {
  width: 50px;
  height: 50px;
  stroke: var(--text-tertiary);
  stroke-width: 1;
  fill: none;
  position: relative;
  z-index: 1;
}

.contact-avatar-main span {
  font-family: 'Noto Serif JP', serif;
  font-size: 42px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.contact-avatar-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

/* Contact Detail Info */
.contact-detail-info {
  text-align: center;
}

/* 第一行：联系人状态（联系人/未知） */
.contact-detail-status {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* 第二行：名字（备注名/角色名） */
.contact-detail-label {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

/* 第三行：电话号码 */
.contact-detail-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* Contact Action Buttons */
.contact-action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0 20px 24px;
}

.contact-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.contact-action-btn:active {
  transform: scale(0.95);
}

.contact-action-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.contact-action-btn:hover .contact-action-icon {
  background: var(--border-color);
  transform: translateY(-2px);
}

.contact-action-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  fill: none;
}

.contact-action-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Contact Info Section */
.contact-info-section {
  padding: 0 16px;
}

/* Contact History Card - 异形设计 */
.contact-history-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px 4px 20px 4px;
  margin-bottom: 12px;
  overflow: hidden;
}

.contact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.contact-card-header:hover {
  background: var(--bg-tertiary);
}

.contact-card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-card-title svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  fill: none;
}

.contact-card-badge {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: 10px;
}

.contact-card-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.contact-card-arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
}

.contact-card-arrow.expanded {
  transform: rotate(180deg);
}

/* Contact Card Content */
.contact-card-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.contact-card-content.expanded {
  max-height: 600px;
}

.contact-card-content-inner {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border-color);
}

/* Contact History Item */
.contact-history-item {
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s;
}

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

.contact-history-item:hover {
  background: var(--bg-tertiary);
  margin: 0 -16px;
  padding: 14px 16px;
}

.contact-history-type {
  width: 32px;
  height: 32px;
  border-radius: 8px 2px 8px 2px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-history-type svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  fill: none;
}

.contact-history-type.outgoing svg {
  stroke: #6a7a6a;
}

.contact-history-type.incoming svg {
  stroke: var(--text-secondary);
}

.contact-history-type.missed svg {
  stroke: #8a6a5a;
}

[data-theme='dark'] .contact-history-type.outgoing svg {
  stroke: #5a6a5a;
}

[data-theme='dark'] .contact-history-type.missed svg {
  stroke: #7a5a4a;
}

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

.contact-history-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.contact-history-label.missed {
  color: #8a6a5a;
}

[data-theme='dark'] .contact-history-label.missed {
  color: #7a5a4a;
}

.contact-history-time {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
}

.contact-history-duration {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

/* Contact History Detail - 通话详情展开 */
.contact-history-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.contact-history-detail.expanded {
  max-height: 500px; /* 🔥 增加高度，留足空间 */
}

.contact-history-detail-inner {
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 12px 4px 12px 4px;
  margin-top: 10px;
  /* 🔥 添加滚动功能，通话记录再长也能看全！ */
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 🔥 美化滚动条 - 保持整体设计风格 */
.contact-history-detail-inner::-webkit-scrollbar {
  width: 4px;
}

.contact-history-detail-inner::-webkit-scrollbar-track {
  background: transparent;
}

.contact-history-detail-inner::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 2px;
  opacity: 0.3;
}

.contact-history-detail-inner::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

.contact-transcript-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
}

.contact-transcript-line {
  width: 2px;
  background: #6a7a6a;
  border-radius: 1px;
  flex-shrink: 0;
}

.contact-transcript-line.user {
  background: var(--text-secondary);
}

[data-theme='dark'] .contact-transcript-line {
  background: #5a6a5a;
}

.contact-transcript-content {
  flex: 1;
}

.contact-transcript-time {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.contact-transcript-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Contact Options Card - 异形设计 */
.contact-options-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px 20px 4px 20px;
  overflow: hidden;
}

.contact-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-color);
}

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

.contact-option-item:hover {
  background: var(--bg-tertiary);
}

.contact-option-item:active {
  background: var(--border-color);
}

.contact-option-item span {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
}

.contact-option-item.danger span {
  color: #8a6a5a;
}

[data-theme='dark'] .contact-option-item.danger span {
  color: #7a5a4a;
}

.contact-option-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
}

.contact-option-item.danger svg {
  stroke: #8a6a5a;
  opacity: 0.6;
}

[data-theme='dark'] .contact-option-item.danger svg {
  stroke: #7a5a4a;
}

/* Contact Detail Slide Animation */
.phone-contact-detail.animating {
  animation: contactSlideIn 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes contactSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.phone-contact-detail.animating-out {
  animation: contactSlideOut 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes contactSlideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* ==================== Phone Contacts 通讯录 ==================== */

.phone-contacts-content {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Contacts Header */
.contacts-header {
  /* 🔥 使用全局App Header padding变量 */
  padding: var(--app-header-total-padding) 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.contacts-header-btn {
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.contacts-header-btn:active {
  transform: scale(0.92);
  background: var(--border-color);
}

.contacts-header-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contacts-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

/* Contacts Search Bar */
.contacts-search-section {
  padding: 0 20px 12px;
  flex-shrink: 0;
}

.contacts-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-tertiary);
  border-radius: 14px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}

.contacts-search-bar:focus-within {
  background: var(--border-color);
}

.contacts-search-icon {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.contacts-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.contacts-search-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 300;
}

.contacts-search-voice {
  width: 28px;
  height: 28px;
  background: var(--bg-primary);
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.contacts-search-voice:active {
  transform: scale(0.92);
}

.contacts-search-voice svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 2;
}

/* Contacts My Card */
.contacts-mycard {
  margin: 0 20px 16px;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.contacts-mycard:active {
  transform: scale(0.98);
  background: var(--bg-tertiary);
}

.contacts-mycard-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

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

.contacts-mycard-avatar svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 1.5;
}

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

.contacts-mycard-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.contacts-mycard-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.contacts-mycard-arrow {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 1.5;
}

/* Contacts List Container */
.contacts-list-container {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 100px 20px;
  scroll-behavior: smooth;
}

.contacts-list::-webkit-scrollbar {
  width: 0;
}

/* Contacts Letter Group */
.contacts-group {
  margin-bottom: 2px;
}

.contacts-group-letter {
  font-family: 'Caveat', cursive;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 10px 2px 6px;
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contacts-group-letter::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-color), transparent);
}

/* Contacts Item */
.contacts-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.12s ease;
  animation: contactsFadeInUp 0.25s ease forwards;
}

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

.contacts-item:active {
  background: rgba(128, 128, 128, 0.05);
  margin: 0 -6px;
  padding: 10px 6px;
  border-radius: 10px;
}

.contacts-item:nth-child(1) { animation-delay: 0.02s; }
.contacts-item:nth-child(2) { animation-delay: 0.04s; }
.contacts-item:nth-child(3) { animation-delay: 0.06s; }
.contacts-item:nth-child(4) { animation-delay: 0.08s; }
.contacts-item:nth-child(5) { animation-delay: 0.10s; }

@keyframes contactsFadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contacts-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
}

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

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

.contacts-item-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-item-phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* Contacts Alphabet Index */
.contacts-alphabet-index {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  z-index: 20;
}

.contacts-index-letter {
  font-family: 'Caveat', cursive;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  width: 16px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
  border-radius: 3px;
}

.contacts-index-letter:active,
.contacts-index-letter.active {
  color: var(--text-primary);
  background: rgba(128, 128, 128, 0.1);
  transform: scale(1.3);
}

/* Contacts Letter Indicator */
.contacts-letter-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 72px;
  height: 72px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 38px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0;
  transition: all 0.15s ease;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.contacts-letter-indicator.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Contacts Empty State */
.contacts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.contacts-empty-state svg {
  width: 64px;
  height: 64px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 1;
  opacity: 0.5;
  margin-bottom: 16px;
}

.contacts-empty-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.contacts-empty-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-tertiary);
  opacity: 0.7;
}

/* ========== Contacts页面进入动画（与Recent同步）========== */
.phone-contacts-content.animating .contacts-header {
  animation: fadeIn 0.6s ease 0.1s both;
}

.phone-contacts-content.animating .contacts-search-section {
  animation: fadeIn 0.6s ease 0.15s both;
}

.phone-contacts-content.animating .contacts-mycard {
  animation: fadeIn 0.6s ease 0.2s both;
}

.phone-contacts-content.animating .contacts-list-container {
  animation: fadeIn 0.6s ease 0.25s both;
}

.phone-contacts-content.animating .contacts-alphabet-index {
  animation: alphabetIndexFadeIn 0.6s ease 0.3s both;
}

/* 字母索引专用动画（保留translateY(-50%)垂直居中定位） */
@keyframes alphabetIndexFadeIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ========================================
   通话界面样式 (Call Screen Styles)
   ======================================== */

/* 通话屏幕容器 */
.phone-call-screen {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  z-index: 8500; /* 高于app-screen(8000)，确保通话界面始终在最上层 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phone-call-screen.hidden {
  display: none;
}

/* 网格背景 */
.phone-call-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, var(--border-primary) 19px, var(--border-primary) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, var(--border-primary) 19px, var(--border-primary) 20px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* 装饰点 */
.call-screen-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.call-deco-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--text-tertiary);
  border-radius: 50%;
  animation: callDotBlink 3s ease-in-out infinite;
}

.call-deco-dot:nth-child(1) { top: 140px; left: 48px; animation-delay: 0s; }
.call-deco-dot:nth-child(2) { top: 200px; right: 56px; animation-delay: 1s; }
.call-deco-dot:nth-child(3) { bottom: 260px; left: 64px; animation-delay: 2s; }
.call-deco-dot:nth-child(4) { bottom: 320px; right: 40px; animation-delay: 1.5s; }

@keyframes callDotBlink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

/* 内容容器 */
.call-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 180px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 圆形头像 + 轨道装饰 */
.call-avatar-orbit {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 40px;
}

/* 外圈轨道 */
.call-orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--text-tertiary);
  border-radius: 50%;
  animation: callOrbitRotate 20s linear infinite;
}

.call-orbit-ring::before,
.call-orbit-ring::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--text-secondary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

.call-orbit-ring::before {
  transform: translate(-50%, -50%) translateY(-60px);
}

.call-orbit-ring::after {
  transform: translate(-50%, -50%) translateY(60px);
}

@keyframes callOrbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 头像圆 */
.call-avatar-circle {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* calling和incoming状态的脉冲动画 */
.phone-call-screen.state-calling .call-avatar-circle,
.phone-call-screen.state-incoming .call-avatar-circle {
  animation: callAvatarPulse 2s ease-in-out infinite;
}

@keyframes callAvatarPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.call-avatar-circle svg {
  width: 42px;
  height: 42px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 1.5;
}

/* 头像图片 */
.call-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 名字 */
.call-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1.5px;
  margin-bottom: 8px;
  text-align: center;
}

/* 状态 */
.call-status {
  font-family: 'IBM Plex Mono', 'Courier Prime', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  padding: 0 16px;
  transition: all 0.3s ease;
}

.call-status::before,
.call-status::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 1px;
  background: var(--text-tertiary);
  top: 50%;
}

.call-status::before { left: 0; }
.call-status::after { right: 0; }

/* 通话时长 */
.call-timer {
  font-family: 'IBM Plex Mono', 'Courier Prime', monospace;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.call-timer:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.call-timer.hidden {
  display: none;
}

/* 按钮区域 */
.call-actions {
  position: absolute;
  bottom: 48px;
  left: 32px;
  right: 32px;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 按钮容器 */
.call-btn-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* connected状态的网格布局 */
.phone-call-screen.state-connected .call-btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* 胶囊按钮 */
.call-action-btn {
  height: 52px;
  background: var(--bg-primary);
  border: 1px solid var(--text-tertiary);
  border-radius: 26px;
  font-family: 'IBM Plex Mono', 'Courier Prime', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: callBtnSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.call-action-btn:nth-child(1) { animation-delay: 0.05s; }
.call-action-btn:nth-child(2) { animation-delay: 0.1s; }
.call-action-btn:nth-child(3) { animation-delay: 0.15s; }
.call-action-btn:nth-child(4) { animation-delay: 0.2s; }

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

/* connected状态的圆形按钮 */
.phone-call-screen.state-connected .call-action-btn:not(.end) {
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  flex-direction: column;
  gap: 6px;
}

.phone-call-screen.state-connected .call-action-btn:not(.end) span {
  font-size: 9px;
  color: var(--text-tertiary);
}

/* End按钮横向占满 */
.call-action-btn.end {
  grid-column: 1 / -1;
}

.call-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--text-tertiary), transparent, var(--text-tertiary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s;
}

.call-action-btn:active {
  background: var(--bg-secondary);
  transform: scale(0.98);
}

.call-action-btn:active::before {
  opacity: 1;
}

.call-action-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-primary);
  fill: none;
  stroke-width: 1.5;
}

.phone-call-screen.state-connected .call-action-btn:not(.end) svg {
  width: 20px;
  height: 20px;
}

/* 状态切换时的淡入效果 */
@keyframes callFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==================== 对方发言框 + 用户回复系统 ==================== */

/* 头像包装器 */
.call-avatar-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 对方发言框 - 液态玻璃效果 */
.call-speech-bubble {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(0.9);
  width: max-content;
  min-width: 100px;
  max-width: min(320px, 85vw);
  padding: 12px 16px;
  /* 液态玻璃效果 */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 小三角 - 指向头像 */
.call-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255, 255, 255, 0.15);
  transition: opacity 0.3s ease;
}

/* 隐藏状态 */
.call-speech-bubble.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px) scale(0.9);
}

/* 显示状态 - 弹性弹出动画 */
.call-speech-bubble.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 切换动画 - 淡出 */
.call-speech-bubble.switching-out {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(0.95);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.6, 1);
}

/* 切换动画 - 淡入 */
.call-speech-bubble.switching-in {
  animation: bubbleSwitchIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bubbleSwitchIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(15px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.call-speech-bubble:active {
  transform: translateX(-50%) translateY(0) scale(0.98);
  opacity: 0.9;
  transition: all 0.15s ease;
}

/* 暗色模式 */
[data-theme='dark'] .call-speech-bubble {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme='dark'] .call-speech-bubble::after {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* 亮色模式 */
[data-theme='light'] .call-speech-bubble {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme='light'] .call-speech-bubble::after {
  border-top-color: rgba(255, 255, 255, 0.7);
}

[data-theme='light'] .call-speech-text {
  scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}

[data-theme='light'] .call-speech-text::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.35);
}

.call-speech-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 4px;
  max-height: calc(1.5em * 5);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.call-speech-text::-webkit-scrollbar {
  width: 4px;
}

.call-speech-text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 8px;
}

.call-speech-text::-webkit-scrollbar-track {
  background: transparent;
}

.call-speech-indicator {
  font-family: 'IBM Plex Mono', 'Courier Prime', monospace;
  font-size: 9px;
  color: var(--text-tertiary);
  text-align: right;
  opacity: 0.6;
}

/* 用户回复区域 - 绝对定位在操作按钮上方 */
.call-user-replies {
  position: absolute;
  bottom: 220px;
  left: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 5;
  max-height: 270px;
  overflow-y: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.call-user-replies.hidden {
  display: none;
}

/* 发送时的消失动画 */
.call-user-replies.sending {
  pointer-events: none;
}

/* 纯文字回复 - 无背景框 */
.call-user-reply-item {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  animation: callReplyFloat 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.6, 1), filter 0.35s ease;
}

/* 最新回复 - 光晕效果像滚动歌词 */
.call-user-reply-item.latest {
  font-weight: 600;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6))
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.4))
          drop-shadow(0 0 24px rgba(255, 255, 255, 0.2));
  animation: callReplyFloat 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             callTextGlow 2s ease-in-out infinite;
}

/* 发送时的淡出动画 */
.call-user-reply-item.fade-out {
  opacity: 0 !important;
  transform: translateY(-20px) scale(0.9) !important;
  filter: drop-shadow(0 0 0 transparent) !important;
  animation: none !important;
}

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

@keyframes callTextGlow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 16px rgba(255, 255, 255, 0.4))
            drop-shadow(0 0 24px rgba(255, 255, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 24px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 36px rgba(255, 255, 255, 0.3));
  }
}

/* 输入框容器 - 覆盖在end call位置 */
.phone-call-screen:not(.state-connected) .call-reply-input-container {
  display: none !important;
}

.call-reply-input-container {
  position: absolute;
  bottom: 48px;
  left: 32px;
  right: 32px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(
    135deg,
    rgba(var(--text-primary-rgb, 232, 232, 232), 0.15) 0%,
    rgba(var(--text-primary-rgb, 232, 232, 232), 0.05) 100%
  );
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 26px;
  z-index: 200;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.call-reply-input-container:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.call-reply-input-container.hidden {
  display: none;
}

.call-reply-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  padding: 4px 8px;
}

.call-reply-input::placeholder {
  color: var(--text-tertiary);
}

.call-reply-send-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--text-primary-rgb, 232, 232, 232), 0.2) 0%,
    rgba(var(--text-primary-rgb, 232, 232, 232), 0.1) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.call-reply-send-btn:active {
  transform: scale(0.95);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.call-reply-send-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-left: 1px;
  margin-top: 1px;
}

/* RGB变量定义 - 用于背景渐变 */
:root {
  --text-primary-rgb: 0, 0, 0;
}

[data-theme='dark'] {
  --text-primary-rgb: 232, 232, 232;
}

[data-theme='light'] {
  --text-primary-rgb: 26, 26, 26;
}

/* ==================== End 对话系统样式 ==================== */

.phone-call-screen.state-changing .call-content {
  animation: callFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==================== 用户资料选择弹窗（通话前） ==================== */

/* 遮罩层 */
.phone-profile-selector-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.phone-profile-selector-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* 底部抽屉 */
.phone-profile-selector-sheet {
  width: 100%;
  max-height: 70vh;
  background: var(--bg-primary);
  border-radius: 24px 24px 0 0;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
}

.phone-profile-selector-overlay.active .phone-profile-selector-sheet {
  transform: translateY(0);
}

/* 顶部把手区域 */
.phone-profile-selector-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  text-align: center;
}

.phone-profile-selector-handle {
  width: 40px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 2px;
  margin: 0 auto 16px;
  opacity: 0.6;
}

.phone-profile-selector-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.phone-profile-selector-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 用户资料列表 */
.phone-profile-selector-list {
  padding: 12px 16px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 单个用户资料项 */
.phone-profile-item {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
}

.phone-profile-item:active {
  transform: scale(0.98);
  background: var(--border-color);
}

.phone-profile-item:hover {
  border-color: var(--text-tertiary);
}

/* 用户头像圈 */
.phone-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--text-tertiary), var(--text-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--bg-primary);
  overflow: hidden;
  position: relative;
}

.phone-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* 用户信息 */
.phone-profile-info {
  flex: 1;
  min-width: 0;
}

.phone-profile-name {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-profile-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

/* 无电话号码提示 */
.phone-profile-no-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* 右侧箭头 */
.phone-profile-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}

.phone-profile-item:hover .phone-profile-arrow {
  opacity: 0.8;
  transform: translateX(2px);
}

.phone-profile-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 空状态 */
.phone-profile-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
}

.phone-profile-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  opacity: 0.3;
}

.phone-profile-empty-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.phone-profile-empty-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 深色模式优化 */
[data-theme="dark"] .phone-profile-selector-overlay {
  background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .phone-profile-item {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .phone-profile-item:active {
  background: rgba(255, 255, 255, 0.1);
}

/* ==================== End 用户资料选择弹窗 ==================== */

/* ==================== 通话悬浮球 ==================== */

.call-floating-ball {
  position: fixed;
  right: 50px;
  bottom: 100px;
  width: 58px;
  height: 58px;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.call-floating-ball.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.3) translateY(20px);
}

.call-floating-ball.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

/* 头像容器 */
.call-floating-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 3px solid var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.call-floating-avatar svg {
  width: 32px;
  height: 32px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 1.5;
}

.call-floating-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 脉冲波纹 - 默认隐藏 */
.call-floating-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--text-primary);
  opacity: 0;
  z-index: 1;
  animation: none;
  transition: opacity 0.3s ease;
}

/* 只有AI回复时才显示波纹提醒 */
.call-floating-ball.has-reply .call-floating-pulse {
  opacity: 0.6;
  animation: floatingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.call-floating-ball.has-reply .call-floating-pulse:nth-child(3) {
  animation-delay: 1s;
}

@keyframes floatingPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

/* 点击效果 */
.call-floating-ball:active .call-floating-avatar {
  transform: scale(0.9);
  transition: transform 0.15s ease;
}

/* 收纳动画 - 从大到小 */
.phone-call-screen.minimizing {
  animation: callMinimize 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
}

@keyframes callMinimize {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
  }
}

/* 展开动画 - 从小到大 */
.phone-call-screen.expanding {
  animation: callExpand 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

@keyframes callExpand {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

/* 关闭动画 - 淡出下滑（用于空号/通话中等场景） */
.phone-call-screen.closing {
  animation: callClose 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  will-change: transform, opacity;
}

@keyframes callClose {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
  }
}

/* ==================== End 通话悬浮球 ==================== */

/* ========== End Phone Dialer App ========== */

/* ========== iMessage App ========== */

/* iMessage Screen */
.imessage-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: 150;
  display: none;
  flex-direction: column;
}

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

/* iMessage Navigation Bar */
.imessage-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 🔥 使用全局App Header padding变量 */
  padding: var(--app-header-total-padding) 16px 12px;
  background: var(--bg-primary);
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}

.imessage-nav-left {
  font-size: 17px;
  font-weight: 400;
  color: var(--accent-color);
  cursor: pointer;
  transition: opacity 0.2s;
  min-width: 50px;
}

.imessage-nav-left:active {
  opacity: 0.5;
}

.imessage-nav-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.imessage-nav-right {
  width: 24px;
  height: 24px;
  color: var(--accent-color);
  cursor: pointer;
  transition: opacity 0.2s;
  min-width: 50px;
  display: flex;
  justify-content: flex-end;
}

.imessage-nav-right:active {
  opacity: 0.5;
}

.imessage-nav-right svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* iMessage Search Bar */
.imessage-search-bar {
  margin: 8px 16px 16px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.imessage-search-bar:focus-within {
  background: var(--bg-secondary);
}

.imessage-search-icon {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.imessage-search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.imessage-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--text-primary);
  font-family: inherit;
}

.imessage-search-input::placeholder {
  color: var(--text-tertiary);
}

.imessage-mic-icon {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.2s;
}

.imessage-mic-icon:hover {
  color: var(--text-secondary);
}

.imessage-mic-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* iMessage Scrollable Content */
.imessage-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.imessage-content::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* Pinned Contacts Section */
.imessage-pinned-section {
  padding: 12px 20px 24px;
}

.imessage-pinned-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 16px;
  justify-items: center;
}

/* Pinned Contact Item */
.imessage-pinned-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 100%;
  max-width: 100px;
  animation: imessageFadeInUp 0.4s ease;
  animation-fill-mode: both;
}

.imessage-pinned-item:nth-child(1) { animation-delay: 0.1s; }
.imessage-pinned-item:nth-child(2) { animation-delay: 0.15s; }
.imessage-pinned-item:nth-child(3) { animation-delay: 0.2s; }
.imessage-pinned-item:nth-child(4) { animation-delay: 0.25s; }
.imessage-pinned-item:nth-child(5) { animation-delay: 0.3s; }
.imessage-pinned-item:nth-child(6) { animation-delay: 0.35s; }

.imessage-pinned-item:active {
  transform: scale(0.95);
}

/* Avatar Container with Bubble */
.imessage-avatar-container {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}

.imessage-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s;
}

.imessage-pinned-item:hover .imessage-avatar {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Default Avatar (solid color) */
.imessage-avatar-default {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: uppercase;
}

.imessage-avatar-pink {
  background: linear-gradient(135deg, #f8b4c4 0%, #e8a4b8 100%);
}

.imessage-avatar-blue {
  background: linear-gradient(135deg, #a8c8e8 0%, #8ab8dc 100%);
}

.imessage-avatar-gray {
  background: linear-gradient(135deg, #c8c8c8 0%, #a8a8a8 100%);
}

/* Message Bubble on Avatar */
.imessage-avatar-bubble {
  position: absolute;
  background: var(--bg-tertiary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 5px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  animation: imessageBubbleFadeIn 0.3s ease;
  z-index: 10;
}

/* Top bubbles */
.imessage-avatar-bubble.top-left {
  top: -6px;
  left: 0px;
}

.imessage-avatar-bubble.top-center {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.imessage-avatar-bubble.top-right {
  top: -6px;
  right: 0px;
}

/* Bottom bubbles */
.imessage-avatar-bubble.bottom-left {
  bottom: -6px;
  left: 0px;
}

.imessage-avatar-bubble.bottom-center {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.imessage-avatar-bubble.bottom-right {
  bottom: -6px;
  right: 0px;
}

@keyframes imessageBubbleFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Pinned Name with decorations */
.imessage-pinned-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  width: 100%;
  text-align: center;
}

.imessage-pinned-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0A84FF;
  flex-shrink: 0;
}

.imessage-pinned-name {
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

.imessage-pinned-heart {
  font-size: 10px;
  opacity: 0.5;
  flex-shrink: 0;
}

/* Messages List */
.imessage-list {
  padding: 0;
}

/* Message Item */
.imessage-item {
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 20px;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  min-height: 72px;
  animation: imessageFadeInUp 0.3s ease;
  animation-fill-mode: both;
}

.imessage-item:nth-child(1) { animation-delay: 0.05s; }
.imessage-item:nth-child(2) { animation-delay: 0.1s; }
.imessage-item:nth-child(3) { animation-delay: 0.15s; }
.imessage-item:nth-child(4) { animation-delay: 0.2s; }
.imessage-item:nth-child(5) { animation-delay: 0.25s; }
.imessage-item:nth-child(6) { animation-delay: 0.3s; }

.imessage-item:active {
  background: var(--bg-secondary);
}

/* =========== iMessage Edit Mode =========== */
/* 编辑模式下的item选中状态 */
.imessage-item.imessage-selected {
  background: var(--bg-secondary);
}

/* 勾选框样式 */
.imessage-checkbox {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  border: 2px solid var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-right: 4px;
}

.imessage-checkbox.checked {
  background: #0A84FF;
  border-color: #0A84FF;
}

.imessage-checkbox svg {
  width: 16px;
  height: 16px;
  fill: white;
  display: none;
}

.imessage-checkbox.checked svg {
  display: block;
}

/* 底部编辑操作栏 */
.imessage-edit-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  animation: imessageFadeInUp 0.2s ease;
}

.imessage-edit-bar.show {
  display: flex;
}

.imessage-edit-bar-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: #0A84FF;
  font-weight: 500;
  padding: 8px 12px;
}

.imessage-edit-bar-left:active {
  opacity: 0.6;
}

.imessage-edit-bar-right {
  display: flex;
  align-items: center;
}

/* 全选按钮 */
.imessage-select-all-btn {
  font-size: 16px;
  color: #0A84FF;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.imessage-select-all-btn:active {
  opacity: 0.6;
}

/* 删除按钮 */
.imessage-delete-btn {
  font-size: 16px;
  color: #FF453A;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.imessage-delete-btn:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.imessage-delete-btn:active:not(:disabled) {
  opacity: 0.6;
}

/* 编辑模式下隐藏右上角编辑按钮的+号图标，改显示"完成" */
.imessage-edit-mode #imessageEditBtn svg {
  display: none;
}

/* Unread Indicator */
.imessage-unread-indicator {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0A84FF;
}

/* Message Avatar */
.imessage-msg-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Message Content */
.imessage-msg-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

.imessage-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.imessage-msg-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imessage-msg-name .heart-icon {
  font-size: 12px;
  opacity: 0.5;
  flex-shrink: 0;
}

.imessage-msg-time {
  font-size: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.imessage-msg-arrow {
  width: 7px;
  height: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.imessage-msg-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.imessage-msg-preview {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  padding-right: 24px;
}

/* Divider */
.imessage-divider {
  height: 0.5px;
  background: var(--border-color);
  margin-left: 84px;
}

/* Animation */
@keyframes imessageFadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Empty State */
.imessage-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  text-align: center;
}

.imessage-empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 1.5;
}

.imessage-empty-state p {
  font-size: 14px;
  line-height: 1.5;
}

/* ========== iMessage页面进入动画（与Phone页面同步）========== */
.imessage-screen.animating .imessage-nav-bar {
  animation: fadeIn 0.6s ease 0.1s both;
}

.imessage-screen.animating .imessage-search-bar {
  animation: fadeIn 0.6s ease 0.15s both;
}

.imessage-screen.animating .imessage-pinned-section {
  animation: fadeIn 0.6s ease 0.2s both;
}

.imessage-screen.animating .imessage-list {
  animation: fadeIn 0.6s ease 0.25s both;
}

.imessage-screen.animating .imessage-empty-state {
  animation: fadeIn 0.6s ease 0.3s both;
}

/* ========== End iMessage App ========== */

/* ========================================== */
/* SMS Detail Page - 短信详情页 iOS 6风格 */
/* ========================================== */

/* SMS Screen Container */
.sms-detail-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  background: var(--sms-bg-pattern);
  z-index: 200;
}

.sms-detail-screen.active {
  display: flex;
}

/* ========== Header - iOS 6 Style ========== */
.sms-header {
  background: var(--sms-header-bg);
  border-bottom: 1px solid var(--sms-header-border);
  /* 🔥 使用全局App Header padding变量 */
  padding: var(--app-header-total-padding) 12px 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}

.sms-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.5);
}

.sms-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--sms-send-bg);
  border: 1px solid var(--sms-header-border);
  border-radius: 6px;
  color: var(--sms-header-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 1px 2px rgba(0,0,0,0.1);
  transition: all 0.15s ease;
}

.sms-back-btn:active {
  transform: scale(0.96);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
}

.sms-back-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.sms-contact-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.sms-contact-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sms-header-text);
  letter-spacing: -0.3px;
}

.sms-contact-status {
  font-size: 10px;
  color: var(--sms-time-text);
  font-weight: 400;
  margin-top: 1px;
}

.sms-edit-btn {
  padding: 6px 12px;
  background: var(--sms-send-bg);
  border: 1px solid var(--sms-header-border);
  border-radius: 6px;
  color: var(--sms-header-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 1px 2px rgba(0,0,0,0.1);
  transition: all 0.15s ease;
}

.sms-edit-btn:active {
  transform: scale(0.96);
}

/* ========== Action Bar - Call/FaceTime/Contact ========== */
.sms-action-bar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sms-header-bg);
  border-bottom: 1px solid var(--sms-header-border);
}

.sms-action-item {
  flex: 1;
  padding: 8px;
  background: var(--sms-send-bg);
  border: 1px solid var(--sms-header-border);
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--sms-header-text);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 1px 2px rgba(0,0,0,0.1);
  transition: all 0.15s ease;
}

.sms-action-item:active {
  transform: scale(0.97);
}

/* ========== Messages Area ========== */
.sms-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Date Separator */
.sms-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

.sms-date-label {
  padding: 4px 12px;
  background: var(--sms-date-bg);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sms-date-text);
  letter-spacing: 0.3px;
}

/* ========== Message Bubble - iOS 6 Style with Tail ========== */
.sms-message {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  animation: smsMessageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes smsMessageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sms-message.user {
  align-self: flex-end;
}

.sms-message.other {
  align-self: flex-start;
}

/* Bubble with Tail */
.sms-bubble {
  position: relative;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  box-shadow: var(--sms-bubble-shadow);
}

/* User Bubble (Right side, tail pointing right) */
.sms-message.user .sms-bubble {
  background: var(--sms-bubble-user);
  color: var(--sms-bubble-user-text);
  border-radius: 16px 16px 4px 16px;
  margin-right: 8px;
}

.sms-message.user .sms-bubble::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: 4px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left-color: #0a0a0a;
  border-right: 0;
  transform: rotate(10deg);
}

[data-theme="dark"] .sms-message.user .sms-bubble::after {
  border-left-color: #e8e8e8;
}

/* Other Bubble (Left side, tail pointing left) */
.sms-message.other .sms-bubble {
  background: var(--sms-bubble-other);
  color: var(--sms-bubble-other-text);
  border-radius: 16px 16px 16px 4px;
  margin-left: 8px;
}

.sms-message.other .sms-bubble::after {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 4px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #f5f5f5;
  border-left: 0;
  transform: rotate(-10deg);
}

[data-theme="dark"] .sms-message.other .sms-bubble::after {
  border-right-color: #1f1f1f;
}

/* Message Time */
.sms-message-time {
  font-size: 10px;
  color: var(--sms-time-text);
  margin-top: 3px;
  padding: 0 4px;
}

.sms-message.user .sms-message-time {
  text-align: right;
}

.sms-message.other .sms-message-time {
  text-align: left;
}

/* Delivered Status */
.sms-delivered {
  font-size: 10px;
  color: var(--sms-time-text);
  text-align: right;
  margin-top: 2px;
  font-style: italic;
}

/* ========== Typing Indicator ========== */
.sms-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--sms-bubble-other);
  border-radius: 16px 16px 16px 4px;
  margin-left: 8px;
  width: fit-content;
  box-shadow: var(--sms-bubble-shadow);
  position: relative;
}

.sms-typing.active {
  display: flex;
}

.sms-typing::after {
  content: '';
  position: absolute;
  left: -7px;
  bottom: 4px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #f5f5f5;
  border-left: 0;
  transform: rotate(-10deg);
}

[data-theme="dark"] .sms-typing::after {
  border-right-color: #1f1f1f;
}

.sms-typing .typing-dot {
  width: 6px;
  height: 6px;
  background: var(--sms-typing-dot);
  border-radius: 50%;
  animation: smsTypingPulse 1.4s ease-in-out infinite;
}

.sms-typing .typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.sms-typing .typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes smsTypingPulse {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ========== Input Area ========== */
.sms-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
  background: var(--sms-header-bg);
  border-top: 1px solid var(--sms-header-border);
  flex-shrink: 0;
  /* Android键盘适配 */
  transition: transform 0.15s ease-out;
}

/* 键盘弹起时的固定定位模式 */
.sms-input-area.keyboard-visible {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  max-width: 430px;
  margin: 0 auto;
}

.sms-camera-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sms-send-bg);
  border: 1px solid var(--sms-header-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sms-camera-btn:active {
  transform: scale(0.92);
}

.sms-camera-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--sms-header-text);
  stroke-width: 2;
  fill: none;
}

.sms-input-wrapper {
  flex: 1;
  position: relative;
}

.sms-input {
  width: 100%;
  padding: 8px 14px;
  background: var(--sms-input-bg);
  border: 1px solid var(--sms-input-border);
  border-radius: 18px;
  font-size: 14px;
  color: var(--sms-header-text);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) inset;
}

.sms-input::placeholder {
  color: var(--sms-time-text);
}

.sms-input:focus {
  border-color: var(--sms-header-text);
}

.sms-send-btn {
  padding: 8px 16px;
  background: var(--sms-send-bg);
  border: 1px solid var(--sms-header-border);
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sms-send-text);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 1px 2px rgba(0,0,0,0.1);
  transition: all 0.15s ease;
}

.sms-send-btn:active {
  transform: scale(0.95);
}

/* ========== SMS 编辑模式工具栏 ========== */
.sms-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--sms-header-bg);
  border-top: 1px solid var(--sms-header-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.sms-edit-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--sms-send-bg);
  border: 1px solid var(--sms-header-border);
  border-radius: 8px;
  color: var(--sms-header-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 2px rgba(0,0,0,0.1);
}

.sms-edit-tool-btn:active {
  transform: scale(0.96);
}

.sms-edit-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sms-edit-tool-btn.danger {
  color: var(--sms-header-text);
}

.sms-edit-tool-btn.danger:disabled {
  color: var(--sms-header-text);
}

.sms-edit-tool-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.sms-edit-toolbar-spacer {
  flex: 1;
}

/* 编辑模式下的消息复选框 */
.sms-message-checkbox {
  display: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--sms-header-border);
  border-radius: 50%;
  background: var(--sms-send-bg);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
}

.sms-edit-mode .sms-message-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sms-message-checkbox.checked {
  background: #4a4a4a;
  border-color: #4a4a4a;
}

[data-theme="dark"] .sms-message-checkbox.checked {
  background: #d0d0d0;
  border-color: #d0d0d0;
}

.sms-message-checkbox.checked::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid #f5f5f5;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

[data-theme="dark"] .sms-message-checkbox.checked::after {
  border-color: #2a2a2a;
}

/* 编辑模式下的消息容器 */
.sms-edit-mode .sms-message {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  max-width: 85%;
}

.sms-edit-mode .sms-message.user {
  flex-direction: row-reverse;
}

.sms-edit-mode .sms-message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ========== SMS Empty State ========== */
.sms-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sms-time-text);
  padding: 40px 20px;
}

.sms-empty-state svg {
  width: 48px;
  height: 48px;
  stroke: var(--sms-time-text);
  stroke-width: 1.5;
  fill: none;
  margin-bottom: 12px;
  opacity: 0.5;
}

.sms-empty-text {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.sms-empty-subtext {
  font-size: 12px;
  opacity: 0.7;
}

/* ========== End SMS Detail Page ========== */

/* ==========================================
   Message Action Menu - iOS iMessage Style
   ========================================== */

/* Overlay with blur effect - 轻微模糊 */
.message-action-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow: hidden;
}

.message-action-overlay.active {
  display: block;
}

.message-action-overlay.visible {
  opacity: 1;
}

/* 高亮的消息气泡 - 在遮罩层上方显示 */
.message-action-highlight {
  position: relative;
  z-index: 10010 !important;
}

/* 🔥 解决头像和时间戳遮挡菜单的问题 */
/* 当overlay可见时，强制降低z-index到-1，让它滚到最底下去 */
body.message-action-open #chatMessagesArea .chat-message-avatar,
body.message-action-open #chatMessagesArea .chat-message-timestamp,
body.message-action-open #chatMessagesArea .chat-message-group .chat-message-avatar,
body.message-action-open #chatMessagesArea .chat-message-group .chat-message-timestamp,
body.message-action-open .message-action-highlight .chat-message-avatar,
body.message-action-open .message-action-highlight .chat-message-timestamp {
  z-index: -1 !important;
  pointer-events: none !important;
  position: relative !important;
}

/* Quick Reaction Bar - iOS风格磨砂玻璃，多行向上扩展 */
.message-reaction-bar {
  position: absolute;
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-end;
  justify-content: center;
  /* 🔥 更精致：gap 4px，padding 8px */
  gap: 4px;
  padding: 8px;
  max-width: 300px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* 🔥 更小巧：border-radius 24px */
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  z-index: 10020;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message-action-overlay.visible .message-reaction-bar {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-theme='dark'] .message-reaction-bar {
  background: rgba(50, 50, 52, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.reaction-item {
  /* 🔥 更精致：42px → 38px */
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.reaction-item:hover {
  transform: scale(1.15);
  background: var(--hover-bg);
}

[data-theme='dark'] .reaction-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.reaction-item:active {
  transform: scale(0.95);
}

.reaction-item svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 2;
}

.reaction-item:first-child svg {
  stroke: #8e8e93;
}

[data-theme='dark'] .reaction-item svg {
  stroke: #8e8e93;
}

/* Text-based reactions */
.reaction-haha span,
.reaction-exclaim span,
.reaction-question span {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1;
  text-align: center;
}

.reaction-haha span {
  font-size: 11px;
  letter-spacing: -0.5px;
}

.reaction-exclaim span {
  font-size: 16px;
}

.reaction-question span {
  font-size: 18px;
}

[data-theme='dark'] .reaction-haha span,
[data-theme='dark'] .reaction-exclaim span,
[data-theme='dark'] .reaction-question span {
  color: #8e8e93;
}

/* Action Menu - iOS风格磨砂玻璃 */
.message-action-menu {
  position: absolute;
  /* 🔥 更精致：260px → 240px */
  width: 240px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  /* 🔥 更小巧：14px → 12px */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transform: translateY(10px) scale(0.96);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  transition-delay: 0.05s;
  z-index: 10022;
}

[data-theme='dark'] .message-action-menu {
  background: rgba(44, 44, 46, 0.92);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}

.message-action-overlay.visible .message-action-menu {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.action-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 🔥 更紧凑：13px 16px → 11px 14px */
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.action-menu-item.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.action-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme='dark'] .action-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.action-menu-item:active {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme='dark'] .action-menu-item:active {
  background: rgba(255, 255, 255, 0.1);
}

.action-menu-text {
  /* 🔥 更精致：17px → 15px */
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

[data-theme='dark'] .action-menu-text {
  color: #ffffff;
}

.action-menu-item svg {
  /* 🔥 更精致：22px → 20px */
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme='dark'] .action-menu-item svg {
  stroke: rgba(255, 255, 255, 0.7);
}

.action-menu-divider {
  height: 0.5px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0;
}

[data-theme='dark'] .action-menu-divider {
  background: rgba(255, 255, 255, 0.1);
}

/* Animation for closing */
.message-action-overlay.closing {
  opacity: 0;
}

.message-action-overlay.closing .message-reaction-bar {
  transform: translateY(10px);
  opacity: 0;
}

.message-action-overlay.closing .message-action-menu {
  transform: translateY(10px);
  opacity: 0;
}

/* Prevent scroll on body when menu is open */
body.message-action-open {
  overflow: hidden;
}

/* ========== Message Reaction Bubble - 消息反应气泡 ========== */
.message-reaction-bubble,
.message-ai-reaction-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 🔥 动态宽度：短内容=圆形(28px)，长内容=胶囊形(auto width) */
  min-width: 28px;
  width: auto;
  max-width: 120px;
  height: 28px;
  padding: 0 6px;
  background: #ffffff;
  /* 🔥 大圆角：自动适配圆形/胶囊形 */
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 2px solid var(--bg-primary);
  z-index: 10;
  cursor: pointer;
  transition: transform 0.15s ease;
  /* 🔥 文字不换行，超出显示省略号 */
  white-space: nowrap;
  overflow: hidden;
}

.message-reaction-bubble:hover,
.message-ai-reaction-bubble:hover {
  transform: scale(1.1);
}

.message-reaction-bubble:active,
.message-ai-reaction-bubble:active {
  transform: scale(0.95);
}

[data-theme='dark'] .message-reaction-bubble,
[data-theme='dark'] .message-ai-reaction-bubble {
  background: #3a3a3c;
  border-color: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 用户消息的反应 - 左上角（气泡靠右，反应在左边） */
.message-reaction-bubble.user-side {
  top: -8px;
  left: -8px;
  right: auto;
}

/* 角色消息的反应 - 右上角（气泡靠左，反应在右边） */
.message-reaction-bubble.character-side {
  top: -8px;
  right: -8px;
  left: auto;
}

/* AI反应 - 放在底部，避免与用户反应重叠 */
.message-ai-reaction-bubble.user-side {
  bottom: -8px;
  left: -8px;
  right: auto;
  top: auto;
}

.message-ai-reaction-bubble.character-side {
  bottom: -8px;
  right: -8px;
  left: auto;
  top: auto;
}

/* 反应图标样式 */
.message-reaction-bubble .reaction-icon,
.message-ai-reaction-bubble .reaction-icon {
  font-size: 14px;
  line-height: 1;
}

/* Emoji类型反应 */
.message-reaction-bubble .reaction-icon.emoji,
.message-ai-reaction-bubble .reaction-icon.emoji {
  font-size: 14px;
}

/* 文字类型反应 */
.message-reaction-bubble .reaction-icon.text,
.message-reaction-bubble .reaction-icon.custom,
.message-ai-reaction-bubble .reaction-icon.text,
.message-ai-reaction-bubble .reaction-icon.custom {
  /* 🔥 增大字体：从10px → 11px，更清晰 */
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  /* 🔥 支持长文字：显示省略号 */
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 爱心反应 - 红色 (兼容旧版) */
.message-reaction-bubble .reaction-icon.heart {
  color: #ff2d55;
}

/* 点赞反应 - 灰色 (兼容旧版) */
.message-reaction-bubble .reaction-icon.thumbsup,
.message-reaction-bubble .reaction-icon.thumbsdown {
  color: #8e8e93;
}

[data-theme='dark'] .message-reaction-bubble .reaction-icon.thumbsup,
[data-theme='dark'] .message-reaction-bubble .reaction-icon.thumbsdown {
  color: #aeaeb2;
}

/* 文字反应 - 灰色 */
.message-reaction-bubble .reaction-icon.haha,
.message-reaction-bubble .reaction-icon.exclaim,
.message-reaction-bubble .reaction-icon.question {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', sans-serif;
  font-weight: 800;
  /* 🔥 增大字体：从10px → 11px */
  font-size: 11px;
  color: #8e8e93;
}

[data-theme='dark'] .message-reaction-bubble .reaction-icon.haha,
[data-theme='dark'] .message-reaction-bubble .reaction-icon.exclaim,
[data-theme='dark'] .message-reaction-bubble .reaction-icon.question {
  color: #aeaeb2;
}

/* ========== Custom Reaction Manager Modal ========== */
.custom-reaction-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10002;
  animation: fadeIn 0.2s ease;
}

.custom-reaction-modal.show {
  display: flex;
}

.custom-reaction-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 20px;
  width: 90%;
  max-width: 320px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme='dark'] .custom-reaction-container {
  background: rgba(44, 44, 46, 0.95);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-reaction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] .custom-reaction-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.custom-reaction-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.custom-reaction-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme='dark'] .custom-reaction-close {
  background: rgba(255, 255, 255, 0.1);
}

.custom-reaction-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

.custom-reaction-close svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-secondary);
  stroke-width: 2.5;
  fill: none;
}

.custom-reaction-content {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

.custom-reaction-section {
  margin-bottom: 20px;
}

.custom-reaction-section:last-child {
  margin-bottom: 0;
}

.custom-reaction-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Current Reaction Slots */
.custom-reaction-slots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reaction-slot {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

[data-theme='dark'] .reaction-slot {
  background: rgba(255, 255, 255, 0.08);
}

.reaction-slot:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: scale(1.05);
}

.reaction-slot.empty {
  border: 2px dashed rgba(0, 0, 0, 0.15);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 20px;
}

[data-theme='dark'] .reaction-slot.empty {
  border-color: rgba(255, 255, 255, 0.15);
}

.reaction-slot .slot-content {
  font-size: 24px;
  line-height: 1;
}

.reaction-slot .slot-content.text-reaction {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.reaction-slot .slot-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff3b30;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4);
}

.reaction-slot:hover .slot-delete {
  display: flex;
}

.reaction-slot .slot-delete svg {
  width: 10px;
  height: 10px;
  stroke: #ffffff;
  stroke-width: 3;
  fill: none;
}

/* Add Reaction Input */
.custom-reaction-input-row {
  display: flex;
  /* 🔥 改成纵向布局：按钮在输入框下方 */
  flex-direction: column;
  gap: 10px;
}

.custom-reaction-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
}

[data-theme='dark'] .custom-reaction-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.custom-reaction-input:focus {
  border-color: var(--accent-color);
  background: rgba(0, 0, 0, 0.02);
}

.custom-reaction-input::placeholder {
  color: var(--text-tertiary);
}

.custom-reaction-add-btn {
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--accent-color);
  /* 🔥 Light模式：白色文字（黑色背景） */
  color: white;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  /* 🔥 纵向布局下占满宽度 */
  width: 100%;
}

/* 🔥 Dark模式：黑色文字（白色背景） */
[data-theme='dark'] .custom-reaction-add-btn {
  color: #000000;
}

.custom-reaction-add-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.custom-reaction-add-btn:active {
  transform: scale(0.98);
}

/* Preset Emojis */
.custom-reaction-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preset-emoji {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme='dark'] .preset-emoji {
  background: rgba(255, 255, 255, 0.08);
}

.preset-emoji:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: scale(1.1);
}

.preset-emoji:active {
  transform: scale(0.95);
}

/* Reset Button */
.custom-reaction-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  margin-top: 8px;
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.08);
  color: #ff3b30;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-reaction-reset:hover {
  background: rgba(255, 59, 48, 0.15);
}

.custom-reaction-reset svg {
  width: 18px;
  height: 18px;
  stroke: #ff3b30;
  stroke-width: 2;
  fill: none;
}

/* Reaction bar - customize button */
.reaction-item.customize-btn {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
}

[data-theme='dark'] .reaction-item.customize-btn {
  background: rgba(255, 255, 255, 0.1);
}

.reaction-item.customize-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-secondary);
  stroke-width: 2;
  fill: none;
}

/* Dynamic reaction items in bar */
.reaction-item .reaction-emoji {
  font-size: 24px;
  line-height: 1;
}

.reaction-item .reaction-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.1;
  /* 🔥 长文字显示优化：超出显示省略号 */
  max-width: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== End Message Action Menu ========== */

/* ========== 🎭 角色状态系统消息 ========== */

.chat-system-status-message {
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  margin: 6px 0;
}

.status-change-content {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  background: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  animation: statusMsgFadeIn 0.4s ease;
}

[data-theme='dark'] .status-change-content {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: var(--text-tertiary);
}

.status-text {
  font-weight: 400;
  letter-spacing: 0.2px;
}

@keyframes statusMsgFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========== End 角色状态系统消息 ========== */

/* ========== 拍一拍系统消息 ========== */
.chat-system-tickle-message {
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  margin: 6px 0;
}

.tickle-content {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  background: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  animation: tickleMsgFadeIn 0.4s ease;
}

[data-theme='dark'] .tickle-content {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: var(--text-tertiary);
}

.tickle-text {
  font-weight: 400;
  letter-spacing: 0.2px;
}

@keyframes tickleMsgFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========== 撤回系统消息（可查看原文） ========== */
.chat-system-recall-message {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.chat-system-recall-message .tickle-content {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.chat-system-recall-message .tickle-content:active {
  transform: scale(0.98);
}

.chat-system-recall-message .recall-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  font-size: 11px;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  appearance: none;
  font-family: inherit;
}

.chat-system-recall-message .recall-badge:active {
  transform: scale(0.98);
  background: var(--hover-bg);
}

[data-theme='dark'] .chat-system-recall-message .recall-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.chat-system-recall-message .recall-star {
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: 0.8;
  animation: recallStarSpin 10s linear infinite;
  flex-shrink: 0;
}

@keyframes recallStarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.chat-system-recall-message .recall-ghost {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin-top 0.3s ease;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 11px;
  padding: 0 8px;
}

.chat-system-recall-message.peek-active .recall-ghost {
  max-height: 50vh;
  margin-top: 6px;
}

.chat-system-recall-message .recall-ghost-text {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  opacity: 0;
  transform: translateX(10px);
  white-space: pre-wrap;
  background-image: linear-gradient(var(--text-tertiary), var(--text-tertiary));
  background-position: 0% 55%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: opacity 0.4s ease, transform 0.4s ease, background-size 0.6s 0.2s ease;
}

.chat-system-recall-message.peek-active .recall-ghost-text {
  opacity: 0.65;
  transform: translateX(0);
  background-size: 100% 1px;
}

/* ========== End 拍一拍系统消息 ========== */

/* ==================== BaoBaoBook Category Drawer - 百宝书分类管理抽屉 ==================== */

/* 遮罩层 */
.baobaobook-category-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.baobaobook-category-drawer-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* 抽屉本体 */
.baobaobook-category-drawer-sheet {
  width: 100%;
  max-height: 75vh;
  background: var(--bg-primary);
  border-radius: 24px 24px 0 0;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.baobaobook-category-drawer-overlay.active .baobaobook-category-drawer-sheet {
  transform: translateY(0);
}

/* 书本装饰元素 */
.baobaobook-category-drawer-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-color) 10%,
    var(--accent-color) 90%,
    transparent 100%
  );
  opacity: 0.3;
}

/* Header区域 */
.baobaobook-category-drawer-header {
  padding: 16px 24px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-secondary);
}

/* 拖拽手柄 */
.baobaobook-category-drawer-handle {
  width: 40px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 2px;
  margin: 0 auto 16px;
  opacity: 0.6;
}

/* 标题 */
.baobaobook-category-drawer-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.baobaobook-category-drawer-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-align: center;
  opacity: 0.7;
}

/* 分类列表 */
.baobaobook-category-drawer-list {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 40vh;
}

/* 空状态 */
.baobaobook-category-drawer-list .category-empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-tertiary);
}

/* 分类项 */
.baobaobook-category-drawer-list .category-item {
  background: var(--bg-tertiary);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1.5px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.baobaobook-category-drawer-list .category-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-color);
  opacity: 0;
  transition: opacity 0.2s;
}

.baobaobook-category-drawer-list .category-item:active {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  transform: scale(0.98);
}

.baobaobook-category-drawer-list .category-item:active::before {
  opacity: 1;
}

/* 分类项信息 */
.category-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-item-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.category-item-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
}

/* 分类项操作按钮 */
.category-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.category-item-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-item-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 2;
  transition: stroke 0.2s;
}

.category-item-btn.edit:active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: scale(0.92);
}

.category-item-btn.edit:active svg {
  stroke: white;
}

.category-item-btn.delete:active {
  background: #ef4444;
  border-color: #ef4444;
  transform: scale(0.92);
}

.category-item-btn.delete:active svg {
  stroke: white;
}

/* 添加新分类区域 */
.baobaobook-category-drawer-add-section {
  padding: 40px 24px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.baobaobook-category-drawer-add-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.baobaobook-category-drawer-add-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.baobaobook-category-drawer-input {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.baobaobook-category-drawer-input:focus {
  outline: none;
  border-color: var(--accent-color);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.baobaobook-category-drawer-input::placeholder {
  color: var(--text-tertiary);
  font-size: 13px;
}

.baobaobook-category-drawer-add-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--accent-color);
  color: white;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.baobaobook-category-drawer-add-btn:active {
  transform: scale(0.95);
  background: var(--accent-dark);
}

.baobaobook-category-drawer-add-btn svg {
  fill: none;
  stroke: currentColor;
}

/* Dark Mode */
[data-theme="dark"] .baobaobook-category-drawer-overlay {
  background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .baobaobook-category-drawer-list .category-item {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .baobaobook-category-drawer-list .category-item:active {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .category-item-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==================== End BaoBaoBook Category Drawer ==================== */

/* ==================== BaoBaoBook Entry Drawer ==================== */

.baobaobook-entry-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.baobaobook-entry-drawer-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* 抽屉本体 */
.baobaobook-entry-drawer-sheet {
  width: 100%;
  max-height: 80vh;
  background: var(--bg-primary);
  border-radius: 24px 24px 0 0;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.baobaobook-entry-drawer-overlay.active .baobaobook-entry-drawer-sheet {
  transform: translateY(0);
}

/* 装饰元素 */
.baobaobook-entry-drawer-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-color) 10%,
    var(--accent-color) 90%,
    transparent 100%
  );
  opacity: 0.3;
}

/* Header区域 */
.baobaobook-entry-drawer-header {
  padding: 16px 24px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-secondary);
}

/* 拖拽手柄 */
.baobaobook-entry-drawer-handle {
  width: 40px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 2px;
  margin: 0 auto 16px;
  opacity: 0.6;
}

/* 标题 */
.baobaobook-entry-drawer-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.baobaobook-entry-drawer-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-align: center;
  opacity: 0.7;
}

/* 表单区域 */
.baobaobook-entry-drawer-form {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 表单组 */
.baobaobook-entry-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 标签 */
.baobaobook-entry-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.required-mark {
  color: #ef4444;
  margin-left: 2px;
}

.optional-mark {
  text-transform: none;
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 11px;
}

/* 输入框 */
.baobaobook-entry-input,
.baobaobook-entry-select {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.baobaobook-entry-input:focus,
.baobaobook-entry-select:focus {
  outline: none;
  border-color: var(--accent-color);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.baobaobook-entry-input::placeholder {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* 文本域 */
.baobaobook-entry-textarea {
  min-height: 160px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  resize: vertical;
}

.baobaobook-entry-textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.baobaobook-entry-textarea::placeholder {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* 提示文字 */
.baobaobook-entry-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  opacity: 0.8;
}

/* 字符计数 */
.baobaobook-entry-char-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
  letter-spacing: 0.3px;
}

/* 底部按钮区 */
.baobaobook-entry-drawer-actions {
  padding: 40px 24px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  gap: 12px;
}

/* 取消按钮 */
.baobaobook-entry-btn-cancel {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-color);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.baobaobook-entry-btn-cancel:active {
  transform: scale(0.95);
  background: var(--bg-secondary);
}

/* 删除按钮 */
.baobaobook-entry-btn-delete {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.baobaobook-entry-btn-delete:active {
  transform: scale(0.95);
  background: var(--bg-secondary);
}

/* 保存按钮 */
.baobaobook-entry-btn-save {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-color);
  color: white;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.baobaobook-entry-btn-save:active {
  transform: scale(0.95);
  background: var(--accent-dark);
}

.baobaobook-entry-btn-save svg {
  fill: none;
  stroke: currentColor;
}

/* Dark Mode */
[data-theme="dark"] .baobaobook-entry-drawer-overlay {
  background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .baobaobook-entry-btn-save {
  color: #000;
}

/* ==================== End BaoBaoBook Entry Drawer ==================== */

/* ==================== BaoBaoBook Entry List ==================== */
/* 紧凑列表式布局，告别浪费空间的卡片 */

.baobaobook-entry-container {
  padding: 16px;
}

/* 创建条目按钮 - 放在列表顶部 */
.baobaobook-create-entry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.baobaobook-create-entry-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: var(--bg-secondary);
}

.baobaobook-create-entry-btn:active {
  transform: scale(0.98);
}

.baobaobook-create-entry-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* 条目列表容器 */
.baobaobook-entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 单个条目项 - 紧凑的水平布局 */
.baobaobook-entry-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.baobaobook-entry-item:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-color);
  transform: translateX(2px);
}

.baobaobook-entry-item:active {
  transform: scale(0.99);
}

/* 首字母头像 */
.baobaobook-entry-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
}

/* 条目信息区域 */
.baobaobook-entry-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 条目标题行 */
.baobaobook-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.baobaobook-entry-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分类标签 */
.baobaobook-entry-category {
  flex-shrink: 0;
  padding: 2px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
}

/* 关键词行 */
.baobaobook-entry-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.baobaobook-entry-keyword {
  padding: 1px 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* 内容预览 */
.baobaobook-entry-preview {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 空状态 */
.baobaobook-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.baobaobook-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: var(--text-tertiary);
  opacity: 0.5;
}

.baobaobook-empty-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.baobaobook-empty-text {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* ==================== End BaoBaoBook Entry List ==================== */

/* ==================== Chat Settings BaoBaoBook Binding - 聊天设置百宝书绑定 ==================== */

/* 与settings-select保持一致的样式 */
.chat-baobaobook-binding-container {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.chat-baobaobook-binding-container:focus-within,
.chat-baobaobook-binding-container.active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(42, 42, 42, 0.05);
}

[data-theme="dark"] .chat-baobaobook-binding-container:focus-within,
[data-theme="dark"] .chat-baobaobook-binding-container.active {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.chat-baobaobook-binding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-baobaobook-binding-header:hover {
  background: var(--bg-tertiary);
}

.chat-baobaobook-binding-summary {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
}

.chat-baobaobook-binding-summary.has-selection {
  color: var(--text-primary);
  font-weight: 500;
}

.chat-baobaobook-binding-arrow {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s ease;
}

.chat-baobaobook-binding-container.expanded .chat-baobaobook-binding-arrow {
  transform: rotate(180deg);
}

.chat-baobaobook-binding-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
  background: var(--bg-tertiary);
}

.chat-baobaobook-binding-container.expanded .chat-baobaobook-binding-list {
  max-height: 240px;
  overflow-y: auto;
  border-top-color: var(--border-color);
}

.chat-baobaobook-binding-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
}

.chat-baobaobook-binding-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-color);
}

.chat-baobaobook-binding-item:last-child {
  border-bottom: none;
}

.chat-baobaobook-binding-item:hover {
  background: var(--bg-secondary);
}

.chat-baobaobook-binding-item.selected {
  background: var(--bg-secondary);
}

.chat-baobaobook-binding-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: var(--bg-primary);
}

.chat-baobaobook-binding-item.selected .chat-baobaobook-binding-checkbox {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.chat-baobaobook-binding-checkbox svg {
  width: 10px;
  height: 10px;
  stroke: var(--bg-primary);
  fill: none;
  stroke-width: 2.5;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}

.chat-baobaobook-binding-item.selected .chat-baobaobook-binding-checkbox svg {
  opacity: 1;
  transform: scale(1);
}

.chat-baobaobook-binding-info {
  flex: 1;
  min-width: 0;
}

.chat-baobaobook-binding-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-baobaobook-binding-category {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 关键词标签 - 黑白灰风格 */
.chat-baobaobook-keyword-badge {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-tertiary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 聊天设置百宝书绑定 - 分类标签栏 */
.chat-baobaobook-binding-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.chat-baobaobook-binding-cat-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.chat-baobaobook-binding-cat-tab:hover {
  background: var(--bg-primary);
  border-color: var(--text-tertiary);
}

.chat-baobaobook-binding-cat-tab:active {
  transform: scale(0.96);
}

.chat-baobaobook-binding-cat-tab.all-selected {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

[data-theme="dark"] .chat-baobaobook-binding-cat-tab.all-selected {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.chat-baobaobook-binding-cat-tab .cat-count {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.7;
}

.chat-baobaobook-binding-cat-tab.all-selected .cat-count {
  opacity: 0.9;
}

/* 聊天设置百宝书绑定 - 分组标题 */
.chat-baobaobook-binding-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
}

.chat-baobaobook-binding-group-header:first-of-type {
  margin-top: 0;
  border-top: none;
}

.chat-baobaobook-binding-group-header .group-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-baobaobook-binding-group-header .group-count {
  font-size: 11px;
  color: var(--text-tertiary);
}

.chat-baobaobook-binding-group-header .group-count.all-selected {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ==================== End Chat Settings BaoBaoBook Binding ==================== */

/* ==================== Mmpages (Threads Profile) ==================== */

/* Mmpages Overlay - 覆盖整个手机屏幕 */
.mmpages-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  background-color: var(--bg-primary);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.28, 0.84, 0.42, 1),
              opacity 0.35s cubic-bezier(0.28, 0.84, 0.42, 1);
  will-change: transform, opacity;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  contain: layout style paint;
}

.mmpages-overlay.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.mmpages-container {
  height: 100%;
  width: 100%;
  max-width: 430px;
  max-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Global SVG rounded style for mmpages */
#mmpagesScreen svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========== Top Navbar ========== */
.mmpages-top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  /* 🔥 使用全局App Header padding变量 */
  padding: var(--app-header-total-padding) 16px 12px;
  position: sticky;
  top: 0;
  background-color: var(--bg-primary);
  z-index: 100;
  flex-shrink: 0;
}

.mmpages-nav-left {
  display: flex;
  align-items: center;
}

.mmpages-nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mmpages-nav-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.mmpages-nav-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-primary);
  stroke-width: 1.8;
  fill: none;
}

.mmpages-back-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}

/* ========== Profile Section ========== */
.mmpages-profile-section {
  padding: 16px 16px 16px;
  flex-shrink: 0;
}

.mmpages-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
}

.mmpages-profile-info {
  flex: 1;
  padding-top: 0;
}

.mmpages-display-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  line-height: 1.2;
}

.mmpages-username {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 400;
}

.mmpages-bio {
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 4px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.mmpages-bio-note {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  line-height: 1.35;
}

.mmpages-followers-count {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 0;
}

.mmpages-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f5e6d3 0%, #e5d5c5 100%);
}

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

/* ========== Action Buttons ========== */
.mmpages-action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.mmpages-btn {
  flex: 1;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  border: none;
  font-family: inherit;
}

.mmpages-btn-primary {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border: 1.5px solid var(--text-primary);
}

.mmpages-btn-secondary {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1.5px solid var(--border-color);
}

.mmpages-btn-primary:hover {
  opacity: 0.9;
}

.mmpages-btn-secondary:hover {
  background-color: var(--bg-secondary);
}

/* ========== Tabs ========== */
.mmpages-tabs-container {
  position: sticky;
  top: 56px;
  background-color: var(--bg-primary);
  z-index: 99;
  border-bottom: 0.5px solid var(--border-color);
  flex-shrink: 0;
  margin-top: 0;
}

.mmpages-tabs {
  display: flex;
}

.mmpages-tab {
  flex: 1;
  padding: 12px 0 11px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.mmpages-tab.active {
  color: var(--text-primary);
  font-weight: 600;
}

.mmpages-tab.active::after {
  content: '';
  position: absolute;
  bottom: -0.5px;
  left: 0;
  right: 0;
  height: 1.5px;
  background-color: var(--text-primary);
}

/* ========== Posts ========== */
.mmpages-posts-container {
  flex: 1;
  padding-bottom: 0;
  min-height: 200px;
}

.mmpages-post {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--post-separator);
}

.mmpages-post-header {
  display: flex;
  align-items: flex-start;
}

.mmpages-post-avatar-wrapper {
  position: relative;
  margin-right: 10px;
  flex-shrink: 0;
}

.mmpages-post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #f5e6d3 0%, #e5d5c5 100%);
}

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

.mmpages-follow-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background-color: var(--text-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-primary);
}

.mmpages-follow-badge svg {
  width: 10px;
  height: 10px;
  stroke: var(--bg-primary);
  stroke-width: 2.5;
  fill: none;
}

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

.mmpages-post-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.mmpages-post-user-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mmpages-post-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.mmpages-post-time {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.mmpages-post-more {
  padding: 4px;
  cursor: pointer;
  display: flex;
  gap: 2.5px;
}

.mmpages-post-more span {
  width: 3.5px;
  height: 3.5px;
  background-color: var(--text-secondary);
  border-radius: 50%;
}

.mmpages-post-text {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
  color: var(--text-primary);
  white-space: pre-wrap; /* 保留换行符并自动换行 */
  word-wrap: break-word; /* 长单词自动换行 */
  overflow-wrap: break-word; /* 更好的换行兼容性 */
}

/* 话题标签样式 - 黑白灰设计 */
.mmpages-hashtag,
.thread-hashtag {
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mmpages-hashtag:hover,
.thread-hashtag:hover {
  color: var(--text-primary);
}

/* 提及用户样式 - 黑白灰设计 */
.mmpages-mention,
.thread-mention {
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mmpages-mention:hover,
.thread-mention:hover {
  color: var(--text-primary);
}

/* Post images - horizontal scroll layout (参考thread-detail-preview) */
.mmpages-post-images {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto; /* 横向滚动 */
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}

/* 隐藏滚动条（Webkit浏览器） */
.mmpages-post-images::-webkit-scrollbar {
  display: none;
}

.mmpages-post-image {
  flex-shrink: 0; /* 防止压缩 */
  /* 🔥 【老王优化】自适应图片比例 - 支持横图、竖图、方图 */
  max-width: 280px; /* 最大宽度（横图限制） */
  max-height: 320px; /* 最大高度（竖图限制） */
  min-width: 140px; /* 最小宽度（避免太小） */
  height: auto; /* 高度自适应 */
  border-radius: 12px;
  background: linear-gradient(135deg, #f0ebe6 0%, #e8e3de 100%);
  overflow: hidden;
  object-fit: contain; /* 完整显示图片，不裁剪 */
  display: block; /* 确保图片正常显示 */
}

/* 第一张图片左对齐 */
.mmpages-post-image:first-child {
  margin-left: 0;
}

[data-theme='dark'] .mmpages-post-image {
  background: linear-gradient(135deg, #2a2520 0%, #1f1a16 100%);
}

.mmpages-post-image-christmas {
  background: linear-gradient(135deg, #3a2a1f 0%, #2a1f18 100%) !important;
}

/* 文字描述图特殊样式 */
.mmpages-image-desc {
  /* 🔥 文字图保持固定3:4比例 */
  width: 160px !important;
  height: 213px !important;
  max-width: 160px !important;
  max-height: 213px !important;
  min-width: 160px !important;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.mmpages-image-desc-content {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.mmpages-post-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 2px;
}

.mmpages-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 12px 8px 0;
}

.mmpages-action-btn svg {
  width: 21px;
  height: 21px;
  stroke: var(--text-primary);
  stroke-width: 1.6;
  fill: none;
}

.mmpages-action-btn.liked svg {
  fill: #ff3b5c;
  stroke: #ff3b5c;
}

.mmpages-action-btn span {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Mmpages Empty State */
.mmpages-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  text-align: center;
}

.mmpages-empty-state svg {
  width: 60px;
  height: 60px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
  margin-bottom: 16px;
  opacity: 0.4;
}

.mmpages-empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.mmpages-empty-state-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ==================== Mmpages Edit Modal ==================== */
.mmpages-edit-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mmpages-edit-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mmpages-edit-sheet {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background-color: var(--bg-primary);
  border-radius: 20px 20px 0 0;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mmpages-edit-overlay.active .mmpages-edit-sheet {
  transform: translateY(0);
}

.mmpages-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 0.5px solid var(--border-color);
  flex-shrink: 0;
}

.mmpages-edit-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.mmpages-edit-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.mmpages-edit-close:hover {
  background-color: var(--bg-tertiary);
}

.mmpages-edit-close svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-primary);
  stroke-width: 2;
  fill: none;
}

.mmpages-edit-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.mmpages-edit-row {
  padding: 9px 20px;
  position: relative;
}

.mmpages-edit-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 0.5px;
  background-color: var(--border-color);
}

.mmpages-edit-row:last-child::after {
  display: none;
}

.mmpages-edit-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mmpages-edit-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.mmpages-edit-input {
  width: 100%;
  padding: 6px 0;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
}

.mmpages-edit-input::placeholder {
  color: var(--text-tertiary);
}

.mmpages-edit-textarea {
  width: 100%;
  padding: 6px 0;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
}

.mmpages-edit-textarea::placeholder {
  color: var(--text-tertiary);
}

/* Name Row with Lock Icon & Avatar */
.mmpages-edit-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mmpages-edit-lock-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.mmpages-edit-lock-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--text-primary);
  stroke-width: 1.8;
  fill: none;
}

.mmpages-edit-name-row .mmpages-edit-input {
  flex: 1;
  padding: 4px 0;
}

.mmpages-edit-avatar-wrapper {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, #f5e6d3 0%, #e5d5c5 100%);
  transition: opacity 0.2s;
}

[data-theme='dark'] .mmpages-edit-avatar-wrapper {
  background: linear-gradient(135deg, #2a2520 0%, #1f1a16 100%);
}

.mmpages-edit-avatar-wrapper:hover {
  opacity: 0.8;
}

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

/* Followers Row */
.mmpages-edit-followers-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mmpages-edit-followers-input {
  flex: 0 0 70px;
  padding: 4px 0;
  text-align: left;
}

.mmpages-edit-followers-unit {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
}

.mmpages-edit-followers-text {
  font-size: 15px;
  color: var(--text-tertiary);
}

/* Footer */
.mmpages-edit-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--border-color);
  flex-shrink: 0;
}

.mmpages-edit-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
}

.mmpages-edit-btn-cancel {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.mmpages-edit-btn-cancel:hover {
  background-color: var(--bg-secondary);
}

.mmpages-edit-btn-save {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.mmpages-edit-btn-save:hover {
  opacity: 0.9;
}

/* ==================== End Mmpages ==================== */

/* ==================== Image Gallery Drawer - 动态图库抽屉 ==================== */

/* 遮罩层 */
.image-gallery-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.image-gallery-drawer-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* 抽屉本体 */
.image-gallery-drawer-sheet {
  width: 100%;
  max-height: 78vh;
  background: var(--bg-primary);
  border-radius: 0 0 16px 16px;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.image-gallery-drawer-overlay.active .image-gallery-drawer-sheet {
  transform: translateY(0);
}

/* Header */
.image-gallery-drawer-header {
  padding: 44px 16px 12px;
  border-bottom: 0.5px solid var(--border-color);
  flex-shrink: 0;
}

/* 拖拽手柄 */
.image-gallery-drawer-handle {
  width: 32px;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* 标题行 */
.image-gallery-drawer-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.image-gallery-drawer-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.image-gallery-drawer-title svg {
  display: none;
}

.image-gallery-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-gallery-drawer-close:active {
  background: var(--bg-tertiary);
}

.image-gallery-drawer-close svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
}

.image-gallery-drawer-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 分类列表容器 */
.image-gallery-category-list {
  padding: 8px 16px 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 40vh;
}

/* 空状态 */
.image-gallery-empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-tertiary);
}

.image-gallery-empty-state svg {
  width: 36px;
  height: 36px;
  stroke: var(--border-color);
  stroke-width: 1;
  fill: none;
  margin-bottom: 10px;
}

.image-gallery-empty-state p {
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

/* 分类项 */
.image-gallery-category-item {
  background: transparent;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 0.5px solid var(--border-color);
  cursor: pointer;
}

.image-gallery-category-item:last-child {
  border-bottom: none;
}

.image-gallery-category-item:active {
  opacity: 0.6;
  border-color: var(--border-color);
  transform: scale(0.98);
}

.image-gallery-category-item.disabled {
  opacity: 0.35;
}

/* 分类缩略图 */
.image-gallery-category-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.image-gallery-category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-gallery-category-thumb svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
}

/* 分类信息 */
.image-gallery-category-info {
  flex: 1;
  min-width: 0;
}

.image-gallery-category-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.image-gallery-category-badge {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  background: transparent;
  color: var(--text-tertiary);
  font-weight: 400;
  border: 0.5px solid var(--border-color);
}

.image-gallery-category-badge.universal {
  color: var(--text-tertiary);
}

.image-gallery-category-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 分类操作 */
.image-gallery-category-actions {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

.image-gallery-category-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-gallery-category-btn:active {
  background: var(--bg-tertiary);
}

.image-gallery-category-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
}

.image-gallery-category-btn.delete svg {
  stroke: var(--text-tertiary);
}

/* 添加分类区域 */
.image-gallery-add-section {
  padding: 12px 16px 16px;
  border-top: 0.5px solid var(--border-color);
}

.image-gallery-add-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.image-gallery-add-title svg {
  display: none;
}

.image-gallery-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-gallery-add-row {
  display: flex;
  gap: 8px;
}

.image-gallery-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 0.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
}

.image-gallery-input:focus {
  outline: none;
  border-color: var(--text-tertiary);
}

.image-gallery-input::placeholder {
  color: var(--text-tertiary);
}

.image-gallery-select {
  width: 110px;
  height: 36px;
  padding: 0 8px;
  border: 0.5px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.image-gallery-add-btn {
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.image-gallery-add-btn:active {
  opacity: 0.7;
}

.image-gallery-add-btn svg {
  display: none;
}

/* ========== 图片管理面板 ========== */

.image-gallery-images-panel {
  display: none;
}

.image-gallery-images-panel.active {
  display: flex;
  flex-direction: column;
}

/* 面板头部 */
.image-gallery-images-header {
  padding: 44px 16px 12px;
  border-bottom: 0.5px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-gallery-images-back {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.image-gallery-images-back:active {
  background: var(--bg-tertiary);
}

.image-gallery-images-back svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-primary);
  stroke-width: 1.5;
  fill: none;
}

.image-gallery-images-title-area {
  flex: 1;
  min-width: 0;
}

.image-gallery-images-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-gallery-images-count {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.image-gallery-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.image-gallery-toggle-label {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 图片网格 */
.image-gallery-images-grid {
  padding: 2px;
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-height: 48vh;
}

/* 图片项 */
.image-gallery-image-item {
  aspect-ratio: 1;
  background: var(--bg-tertiary);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.image-gallery-image-item:active {
  opacity: 0.7;
}

.image-gallery-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-gallery-image-item .image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 10px;
}

/* 图片描述标记 */
.image-gallery-image-desc-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 6px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  font-size: 10px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 删除按钮 */
.image-gallery-image-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.image-gallery-image-item:hover .image-gallery-image-delete,
.image-gallery-image-item:active .image-gallery-image-delete {
  opacity: 1;
}

.image-gallery-image-delete svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}

/* 添加图片项 */
.image-gallery-add-image-item {
  aspect-ratio: 1;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.image-gallery-add-image-item:active {
  background: var(--bg-tertiary);
}

.image-gallery-add-image-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  fill: none;
}

.image-gallery-add-image-item span {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* ========== 添加图片弹窗 ========== */

.image-gallery-add-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 310;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.image-gallery-add-modal.active {
  opacity: 1;
  pointer-events: all;
}

.image-gallery-add-modal-content {
  width: 100%;
  max-width: 300px;
  background: var(--bg-primary);
  border-radius: 14px;
  padding: 20px;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.image-gallery-add-modal.active .image-gallery-add-modal-content {
  transform: scale(1);
}

.image-gallery-add-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-align: center;
}

.image-gallery-add-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-gallery-add-modal-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  display: block;
}

.image-gallery-add-modal-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
}

.image-gallery-add-modal-input:focus {
  outline: none;
  border-color: var(--text-tertiary);
}

.image-gallery-add-modal-textarea {
  width: 100%;
  height: 70px;
  padding: 10px 12px;
  border: 0.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  resize: none;
}

.image-gallery-add-modal-textarea:focus {
  outline: none;
  border-color: var(--text-tertiary);
}

.image-gallery-add-modal-textarea-batch {
  height: 110px;
  line-height: 1.5;
}

.image-gallery-add-modal-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* 预览框 */
.image-gallery-preview-box {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-gallery-preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-gallery-preview-box .preview-placeholder {
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
}

.image-gallery-preview-box .preview-placeholder svg {
  width: 24px;
  height: 24px;
  stroke: var(--border-color);
  stroke-width: 1;
  fill: none;
  margin-bottom: 4px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.image-gallery-add-modal-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.image-gallery-add-modal-btn {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.image-gallery-add-modal-btn.cancel {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.image-gallery-add-modal-btn.confirm {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.image-gallery-add-modal-btn:active {
  opacity: 0.7;
}

/* ========== Toggle开关样式 ========== */

.image-gallery-toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--bg-tertiary);
  border: 0.5px solid var(--border-color);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.image-gallery-toggle.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
}

.image-gallery-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: left 0.2s, background 0.2s;
}

.image-gallery-toggle.active::after {
  left: 20px;
  background: var(--bg-primary);
}

/* ==================== End Image Gallery Drawer ==================== */

/* ==========================================
   Thread Detail Screen - 角色动态详情页
   ========================================== */

/* Thread Detail 专用滑动过渡动画 */
#threadDetailScreen {
  /* 覆盖默认的display:none，改用transform隐藏 */
  display: flex !important;
  opacity: 1;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

#threadDetailScreen.active {
  transform: translateX(0);
  pointer-events: auto;
}

/* 退出动画：向右滑出 */
#threadDetailScreen.closing {
  transform: translateX(100%);
  pointer-events: none;
}

/* Thread Detail 独立配色变量 - 夜间主题 */
.thread-detail-container {
  /* 夜间主题变量 - 不是纯黑，略带灰色 */
  --thread-bg-primary: #0d0d0d;
  --thread-bg-secondary: #141414;
  --thread-bg-tertiary: #1c1c1c;
  --thread-bg-input: #262626;
  --thread-text-primary: #f5f5f5;
  --thread-text-secondary: #a8a8a8;
  --thread-text-tertiary: #737373;
  --thread-border-color: #2a2a2a;
  --thread-icon-color: #f5f5f5;
  --thread-icon-inactive: #737373;
  --thread-accent-blue: #1d9bf0;
  --thread-accent-blue-hover: #1a8cd8;
  --thread-author-bg: transparent;
  --thread-author-text: #a8a8a8;
  --thread-divider: #262626;
  --thread-reply-line: #3a3a3a;
  --thread-hover-bg: rgba(255, 255, 255, 0.03);
  /* follow badge - 夜间：白色填充，黑色边框，黑色十字 */
  --thread-badge-bg: #f5f5f5;
  --thread-badge-border: #0d0d0d;
  --thread-badge-icon: #0d0d0d;

  width: 100%;
  background-color: var(--thread-bg-primary);
  color: var(--thread-text-primary);
  height: 100%;
  overflow-y: auto;
  position: relative;
}

/* Thread Detail 日间主题配色 */
[data-theme='light'] .thread-detail-container {
  /* 日间主题变量 - 清爽纯净的白色系 */
  --thread-bg-primary: #ffffff;
  --thread-bg-secondary: #ffffff;
  --thread-bg-tertiary: #f8f9fa;
  --thread-bg-input: #f0f2f5;
  --thread-text-primary: #0f1419;
  --thread-text-secondary: #536471;
  --thread-text-tertiary: #8899a6;
  --thread-border-color: #eff3f4;
  --thread-icon-color: #0f1419;
  --thread-icon-inactive: #536471;
  --thread-accent-blue: #1d9bf0;
  --thread-accent-blue-hover: #1a8cd8;
  --thread-author-bg: transparent;
  --thread-author-text: #536471;
  --thread-divider: #eff3f4;
  --thread-reply-line: #cfd9de;
  --thread-hover-bg: rgba(0, 0, 0, 0.03);
  /* follow badge - 日间：黑色填充，白色边框，白色十字 */
  --thread-badge-bg: #0f1419;
  --thread-badge-border: #ffffff;
  --thread-badge-icon: #ffffff;
}

/* 顶部导航栏 */
.thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 🔥 使用全局App Header padding变量 */
  padding: var(--app-header-total-padding) 14px 10px;
  position: sticky;
  top: 0;
  background-color: var(--thread-bg-primary);
  z-index: 100;
}

.thread-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.thread-back-btn {
  background: none;
  border: none;
  color: var(--thread-text-primary);
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread-back-btn svg {
  width: 18px;
  height: 18px;
}

.thread-header-title {
  display: flex;
  flex-direction: column;
}

.thread-header-title h1 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.thread-views {
  font-size: 12px;
  color: var(--thread-text-secondary);
  font-weight: 400;
}

.thread-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thread-header-btn {
  background: none;
  border: none;
  color: var(--thread-text-primary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.thread-header-btn:hover {
  background-color: var(--thread-hover-bg);
}

.thread-header-btn svg {
  width: 20px;
  height: 20px;
}

/* 原帖区域 */
.thread-original-post {
  padding: 14px;
  position: relative;
}

.thread-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.thread-original-post::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background-color: var(--thread-divider);
}

.thread-post-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.thread-avatar-container {
  position: relative;
}

.thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--thread-bg-tertiary);
}

.thread-author-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.thread-author-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--thread-text-primary);
}

.thread-post-time {
  font-size: 12px;
  color: var(--thread-text-secondary);
}

.thread-follow-btn {
  background-color: var(--thread-text-primary);
  color: var(--thread-bg-primary);
  border: none;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.thread-follow-btn:hover {
  opacity: 0.9;
}

.thread-post-content {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  white-space: pre-wrap; /* 保留换行符并自动换行 */
  overflow-wrap: break-word; /* 更好的换行兼容性 */
}

/* 帖子配图区域 */
.thread-post-images {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.thread-post-images::-webkit-scrollbar {
  display: none;
}

.thread-post-image {
  flex-shrink: 0;
  /* 🔥 【老王优化】自适应图片比例 - 支持横图、竖图、方图 */
  max-width: 320px; /* 最大宽度（横图限制） */
  max-height: 380px; /* 最大高度（竖图限制） */
  min-width: 160px; /* 最小宽度（避免太小） */
  height: auto; /* 高度自适应 */
  border-radius: 12px;
  object-fit: contain; /* 完整显示图片，不裁剪 */
  background-color: var(--thread-bg-tertiary);
  display: block; /* 确保图片正常显示 */
}

/* 文字描述图特殊样式 - Thread Detail */
.thread-image-desc {
  /* 🔥 文字图保持固定比例 */
  width: 200px !important;
  height: 280px !important;
  max-width: 200px !important;
  max-height: 280px !important;
  min-width: 200px !important;
  background: var(--thread-bg-secondary);
  border: 1px solid var(--thread-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.thread-image-desc-content {
  font-size: 12px;
  line-height: 1.5;
  color: var(--thread-text-secondary);
  text-align: left;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  white-space: pre-wrap; /* 保留换行符并自动换行 */
  word-wrap: break-word; /* 长单词自动换行 */
  overflow-wrap: break-word; /* 更好的换行兼容性 */
}

/* 互动栏 */
.thread-post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.thread-action-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 0;
  cursor: pointer;
  transition: color 0.2s;
}

.thread-action-item:hover {
  color: #888;
}

.thread-action-item svg {
  width: 20px;
  height: 20px;
  color: var(--thread-icon-inactive);
}

.thread-action-item:hover svg {
  color: #888;
  stroke: #888;
}

.thread-action-item.thread-liked svg {
  fill: #888;
  stroke: #888;
}

.thread-action-count {
  font-size: 13px;
  color: var(--thread-text-secondary);
}

/* 排序区域 */
.thread-sort-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  position: relative;
}

.thread-sort-section::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background-color: var(--thread-divider);
}

.thread-sort-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--thread-text-primary);
}

.thread-sort-dropdown svg {
  width: 16px;
  height: 16px;
}

.thread-view-activity {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--thread-text-secondary);
}

.thread-view-activity svg {
  width: 16px;
  height: 16px;
}

/* 评论列表 */
.thread-comments-list {
  padding-bottom: 80px;
}

.thread-comment-item {
  padding: 10px 14px;
  position: relative;
  transition: background-color 0.2s;
}

.thread-comment-item::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background-color: var(--thread-divider);
}

/* 回复楼层 - 与被回复楼之间没有分割线 */
.thread-comment-item.is-reply {
  padding-top: 4px;
}

/* 楼中楼回复之间没有分割线（除了最后一条） */
.thread-comment-item.is-reply:not(.is-last-reply)::after {
  display: none;
}

/* 有回复的评论 - 与回复楼之间没有分割线 */
.thread-comment-item.has-reply {
  padding-bottom: 4px;
}

.thread-comment-item.has-reply::after {
  display: none;
}

.thread-comment-item:hover {
  background-color: var(--thread-hover-bg);
}

.thread-comment-wrapper {
  display: flex;
  gap: 12px;
}

.thread-comment-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thread-comment-avatar {
  position: relative;
}

.thread-comment-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--thread-bg-tertiary);
}

.thread-follow-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background-color: var(--thread-badge-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--thread-badge-border);
}

.thread-follow-badge svg {
  width: 10px;
  height: 10px;
  color: var(--thread-badge-icon);
}

.thread-reply-line {
  width: 2px;
  flex-grow: 1;
  background-color: var(--thread-reply-line);
  margin-top: 8px;
  border-radius: 1px;
}

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

.thread-comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.thread-comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.thread-comment-username {
  font-weight: 700;
  font-size: 13px;
  color: var(--thread-text-primary);
}

.thread-comment-time {
  font-size: 12px;
  color: var(--thread-text-secondary);
}

.thread-author-badge {
  font-size: 13px;
  color: var(--thread-text-secondary);
}

.thread-comment-more {
  background: none;
  border: none;
  color: var(--thread-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread-comment-more svg {
  width: 18px;
  height: 18px;
}

.thread-comment-text {
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 6px;
  word-wrap: break-word;
  white-space: pre-wrap; /* 保留换行符并自动换行 */
  overflow-wrap: break-word; /* 更好的换行兼容性 */
}

.thread-comment-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -8px;
}

.thread-comment-action {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
  color: var(--thread-icon-inactive);
  transition: color 0.2s;
}

.thread-comment-action:hover {
  color: #888;
}

.thread-comment-action:hover svg {
  stroke: #888;
}

.thread-comment-action.thread-liked svg {
  fill: #888;
  stroke: #888;
}

.thread-comment-action svg {
  width: 18px;
  height: 18px;
}

.thread-comment-action-count {
  font-size: 13px;
  color: var(--thread-text-secondary);
}

/* Show replies - 缩略图在头像列，文字在内容列 */
.thread-show-replies-avatars {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.thread-show-replies-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--thread-bg-primary);
  margin-left: -6px;
  background-color: var(--thread-bg-tertiary);
  object-fit: cover;
}

.thread-show-replies-avatar:first-child {
  margin-left: 0;
}

.thread-show-replies-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--thread-badge-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
  border: 2px solid var(--thread-badge-border);
}

.thread-show-replies-icon svg {
  width: 10px;
  height: 10px;
  color: var(--thread-badge-icon);
}

.thread-show-replies-text {
  margin-top: 8px;
  cursor: pointer;
  color: var(--thread-text-secondary);
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 24px;
}

/* 底部回复框 - 无背景，椭圆直接浮在页面上 */
.thread-reply-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  z-index: 100;
  pointer-events: none;
}

/* 整体椭圆输入框容器 */
.thread-reply-input-wrapper {
  display: flex;
  align-items: center;
  background-color: var(--thread-bg-input);
  border-radius: 24px;
  padding: 6px 12px 6px 6px;
  gap: 10px;
  pointer-events: auto;
}

.thread-reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--thread-bg-tertiary);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.thread-reply-avatar:hover {
  transform: scale(1.05);
}

.thread-reply-avatar:active {
  transform: scale(0.95);
}

/* 🔥 用户资料选择器容器 */
.thread-profile-picker-container {
  position: relative;
  flex-shrink: 0;
}

/* 🔥 用户资料选择器弹窗 - 3x3网格 */
.thread-profile-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: -6px;  /* 从左侧开始，留出小箭头空间 */
  transform: scale(0.9);
  transform-origin: bottom left;  /* 动画从左下角展开 */
  background: var(--thread-bg-secondary);
  border: 1px solid var(--thread-border-color);
  border-radius: 12px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 200;
}

.thread-profile-picker.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* 小三角箭头 - 指向头像位置 */
.thread-profile-picker::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 16px;  /* 箭头指向头像中心 (6px padding + 18px半径) */
  transform: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--thread-bg-secondary);
}

/* 单个头像选项 */
.thread-profile-option {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.thread-profile-option:hover {
  transform: scale(1.1);
}

.thread-profile-option:active {
  transform: scale(0.95);
}

.thread-profile-option img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.thread-profile-option.selected img {
  border-color: var(--thread-accent-blue);
}

/* 选中标记 */
.thread-profile-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--thread-accent-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: white;
  font-weight: bold;
}

/* 日间模式适配 */
[data-theme='light'] .thread-profile-picker {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.thread-reply-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--thread-text-primary);
  font-size: 15px;
  min-width: 0;
}

.thread-reply-input::placeholder {
  color: var(--thread-text-tertiary);
}

.thread-reply-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.thread-reply-action-btn {
  background: none;
  border: none;
  color: var(--thread-text-secondary);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread-reply-action-btn svg {
  width: 22px;
  height: 22px;
}

/* ==================== End Thread Detail ==================== */

/* ========================================
 * 📸 图片组件 Photo Widget
 * 支持 2x2 和 4x2 尺寸
 * 纯CSS自适应，无需特殊处理
 * ======================================== */

/* 4x2图片组件 - 强制限制溢出 */
.desktop-widget.widget-photo {
  overflow: hidden !important;
}

/* 图片组件容器 - flex column布局 */
.photo-widget {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

/* 图片内容区域 - flex: 1 自适应 */
.photo-widget-content {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.photo-widget-content:hover {
  transform: scale(0.98);
}

/* 图片元素 - 100%填充 */
.photo-widget-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 透明底图片 - contain模式 */
.photo-widget-image.transparent-mode {
  object-fit: contain;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.08) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* 效果层 - 伪元素 */
.photo-widget-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* 无效果 */
.photo-widget-content.effect-none::after {
  display: none;
}

/* 磨砂效果 */
.photo-widget-content.effect-frosted::after {
  backdrop-filter: blur(0.5px) brightness(1.02);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
}

/* 玻璃效果 */
.photo-widget-content.effect-glass::after {
  backdrop-filter: blur(1px) saturate(1.1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* 底部文字标签 - 在图片外面 */
.photo-widget-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  line-height: 1.2;
  flex-shrink: 0;
  height: 14px;
}

/* 隐藏标签 */
.photo-widget-label.hidden {
  display: none;
}

/* 占位符（空组件状态） */
.photo-widget-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.photo-widget-placeholder svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  opacity: 0.6;
}

/* ========== End Photo Widget ========== */

/* ========================================
 * 📸 Polaroid Widget - 4x2
 * 三张拍立得 + 星星装饰（点击上传）
 * ======================================== */

.polaroid-widget {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Space between polaroids, adjusted to fit */
  padding: 23px 9px; /* Padding for stars to overlap, adjusted to fit 368x176 */
  box-sizing: border-box; /* 防止padding导致溢出 */
  overflow: hidden; /* 防止星星等元素溢出导致页面拉宽 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.polaroid-star {
  position: absolute;
  width: 50px; /* Adjusted star size to fit smaller cards */
  height: 50px; /* Adjusted star size */
  background-color: #555; /* Dark gray color, explicitly background-color */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  z-index: 1; /* Keep it above polaroids */
}

.polaroid-star-1 {
  top: 0px;
  left: 0px;
  transform: rotate(-20deg);
  width: 70px; /* Adjusted size */
  height: 70px; /* Adjusted size */
}

.polaroid-star-2 {
  top: 10px;
  right: 100px; /* Changed from left to right for better spread */
  transform: rotate(30deg);
  width: 50px; /* Default star size */
  height: 50px; /* Default star size */
}

.polaroid-star-3 {
  bottom: 0px;
  right: 0px;
  transform: rotate(-10deg);
  width: 85px; /* Adjusted size */
  height: 85px; /* Adjusted size */
}

.polaroid-card {
  --polaroid-rot: 0deg; /* Keep the variable definition */
  flex: 1 1 0;
  min-width: 0;
  max-width: 29.89%; /* Adjusted to scale proportionally to 90px content width */
  height: 85%; /* 增大高度让照片区域更大 */
  background: #fff;
  border-radius: 2px; /* Match preview's implied radius or small explicit one */
  padding: 5px 5px 16px 5px; /* 减少padding让照片更大 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow, consistent with preview */
  box-sizing: border-box; /* 改为border-box防止溢出 */
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  z-index: 0;/* Keep it above stars as per current implementation, and preview's card default */
  transform: rotate(var(--polaroid-rot)) translateZ(0); /* Dynamic rotation, consistent variable */
  transition: transform 0.2s ease-in-out; /* Keep the transition */
}

.polaroid-card.p-1 { --polaroid-rot: -5deg; }
.polaroid-card.p-2 { --polaroid-rot: 5deg; }
.polaroid-card.p-3 { --polaroid-rot: -3deg; }

.polaroid-card:active {
  transform: rotate(var(--polaroid-rot)) scale(0.985) translateZ(0);
}

.polaroid-frame {
  width: 100%;
  height: 90px; /* Square image area, adjusted to fit */
  flex: 1; /* Keep flex property */
  overflow: hidden;
  background-color: #000; /* Dark background, explicitly background-color */
  position: relative;
}

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

.polaroid-img.img-1 { object-position: 20% 20%; }
.polaroid-img.img-2 { object-position: 50% 50%; }
.polaroid-img.img-3 { object-position: 80% 80%; }

.polaroid-upload-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.16s ease;
  color: rgba(255, 255, 255, 0.92);
}

.polaroid-upload-hint svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  .polaroid-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  }
  .polaroid-card:hover .polaroid-upload-hint {
    opacity: 1;
  }
}

.polaroid-card.is-empty .polaroid-upload-hint {
  opacity: 1;
}

.polaroid-caption {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1;
  height: 12px;
}

/* ========== End Polaroid Widget ========== */

/* ========================================
 * 💿 Album Widget - 响应式布局
 * 封套居中，唱片贴右边缘并向右露出一半
 * ======================================== */

.album-widget {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

.album-widget-sleeve {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  z-index: 2;
  padding: 7.14%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.album-widget-sleeve-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: blur(3px);
}

.album-widget-pause-icon {
  width: 11%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 11%;
}

.album-widget-pause-icon::before,
.album-widget-pause-icon::after {
  content: '';
  width: 22%;
  height: 85%;
  background: white;
  border-radius: 2px;
}

.album-widget-lyrics {
  margin-top: auto;
  width: 100%;
  cursor: pointer;
}

.album-widget-lyrics p {
  color: white;
  font-size: clamp(16px, 10%, 28px);
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-align: left;
  padding-left: 2%;
}

.album-widget-lyrics p.last-line .faded-text {
  color: rgba(255, 255, 255, 0.5);
}

.album-widget-record {
  position: absolute;
  height: 89.3%;
  aspect-ratio: 1;
  background-color: #1a1a1a;
  border-radius: 50%;
  left: 40%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background-image: radial-gradient(circle at 50% 50%, #333 0%, #333 1%, #1a1a1a 2%, #1a1a1a 3%, #333 4%, #333 5%, #1a1a1a 6%, #1a1a1a 7%, #333 8%, #333 9%, #1a1a1a 10%, #1a1a1a 11%, #333 12%, #333 13%, #1a1a1a 14%, #1a1a1a 15%, #333 16%, #333 17%, #1a1a1a 18%, #1a1a1a 19%, #333 20%, #333 21%, #1a1a1a 22%, #1a1a1a 23%, #333 24%, #333 25%, #1a1a1a 26%, #1a1a1a 27%, #333 28%, #333 29%, #1a1a1a 30%, #1a1a1a 31%, #333 32%, #333 33%, #1a1a1a 34%, #1a1a1a 35%, #333 36%, #333 37%, #1a1a1a 38%, #1a1a1a 39%, #333 40%, #333 41%, #1a1a1a 42%, #1a1a1a 43%, #333 44%, #333 45%, #1a1a1a 46%, #1a1a1a 47%, #333 48%, #333 49%, #1a1a1a 50%, transparent 51%);
}

.album-widget-record-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.album-widget-record-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2.2) translateY(-10%);
  filter: grayscale(100%) brightness(0.8) contrast(1.2);
}

/* 歌词编辑器（仅用于该组件的 JS 编辑） */
.album-widget-lyrics-editor {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1;
  z-index: 20;
  border-radius: 14px;
  background: rgba(15, 15, 15, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.album-widget-lyrics-textarea {
  width: 100%;
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

.album-widget-lyrics-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.album-widget-lyrics-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.album-widget-lyrics-btn.save {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(0, 0, 0, 0.9);
}

/* ========== End Album Widget ========== */

/* ========================================
 * 🎵 Sleeve Widget - 2x2 独立封套组件
 * 直接复用 album-widget-sleeve 样式，保证质感一致
 * ======================================== */

.sleeve-widget-wrap {
  width: 100%;
  height: 100%;
}

.sleeve-widget-wrap .album-widget-sleeve {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: none; /* 去掉border，填满176x176 */
  box-shadow: none; /* 去掉阴影避免溢出 */
}

/* ========== End Sleeve Widget ========== */

/* ==========================================
 * 🎨 Theme Editor V2 详情页主题编辑器
 * ========================================== */

/* ========== 悬浮按钮组 FAB ========== */
.theme-editor-fab {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-editor-fab.active {
  display: flex;
}

/* 面板展开时隐藏FAB按钮 */
.theme-editor-fab.panel-open {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(20px);
}

/* 双击页面：隐藏/显示 FAB（防遮挡） */
.theme-editor-fab.fab-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(20px);
}

/* FAB 按钮基础样式 */
.theme-fab-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.theme-fab-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 1.8;
}

.theme-fab-btn:active {
  transform: scale(0.92);
}

/* 面板按钮 */
.theme-fab-btn.panel {
  background: var(--bg-secondary);
}

.theme-fab-btn.panel.expanded {
  background: var(--text-primary);
  border-color: var(--text-primary);
}

.theme-fab-btn.panel.expanded svg {
  stroke: var(--bg-primary);
}

/* 取消按钮 */
.theme-fab-btn.cancel:hover {
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.3);
}

.theme-fab-btn.cancel:hover svg {
  stroke: #ff3b30;
}

/* 保存按钮 */
.theme-fab-btn.save {
  background: var(--text-primary);
  border-color: var(--text-primary);
}

.theme-fab-btn.save svg {
  stroke: var(--bg-primary);
}

.theme-fab-btn.save:hover {
  opacity: 0.9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ========== 面板背景遮罩 ========== */
.theme-editor-backdrop {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9997;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-editor-backdrop.active {
  display: block;
  opacity: 1;
}

/* ========== 底部编辑面板容器 ========== */
.theme-editor-panel-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.theme-editor-panel-container.expanded {
  transform: translateY(0);
  pointer-events: auto;
}

/* 底部编辑面板 */
.theme-editor-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
  max-height: 65vh;
}

/* 面板拖拽手柄 */
.theme-editor-panel::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 2px;
  margin: 10px auto 4px;
  opacity: 0.5;
}

/* 标签页 - 胶囊按钮样式 */
.theme-editor-tabs {
  display: flex;
  padding: 8px 14px 12px;
  gap: 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
}

.theme-editor-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: transparent;
}

.theme-editor-tab svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.theme-editor-tab svg rect {
  fill: currentColor;
  stroke: none;
}

.theme-editor-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.theme-editor-tab.active {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-color: var(--border-color);
  font-weight: 600;
}

/* 编辑内容区 */
.theme-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.theme-editor-content::-webkit-scrollbar {
  width: 3px;
}

.theme-editor-content::-webkit-scrollbar-track {
  background: transparent;
}

.theme-editor-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* 主题开关行 */
.theme-editor-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.theme-editor-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-editor-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.theme-editor-toggle-hint {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* 编辑区块 */
.theme-editor-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-editor-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 分类标题 - 胶囊标签样式 */
.theme-editor-section-header > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border-color);
}

.theme-editor-section-header > span::before {
  content: '◆';
  font-size: 5px;
  opacity: 0.5;
}

.theme-editor-section-actions {
  display: flex;
  gap: 6px;
}

.theme-editor-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-editor-action-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 2;
}

.theme-editor-action-btn:hover {
  background: var(--text-primary);
}

.theme-editor-action-btn:hover svg {
  stroke: var(--bg-primary);
}

/* 预设主题列表 */
.theme-editor-preset-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 110px;
  overflow-y: auto;
  padding: 2px;
}

.theme-editor-preset-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-editor-preset-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.theme-editor-preset-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-tertiary);
  transform: translateX(3px);
}

.theme-editor-preset-item:hover::before {
  opacity: 1;
}

.theme-editor-preset-item.active {
  border-color: var(--text-primary);
}

.theme-editor-preset-item.active::before {
  background: var(--text-primary);
  opacity: 1;
}

/* 预设分组标签 */
.theme-editor-preset-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 2px;
  margin-bottom: 4px;
}

.theme-editor-preset-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-editor-preset-item-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-primary);
  fill: none;
  stroke-width: 1.5;
}

.theme-editor-preset-item-info {
  flex: 1;
  min-width: 0;
}

.theme-editor-preset-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.theme-editor-preset-item-author {
  font-size: 10px;
  color: var(--text-tertiary);
}

.theme-editor-preset-item-actions {
  display: flex;
  gap: 4px;
}

.theme-editor-preset-item-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-editor-preset-item-btn svg {
  width: 13px;
  height: 13px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 2;
}

.theme-editor-preset-item-btn:hover {
  background: var(--bg-primary);
}

.theme-editor-preset-item-btn:hover svg {
  stroke: var(--text-primary);
}

.theme-editor-preset-item-btn.delete:hover svg {
  stroke: #ff3b30;
}

/* 空状态 */
.theme-editor-preset-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  text-align: center;
}

.theme-editor-preset-empty svg {
  width: 28px;
  height: 28px;
  stroke: var(--text-tertiary);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 6px;
  opacity: 0.6;
}

.theme-editor-preset-empty > span {
  font-size: 12px;
  color: var(--text-secondary);
}

.theme-editor-preset-empty-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* CSS编辑区 */
.theme-editor-css-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.theme-editor-css-hint svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  opacity: 0.7;
}

.theme-editor-css-textarea {
  width: 100%;
  min-height: 130px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

.theme-editor-css-textarea:focus {
  border-color: var(--text-secondary);
}

.theme-editor-css-textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 0.7;
}

/* ========== 编辑模式 V2 ========== */

/* 编辑模式下：内容正常显示，允许交互 */
#chatDetailScreen.theme-editing-mode {
  /* 不再隐藏内容，保持正常状态 */
}

/* 编辑模式下的视觉提示边框 */
#chatDetailScreen.theme-editing-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid var(--text-primary);
  border-radius: inherit;
  pointer-events: none;
  z-index: 9996;
  opacity: 0.3;
}

/* 编辑模式下的顶部提示条 */
.theme-editing-indicator {
  display: none;
  position: absolute;
  top: calc(var(--app-header-total-padding) + 52px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  z-index: 9996;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

#chatDetailScreen.theme-editing-mode .theme-editing-indicator {
  display: block;
}

/* ========== End Theme Editor V2 ========== */

/* ==================== Chat Add Contact Overlay ==================== */
.chat-add-contact-overlay {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

[data-theme='dark'] .chat-add-contact-overlay {
  background: rgba(0, 0, 0, 0.45);
}

.chat-add-contact-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.chat-add-contact-deco {
  position: absolute;
  top: 14%;
  right: 12%;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.chat-add-contact-star {
  position: relative;
  width: 10px;
  height: 10px;
  opacity: 0.6;
}

.chat-add-contact-star::before,
.chat-add-contact-star::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: var(--text-tertiary);
  transform: translate(-50%, -50%);
}

.chat-add-contact-star::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.chat-add-contact-star.small {
  width: 8px;
  height: 8px;
  opacity: 0.45;
}

.chat-add-contact-star.small::before,
.chat-add-contact-star.small::after {
  width: 8px;
}

.chat-add-contact-star.tiny {
  width: 6px;
  height: 6px;
  opacity: 0.35;
}

.chat-add-contact-star.tiny::before,
.chat-add-contact-star.tiny::after {
  width: 6px;
}

.chat-add-contact-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-height: 78%;
  min-height: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
  overflow: hidden;
}

/* Add Contact Panels -> match Friend Request Inbox style */
.chat-add-contact-panel[data-panel="entry"],
.chat-add-contact-panel[data-panel="number"],
.chat-add-contact-panel[data-panel="direct"],
.chat-add-contact-panel[data-panel="action"],
.chat-add-contact-panel[data-panel="request"],
.chat-add-contact-panel[data-panel="passive"] {
  width: 360px;
  max-width: calc(100% - 32px);
  max-height: 560px;
  height: auto;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  border-radius: 4px;
  border: none;
  box-shadow: var(--shadow-xl);
  padding: 0;
  gap: 0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  transform: translate(-50%, -50%) translateY(12px) scale(0.98);
}

.chat-add-contact-panel[data-panel="entry"].is-active,
.chat-add-contact-panel[data-panel="number"].is-active,
.chat-add-contact-panel[data-panel="direct"].is-active,
.chat-add-contact-panel[data-panel="action"].is-active,
.chat-add-contact-panel[data-panel="request"].is-active,
.chat-add-contact-panel[data-panel="passive"].is-active {
  transform: translate(-50%, -50%) translateY(0) scale(1);
}

.chat-add-contact-panel.is-active {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.chat-add-contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-header,
.chat-add-contact-panel[data-panel="number"] .chat-add-contact-header,
.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-header,
.chat-add-contact-panel[data-panel="action"] .chat-add-contact-header,
.chat-add-contact-panel[data-panel="request"] .chat-add-contact-header,
.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-header {
  height: 70px;
  padding: 0 30px;
  border-bottom: 1px solid transparent;
}

.chat-add-contact-header.compact {
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-color);
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-header.compact,
.chat-add-contact-panel[data-panel="number"] .chat-add-contact-header.compact,
.chat-add-contact-panel[data-panel="action"] .chat-add-contact-header.compact,
.chat-add-contact-panel[data-panel="request"] .chat-add-contact-header.compact,
.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-header.compact {
  padding-bottom: 0;
  border-bottom: 1px solid transparent;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-header,
.chat-add-contact-panel[data-panel="number"] .chat-add-contact-header,
.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-header {
  height: 82px;
  padding-top: 12px;
}

.chat-add-contact-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-add-contact-title-main {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.chat-add-contact-title-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 1.6px;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-title-main,
.chat-add-contact-panel[data-panel="number"] .chat-add-contact-title-main,
.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-title-main,
.chat-add-contact-panel[data-panel="action"] .chat-add-contact-title-main,
.chat-add-contact-panel[data-panel="request"] .chat-add-contact-title-main,
.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-title-main {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-title-sub,
.chat-add-contact-panel[data-panel="number"] .chat-add-contact-title-sub,
.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-title-sub,
.chat-add-contact-panel[data-panel="action"] .chat-add-contact-title-sub,
.chat-add-contact-panel[data-panel="request"] .chat-add-contact-title-sub,
.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-title-sub {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-close,
.chat-add-contact-back {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-close,
.chat-add-contact-panel[data-panel="number"] .chat-add-contact-back,
.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-back,
.chat-add-contact-panel[data-panel="action"] .chat-add-contact-back,
.chat-add-contact-panel[data-panel="request"] .chat-add-contact-back,
.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-back {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  color: var(--text-tertiary);
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-close:hover,
.chat-add-contact-panel[data-panel="number"] .chat-add-contact-back:hover,
.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-back:hover,
.chat-add-contact-panel[data-panel="action"] .chat-add-contact-back:hover,
.chat-add-contact-panel[data-panel="request"] .chat-add-contact-back:hover,
.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-back:hover {
  transform: none;
  box-shadow: none;
  color: var(--text-primary);
}

.chat-add-contact-close svg,
.chat-add-contact-back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.chat-add-contact-close:hover,
.chat-add-contact-back:hover {
  transform: translateY(-1px);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.chat-add-contact-options {
  display: grid;
  gap: 12px;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-options {
  padding: 10px 30px 0;
  gap: 30px;
}

.chat-add-contact-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.chat-add-contact-option:hover {
  transform: translateY(-2px);
  border-color: var(--text-tertiary);
  box-shadow: var(--shadow-sm);
}

.chat-add-contact-option.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.chat-add-contact-option-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  color: var(--text-secondary);
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option-icon.folder {
  background: var(--bg-secondary);
}

.chat-add-contact-option-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option-icon svg {
  width: 16px;
  height: 16px;
}

.chat-add-contact-option-icon.folder {
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-tertiary));
}

.chat-add-contact-option-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-add-contact-option-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option-title {
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--border-color);
}

.chat-add-contact-option-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-option-sub {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.6px;
  padding-left: 6px;
}

.chat-add-contact-panel[data-panel="entry"] .chat-add-contact-hint {
  padding: 0 30px 24px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-chip {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  letter-spacing: 0.8px;
}

.chat-add-contact-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.chat-add-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding-right: 4px;
}

.chat-add-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-add-contact-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.chat-add-contact-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-add-contact-avatar-mini {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);
}

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

.chat-add-contact-avatar-mini svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.chat-add-contact-item-name {
  font-size: 14px;
  font-weight: 600;
}

.chat-add-contact-item-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.chat-add-contact-item-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  color: var(--text-tertiary);
}

.chat-add-contact-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
  border: 1px dashed var(--border-color);
  border-radius: 16px;
}

.chat-add-contact-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 2px;
}

.chat-add-contact-avatar-wrap {
  position: relative;
  margin-bottom: 6px;
}

.chat-add-contact-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  background: var(--bg-primary);
  box-shadow: 0 0 0 1px var(--border-color), var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);
}

.chat-add-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.chat-add-contact-avatar svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
}

.chat-add-contact-name-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat-add-contact-name-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.chat-add-contact-name-star {
  width: 16px;
  height: 16px;
  fill: var(--text-primary);
  transform: rotate(18deg);
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.12));
}

[data-theme='dark'] .chat-add-contact-name-star {
  filter: drop-shadow(1px 2px 2px rgba(255, 255, 255, 0.08));
}

.chat-add-contact-id {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.chat-add-contact-info-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  padding-bottom: 6px;
}

.chat-add-contact-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-add-contact-info-row.is-muted {
  color: var(--text-tertiary);
}

.chat-add-contact-separator {
  color: var(--text-tertiary);
  font-size: 11px;
}

.chat-add-contact-profile-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.chat-add-contact-profile-select:hover {
  transform: translateY(-1px);
  border-color: var(--text-tertiary);
  box-shadow: var(--shadow-sm);
}

.chat-add-contact-profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);
  flex-shrink: 0;
}

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

.chat-add-contact-profile-avatar svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}

.chat-add-contact-profile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-add-contact-profile-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-add-contact-profile-sub {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.8px;
}

.chat-add-contact-profile-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  color: var(--text-tertiary);
}

.chat-add-contact-profile-picker {
  margin-top: 0;
  border-radius: 16px;
  border: 1px dashed var(--border-color);
  background: var(--bg-secondary);
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
}

.chat-add-contact-profile-picker.active {
  margin-top: 8px;
  padding: 6px;
  max-height: 220px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.chat-add-contact-profile-list {
  display: grid;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.chat-add-contact-profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--bg-primary);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-add-contact-profile-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.chat-add-contact-profile-item.selected {
  border-color: var(--text-tertiary);
}

.chat-add-contact-profile-item-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.chat-add-contact-profile-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-add-contact-profile-item-avatar svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.chat-add-contact-profile-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chat-add-contact-profile-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-add-contact-profile-item-meta {
  font-size: 10px;
  color: var(--text-tertiary);
}

.chat-add-contact-profile-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
}

.chat-add-contact-request-card {
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 14px;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-add-contact-request-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-add-contact-request-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);
  flex-shrink: 0;
}

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

.chat-add-contact-request-avatar svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

.chat-add-contact-request-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.chat-add-contact-request-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-add-contact-request-id {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.6px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

.chat-add-contact-request-stamp {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-tertiary);
  border: 1px dashed var(--border-color);
  padding: 4px 8px;
  border-radius: 999px;
}

.chat-add-contact-request-message label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.chat-add-contact-request-message textarea {
  width: 100%;
  resize: none;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease;
}

.chat-add-contact-request-message textarea:focus {
  border-color: var(--text-tertiary);
}

.chat-add-contact-request-message textarea::placeholder {
  color: var(--text-tertiary);
}

.chat-add-contact-actions {
  display: grid;
  gap: 10px;
}

/* ====== Add Contact: Number Search ====== */
.chat-add-contact-number-form {
  padding: 18px 30px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-add-contact-number-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.chat-add-contact-number-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-add-contact-number-input {
  flex: 1;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 0 12px;
  font-size: 13px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-add-contact-number-input:focus {
  border-color: var(--text-tertiary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] .chat-add-contact-number-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.chat-add-contact-number-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chat-add-contact-number-btn:hover {
  transform: translateY(-1px);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.chat-add-contact-number-tip {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.chat-add-contact-number-result {
  padding: 8px 30px 24px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ====== Add Contact Panels: compact + inbox-like layout ====== */
.chat-add-contact-panel .chat-add-contact-chip {
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
}

.chat-add-contact-panel .chat-add-contact-btn {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  box-shadow: none;
}

.chat-add-contact-panel .chat-add-contact-btn.primary {
  color: var(--text-primary);
}

.chat-add-contact-panel .chat-add-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
  text-decoration: underline;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-body {
  padding: 22px 30px 24px;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-list {
  gap: 26px;
  padding-right: 0;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-item:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--bg-secondary);
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-item-name {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-item-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--border-color);
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-item-meta {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-item-arrow svg {
  width: 14px;
  height: 14px;
}

.chat-add-contact-panel[data-panel="direct"] .chat-add-contact-empty {
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-passive-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 30px 6px;
}

.chat-add-contact-select-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
}

.chat-add-contact-select-btn:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.chat-add-contact-select-count {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-body {
  padding: 10px 30px 24px;
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-list {
  gap: 22px;
  padding-right: 0;
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-item:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--bg-secondary);
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-item-name {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-item-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--border-color);
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-item-meta {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-select-box {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  position: relative;
}

.chat-add-contact-item.is-selected .chat-add-contact-select-box {
  border-color: var(--text-primary);
}

.chat-add-contact-item.is-selected .chat-add-contact-select-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--text-primary);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.chat-add-contact-panel[data-panel="passive"] .chat-add-contact-empty {
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-add-contact-panel[data-panel="action"] .chat-add-contact-profile {
  padding: 8px 30px 6px;
}

.chat-add-contact-panel[data-panel="action"] .chat-add-contact-actions {
  padding: 0 30px 24px;
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-profile-select {
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border-color);
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-profile-picker {
  margin: 0 30px;
  border-radius: 4px;
  background: transparent;
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-profile-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 0;
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-profile-item:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-request-card {
  margin: 10px 30px 0;
  border-radius: 4px;
  background: transparent;
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-request-stamp {
  border-radius: 4px;
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-request-message textarea {
  border-radius: 4px;
  background: transparent;
}

.chat-add-contact-panel[data-panel="request"] .chat-add-contact-actions {
  padding: 0 30px 24px;
}

.chat-add-contact-btn {
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-add-contact-btn.primary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

[data-theme='dark'] .chat-add-contact-btn.primary {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.chat-add-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* =========================================
   Friend Request Inbox Box
========================================= */
.friend-request-box-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 1400;
}

.friend-request-box-overlay.active {
  opacity: 1;
  visibility: visible;
}

.friend-request-box-widget {
  width: 360px;
  height: 560px;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.35s ease;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

.friend-request-box-overlay.active .friend-request-box-widget {
  transform: translateY(0) scale(1);
}

.fr-box-header {
  height: 70px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  z-index: 10;
}

.fr-box-back-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.3s ease;
  position: absolute;
  left: 30px;
}

.fr-box-back-btn:hover {
  color: var(--text-primary);
}

.friend-request-box-widget.in-detail .fr-box-back-btn {
  opacity: 1;
  pointer-events: auto;
}

.friend-request-box-widget.in-detail .fr-box-header-tabs {
  opacity: 0;
  pointer-events: none;
}

.fr-box-header-tabs {
  display: flex;
  gap: 20px;
  transition: opacity 0.3s ease;
}

.fr-box-tab-btn {
  background: none;
  border: none;
  padding: 0 0 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fr-box-tab-btn.active {
  color: var(--text-primary);
}

.fr-box-tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--text-primary);
  transition: width 0.3s ease;
}

.fr-box-tab-btn.active::after {
  width: 100%;
}

.fr-box-theme-dot {
  width: 8px;
  height: 8px;
  background: var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

.fr-box-theme-dot:hover {
  opacity: 1;
}

.fr-box-view-layer {
  position: absolute;
  top: 70px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.4s ease;
}

.fr-box-list-view {
  z-index: 1;
  opacity: 1;
  transform: translateX(0);
}

.fr-box-detail-view {
  z-index: 2;
  opacity: 0;
  transform: translateX(100px);
  pointer-events: none;
}

.friend-request-box-widget.in-detail .fr-box-list-view {
  opacity: 0;
  transform: translateX(-50px);
  pointer-events: none;
}

.friend-request-box-widget.in-detail .fr-box-detail-view {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.fr-box-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.fr-box-list-scroll::-webkit-scrollbar {
  display: none;
}

.fr-box-req-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  position: relative;
  animation: frBoxFadeIn 0.5s ease forwards;
}

.fr-box-user-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
}

.fr-box-reply-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-primary);
  margin-left: 6px;
  box-shadow: 0 0 0 1px var(--bg-primary);
  vertical-align: middle;
}

.fr-box-req-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fr-box-req-item.incoming .fr-box-user-name {
  color: var(--text-primary);
}

.fr-box-req-item.incoming .fr-box-user-name::before {
  content: '✦';
  margin-right: 8px;
  font-size: 10px;
}

.fr-box-req-item.incoming .fr-box-user-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text-primary);
}

.fr-box-req-item.sent .fr-box-user-name {
  color: var(--text-tertiary);
}

.fr-box-req-item.sent .fr-box-user-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140%;
  height: 1px;
  background: var(--border-color);
}

.fr-box-req-item.rejected .fr-box-user-name {
  color: var(--text-tertiary);
  opacity: 0.7;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.fr-box-req-item.accepted {
  cursor: pointer;
}

.fr-box-req-item.accepted .fr-box-user-name {
  font-weight: 600;
  color: var(--text-primary);
}

.fr-box-req-item.accepted .fr-box-user-name::after {
  display: none;
}

.fr-box-req-item.accepted .fr-box-req-meta {
  color: var(--text-primary);
  opacity: 0.3;
}

.fr-box-chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.fr-box-chat-area::-webkit-scrollbar {
  display: none;
}

.fr-box-msg-row {
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: frBoxMsgSlide 0.4s ease forwards;
  max-width: 100%;
}

.fr-box-msg-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  padding-bottom: 6px;
  position: relative;
  letter-spacing: 0.3px;
  white-space: pre-line;
}

.fr-box-msg-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
}

.fr-box-msg-row.received {
  align-items: flex-start;
}

.fr-box-msg-row.received .fr-box-msg-text::after {
  left: 0;
  width: 120%;
  min-width: 80px;
  background: var(--border-color);
}

.fr-box-msg-row.received .fr-box-msg-text .fr-box-deco-star {
  font-size: 10px;
  margin-right: 6px;
  opacity: 0.5;
}

.fr-box-msg-row.sent {
  align-items: flex-end;
}

.fr-box-msg-row.sent .fr-box-msg-text {
  text-align: right;
}

.fr-box-msg-row.sent .fr-box-msg-text::after {
  right: 0;
  width: 100%;
  background: var(--text-primary);
}

.fr-box-msg-row.system {
  align-items: center;
  margin-top: 20px;
}

.fr-box-msg-row.system .fr-box-msg-text {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 0;
}

.fr-box-msg-row.system .fr-box-msg-text::after {
  display: none;
}

.fr-box-footer-control {
  padding: 20px 30px 30px;
  background: var(--bg-primary);
  border-top: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.fr-box-action-btns {
  display: flex;
  gap: 20px;
  margin-bottom: 5px;
}

.fr-box-txt-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: inherit;
  transition: 0.3s;
}

.fr-box-btn-accept {
  color: var(--text-primary);
}

.fr-box-btn-accept:hover {
  text-decoration: underline;
}

.fr-box-btn-ignore {
  color: var(--text-tertiary);
}

.fr-box-btn-ignore:hover {
  color: var(--text-primary);
  text-decoration: line-through;
}

.fr-box-input-wrapper {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.fr-box-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 0;
  color: var(--text-primary);
  border-radius: 0;
}

.fr-box-input::placeholder {
  font-style: italic;
  color: var(--text-tertiary);
  opacity: 0.5;
}

.fr-box-input:focus {
  border-bottom-color: var(--text-primary);
}

.fr-box-send-trigger {
  background: none;
  border: none;
  padding: 0 0 8px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

.fr-box-input-wrapper.active .fr-box-send-trigger {
  opacity: 1;
  pointer-events: all;
}

@keyframes frBoxFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes frBoxMsgSlide {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .friend-request-box-widget {
    width: 320px;
    height: 520px;
  }
}

/* =========================================
   Chat Contacts List (Social)
========================================= */
.chat-contacts-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 1450;
}

.chat-contacts-overlay.active {
  opacity: 1;
  visibility: visible;
}

.chat-contacts-panel {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: crosshair;
}

.chat-contacts-overlay.active .chat-contacts-panel {
  transform: translateX(0);
}

.chat-contacts-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.chat-contacts-header {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 14px;
  padding-top: var(--app-header-total-padding);
  background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-theme='dark'] .chat-contacts-header {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0) 100%);
}

.chat-contacts-title-main {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.chat-contacts-title-sub {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.chat-contacts-close {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.chat-contacts-close:hover {
  transform: translateY(-1px);
  color: var(--text-secondary);
}

.chat-contacts-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.chat-contacts-categories {
  position: absolute;
  top: 96px;
  left: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-contacts-category-btn {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 8px 4px;
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-size: 11px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  border-left: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 2px;
  opacity: 0.55;
  transition: all 0.3s ease;
}

.chat-contacts-category-btn.active {
  opacity: 1;
  color: var(--text-primary);
  border-left: 2px solid var(--text-primary);
  font-weight: 700;
}

.chat-contacts-category-btn-custom {
  opacity: 0.45;
}

.chat-contacts-custom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 8;
}

.chat-contacts-custom-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.chat-contacts-custom-panel {
  position: absolute;
  left: 50%;
  top: 120px;
  width: min(560px, calc(100% - 140px));
  max-height: min(520px, calc(100% - 150px));
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(250, 250, 250, 0.90) 100%);
  border: 1px solid var(--border-color);
  border-radius: 10px 3px 10px 3px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(18px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 9;
}

[data-theme='dark'] .chat-contacts-custom-panel {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.92) 0%, rgba(16, 16, 16, 0.88) 100%);
}

.chat-contacts-custom-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.chat-contacts-custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme='dark'] .chat-contacts-custom-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.chat-contacts-custom-title {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}

.chat-contacts-custom-sub {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.chat-contacts-custom-close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: transform 0.2s ease, color 0.2s ease;
}

.chat-contacts-custom-close:hover {
  transform: translateX(2px);
  color: var(--text-primary);
}

.chat-contacts-custom-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 0;
}

.chat-contacts-custom-left {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

[data-theme='dark'] .chat-contacts-custom-left {
  border-right-color: rgba(255, 255, 255, 0.08);
}

.chat-contacts-custom-left-head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.chat-contacts-custom-add {
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

[data-theme='dark'] .chat-contacts-custom-add {
  border-color: rgba(255, 255, 255, 0.14);
}

.chat-contacts-custom-add:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.26);
  color: var(--text-primary);
}

[data-theme='dark'] .chat-contacts-custom-add:hover {
  border-color: rgba(255, 255, 255, 0.30);
}

.chat-contacts-custom-list {
  padding: 6px 10px 12px;
  overflow: auto;
}

.chat-contacts-custom-item {
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-left: 1px solid transparent;
  letter-spacing: 0.8px;
  font-size: 12px;
  opacity: 0.75;
  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.chat-contacts-custom-item.active {
  opacity: 1;
  color: var(--text-primary);
  border-left: 2px solid var(--text-primary);
  font-weight: 700;
}

.chat-contacts-custom-item:hover {
  opacity: 1;
  color: var(--text-primary);
}

.chat-contacts-custom-right {
  padding: 14px 16px 16px;
  overflow: auto;
  min-height: 0;
}

.chat-contacts-custom-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "label input actions";
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.chat-contacts-custom-label {
  grid-area: label;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: 'Space Mono', 'JetBrains Mono', monospace;
}

.chat-contacts-custom-input {
  grid-area: input;
  width: 100%;
  border: none;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--text-primary);
  padding: 6px 4px;
  font-size: 12px;
  outline: none;
  font-family: 'Space Mono', 'JetBrains Mono', monospace;
}

[data-theme='dark'] .chat-contacts-custom-input {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.chat-contacts-custom-actions {
  grid-area: actions;
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-contacts-custom-action {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: transform 0.2s ease, color 0.2s ease;
  padding: 6px 2px;
}

.chat-contacts-custom-action:hover {
  transform: translateY(-1px);
  color: var(--text-primary);
}

.chat-contacts-custom-action.is-danger {
  color: var(--text-tertiary);
}

.chat-contacts-custom-section {
  margin-top: 14px;
}

.chat-contacts-custom-section-title {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: 'Space Mono', 'JetBrains Mono', monospace;
  margin-bottom: 10px;
}

.chat-contacts-custom-members {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 34px;
}

.chat-contacts-custom-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--text-primary);
  font-size: 11px;
  letter-spacing: 0.6px;
}

[data-theme='dark'] .chat-contacts-custom-chip {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.chat-contacts-custom-chip button {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

.chat-contacts-custom-chip button:hover {
  color: var(--text-primary);
}

.chat-contacts-custom-rolelist {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-contacts-custom-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

[data-theme='dark'] .chat-contacts-custom-role {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.30);
}

.chat-contacts-custom-role-name {
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: 0.4px;
}

.chat-contacts-custom-role-add {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.chat-contacts-custom-role-add:hover {
  color: var(--text-primary);
}

@media (max-width: 520px) {
  .chat-contacts-custom-panel {
    top: 104px;
    width: calc(100% - 42px);
    max-height: calc(100% - 148px);
  }

  .chat-contacts-custom-body {
    grid-template-columns: 1fr;
  }

  .chat-contacts-custom-left {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    grid-template-rows: auto auto;
  }

  [data-theme='dark'] .chat-contacts-custom-left {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .chat-contacts-custom-left-head {
    padding: 10px 12px;
  }

  .chat-contacts-custom-list {
    padding: 8px 12px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .chat-contacts-custom-item {
    padding: 8px 10px;
    border-left: none;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
  }

  .chat-contacts-custom-item.active {
    border-left: none;
    border-bottom: 2px solid var(--text-primary);
  }

  .chat-contacts-custom-right {
    padding: 12px 12px 14px;
  }

  .chat-contacts-custom-field {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "input"
      "actions";
    gap: 8px;
  }

  .chat-contacts-custom-actions {
    justify-content: flex-end;
  }

  .chat-contacts-custom-members {
    gap: 8px;
  }
}

.chat-contacts-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.chat-contacts-universe {
  position: relative;
  min-height: 100%;
  padding: 96px 24px 120px 72px;
  z-index: 3;
}

.chat-contacts-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110px;
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: transform, opacity;
}

.chat-contacts-node.anim-in {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  animation: chatContactsNodeIn 0.5s ease forwards;
}

.chat-contacts-node.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

.chat-contacts-avatar-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-contacts-node:hover .chat-contacts-avatar-wrap {
  transform: scale(1.12);
}

.chat-contacts-pin {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--text-primary);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.chat-contacts-avatar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-tertiary);
  clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 90%);
}

.chat-contacts-avatar.shape-2 {
  clip-path: circle(45% at 50% 50%);
}

.chat-contacts-avatar.shape-3 {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.chat-contacts-avatar.shape-4 {
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

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

.chat-contacts-info {
  text-align: center;
  background: rgba(255, 255, 255, 0.75);
  padding: 4px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  max-width: 130px;
}

[data-theme='dark'] .chat-contacts-info {
  background: rgba(10, 10, 10, 0.75);
}

.chat-contacts-name {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-size: 12px;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.chat-contacts-quote {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.2;
  display: block;
}

.chat-contacts-empty {
  text-align: left;
  padding: 30px 0 0 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.chat-contacts-star {
  position: absolute;
  color: var(--text-primary);
  opacity: 0.18;
  pointer-events: none;
  z-index: 2;
  animation: chatContactsTwinkle 3s infinite ease-in-out;
}

@keyframes chatContactsTwinkle {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes chatContactsNodeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-contacts-node.vanish {
  animation: chatContactsNodeVanish 0.6s ease forwards;
  pointer-events: none;
}

@keyframes chatContactsNodeVanish {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  45% { opacity: 0.85; transform: scale(1.05); filter: brightness(1.2); }
  100% { opacity: 0; transform: scale(0.84); filter: brightness(0.8); }
}

.chat-contacts-poem-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 6;
}

.chat-contacts-poem-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.chat-contacts-poem-card {
  position: absolute;
  right: auto;
  top: 120px;
  left: 120px;
  width: min(300px, calc(100% - 110px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 250, 250, 0.88) 100%);
  border: 1px solid var(--border-color);
  border-radius: 10px 3px 10px 3px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 7;
}

[data-theme='dark'] .chat-contacts-poem-card {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.92) 0%, rgba(16, 16, 16, 0.88) 100%);
}

.chat-contacts-poem-card.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.chat-contacts-poem-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}

[data-theme='dark'] .chat-contacts-poem-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.chat-contacts-poem-header::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--border-color);
  opacity: 0.6;
}

.chat-contacts-poem-title {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}

.chat-contacts-poem-sub {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.chat-contacts-poem-close {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.chat-contacts-poem-close.is-delete {
  color: var(--text-tertiary);
  font-weight: 600;
}

.chat-contacts-poem-close:hover {
  transform: translateX(2px);
  color: var(--text-primary);
}

.chat-contacts-poem-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.chat-contacts-poem-body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-contacts-poem-quote {
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
  min-height: 18px;
}

.chat-contacts-poem-lines {
  display: grid;
  gap: 8px;
}

.chat-contacts-poem-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.chat-contacts-poem-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  min-width: 52px;
}

.chat-contacts-poem-value {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: 0.2px;
}

/* --- Chat Contacts Role Schedule (Trace of Existence) --- */
.chat-contacts-panel.chat-contacts-role-schedule-open {
  overflow-y: hidden;
}

#chatContactsRoleScheduleOverlay {
  --bg: #f4f4f0;
  --ink: #1a1a1a;
  --ink-light: #666;
  --line: rgba(26, 26, 26, 0.15);
  --card-bg: rgba(255, 255, 255, 0.9);
  --font-serif: 'Georgia', 'Playfair Display', serif;
  --font-sans: 'Helvetica Neue', sans-serif;
}

[data-theme="dark"] #chatContactsRoleScheduleOverlay {
  --bg: #0a0a0a;
  --ink: #e0e0e0;
  --ink-light: #888;
  --line: rgba(224, 224, 224, 0.15);
  --card-bg: rgba(20, 20, 20, 0.9);
}

#chatContactsRoleScheduleOverlay.detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.02); /* 极淡的遮罩 */
  backdrop-filter: blur(15px); /* 毛玻璃聚焦效果 */
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-sans);
  color: var(--ink);
  cursor: default;
}

#chatContactsRoleScheduleOverlay.detail-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

#chatContactsRoleScheduleOverlay .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 异形切割：八边形 */
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  background: #ccc;
}

/* 详情内容容器 */
#chatContactsRoleScheduleOverlay .profile-header {
  margin-top: 60px;
  text-align: center;
  position: relative;
  z-index: 110;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s ease 0.2s;
}

#chatContactsRoleScheduleOverlay.detail-overlay.active .profile-header {
  transform: translateY(0);
  opacity: 1;
}

#chatContactsRoleScheduleOverlay .big-name {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: 2px;
  margin-bottom: 5px;
  font-weight: bold;
}

#chatContactsRoleScheduleOverlay .status-badge {
  font-size: 0.75rem;
  border: 1px solid var(--ink);
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 10px;
  position: relative;
}

/* 状态雷达动画 */
#chatContactsRoleScheduleOverlay .radar-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink);
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
}

#chatContactsRoleScheduleOverlay .radar-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 1px solid var(--ink);
  border-radius: 50%;
  animation: chatContactsRoleSchedulePulse 2s infinite;
}

@keyframes chatContactsRoleSchedulePulse {
  0% { width: 100%; height: 100%; opacity: 1; }
  100% { width: 400%; height: 400%; opacity: 0; }
}

/* --- 命运线 (Timeline) --- */
#chatContactsRoleScheduleOverlay .timeline-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  flex: 1;
  overflow-y: auto;
  padding: 40px 20px 80px 20px;
  margin-top: 20px;
  /* 隐藏滚动条但保留功能 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#chatContactsRoleScheduleOverlay .timeline-container::-webkit-scrollbar { display: none; }

/* SVG 线条层 */
#chatContactsRoleScheduleOverlay .thread-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px; /* 宽度足够容纳弯曲 */
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

#chatContactsRoleScheduleOverlay .thread-path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0.3;
  transition: stroke-dashoffset 2s ease-in-out;
}

#chatContactsRoleScheduleOverlay.detail-overlay.active .thread-path {
  stroke-dashoffset: 0;
}

/* 日程项 */
#chatContactsRoleScheduleOverlay .schedule-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  z-index: 2;
}

/* 左右交错布局 */
#chatContactsRoleScheduleOverlay .schedule-item:nth-child(odd) { flex-direction: row; text-align: left; }
#chatContactsRoleScheduleOverlay .schedule-item:nth-child(even) { flex-direction: row-reverse; text-align: right; }

/* 调整中间连接点 */
#chatContactsRoleScheduleOverlay .schedule-item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--bg);
  border: 1px solid var(--ink);
  transform: translate(-50%, -50%) rotate(45deg); /* 菱形节点 */
  z-index: 1;
}

#chatContactsRoleScheduleOverlay .time {
  width: 40%;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--ink);
}

#chatContactsRoleScheduleOverlay .activity {
  width: 40%;
  font-size: 0.85rem;
  color: var(--ink-light);
  line-height: 1.4;
  position: relative;
}

/* 装饰性连线到文字 */
#chatContactsRoleScheduleOverlay .schedule-item:nth-child(odd) .activity::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--line);
}

#chatContactsRoleScheduleOverlay .schedule-item:nth-child(even) .activity::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--line);
}

/* 正在进行的活动 */
#chatContactsRoleScheduleOverlay .schedule-item.current .activity {
  color: var(--ink);
  font-weight: bold;
}

#chatContactsRoleScheduleOverlay .schedule-item.current::before {
  background: var(--ink);
  box-shadow: 0 0 10px var(--ink-light);
}

/* 动画延迟 */
#chatContactsRoleScheduleOverlay.detail-overlay.active .schedule-item:nth-child(1) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
#chatContactsRoleScheduleOverlay.detail-overlay.active .schedule-item:nth-child(2) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }
#chatContactsRoleScheduleOverlay.detail-overlay.active .schedule-item:nth-child(3) { transition-delay: 0.9s; opacity: 1; transform: translateY(0); }
#chatContactsRoleScheduleOverlay.detail-overlay.active .schedule-item:nth-child(4) { transition-delay: 1.1s; opacity: 1; transform: translateY(0); }
#chatContactsRoleScheduleOverlay.detail-overlay.active .schedule-item:nth-child(5) { transition-delay: 1.3s; opacity: 1; transform: translateY(0); }

/* 底部装饰 */
#chatContactsRoleScheduleOverlay .footer-deco {
  margin-top: 20px;
  font-size: 1.5rem;
  color: var(--line);
  text-align: center;
  width: 100%;
}

/* ==========================================
 * POETRY CHAT STYLE - 诗篇风格
 * 完整搬运自 诗篇.html（已移除 Dock）
 * ========================================== */

#chatScreen .chat-poetry-style-view {
  display: none;
}

#chatScreen.chat-style-poetry > .app-content {
  padding: 0 !important;
  overflow: hidden;
}

#chatScreen.chat-style-poetry .chat-list-view {
  padding: 0;
  height: 100%;
  position: relative;
}

#chatScreen.chat-style-poetry .chat-app-header,
#chatScreen.chat-style-poetry .chat-stories-section,
#chatScreen.chat-style-poetry .chat-requests-mini,
#chatScreen.chat-style-poetry .chat-list-container,
#chatScreen.chat-style-poetry .chat-search-style-view,
#chatScreen.chat-style-poetry .chat-list-view > .star-rail,
#chatScreen.chat-style-poetry .chat-list-view > .theme-hint {
  display: none !important;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view {
  /* 日间：纸张与墨水 */
  --bg-color: #fcfcfc;
  --text-primary: #111111;
  --text-secondary: #555555;
  --line-color: rgba(0, 0, 0, 0.8);
  --line-faint: rgba(0, 0, 0, 0.1);
  --accent-shape: #111111;
  --node-bg: #ffffff;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
}

[data-theme="dark"] #chatScreen.chat-style-poetry .chat-poetry-style-view {
  /* 夜间：深空与星轨 */
  --bg-color: #050505;
  --text-primary: #eeeeee;
  --text-secondary: #888888;
  --line-color: rgba(255, 255, 255, 0.6);
  --line-faint: rgba(255, 255, 255, 0.15);
  --accent-shape: #ffffff;
  --node-bg: #000000;
  --shadow: 0 4px 20px rgba(255,255,255,0.05);
}

#chatScreen.chat-style-poetry .chat-poetry-style-view * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Cormorant Garamond', serif;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: background 0.6s ease, color 0.6s ease;
  position: relative;
}

/* 背景噪点纹理 */
#chatScreen.chat-style-poetry .chat-poetry-style-view .noise-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* === 顶部：书籍章节头 === */
#chatScreen.chat-style-poetry .chat-poetry-style-view .chapter-header {
  position: absolute;
  top: var(--app-header-total-padding);
  left: 0;
  width: 100%;
  padding: 12px 24px 18px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .chapter-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .chapter-title {
  font-family: 'Syncopate', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--text-primary);
  padding-bottom: 4px;
  pointer-events: auto;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .chapter-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .chapter-link {
  font-family: 'Syncopate', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--text-primary);
  padding-bottom: 2px;
  cursor: pointer;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .theme-switch {
  width: 30px;
  height: 30px;
  border: 1px solid var(--text-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .theme-switch:active {
  transform: scale(0.9);
}

/* === 核心：SVG 连线层 === */
#chatScreen.chat-style-poetry .chat-poetry-style-view #constellation-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .connection-line {
  stroke: var(--line-color);
  stroke-width: 0.8px;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  opacity: 0.4;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .decoration-line {
  stroke: var(--line-faint);
  stroke-width: 0.5px;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* === 音乐悬浮球组件 === */
.music-widget-container,
.floating-lyrics,
.lyric-stage {
  --bg-color: #f2f2f2;
  --text-color: #000000;
  --panel-bg: rgba(255, 255, 255, 0.85);
  --border-color: rgba(0, 0, 0, 0.1);
  --accent-color: #000000;
  --secondary-text: #666666;
  --glass-blur: 12px;
  --font-family: 'Helvetica Neue', Helvetica, sans-serif;
  --serif-font: 'Times New Roman', serif;
  --shadow: 0 8px 30px rgba(0,0,0,0.08);
}

[data-theme="night"] .music-widget-container,
[data-theme="night"] .floating-lyrics,
[data-theme="night"] .lyric-stage,
[data-theme="dark"] .music-widget-container,
[data-theme="dark"] .floating-lyrics,
[data-theme="dark"] .lyric-stage {
  --bg-color: #0a0a0a;
  --text-color: #ffffff;
  --panel-bg: rgba(20, 20, 20, 0.85);
  --border-color: rgba(255, 255, 255, 0.15);
  --accent-color: #ffffff;
  --secondary-text: #888888;
  --shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.music-widget-container,
.music-widget-container *,
.floating-lyrics,
.floating-lyrics * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.floating-lyrics {
  position: fixed;
  top: 60px; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  font-size: 12px;
  color: var(--text-color);
  text-shadow: 0 0 2px var(--bg-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  z-index: 90;
}

.floating-lyrics.active { opacity: 1; }
.lyric-line { font-style: italic; letter-spacing: 1px; }

/* =========================================
   LYRIC CONTAINER (核心区域)
   ========================================= */
.lyric-stage {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  pointer-events: none;
  color: var(--lyrics-color, var(--text-color));
}

.lyric-stage.is-interactive {
  pointer-events: auto;
}

/* 通用文字样式 */
.lyric-text {
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
  max-width: 80%;
  cursor: grab;
}

.lyric-stage.is-dragging .lyric-text {
  cursor: grabbing;
}

/* --- Style 1: Orbit Standard (经典上浮) --- */
.style-orbit .lyric-text {
  font-family: var(--serif-font);
  font-style: italic;
  opacity: 0;
  transform: translateY(10px);
}
.style-orbit.animate .lyric-text {
  animation: orbitFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes orbitFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Style 2: Nebula Blur (星云模糊) --- */
.style-blur .lyric-text {
  font-weight: 300;
  letter-spacing: 2px;
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.95);
}
.style-blur.animate .lyric-text {
  animation: blurFocus 1s ease forwards;
}
@keyframes blurFocus {
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* --- Style 3: Tracking Expand (字间距舒展) [NEW] --- */
.style-tracking .lyric-text {
  font-weight: bold;
  font-size: 15px;
  opacity: 0;
  letter-spacing: -4px;
  filter: blur(4px);
  transform: scale(0.95);
}
.style-tracking.animate .lyric-text {
  animation: trackingExpand 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes trackingExpand {
  to {
    opacity: 1;
    letter-spacing: 3px;
    filter: blur(0);
    transform: scale(1);
  }
}

/* --- Style 4: Stardust (星尘装饰) --- */
.style-stardust .lyric-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: 0;
}
.style-stardust .star-icon {
  font-size: 10px;
  animation: spin 4s linear infinite;
}
.style-stardust.animate .lyric-text {
  animation: slideInRight 0.6s ease forwards;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Style 5: Horizon (无实线版) [UPDATED] --- */
.style-horizon {
}
.style-horizon .lyric-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(15px);
}
.style-horizon.animate .lyric-text {
  animation: riseUp 0.9s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
@keyframes riseUp {
  from { opacity: 0; transform: translateY(15px); clip-path: inset(100% 0 0 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}

.music-widget-container {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}

.orbit-orb {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex; justify-content: center; align-items: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 102;
}

.orbit-orb:active { transform: scale(0.9); }
.orbit-orb.expanded { transform: rotate(45deg); }
.orbit-orb.custom-orb {
  width: var(--orb-custom-size, 48px);
  height: var(--orb-custom-size, 48px);
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.orbit-orb.custom-orb.expanded { transform: none; }
.orbit-orb.custom-orb .orb-ring,
.orbit-orb.custom-orb .star-core { display: none; }
.orbit-orb .orb-custom-image {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
  pointer-events: none;
}
.orbit-orb.custom-orb .orb-custom-image { display: block; }

.star-core {
  width: 16px; height: 16px;
  position: relative;
  animation: spin 6s linear infinite;
}
.star-core svg { width: 100%; height: 100%; fill: var(--text-color); }

.orb-ring {
  position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 1px dashed var(--text-color);
  border-radius: 50%;
  opacity: 0;
  animation: spin-slow 10s linear infinite;
  transition: opacity 0.3s;
}
.orbit-orb.playing .orb-ring { opacity: 0.3; }

.control-panel {
  width: 200px;
  background: var(--panel-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  bottom: 60px;
  right: 0;
  overflow: hidden;
}

.control-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  font-size: 9px; color: var(--secondary-text); letter-spacing: 1px; text-transform: uppercase;
}
.music-widget-synced { cursor: pointer; }

.song-info {
  margin-bottom: 15px;
  text-align: center;
}
.song-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist-name { font-size: 10px; color: var(--secondary-text); font-family: var(--serif-font); font-style: italic; }

.controls-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 15px;
  padding: 0 10px;
}

.ctrl-btn {
  background: none; border: none; padding: 5px;
  color: var(--text-color); cursor: pointer;
  opacity: 0.7; transition: opacity 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.ctrl-btn:hover { opacity: 1; }
.ctrl-btn svg { width: 14px; height: 14px; fill: currentColor; }

.play-pause-btn svg { width: 20px; height: 20px; }

.actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

.action-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 8px; color: var(--secondary-text);
  cursor: pointer;
  padding: 5px 0;
  border-radius: 4px;
  transition: background 0.2s;
}
.action-item:hover { background: rgba(125,125,125,0.1); color: var(--text-color); }
.action-item svg { width: 12px; height: 12px; fill: currentColor; }

.action-item.active { color: var(--text-color); font-weight: bold; }

.playlist-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--panel-bg);
  padding: 15px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 10;
  display: flex; flex-direction: column;
}
.playlist-overlay.show { transform: translateX(0); }

.playlist-header {
  font-size: 10px; font-weight: bold; text-transform: uppercase;
  margin-bottom: 10px; display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--border-color); padding-bottom: 5px;
}
.playlist-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lyric-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lyric-color-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-color);
  box-shadow: 0 0 0 1px var(--border-color) inset;
}
.lyric-color-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.list-scroll { flex: 1; overflow-y: auto; }
.list-item {
  font-size: 11px; padding: 6px 0; border-bottom: 1px dashed var(--border-color);
  cursor: pointer; display: flex; justify-content: space-between;
}
.list-item.active { font-weight: bold; }
.list-item:last-child { border-bottom: none; }

.orb-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orb-editor-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.orb-editor-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary-text);
}
.orb-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: transparent;
  font-size: 11px;
  color: var(--text-color);
  cursor: pointer;
}
.orb-upload-btn input { display: none; }
.orb-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.orb-link-input {
  flex: 1;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11px;
  outline: none;
}
.orb-link-btn {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11px;
  cursor: pointer;
}

@media (max-width: 520px) {
  .orb-link-row {
    flex-direction: column;
    align-items: stretch;
  }
  .orb-link-btn {
    width: 100%;
  }
}
.orb-size-meta {
  font-size: 10px;
  color: var(--secondary-text);
}

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-slow { 100% { transform: rotate(360deg); } }

/* ==================== 用户歌单页面 - Flowing Poems ==================== */
#userPlaylistView {
  --bg-color: #f2f2f2;
  --text-color: #000000;
  --line-color: rgba(0, 0, 0, 0.2);
  --pin-color: #000000;
  --secondary-text: #666666;
  --star-color: #333;
  --font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

[data-theme='dark'] #userPlaylistView {
  --bg-color: #050505;
  --text-color: #ffffff;
  --line-color: rgba(255, 255, 255, 0.2);
  --pin-color: #ffffff;
  --secondary-text: #888888;
  --star-color: #fff;
}

#userPlaylistView,
#userPlaylistView * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.user-playlist-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  transition: background-color 1s ease, color 1s ease, transform 0.55s ease, opacity 0.55s ease;
  overflow: hidden;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  z-index: 12000;
}

.user-playlist-view.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* --- 1. 流动的背景诗篇 (保持原样) --- */
#userPlaylistView .poem-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

#userPlaylistView .flowing-text {
  width: 100%;
  padding: 0 40px;
  font-family: 'Times New Roman', serif;
  font-size: 15px;
  line-height: 2.0;
  text-align: center;
  white-space: pre-wrap;
  opacity: 0.12;
  filter: blur(0.4px) contrast(1.1);
  text-shadow: 0 0 8px var(--text-color);
  animation: flowUp 80s linear infinite;
}

@keyframes flowUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* --- 2. 画布层 --- */
#userPlaylistView #neural-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* --- 3. 内容容器 (可滚动) --- */
#userPlaylistView .content-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 2;
  padding-bottom: 100px;
  perspective: 1000px;
  scroll-behavior: smooth;
}

/* 用户头部 */
#userPlaylistView .header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  margin-bottom: 40px;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s;
  pointer-events: none;
}

#userPlaylistView .header-section:active {
  opacity: 0.7;
}

#userPlaylistView .avatar-core {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-color);
  border: 1px solid var(--text-color);
  position: relative;
  z-index: 10;
  box-shadow: 0 0 0 5px var(--bg-color);
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

#userPlaylistView .header-section:hover .avatar-core {
  transform: scale(1.1);
}

#userPlaylistView .header-section .avatar-core,
#userPlaylistView .header-section .user-name,
#userPlaylistView .header-section .user-bio {
  pointer-events: auto;
  cursor: pointer;
}

#userPlaylistView .avatar-core::after {
  content: '';
  width: 50px;
  height: 50px;
  background: var(--text-color);
  border-radius: 50%;
  opacity: 0.1;
  display: none;
}

#userPlaylistView .avatar-core .avatar-img-container {
  position: absolute;
  inset: 0;
  border: 1px solid var(--text-color);
  background: var(--bg-color);
}

#userPlaylistView .user-name {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: var(--bg-color);
  padding: 5px 10px;
  z-index: 10;
}

#userPlaylistView .user-bio {
  font-size: 10px;
  color: var(--secondary-text);
  margin-top: 5px;
  font-style: italic;
  letter-spacing: 1px;
  z-index: 10;
}

#userPlaylistView .user-playlist-back {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-color);
  cursor: pointer;
  z-index: 220;
}

#userPlaylistView .user-playlist-back svg {
  width: 22px;
  height: 22px;
}

#userPlaylistView .user-playlist-back:active {
  transform: scale(0.92);
}

/* 歌单列表容器 */
#userPlaylistView .playlist-stream {
  position: relative;
  width: 100%;
  min-height: 600px;
}

#userPlaylistView .playlist-stream.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}

#userPlaylistView .playlist-empty-hint {
  text-align: center;
  padding: 0 24px;
  max-width: 280px;
}

#userPlaylistView .playlist-empty-hint .empty-title {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#userPlaylistView .playlist-empty-hint .empty-sub {
  font-size: 11px;
  color: var(--secondary-text);
  font-style: italic;
  letter-spacing: 1px;
}

/* 单个歌单节点 */
#userPlaylistView .node-item {
  position: absolute;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform 0.3s ease, opacity 0.3s;
  z-index: 10;
}

#userPlaylistView .node-item:active {
  transform: scale(0.95);
}

#userPlaylistView .pin-head {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-color);
  margin-bottom: 8px;
  box-shadow: 0 0 10px var(--line-color);
  position: relative;
}

#userPlaylistView .pin-head::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 2px;
  background: var(--bg-color);
  border-radius: 50%;
}

#userPlaylistView .track-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.2;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

#userPlaylistView .node-item:hover .track-title {
  border-bottom: 1px solid var(--text-color);
}

#userPlaylistView .track-lyric {
  font-size: 10px;
  color: var(--secondary-text);
  margin-top: 4px;
  font-family: 'Times New Roman', serif;
  font-style: italic;
}

#userPlaylistView .node-item.is-playing .track-title,
#userPlaylistView .node-item.is-playing .track-lyric {
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}

[data-theme='dark'] #userPlaylistView .node-item.is-playing .track-title,
[data-theme='dark'] #userPlaylistView .node-item.is-playing .track-lyric {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.28);
}

/* 底部控制栏 */
#userPlaylistView .control-bar {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 100;
  pointer-events: auto;
}

#userPlaylistView .theme-btn {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
}

/* --- 4. 交互浮层 (Overlay) - 新增样式 --- */
#userPlaylistView .overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.01);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#userPlaylistView .overlay-layer.active {
  opacity: 1;
  pointer-events: auto;
}

/* 浮层内的Canvas，用于绘制密集的线 */
#userPlaylistView #overlay-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 201;
  pointer-events: none;
}

/* 浮层内容容器 */
#userPlaylistView .overlay-content {
  position: relative;
  z-index: 202;
  width: 80%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

#userPlaylistView .overlay-layer.active .overlay-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 通用输入框样式 */
#userPlaylistView .ghost-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--text-color);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 16px;
  padding: 10px;
  text-align: center;
  width: 200px;
  margin-top: 20px;
  outline: none;
  letter-spacing: 1px;
}

#userPlaylistView .ghost-input::placeholder {
  color: var(--secondary-text);
  font-style: italic;
}

/* 按钮组 */
#userPlaylistView .action-btn-group {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

#userPlaylistView .circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--text-color);
  background: transparent;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

#userPlaylistView .circle-btn:hover {
  background: var(--text-color);
  color: var(--bg-color);
}

#userPlaylistView .circle-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* 歌单管理特定的样式 (书脊风格) */
#userPlaylistView .song-list-container {
  width: 100%;
  margin-top: 30px;
  position: relative;
  padding-left: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

/* 书脊线 */
#userPlaylistView .spine-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text-color);
  opacity: 0.5;
}

#userPlaylistView .song-item {
  position: relative;
  margin-bottom: 25px;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  animation: slideInLeft 0.5s forwards;
}

/* 连接歌曲和书脊的横线 */
#userPlaylistView .song-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 1px;
  background: var(--text-color);
  opacity: 0.5;
}

#userPlaylistView .song-name {
  font-size: 14px;
  letter-spacing: 1px;
}

#userPlaylistView .delete-x {
  font-size: 12px;
  cursor: pointer;
  opacity: 0.5;
  padding: 5px;
}

#userPlaylistView .delete-x:hover { opacity: 1; }

/* === 搜索结果面板（UI 预览） === */
#userPlaylistView .song-search-panel {
  width: 100%;
  margin-top: 0;
  padding: 8px 0 2px 18px;
  border: none;
  background: transparent;
  position: relative;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
}

#userPlaylistView .song-search-panel.is-visible {
  opacity: 1;
  max-height: 260px;
  margin-top: 14px;
  pointer-events: auto;
}

#userPlaylistView .song-search-panel::before,
#userPlaylistView .song-search-panel::after {
  content: none;
}

#userPlaylistView .song-search-panel .song-search-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
}

#userPlaylistView .song-search-panel .song-search-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--text-color);
  border-radius: 50%;
  opacity: 0.35;
}

#userPlaylistView .song-search-panel .song-search-stars span:nth-child(1) { top: 18%; left: 10%; }
#userPlaylistView .song-search-panel .song-search-stars span:nth-child(2) { top: 32%; left: 64%; }
#userPlaylistView .song-search-panel .song-search-stars span:nth-child(3) { top: 62%; left: 28%; }
#userPlaylistView .song-search-panel .song-search-stars span:nth-child(4) { top: 78%; left: 78%; }
#userPlaylistView .song-search-panel .song-search-stars span:nth-child(5) { top: 48%; left: 88%; }

#userPlaylistView .song-search-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  z-index: 1;
}

#userPlaylistView .song-search-title-text {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--text-color);
}

#userPlaylistView .song-search-sub {
  font-size: 10px;
  color: var(--secondary-text);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

#userPlaylistView .song-search-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}

#userPlaylistView .song-search-empty {
  font-size: 11px;
  color: var(--secondary-text);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 0 8px;
}

#userPlaylistView .song-search-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 10px 6px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  position: relative;
}

[data-theme='dark'] #userPlaylistView .song-search-item {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

#userPlaylistView .song-search-item:hover {
  transform: translateY(-1px);
  border-bottom-color: var(--text-color);
}

#userPlaylistView .song-search-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#userPlaylistView .song-search-name {
  font-size: 13px;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#userPlaylistView .song-search-meta {
  font-size: 10px;
  color: var(--secondary-text);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#userPlaylistView .song-search-action {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--text-color);
  padding: 2px 0;
  color: var(--text-color);
  flex-shrink: 0;
  background: transparent;
}

#userPlaylistView .song-search-foot {
  position: relative;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

#userPlaylistView .song-search-foot-line {
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

[data-theme='dark'] #userPlaylistView .song-search-foot-line {
  background: rgba(255, 255, 255, 0.16);
}

#userPlaylistView .song-search-foot-text {
  font-size: 10px;
  color: var(--secondary-text);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* === 一起听邀请面板 === */
#userPlaylistView .overlay-content.is-together {
  width: 86%;
  align-items: stretch;
}

#userPlaylistView .overlay-content.is-together .action-btn-group {
  justify-content: center;
  width: 100%;
}

#userPlaylistView .together-panel {
  width: 100%;
  position: relative;
  padding: 6px 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform, opacity;
}

#userPlaylistView .together-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
}

#userPlaylistView .together-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--text-color);
  border-radius: 50%;
  opacity: 0.35;
}

#userPlaylistView .together-stars span:nth-child(1) { top: 14%; left: 12%; }
#userPlaylistView .together-stars span:nth-child(2) { top: 28%; left: 70%; }
#userPlaylistView .together-stars span:nth-child(3) { top: 62%; left: 30%; }
#userPlaylistView .together-stars span:nth-child(4) { top: 78%; left: 82%; }
#userPlaylistView .together-stars span:nth-child(5) { top: 46%; left: 90%; }

#userPlaylistView .together-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  position: relative;
  z-index: 1;
}

#userPlaylistView .together-title {
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-color);
}

#userPlaylistView .together-subtitle {
  font-size: 10px;
  color: var(--secondary-text);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

#userPlaylistView .together-thread {
  position: relative;
  padding-left: 18px;
  max-height: 46vh;
  overflow-y: auto;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  contain: content;
}

#userPlaylistView .together-thread-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text-color);
  opacity: 0.4;
}

#userPlaylistView .together-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 6px;
  contain: content;
}

#userPlaylistView .together-empty {
  font-size: 11px;
  color: var(--secondary-text);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 0 8px;
}

#userPlaylistView .together-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

[data-theme='dark'] #userPlaylistView .together-item {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

#userPlaylistView .together-item:hover {
  transform: translateY(-1px);
  border-bottom-color: var(--text-color);
}

#userPlaylistView .together-avatar {
  width: 34px;
  height: 34px;
  border: 1px solid var(--text-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

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

#userPlaylistView .together-avatar svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

#userPlaylistView .together-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

#userPlaylistView .together-name {
  font-size: 13px;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#userPlaylistView .together-meta {
  font-size: 10px;
  color: var(--secondary-text);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
}

#userPlaylistView .together-action {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--text-color);
  padding: 2px 0;
  color: var(--text-color);
}

#userPlaylistView .together-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

#userPlaylistView .together-foot-line {
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

[data-theme='dark'] #userPlaylistView .together-foot-line {
  background: rgba(255, 255, 255, 0.16);
}

#userPlaylistView .together-foot-text {
  font-size: 10px;
  color: var(--secondary-text);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

#userPlaylistView .overlay-title {
  font-size: 24px;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
}

#userPlaylistView .overlay-subtitle {
  font-size: 12px;
  color: var(--secondary-text);
  font-family: 'Times New Roman', serif;
  font-style: italic;
  margin-bottom: 20px;
}

#userPlaylistView .overlay-empty-hint {
  margin-top: 18px;
  text-align: center;
  font-size: 11px;
  color: var(--secondary-text);
  font-style: italic;
  letter-spacing: 1px;
}

/* === 聊天内容容器 === */
#chatScreen.chat-style-poetry .chat-poetry-style-view .scroll-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 80px;
  padding-bottom: 100px;
  position: relative;
  z-index: 10;
  perspective: 1000px;
}

/* 每一个聊天节点 */
#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node {
  position: relative;
  width: 75%;
  margin: 40px auto;
  padding: 16px;
  backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node {
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node:hover:not(.is-swipe-open) {
  background: transparent;
  transform: translateY(0);
}

/* 错落布局 */
#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node:nth-child(odd) {
  margin-left: 10%;
  text-align: left;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node:nth-child(even) {
  margin-left: auto;
  margin-right: 10%;
  text-align: right;
}

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

/* 节点装饰：图钉/星星 */
#chatScreen.chat-style-poetry .chat-poetry-style-view .node-anchor {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg-color);
  border: 1px solid var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  transition: all 0.3s ease;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .node-anchor.chat-avatar-mini {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-color);
  border: 1px solid var(--text-primary);
}

/* 奇数在左，偶数在右 */
#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node:nth-child(odd) .node-anchor {
  left: -6px;
  border-radius: 50%;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node:nth-child(even) .node-anchor {
  right: -6px;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 0;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .node-anchor::after {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--text-primary);
  border-radius: 50%;
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0.3; transform: scale(1); }
}

/* 文字内容 */
#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-meta {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node:nth-child(even) .verse-meta {
  flex-direction: row-reverse;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 8px;
  font-style: italic;
  color: var(--text-primary);
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-title.chat-name-mini {
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  font-family: 'Cormorant Garamond', serif;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-snippet {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 300;
  max-width: 90%;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-snippet.chat-preview-mini {
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  font-family: 'Inter', sans-serif;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-meta .chat-time-mini {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 0;
}

#chatScreen.chat-style-poetry .chat-poetry-style-view .verse-node:nth-child(even) .verse-snippet {
  margin-left: auto;
}

/* 小装饰元素 */
#chatScreen.chat-style-poetry .chat-poetry-style-view .star-deco {
  position: absolute;
  opacity: 0.6;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* ==========================================
 * RIVER CHAT STYLE - 河流风格
 * 完整搬运自 河流.html（已移除 Dock）
 * ========================================== */

#chatScreen .chat-river-style-view {
  display: none;
}

#chatScreen.chat-style-river > .app-content {
  padding: 0 !important;
}

#chatScreen.chat-style-river .chat-settings-screen .app-content {
  height: auto;
  overflow: visible;
  padding: 20px !important;
  padding-top: var(--app-header-total-padding) !important;
  padding-bottom: 60px !important;
}

#chatScreen.chat-style-river .chat-list-view {
  padding: 0;
  height: 100%;
  position: relative;
}

#chatScreen.chat-style-river .chat-app-header,
#chatScreen.chat-style-river .chat-stories-section,
#chatScreen.chat-style-river .chat-requests-mini,
#chatScreen.chat-style-river .chat-list-container,
#chatScreen.chat-style-river .chat-search-style-view,
#chatScreen.chat-style-river .chat-list-view > .star-rail,
#chatScreen.chat-style-river .chat-list-view > .theme-hint,
#chatScreen.chat-style-river .chat-poetry-style-view {
  display: none !important;
}

#chatScreen.chat-style-river .chat-river-style-view {
  display: block;
  position: relative;
  width: 100%;
}

#chatScreen.chat-style-river .chat-river-style-view {
  --bg: #f2f2f2;
  --text: #1a1a1a;
  --sub-text: #666666;
  --line: #1a1a1a;
  --card-bg: rgba(255, 255, 255, 0.5);
  --accent: #000000;
  --font-serif: 'Times New Roman', 'Songti SC', serif;
  --font-sans: 'Helvetica Neue', sans-serif;
  --blob-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  --river-header-offset: calc(var(--app-header-total-padding) + 52px);
}

[data-theme="dark"] #chatScreen.chat-style-river .chat-river-style-view {
  --bg: #0a0a0a;
  --text: #e0e0e0;
  --sub-text: #888888;
  --line: #e0e0e0;
  --card-bg: rgba(20, 20, 20, 0.5);
  --accent: #ffffff;
}

#chatScreen.chat-style-river .chat-river-style-view * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

#chatScreen.chat-style-river .chat-river-style-view {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  transition: background-color 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* 顶部导航 */
#chatScreen.chat-style-river .chat-river-style-view header {
  position: fixed;
  top: var(--app-header-total-padding);
  left: 0;
  width: 100%;
  padding: 12px 24px 14px;
  z-index: 100;
  background: linear-gradient(to bottom, var(--bg) 80%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(5px);
}

#chatScreen.chat-style-river .chat-river-style-view h1 {
  font-size: 24px;
  font-weight: normal;
  letter-spacing: 2px;
  font-style: italic;
}

#chatScreen.chat-style-river .chat-river-style-view .theme-toggle {
  width: 24px;
  height: 24px;
  border: 1px solid var(--text);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

#chatScreen.chat-style-river .chat-river-style-view .theme-toggle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--text);
  transform: scale(0.6);
  transition: transform 0.3s ease;
  border-radius: 50%;
}

/* 分类选择器 */
#chatScreen.chat-style-river .chat-river-style-view .categories {
  position: fixed;
  top: var(--river-header-offset);
  left: 0;
  width: 100%;
  padding: 8px 24px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  z-index: 90;
  scrollbar-width: none;
}
#chatScreen.chat-style-river .chat-river-style-view .categories::-webkit-scrollbar { display: none; }

#chatScreen.chat-style-river .chat-river-style-view .cat-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--sub-text);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#chatScreen.chat-style-river .chat-river-style-view .cat-btn.active {
  color: var(--bg);
  background-color: var(--text);
  border-color: var(--text);
}

#chatScreen.chat-style-river .chat-river-style-view .add-cat {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--sub-text);
  border-radius: 50%;
  flex-shrink: 0;
}

/* 主画布区域 */
#chatScreen.chat-style-river .chat-river-style-view #main-stage {
  position: relative;
  margin-top: 140px;
  padding-bottom: 120px;
  min-height: calc(100vh - 140px);
  width: 100%;
  overflow: hidden; /* 防止横向滚动 */
}

/* 背景SVG线图层 */
#chatScreen.chat-style-river .chat-river-style-view #thread-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 通用节点样式 */
#chatScreen.chat-style-river .chat-river-style-view .node {
  position: absolute;
  width: auto;
  max-width: 65%; /* 限制宽度，防止遮挡，留出空间给连线 */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 10;
  touch-action: pan-y;
}

#chatScreen.chat-style-river .chat-river-style-view .node.visible {
  opacity: 1;
  transform: translateY(0);
}

#chatScreen.chat-style-river .chat-river-style-view .node.is-swipe-open {
  transform: translateY(0);
}

/* 左右分布控制 - 核心修改部分 */
#chatScreen.chat-style-river .chat-river-style-view .node.left {
  left: 5%;
  text-align: left;
  /* 修正右侧溢出：左侧元素不需要right属性 */
  right: auto;
}

#chatScreen.chat-style-river .chat-river-style-view .node.right {
  right: 5%;
  text-align: right;
  /* 修正左侧溢出：右侧元素不需要left属性 */
  left: auto; 
}

/* 节点内容布局 */
#chatScreen.chat-style-river .chat-river-style-view .node-content {
  position: relative;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 左侧布局：头像-文字 */
#chatScreen.chat-style-river .chat-river-style-view .node.left .node-content {
  flex-direction: row;
}

/* 右侧布局：文字-头像 (反向) */
#chatScreen.chat-style-river .chat-river-style-view .node.right .node-content {
  flex-direction: row-reverse;
}

/* 关键：连接点（图钉）位置 */
#chatScreen.chat-style-river .chat-river-style-view .pin {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: var(--text);
  border-radius: 50%;
  top: 50%; 
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--bg);
  z-index: 20;
  border: 1px solid var(--sub-text);
}

/* 左侧卡片的图钉在最右边 */
#chatScreen.chat-style-river .chat-river-style-view .node.left .pin { 
  right: -10px; 
}

/* 右侧卡片的图钉在最左边 */
#chatScreen.chat-style-river .chat-river-style-view .node.right .pin { 
  left: -10px; 
}

#chatScreen.chat-style-river .chat-river-style-view .avatar-container {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--blob-radius);
  animation: morph 8s ease-in-out infinite;
  border: 1px solid var(--text);
  flex-shrink: 0; /* 防止头像被压缩 */
  background: var(--bg);
}

#chatScreen.chat-style-river .chat-river-style-view .avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#chatScreen.chat-style-river .chat-river-style-view .node-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#chatScreen.chat-style-river .chat-river-style-view .name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  letter-spacing: 1px;
}

#chatScreen.chat-style-river .chat-river-style-view .poem {
  font-size: 12px;
  color: var(--sub-text);
  font-style: italic;
  line-height: 1.5;
  word-wrap: break-word;
}

/* 左侧诗句左边框 */
#chatScreen.chat-style-river .chat-river-style-view .node.left .poem {
  border-left: 1px solid var(--sub-text);
  padding-left: 8px;
}

/* 右侧诗句右边框 */
#chatScreen.chat-style-river .chat-river-style-view .node.right .poem {
  border-right: 1px solid var(--sub-text);
  padding-right: 8px;
}

/* 装饰用的星星 */
#chatScreen.chat-style-river .chat-river-style-view .star-deco {
  position: absolute;
  width: 10px;
  height: 10px;
  fill: var(--text);
  opacity: 0.6;
  animation: spin 12s linear infinite;
}

#chatScreen.chat-style-river .chat-river-style-view .chat-item-delete-btn {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%) scale(0.95);
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--sub-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
  padding: 0;
  border-radius: 0;
}

#chatScreen.chat-style-river .chat-river-style-view .chat-item-delete-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#chatScreen.chat-style-river .chat-river-style-view .node.is-swipe-open .chat-item-delete-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  color: var(--text);
}

#chatScreen.chat-style-river .chat-river-style-view .node.left .star-deco { top: -5px; left: 0; }
#chatScreen.chat-style-river .chat-river-style-view .node.right .star-deco { top: -5px; right: 0; }

/* 动画定义 */
@keyframes morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 路径动画 */
#chatScreen.chat-style-river .chat-river-style-view .connection-line {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.2; /* 极细线 */
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawLine 2s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.1));
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}