/* 视频通话优化 - 视频显示区域 */
           #video-display-area {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               z-index: 1;
           }

           .video-large-screen {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background-color: #000;
               overflow: hidden;
           }

           .video-large-screen img {
               width: 100%;
               height: 100%;
               object-fit: cover;
           }

           .video-small-screen {
               position: absolute;
               top: 80px;
               right: 20px;
               width: 100px;
               height: 140px;
               background-color: #000;
               border-radius: 12px;
               overflow: hidden;
               border: 2px solid rgba(255, 255, 255, 0.3);
               cursor: pointer;
               z-index: 101;
               transition: all 0.3s ease;
           }

           .video-small-screen:hover {
               border-color: rgba(255, 255, 255, 0.6);
               transform: scale(1.05);
           }

           .video-small-screen img {
               width: 100%;
               height: 100%;
               object-fit: cover;
           }

           #video-call-main {
               position: absolute;
               bottom: 140px;
               left: 15px;
               right: 15px;
               max-height: 30%;
               overflow-y: auto;
               padding: 15px;
               background-color: rgba(0, 0, 0, 0.6);
               border-radius: 20px;
               display: flex;
               flex-direction: column;
               gap: 15px;
               box-sizing: border-box;
               z-index: 50;
               backdrop-filter: blur(10px);
           }

           .control-btn {
               width: 70px;
               height: 70px;
               border-radius: 50%;
               border: none;
               cursor: pointer;
               background-repeat: no-repeat;
               background-position: center;
               transition: transform 0.2s, background-color 0.2s;
           }

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

           .control-btn.speak-btn {
               background-color: rgba(255, 255, 255, 0.2);
               background-size: 55%;
               background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>');
           }

           .control-btn.hangup-btn {
               background-color: #ff3b30;
               background-size: 50%;
               background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 16.5L3 6m18 6l-5.6-5.6a1.2 1.2 0 0 0-1.7 0L3 18.2a1.2 1.2 0 0 0-.3 1.2l1.2 3.6a1.2 1.2 0 0 0 1.2.9h15.6a1.2 1.2 0 0 0 1.2-1.2V7.7a1.2 1.2 0 0 0-.3-1.1z"/></svg>');
           }

           .control-btn.join-btn {
               background-color: #007bff;
               background-size: 50%;
               background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="17" y1="11" x2="23" y2="11"></line></svg>');
           }

           .call-message-bubble {
               padding: 10px 15px;
               border-radius: 12px;
               max-width: 85%;
               line-height: 1.6;
               word-break: break-word;
               white-space: pre-wrap;
           }

           .call-message-bubble.ai-speech {
               background-color: rgba(255, 255, 255, 0.15);
               align-self: flex-start;
           }

           .call-message-bubble.user-speech {
               background-color: #4cd964;
               align-self: flex-end;
               text-align: left;
           }

           #outgoing-call-screen {
               background-color: #1c1c1e;
               color: white;
               justify-content: center;
           }

           /* 语音通话样式 */
           #voice-call-screen {
               background-color: #1c1c1e;
               color: white;
               display: flex;
               flex-direction: column;
               overflow: hidden;
           }

           .voice-call-top-bar {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               padding: 15px 20px;
               padding-top: 50px;
               background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
               z-index: 100;
               text-align: center;
               box-sizing: border-box;
               pointer-events: none;
           }

           #voice-call-timer {
               font-size: 16px;
               font-weight: 500;
               letter-spacing: 1px;
           }

           .voice-call-controls {
               position: absolute;
               bottom: 0;
               left: 0;
               width: 100%;
               display: flex;
               justify-content: space-around;
               align-items: center;
               padding: 20px;
               padding-bottom: 40px;
               background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
               z-index: 100;
               box-sizing: border-box;
           }

           .voice-call-avatar-area {
               flex-grow: 1;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 20px;
               padding-top: 80px;
               box-sizing: border-box;
               overflow-y: auto;
           }

           #voice-participant-avatars-grid {
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               align-items: center;
               gap: 15px;
               max-width: 100%;
           }

           #voice-call-main {
               position: absolute;
               bottom: 140px;
               left: 15px;
               right: 15px;
               max-height: 30%;
               overflow-y: auto;
               padding: 15px;
               background-color: rgba(0, 0, 0, 0.6);
               border-radius: 20px;
               display: flex;
               flex-direction: column;
               gap: 15px;
               box-sizing: border-box;
               z-index: 50;
               backdrop-filter: blur(10px);
           }

           .voice-call-top-bar #minimize-voice-call-btn {
               position: absolute;
               left: 20px;
               top: 50px;
               width: 36px;
               height: 36px;
               border-radius: 50%;
               background-color: rgba(255, 255, 255, 0.2);
               border: none;
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: all 0.3s ease;
               opacity: 0.7;
               pointer-events: auto;
           }

           .voice-call-top-bar #minimize-voice-call-btn:hover {
               opacity: 1;
           }

           #voice-call-restore-btn {
               position: absolute;
               top: 120px;
               right: 20px;
               width: 60px;
               height: 60px;
               border-radius: 50%;
               background-color: #1c1c1e;
               border: 2px solid rgba(255, 255, 255, 0.3);
               cursor: pointer;
               display: none;
               align-items: center;
               justify-content: center;
               z-index: 1000;
               box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
               transition: all 0.3s ease;
           }

           #voice-call-restore-btn:hover {
               transform: scale(1.1);
               border-color: rgba(255, 255, 255, 0.6);
           }

           #voice-call-restore-btn svg {
               width: 30px;
               height: 30px;
               stroke: white;
           }

           .outgoing-call-content {
               display: flex;
               flex-direction: column;
               align-items: center;
               text-align: center;
           }

           .outgoing-call-actions {
               margin-top: 50px;
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 8px;
               font-size: 13px;
               color: #e0e0e0;
           }

           .qzone-post-container {
               position: relative;
               overflow: hidden;
               border-radius: 12px;
           }

           .qzone-post-item {
               transition: transform 0.3s ease;
               background-color: var(--secondary-bg);
               position: relative;
               z-index: 2;
           }

           .qzone-post-delete-action {
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               width: 90px;
               background-color: #ff3b30;
               color: white;
               display: flex;
               align-items: center;
               justify-content: center;
               font-weight: 500;
               cursor: pointer;
               z-index: 1;
           }

           .qzone-post-item.swiped {
               transform: translateX(-90px);
           }

           @keyframes pat-shake {

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

               10%,
               30%,
               50%,
               70%,
               90% {
                   transform: translateX(-3px);
               }

               20%,
               40%,
               60%,
               80% {
                   transform: translateX(3px);
               }
           }

           .pat-animation {
               animation: pat-shake 0.4s ease-in-out;
           }

           .system-message {
               align-self: center;
               padding: 4px 12px;
               margin: 5px 0;
               background-color: rgba(0, 0, 0, 0.1);
               color: var(--text-secondary);
               font-size: 12px;
               border-radius: 10px;
               text-align: center;
               max-width: 80%;
           }

           .message-wrapper.system-pat {
               justify-content: center;
               align-self: center;
               margin: 5px 0;
               max-width: 80%;
           }

           .message-bubble.system-bubble {
               background-color: rgba(0, 0, 0, 0.1);
               color: var(--text-secondary);
               font-size: 12px;
               padding: 4px 12px;
               border-radius: 10px;
           }

           #chat-input-actions-top {
               display: flex;
               gap: 8px;
               padding: 0 5px;
               overflow-x: auto;
               flex-wrap: nowrap;
               -webkit-overflow-scrolling: touch;
               scrollbar-width: none;
               -ms-overflow-style: none;
           }

           #chat-input-actions-top::-webkit-scrollbar {
               display: none;
           }

           #chat-header-title-wrapper {
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 2px;
               position: absolute;
               left: 50%;
               transform: translateX(-50%);
               max-width: 60%;
           }

           #chat-header-title {
               font-size: 16px;
               font-weight: 600;
               position: static;
               transform: none;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
               max-width: 100%;
           }

           #chat-header-status {
               display: flex;
               align-items: center;
               gap: 5px;
               font-size: 11px;
               color: var(--text-secondary);
               transition: all 0.3s ease;
           }

           .status-dot {
               width: 7px;
               height: 7px;
               border-radius: 50%;
               background-color: #4cd964;
               transition: background-color 0.3s ease;
           }

           #chat-header-status.busy .status-dot {
               background-color: #cccccc;
           }

           .status-text {
               font-weight: 500;
           }

           .memory-card {
               background-color: #fffaf0;
               border-radius: 12px;
               padding: 15px;
               box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
               border-left: 5px solid #ffb74d;
               display: flex;
               flex-direction: column;
               gap: 8px;
           }

           .memory-card .header {
               border-bottom: 1px solid rgba(217, 129, 0, 0.15);
               padding-bottom: 8px;
           }

           .memory-card .header .date {
               font-size: 11px;
               color: #a1887f;
               margin-bottom: 4px;
           }

           .memory-card .header .author {
               font-weight: 600;
               color: #d98100;
               font-size: 15px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
           }

           .memory-card .content {
               font-size: 14px;
               line-height: 1.7;
               color: #5d4037;
               white-space: pre-wrap;
           }

           .countdown-card {
               background: linear-gradient(135deg, #667eea, #764ba2);
               color: white;
               border-radius: 12px;
               padding: 20px;
               box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
               text-align: center;
               position: relative;
               overflow: hidden;
               flex-shrink: 0;
           }

           .countdown-card::before {
               content: '✨';
               position: absolute;
               top: -10px;
               left: -10px;
               font-size: 50px;
               opacity: 0.1;
               transform: rotate(-15deg);
           }

           .countdown-card .title {
               font-size: 18px;
               font-weight: 600;
               margin-bottom: 15px;
           }

           .countdown-card .timer {
               font-size: 28px;
               font-weight: 300;
               letter-spacing: 2px;
               margin-bottom: 15px;
           }

           .countdown-card .target-date {
               font-size: 12px;
               opacity: 0.8;
               border-top: 1px solid rgba(255, 255, 255, 0.2);
               padding-top: 10px;
           }

           #chat-lock-overlay {
               position: absolute;
               bottom: 0;
               left: 0;
               width: 100%;
               background-color: rgba(247, 247, 247, 0.9);
               backdrop-filter: blur(10px);
               -webkit-backdrop-filter: blur(10px);
               z-index: 150;
               display: none;
               align-items: center;
               justify-content: center;
               padding: 20px;
               box-sizing: border-box;
               border-top: 1px solid var(--border-color);
               text-align: center;
           }

           #chat-lock-content {
               display: flex;
               flex-direction: column;
               gap: 15px;
           }

           #chat-lock-content .lock-text {
               color: var(--text-secondary);
               font-size: 14px;
           }

           #chat-lock-content .lock-action-btn {
               padding: 10px 20px;
               border-radius: 20px;
               border: 1px solid var(--accent-color);
               background-color: var(--accent-color);
               color: white;
               cursor: pointer;
           }

           #chat-lock-content .lock-action-btn.secondary {
               background-color: transparent;
               color: var(--accent-color);
           }

           .red-packet-card {
               width: 220px;
               border-radius: 8px;
               background: linear-gradient(160deg, #F96259, #E44D44);
               color: #ffd700;
               padding: 12px;
               cursor: pointer;
               box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
               position: relative;
               overflow: hidden;
           }

           .red-packet-card.opened {
               background: linear-gradient(160deg, #d3c4a0, #c4b693);
               cursor: default;
           }

           .red-packet-card::before {
               content: '🧧';
               position: absolute;
               top: -5px;
               left: -5px;
               font-size: 30px;
               opacity: 0.2;
               transform: rotate(-10deg);
           }

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

           .rp-icon {
               width: 20px;
               height: 20px;
           }

           .rp-greeting {
               font-size: 15px;
               font-weight: 500;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
           }

           .rp-type {
               font-size: 11px;
               color: white;
               opacity: 0.8;
               border-top: 1px solid rgba(255, 255, 255, 0.2);
               padding-top: 8px;
               margin-top: 8px;
           }

           .rp-claimed-info {
               font-size: 13px;
               color: white;
               margin-top: 10px;
               padding-top: 10px;
               border-top: 1px solid rgba(255, 255, 255, 0.3);
           }

           .rp-details-item {
               display: flex;
               align-items: center;
               padding: 8px 0;
               border-bottom: 1px solid #eee;
           }

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

           .rp-details-item .name {
               flex-grow: 1;
               font-weight: 500;
               color: #333;
           }

           .rp-details-item .amount {
               font-weight: 500;
               color: #555;
           }

           .rp-details-item .lucky-king-tag {
               font-size: 10px;
               background-color: #ffd700;
               color: #a67c00;
               padding: 2px 5px;
               border-radius: 4px;
               margin-left: 8px;
               font-weight: bold;
           }

           .poll-card {
               width: 250px;
               background-color: #f9f9f9;
               border-radius: 10px;
               border: 1px solid #e0e0e0;
               padding: 12px;
               font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
           }

           .poll-card.closed {
               background-color: #e9ecef;
           }

           .poll-question {
               font-weight: 600;
               font-size: 15px;
               margin-bottom: 12px;
               line-height: 1.4;
               word-break: break-word;
           }

           .poll-options-list {
               display: flex;
               flex-direction: column;
               gap: 8px;
           }

           .poll-option-item {
               background-color: white;
               border: 1px solid #dcdcdc;
               border-radius: 8px;
               padding: 10px;
               cursor: pointer;
               position: relative;
               overflow: hidden;
               transition: background-color 0.2s;
           }

           .poll-card:not(.closed) .poll-option-item:hover {
               background-color: #f0f8ff;
           }

           .poll-option-item.voted {
               border-color: var(--accent-color);
               background-color: #e7f3ff;
               font-weight: 500;
           }

           .poll-option-bar {
               position: absolute;
               top: 0;
               left: 0;
               height: 100%;
               background-color: rgba(0, 123, 255, 0.1);
               z-index: 1;
               transition: width 0.3s ease-in-out;
           }

           .poll-option-content {
               position: relative;
               z-index: 2;
               display: flex;
               justify-content: space-between;
               align-items: center;
           }

           .poll-option-text {
               font-size: 14px;
           }

           .poll-option-votes {
               font-size: 13px;
               color: #8a8a8a;
               font-weight: 500;
           }

           .poll-footer {
               margin-top: 12px;
               padding-top: 8px;
               border-top: 1px solid #e9e9e9;
               display: flex;
               justify-content: space-between;
               align-items: center;
               font-size: 12px;
               color: var(--text-secondary);
           }

           .poll-total-votes {
               font-weight: 500;
           }

           .poll-action-btn {
               background: none;
               border: 1px solid var(--accent-color);
               color: var(--accent-color);
               padding: 4px 10px;
               border-radius: 15px;
               cursor: pointer;
               font-size: 12px;
           }

           .poll-card.closed .poll-action-btn {
               background-color: #6c757d;
               color: white;
               border-color: #6c757d;
           }

           .poll-option-input-wrapper {
               display: flex;
               align-items: center;
               gap: 8px;
           }

           .poll-option-input-wrapper input {
               flex-grow: 1;
           }

           .poll-option-input-wrapper .remove-option-btn {
               width: 28px;
               height: 28px;
               border-radius: 50%;
               background-color: #f0f0f0;
               color: #ff3b30;
               border: none;
               cursor: pointer;
               font-size: 18px;
               line-height: 28px;
               text-align: center;
               flex-shrink: 0;
           }

           #chat-header-title.typing-status {
               color: var(--text-secondary);
               animation: typing-pulse 1.5s infinite;
               font-style: italic;
           }

           @keyframes typing-pulse {

               0%,
               100% {
                   opacity: 1;
               }

               50% {
                   opacity: 0.6;
               }
           }

           #chat-header-title {
               transition: opacity 0.2s ease-in-out;
           }

           @keyframes message-pop-in {
               from {
                   opacity: 0;
                   transform: translateY(15px);
               }

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

           .message-wrapper.animate-in {
               animation: message-pop-in 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
           }

           #icon-settings-grid,
           #cphone-icon-settings-grid {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
               gap: 20px;
               width: 100%;
               padding: 0 10px;
               box-sizing: border-box;
           }

           .icon-setting-item {
               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 8px;
           }

           .icon-preview {
               width: 60px;
               height: 60px;
               border-radius: 15px;
               background-size: cover;
               background-position: center;
               box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
           }

           .change-icon-btn {
               padding: 4px 10px;
               font-size: 12px;
               border: 1px solid #ccc;
               background-color: #f0f0f0;
               border-radius: 5px;
               cursor: pointer;
           }

           #wallpaper-screen .form-container {
               min-height: 0;
           }

           #wallpaper-preview {
               flex-shrink: 0;
           }

           #browser-screen {
               background-color: #f8f9fa;
           }

           #browser-content {
               padding: 20px;
               font-size: 16px;
               line-height: 1.8;
               color: #333;
               overflow-y: auto;
               background-color: #f8f9fa;
           }

           #browser-content .article-title {
               font-size: 24px;
               font-weight: 700;
               margin-bottom: 10px;
           }

           #browser-content .article-meta {
               font-size: 13px;
               color: #8a8a8a;
               margin-bottom: 25px;
               padding-bottom: 15px;
               border-bottom: 1px solid #e0e0e0;
           }

           #browser-content .article-body {
               white-space: pre-wrap;
               word-break: break-word;
           }

           #browser-content .article-body p {
               margin-bottom: 1em;
           }

           .link-share-card {
               width: 210px;
               background-color: var(--secondary-bg);
               border-radius: 10px;
               border: 1px solid #e0e0e0;
               padding: 12px;
               cursor: pointer;
               transition: background-color 0.2s;
               display: flex;
               flex-direction: column;
               gap: 8px;
           }

           .link-share-card:hover {
               background-color: #f9f9f9;
           }

           .link-share-card .title {
               font-weight: 600;
               font-size: 15px;
               line-height: 1.4;
               color: #1f1f1f;
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               overflow: hidden;
               text-overflow: ellipsis;
           }

           .link-share-card .description {
               font-size: 13px;
               color: #8a8a8a;
               display: -webkit-box;
               -webkit-line-clamp: 3;
               -webkit-box-orient: vertical;
               overflow: hidden;
               text-overflow: ellipsis;
           }

           .link-share-card .footer {
               display: flex;
               align-items: center;
               gap: 6px;
               font-size: 12px;
               color: var(--text-secondary);
               margin-top: 4px;
           }

           .link-share-card .footer-icon {
               width: 14px;
               height: 14px;
               flex-shrink: 0;
           }

           /* 歌单分享卡片 */
           .playlist-share-card {
               width: 210px;
               background-color: var(--secondary-bg);
               border-radius: 10px;
               border: 1px solid #e0e0e0;
               padding: 12px;
               display: flex;
               flex-direction: column;
               gap: 8px;
           }

           .playlist-share-header {
               display: flex;
               align-items: center;
               gap: 8px;
           }

           .playlist-share-icon {
               flex-shrink: 0;
               color: var(--text-secondary);
           }

           .playlist-share-title {
               font-weight: 600;
               font-size: 15px;
               color: #1f1f1f;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
           }

           .playlist-share-songs {
               display: flex;
               flex-direction: column;
               gap: 6px;
           }

           .playlist-song-item {
               display: flex;
               align-items: center;
               gap: 8px;
           }

           .playlist-song-index {
               font-size: 12px;
               color: var(--text-secondary);
               width: 16px;
               text-align: center;
               flex-shrink: 0;
           }

           .playlist-song-info {
               display: flex;
               flex-direction: column;
               overflow: hidden;
               min-width: 0;
           }

           .playlist-song-name {
               font-size: 13px;
               color: #1f1f1f;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
           }

           .playlist-song-artist {
               font-size: 11px;
               color: var(--text-secondary);
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
           }

           .playlist-song-more {
               font-size: 12px;
               color: var(--text-secondary);
               padding-left: 24px;
           }

           .playlist-share-footer {
               display: flex;
               align-items: center;
               font-size: 12px;
               color: var(--text-secondary);
               margin-top: 4px;
               padding-top: 8px;
               border-top: 1px solid #e8e8e8;
           }

           .comment-item {
               position: relative;
               padding-right: 25px;
           }

           .comment-delete-btn {
               position: absolute;
               top: 50%;
               right: 0;
               transform: translateY(-50%);
               width: 22px;
               height: 22px;
               line-height: 22px;
               text-align: center;
               border-radius: 50%;
               color: var(--text-secondary);
               font-size: 18px;
               cursor: pointer;
               transition: all 0.2s ease;
               opacity: 0;
           }

           .comment-item:hover .comment-delete-btn {
               opacity: 1;
           }

           .comment-delete-btn:hover {
               background-color: #f0f0f0;
               color: #ff3b30;
           }

           #phone-screen.dark-mode {
               --secondary-bg: #1c1c1e;
               --border-color: #38383a;
               --text-primary: #ffffff;
               --text-secondary: #8d8d92;
           }

           #phone-screen.dark-mode #chat-list-screen,
           #phone-screen.dark-mode #qzone-screen .qzone-content,
           #phone-screen.dark-mode #memories-view {
               background-color: #000000;
           }

           #phone-screen.dark-mode #chat-list {
               background-color: #000000;
           }

           #phone-screen.dark-mode .chat-list-item {
               border-bottom-color: rgba(255, 255, 255, 0.15);
           }

           #phone-screen.dark-mode .chat-group-header {
               background-color: #1c1c1e;
               border-bottom: 1px solid #38383a;
           }

           #phone-screen.dark-mode .chat-list-item .name,
           #phone-screen.dark-mode .chat-group-header .group-name {
               color: #ffffff;
           }

           #phone-screen.dark-mode .chat-list-item:hover {
               background-color: #1c1c1e;
           }

           #phone-screen.dark-mode .header,
           #phone-screen.dark-mode .qzone-header {
               background-color: rgba(25, 25, 25, 0.9);
               backdrop-filter: blur(15px);
               -webkit-backdrop-filter: blur(15px);
               border-bottom-color: rgba(255, 255, 255, 0.15);
               color: #ffffff;
           }

           #phone-screen.dark-mode .header .back-btn,
           #phone-screen.dark-mode .header .action-btn,
           #phone-screen.dark-mode .header .save-btn {
               color: #ffffff;
           }

           #phone-screen.dark-mode #chat-list-bottom-nav {
               background-color: rgba(25, 25, 25, 0.9);
               border-top-color: rgba(255, 255, 255, 0.15);
           }

           #phone-screen.dark-mode .nav-item.active {
               color: #ffffff;
           }

           #phone-screen.dark-mode #chat-input-area {
               background-color: rgba(5, 5, 5, 0.8);
               border-top: none;
           }

           #phone-screen.dark-mode #chat-input {
               background-color: #3e3e42;
               color: #ffffff;
           }

           #phone-screen.dark-mode #chat-input::placeholder {
               color: #8d8d92;
           }

           #phone-screen.dark-mode .chat-action-icon-btn {
               color: #ffffff;
               background-color: rgba(255, 255, 255, 0.1);
               border: none;
           }

           #phone-screen.dark-mode #send-btn {
               background-color: var(--accent-color);
           }

           #phone-screen.dark-mode .qzone-actions-bar,
           #phone-screen.dark-mode .qzone-post-item {
               background-color: #1c1c1e;
               border: 1px solid #333;
               box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
           }

           #phone-screen.dark-mode .action-item:not(:last-child)::after {
               background-color: #333;
           }

           #phone-screen.dark-mode .post-footer,
           #phone-screen.dark-mode .post-likes-section {
               border-top-color: #333;
           }

           #phone-screen.dark-mode .post-likes-section {
               background-color: rgba(0, 123, 255, 0.1);
           }

           #phone-screen.dark-mode .comment-input {
               background-color: #333;
               color: #ffffff;
           }

           #phone-screen.dark-mode .comment-input::placeholder {
               color: #8d8d92;
           }

           #phone-screen.dark-mode .post-actions-btn:hover {
               background-color: #333;
           }

           #phone-screen.dark-mode .at-mention-popup {
               background-color: #1c1c1e;
               border-color: #333;
           }

           #phone-screen.dark-mode .at-mention-item {
               border-bottom-color: #333;
           }

           #phone-screen.dark-mode .at-mention-item:hover {
               background-color: #333;
           }

           #phone-screen.dark-mode .memory-card {
               background-color: #1c1c1e;
               border-left-color: #e6a753;
               box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08);
           }

           #phone-screen.dark-mode .memory-card .header {
               background-color: #2c2c2e;
               border-bottom-color: #38383a;
               margin: -15px -15px 8px -15px;
               padding: 12px 15px;
               border-radius: 12px 12px 0 0;
           }

           #phone-screen.dark-mode .memory-card .header .date,
           #phone-screen.dark-mode .memory-card .header .author,
           #phone-screen.dark-mode .memory-card .content {
               color: #e0e0e0;
           }

           #phone-screen.dark-mode #api-settings-screen,
           #phone-screen.dark-mode #font-settings-screen,
           #phone-screen.dark-mode #wallpaper-screen,
           #phone-screen.dark-mode #contact-picker-screen,
           #phone-screen.dark-mode #member-management-screen,
           #phone-screen.dark-mode #world-book-editor-screen,
           #phone-screen.dark-mode #world-book-list,
           #phone-screen.dark-mode .list-item:hover,
           #phone-screen.dark-mode .list-container,
           #phone-screen.dark-mode .form-container {
               background-color: #000000;
           }

           #phone-screen.dark-mode .form-group input,
           #phone-screen.dark-mode .form-group select,
           #phone-screen.dark-mode .form-group textarea {
               background-color: #1c1c1e;
               color: #ffffff;
               border-color: #38383a;
           }

           #phone-screen.dark-mode .form-button-secondary {
               background-color: #333;
               border-color: #555;
               color: #fff;
           }