/* ================= iOS 主屏幕完整样式 ================= */

:root {
    --ios-bg: linear-gradient(180deg, #fffdf8 0%, #fbf7f0 54%, #f4efe6 100%);
    --widget-bg: rgba(255, 255, 255, 0.52);
    --shadow-light: rgba(255, 255, 255, 0.9);
    --shadow-dark: rgba(133, 145, 170, 0.18);
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --app-viewport-height: 100vh;
    --app-viewport-width: 100vw;
    --app-viewport-offset-top: 0px;
    --ios-blue: #007aff;
    --status-bar-height: 44px;
    --status-bar-pad-top: 8px;
    --status-bar-pad-left: 20px;
    --status-bar-pad-right: 16px;
    --champagne: rgba(176, 144, 100, 0.42);
    --champagne-soft: rgba(176, 144, 100, 0.18);
    --paper-ink: #344052;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

html, body {
    width: 100%;
    height: var(--app-viewport-height);
    min-height: var(--app-viewport-height);
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 252, 246, 0.98), transparent 24%),
        radial-gradient(circle at 78% 15%, rgba(248, 242, 232, 0.9), transparent 20%),
        linear-gradient(180deg, #fffdf8 0%, #f8f3ea 100%);
}

/* 主容器 */
.ios-container {
    width: 100%;
    height: var(--app-viewport-height);
    min-height: var(--app-viewport-height);
    background: var(--ios-bg);
    display: flex;
    flex-direction: column;
    padding: calc(54px + 10px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
    position: relative;
    transition: all 0.3s ease;
}

/* 手机模式 - 清爽纸片风格（无黑边） */
.ios-container.phone-mode-small,
.ios-container.phone-mode-medium,
.ios-container.phone-mode-large,
.ios-container.phone-mode-iphone15,
.ios-container.phone-mode-iphone15plus,
.ios-container.phone-mode-custom {
    width: auto;
    height: auto;
    max-height: 90vh;
    margin: auto;
    border-radius: 40px;
    background: var(--ios-bg, linear-gradient(155deg, #f8faff 0%, #eef2f8 52%, #e7e9f3 100%));
    border: none;
    box-shadow:
        0 30px 80px rgba(55, 65, 90, 0.18),
        0 10px 30px rgba(55, 65, 90, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.72);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ios-container.phone-mode-small { width: 300px; height: 639px; }
.ios-container.phone-mode-medium { width: 340px; height: 699px; }
.ios-container.phone-mode-large { width: 425px; height: 860px; }
.ios-container.phone-mode-iphone15 { width: 425px; height: 860px; }
.ios-container.phone-mode-iphone15plus { width: 450px; height: 950px; }
.ios-container.phone-mode-custom {
    /* 自定义尺寸通过JavaScript动态设置 */
    max-height: 90vh;
}

/* 全屏模式 */
.ios-container.fullscreen-mode {
    width: 100%;
    height: var(--app-viewport-height);
    min-height: var(--app-viewport-height);
    border-radius: 0;
    border: none;
    box-shadow: none;

    /* 全屏时不要继续沿用手机卡片的外边?安全区内边距? 
       否则主屏会看起来“缩小一圈?*/
    padding: 0;

    /* 防御式覆盖：避免被 phone-mode-*(max-height/margin) 影响导致主屏“缩小” */
    margin: 0;
    max-height: var(--app-viewport-height);
    overflow: hidden;
}

/* 全局状态栏 - 在手机容器内部 */
.status-bar,
.app-view .status-bar,
.app-status-bar {
    display: flex;
    position: relative;
    width: 100%;
    height: var(--status-bar-height);
    align-items: center;
    justify-content: space-between;
    padding: var(--status-bar-pad-top) var(--status-bar-pad-right) 0 var(--status-bar-pad-left);
    flex-shrink: 0;
    z-index: 100;
    box-sizing: border-box;
}

/* 全屏模式下状态栏样式 */
.ios-container.fullscreen-mode .status-bar {
    background-color: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 应用界面的状态栏 - 统一样式 */
.app-view .status-bar,
.app-status-bar {
    background: transparent;
}

/* 状态栏内容布局 */
.status-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0;
    width: 100%;
}

.status-left {
    display: flex;
    align-items: center;
}

.status-right {
    display: flex;
    align-items: center;
}

/* 状态栏时间 */
.status-time {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    min-width: 40px;
    flex: 0 0 auto;
}

/* 状态栏图标区 */
.status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* WiFi图标样式 */
.wifi-icon {
    display: flex;
    align-items: center;
    color: #000;
}

.wifi-icon svg {
    width: 16px;
    height: 16px;
}

/* 信号格（加粗样式） */
.signal-icon {
    display: flex;
    align-items: center;
}

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

.bar {
    width: 3px;
    background: #000;
    border-radius: 0.5px;
}

.bar:nth-child(1) { height: 4px; }
.bar:nth-child(2) { height: 7px; }
.bar:nth-child(3) { height: 10px; }
.bar:nth-child(4) { height: 12px; }

/* 电池图标（iOS实心黑色样式） */
.battery-icon {
    display: flex;
    align-items: center;
}

.battery-body {
    width: 24px;
    height: 12px;
    border: 1.5px solid #000;
    border-radius: 2.5px;
    padding: 1px;
    position: relative;
    background: transparent;
    overflow: hidden;
}

.battery-body::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 5px;
    background: #000;
    border-radius: 0 1px 1px 0;
}

.battery-level {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    border-radius: 1px;
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 0.3s, background 0.3s;
}

/* 应用内状态栏样式调整 - 与主屏幕保持一致 */
.app-view .status-bar {
    background: transparent;
}

.app-view .status-time {
    font-size: 14px;
    font-weight: 600;
}

.app-view .battery-body {
    width: 24px;
    height: 12px;
    border: 1.5px solid #000;
    border-radius: 2.5px;
    background: transparent;
    padding: 1px;
}

.app-view .battery-body::after {
    width: 2px;
    height: 5px;
}

.app-view .battery-level {
    margin: 0;
}

.app-view .signal-bars {
    gap: 1px;
    height: 12px;
}

.app-view .bar {
    width: 3px;
    border-radius: 0.5px;
}

.app-view .bar:nth-child(1) { height: 4px; }
.app-view .bar:nth-child(2) { height: 7px; }
.app-view .bar:nth-child(3) { height: 10px; }
.app-view .bar:nth-child(4) { height: 12px; }

/* 小组件区域（并排） */
.widgets-area {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 15px 0 20px 0;
    padding: 0 15px;
    width: 100%;
}

.widget {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(22px) saturate(110%);
    -webkit-backdrop-filter: blur(22px) saturate(110%);
    border-radius: 26px;
    padding: 16px;
    color: #1d1d1f;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 12px 24px rgba(82, 95, 125, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* 电池小组件 */
.battery-widget {
    flex: 0 0 45%;
    max-width: 160px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.widget-header {
    font-size: 14px;
    font-weight: 600;
    color: rgba(29, 29, 31, 0.72);
    margin-bottom: 10px;
    align-self: flex-start;
}

/* 电池圆环（修复黑圆问题） */
.battery-circle {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.battery-circle svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.circle-bg {
    fill: none;
    stroke: rgba(0,0,0,0.1);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: #34c759; /* 绿色进度条 */
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s;
}

.battery-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #34c759;
}

/* 天气小组件 */
.weather-widget {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 140px;
}

.weather-info .location {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 6px;
}

.weather-info .temp {
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    color: #1d1d1f;
}

.weather-info .condition {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 6px;
}

/* App网格（一排2个） */
.app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 8px;
    padding: 20px 5px;
    flex: 1;
    align-content: start;
    width: 100%;
    margin-top: 20px;
}

.app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.1s;
}

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

/* App图标（使用PNG背景） */
.app-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: all 0.2s;
    overflow: hidden;
}

/* 各个应用图标 */
.wechat-icon {
    background-image: none;
}

.messages-icon {
    background-image: none;
}

.notes-icon {
    background-image: none;
}

.music-icon {
    background-image: none;
}

.settings-icon {
    background-image: none;
}

.shijieshu-icon {
    background-image: none;
}

.app-label {
    color: #1d1d1f;
    font-size: 11px;
    margin-top: 6px;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* 底部Dock栏 */
.dock-bar {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    gap: 35px;
    padding: 16px 30px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0 auto 8px;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-15px);
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s;
}

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

.dock-item .app-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
}

.dock-item .app-label {
    color: #1d1d1f;
    font-size: 10px;
    margin-top: 6px;
    font-weight: 500;
    text-align: center;
}

/* 底部指示条 - iOS风格 home indicator */
.home-bar {
    width: 120px;
    height: 4px;
    background: rgba(51, 51, 51, 0.2);
    border-radius: 3px;
    margin: 6px auto 8px;
    cursor: pointer;
    display: block;
}

/* ================= 应用界面 ================= */
.app-view {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    height: 720px;
    background: #fff;
    display: none;
    flex-direction: column;
    z-index: 1000 !important;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 
        20px 20px 60px rgba(0,0,0,0.15),
        -20px -20px 60px rgba(255,255,255,0.8),
        0 0 0 1px rgba(255,255,255,0.5) inset;
    max-height: 90vh;
}

.app-view.is-visible {
    display: flex !important;
}

/* 根据手机模式调整应用大小 */
.ios-container.phone-mode-small ~ .app-view {
    width: 300px;
    height: 639px;
}

.ios-container.phone-mode-medium ~ .app-view {
    width: 340px;
    height: 699px;
}

.ios-container.phone-mode-large ~ .app-view {
    width: 425px;
    height: 860px;
}

.ios-container.phone-mode-iphone15 ~ .app-view {
    width: 425px;
    height: 860px;
}

.ios-container.phone-mode-iphone15plus ~ .app-view {
    width: 450px;
    height: 950px;
}

.ios-container.fullscreen-mode ~ .app-view {
    width: 100%;
    height: var(--app-viewport-height);
    min-height: var(--app-viewport-height);
    border-radius: 0;
    box-shadow: none;
    top: var(--app-viewport-offset-top, 0px);
    left: 0;
    transform: none;
    max-height: var(--app-viewport-height);
}

@keyframes slideIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.nav-bar {
    height: 80px;
    padding-top: 12px;
    background: rgba(248,248,248,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
}

.nav-back {
    font-size: 28px;
    color: var(--ios-blue);
    cursor: pointer;
    min-width: 60px;
    display: flex;
    align-items: center;
    margin-right: auto;
    text-align: left;
}

.nav-title {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-action {
    font-size: 20px;
    color: var(--ios-blue);
    min-width: 60px;
    text-align: right;
    cursor: pointer;
    margin-left: auto;
    pointer-events: auto !important;
    z-index: 100;
    position: relative;
}

/* 设置界面 */
.settings-scroll {
    flex: 1;
    background: #f2f2f7;
    overflow-y: auto;
    padding: 15px;
}

.settings-header {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;
    border-bottom: 0.5px solid #e5e5e5;
}

.user-avatar {
    width: 60px;
    height: 60px;
    background: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-right: 15px;
}

.user-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.user-sub {
    font-size: 13px;
    color: #666;
}

.settings-section {
    background: #fff;
    margin-bottom: 20px;
    border-top: 0.5px solid #e5e5e5;
    border-bottom: 0.5px solid #e5e5e5;
}

.setting-header {
    padding: 8px 15px;
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    background: #f2f2f7;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.setting-cell {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 0.5px solid #e5e5e5;
    cursor: pointer;
    background: #fff;
}

.setting-cell:last-child {
    border-bottom: none;
}

.setting-cell:active {
    background: #f5f5f5;
}

.cell-icon {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.cell-icon.blue { 
    background: linear-gradient(135deg, #007AFF 0%, #0055D4 100%);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.cell-icon.pink { 
    background: linear-gradient(135deg, #FF2D55 0%, #E60E40 100%);
    box-shadow: 0 4px 12px rgba(255, 45, 85, 0.3);
}

.cell-icon.gray { 
    background: linear-gradient(135deg, #8E8E93 0%, #747480 100%);
    box-shadow: 0 4px 12px rgba(142, 142, 147, 0.3);
}

.cell-icon.green { 
    background: linear-gradient(135deg, #34C759 0%, #22B644 100%);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.cell-icon.orange { 
    background: linear-gradient(135deg, #FF9500 0%, #E67E22 100%);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.cell-icon.purple {
    background: linear-gradient(135deg, #AF52DE 0%, #9C3EBF 100%);
    box-shadow: 0 4px 12px rgba(175, 82, 222, 0.3);
}

.cell-icon.red {
    background: linear-gradient(135deg, #FF3B30 0%, #E60E0E 100%);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.cell-text {
    flex: 1;
    font-size: 16px;
    color: #000;
}

.cell-detail {
    color: #999;
    font-size: 15px;
    margin-right: 8px;
}

.cell-arrow {
    color: #c7c7cc;
    font-size: 18px;
}

/* 弹窗 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    visibility: hidden;
    opacity: 0;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999 !important;
    border-radius: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-ios), visibility var(--motion-base) var(--ease-ios);
}

.modal.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    width: 90%;
    max-width: 340px;
    max-height: 85%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    transform: translateY(24px) scale(0.985);
    opacity: 0.92;
    transition:
        transform var(--motion-base) var(--ease-ios-out),
        opacity var(--motion-base) var(--ease-ios),
        box-shadow var(--motion-base) var(--ease-ios);
}

.modal.active .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* 根据手机模式调整模态框大小 */
.ios-container.phone-mode-small .modal-content {
    max-width: 280px;
    max-height: 80%;
}

.ios-container.phone-mode-medium .modal-content {
    max-width: 320px;
    max-height: 85%;
}

.ios-container.phone-mode-large .modal-content,
.ios-container.phone-mode-iphone15 .modal-content {
    max-width: 400px;
    max-height: 90%;
}

.ios-container.phone-mode-iphone15plus .modal-content,
.ios-container.phone-mode-custom .modal-content {
    max-width: 420px;
    max-height: 90%;
}

.ios-container.fullscreen-mode .modal-content {
    width: 95%;
    max-width: 600px;
    max-height: 90vh;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 0.5px solid #e5e5e5;
}

.modal-title {
    font-size: 17px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.modal-close {
    background: none;
    border: none;
    color: var(--ios-blue);
    font-size: 16px;
    cursor: pointer;
    min-width: 60px;
    text-align: right;
}

.modal-body {
    padding: 20px 30px;
    overflow-y: auto;
    flex: 1;
}

/* 壁纸选择 */
.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
}

.wallpaper-thumb {
    aspect-ratio: 9/16;
    border-radius: 12px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s;
}

.wallpaper-thumb:active {
    transform: scale(0.95);
}

/* 储存空间样式 */
.storage-chart {
    margin-bottom: 20px;
}

.storage-bar {
    width: 100%;
    height: 12px;
    background: #f0f0f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.storage-used {
    height: 100%;
    background: linear-gradient(90deg, #007AFF 0%, #34C759 100%);
    border-radius: 6px;
    transition: width 0.3s;
}

.storage-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.storage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.storage-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 0.5px solid #e5e5e5;
}

.storage-list-item .name {
    font-weight: 500;
    font-size: 16px;
    color: #000;
}

.storage-list-item .size {
    font-size: 15px;
    color: #666;
}

.storage-item .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.storage-item .dot.used {
    background: linear-gradient(135deg, #007AFF 0%, #34C759 100%);
}

.storage-item .dot.free {
    background: #e5e5e5;
}

.storage-list {
    margin-top: 20px;
}

.storage-list-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 0.5px solid #f0f0f0;
    font-size: 14px;
    color: #333;
}

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

.storage-list-item .name {
    font-weight: 500;
}

.storage-list-item .size {
    color: #999;
}

/* 开关样式 */
.toggle-switch {
    width: 44px;
    height: 24px;
    background: #34c759;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    cursor: pointer;
}

.toggle-switch.inactive {
    background: #ccc;
}

.toggle-switch div {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch.inactive div {
    transform: translateX(-20px);
}

/* 关机/充电界面 */
.shutdown-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    color: #fff;
}

.big-battery {
    text-align: center;
    padding: 40px;
}

.battery-icon-large {
    width: 120px;
    height: 60px;
    border: 4px solid #fff;
    border-radius: 12px;
    position: relative;
    margin: 0 auto 30px;
    padding: 4px;
}

.battery-fill-large {
    height: 100%;
    background: #30d158;
    border-radius: 6px;
    transition: width 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery-text-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
    color: #000;
    mix-blend-mode: difference;
}

.charging-label {
    font-size: 18px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.reboot-button {
    background: #fff;
    color: #000;
    border: none;
    padding: 12px 40px;
    border-radius: 20px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    transition: opacity 0.2s;
}

.reboot-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 低电量警告 */
.alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
}

.alert-box {
    background: rgba(30,30,30,0.95);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    color: #fff;
    max-width: 280px;
    border: 1px solid rgba(255,255,255,0.1);
}

.alert-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.alert-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ffcc00;
}

/* 隐藏状态栏时的调整 */
.ios-container.hide-status-bar .status-bar,
.app-view.hide-status-bar .status-bar {
    display: none !important;
}

.ios-container.hide-status-bar {
    padding-top: 0;
}

.app-view.hide-status-bar .nav-bar {
    height: 52px;
    padding-top: 0;
    align-items: center;
}

.app-view.hide-status-bar .chat-nav-bar,
.app-view.hide-status-bar#app-chat .chat-nav-bar {
    height: 56px;
}

.app-view.hide-status-bar .nav-title {
    line-height: 52px;
}

/* 输入框样式 */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 12px;
    color: #8792a6;
    margin-bottom: 7px;
    text-transform: none;
    font-weight: 620;
    letter-spacing: 0.1px;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    font-size: 15px;
    background: rgba(249, 251, 254, 0.96);
    outline: none;
    font-family: inherit;
}

.btn-primary {
    width: 100%;
    padding: 12px;
    background: linear-gradient(180deg, #2f90ff 0%, #007aff 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 8px 15px rgba(0, 122, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.api-preset-section {
    margin: 14px -30px 0;
    padding: 10px 30px 0;
    border-top: 0.5px solid #e5e5ea;
}

.api-preset-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.api-preset-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 650;
    color: #1c1c1e;
}

.api-preset-title-icon {
    font-size: 13px;
    line-height: 1;
    color: #8e8e93;
}

.api-preset-description,
.api-preset-tip {
    font-size: 11px;
    line-height: 1.4;
    color: #9ca3af;
}

.api-preset-save-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.api-preset-save-row input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    font-size: 14px;
    background: rgba(249, 251, 254, 0.92);
    outline: none;
    font-family: inherit;
}

.api-preset-save-row input::placeholder {
    color: #b3b8c2;
}

.api-preset-save-row button,
.api-preset-clear-btn,
.api-preset-delete-btn {
    border: none;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
}

.api-preset-save-row button {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 4px;
    color: #007aff;
    font-size: 14px;
    font-weight: 600;
}

.api-preset-tip {
    margin-top: 6px;
}

.api-preset-list-section {
    padding-top: 8px;
}

.api-preset-clear-btn {
    padding: 0;
    color: #ff3b30;
    font-size: 12px;
    font-weight: 600;
}

.api-preset-list {
    margin-top: 6px;
    border-top: 0.5px solid #e5e5ea;
}

.api-preset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 0.5px solid #e5e5ea;
    cursor: pointer;
}

.api-preset-item:active {
    opacity: 0.65;
}

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

.api-preset-name {
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1e;
    margin-bottom: 3px;
}

.api-preset-meta {
    font-size: 11px;
    line-height: 1.35;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-preset-delete-btn {
    flex: 0 0 auto;
    padding: 0;
    color: #ff3b30;
    font-size: 12px;
    font-weight: 600;
}

.api-preset-empty {
    padding: 16px 0 12px;
    text-align: center;
    color: #9ca3af;
}

.api-preset-empty-icon {
    font-size: 20px;
    margin-bottom: 6px;
    color: #c7d2e5;
}

.api-preset-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 3px;
}

.api-preset-empty-text {
    font-size: 11px;
    line-height: 1.4;
    color: #b0b7c2;
}


/* 响应式 */
@media (max-width: 380px) {
    .app-icon {
        width: 55px;
        height: 55px;
    }
}

/* 菜单项样式 */
.menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 0.5px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-item:active {
    background: #f5f5f5;
}

.menu-icon {
    font-size: 24px;
    margin-right: 12px;
}

.menu-text {
    font-size: 16px;
    color: #000;
}

/* 头像选择器 */
.avatar-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #e5e5e5;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}

.avatar-preview:active {
    transform: scale(0.95);
}

.avatar-input {
    font-size: 13px;
    color: #666;
}

/* 颜色网格 */
.color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 15px;
}

.color-option {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
}

.color-option:active {
    transform: scale(0.9);
}

/* 聊天列表项 */
.chat-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 0.5px solid #e5e5e5;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.chat-item:active {
    background: #f5f5f5;
}

.chat-item .avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    margin-right: 14px;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

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

.chat-name {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 6px;
}

.chat-preview {
    font-size: 13px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 8px;
    flex-shrink: 0;
}

.chat-time {
    font-size: 12px;
    color: #999;
}

/* 危险按钮 */
.btn-danger {
    width: 100%;
    padding: 12px;
    background: rgba(255, 59, 48, 0.08);
    color: #d1433d;
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 650;
    cursor: pointer;
    margin-top: 10px;
}

.btn-danger:active {
    opacity: 0.92;
}

/* 滚动条隐藏 */
::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 备忘录和其他内容容器 */
.notes-container,
.messages-container,
.chat-list {
    padding: 0 15px;
}

/* ================= Notes App ================= */
#app-notes {
    background: linear-gradient(180deg, #fbfbfd 0%, #f5f6fa 100%);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#app-notes .nav-bar {
    flex-shrink: 0;
    background: rgba(251, 252, 255, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 0.5px solid rgba(204, 212, 224, 0.38);
}

#app-notes #notesPage {
    flex: 1;
    min-height: 0;
}

#app-notes .notes-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 28px;
    background: linear-gradient(180deg, rgba(252, 252, 255, 0.96), rgba(246, 248, 252, 0.98));
}

#app-notes .notes-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 14px;
}

#app-notes .notes-search-shell {
    flex-shrink: 0;
    padding: 10px 18px 0;
    background: linear-gradient(180deg, rgba(251, 252, 255, 0.94), rgba(251, 252, 255, 0.72));
}

#app-notes .notes-search-bar {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(240, 243, 248, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 1px 3px rgba(190, 199, 214, 0.10);
    color: rgba(111, 124, 145, 0.92);
}

#app-notes .notes-search-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(122, 135, 155, 0.88);
}

#app-notes .notes-search-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

#app-notes .notes-search-bar input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: rgba(52, 65, 85, 0.96);
    font-size: 14px;
}

#app-notes .notes-search-bar input::placeholder {
    color: rgba(132, 143, 161, 0.82);
}

#app-notes .notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#app-notes .note-card {
    position: relative;
    padding: 14px 15px 15px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 251, 255, 0.92));
    border: 1px solid rgba(228, 233, 242, 0.92);
    box-shadow:
        0 10px 24px rgba(190, 198, 214, 0.10),
        0 2px 8px rgba(190, 198, 214, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#app-notes .note-card:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 223, 236, 0.98);
    box-shadow:
        0 14px 28px rgba(190, 198, 214, 0.12),
        0 4px 10px rgba(190, 198, 214, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

#app-notes .note-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

#app-notes .note-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(245, 247, 251, 0.92);
    color: rgba(107, 119, 138, 0.96);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(232, 237, 245, 0.92);
}

#app-notes .note-title {
    color: rgba(40, 53, 73, 0.96);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.25;
    margin-bottom: 7px;
}

#app-notes .note-date {
    color: rgba(138, 149, 166, 0.92);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

#app-notes .note-snippet {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: rgba(111, 123, 141, 0.94);
    font-size: 13px;
    line-height: 1.55;
}

#app-notes .notes-empty {
    padding: 28px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(230, 235, 243, 0.86);
    text-align: center;
    color: rgba(124, 136, 154, 0.92);
    font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#app-notes .note-detail-shell {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 28px;
    background: linear-gradient(180deg, rgba(252, 252, 255, 0.96), rgba(246, 248, 252, 0.98));
}

#app-notes .note-detail-card {
    padding: 18px 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 251, 255, 0.94));
    border: 1px solid rgba(228, 233, 242, 0.94);
    box-shadow:
        0 12px 28px rgba(190, 198, 214, 0.10),
        0 2px 8px rgba(190, 198, 214, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

#app-notes .note-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#app-notes .note-detail-back {
    border: none;
    background: rgba(244, 247, 252, 0.96);
    color: rgba(88, 104, 129, 0.96);
    border-radius: 12px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#app-notes .note-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#app-notes .note-detail-menu-wrap {
    position: relative;
}

#app-notes .note-detail-action {
    border: none;
    height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(244, 247, 252, 0.96);
    color: rgba(79, 96, 120, 0.96);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#app-notes .note-detail-more {
    min-width: 34px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
}

#app-notes .note-detail-action.is-saved {
    background: rgba(234, 247, 238, 0.96);
    color: rgba(70, 118, 86, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 8px 18px rgba(145, 188, 156, 0.14);
}

#app-notes .note-detail-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 152px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(228, 233, 242, 0.92);
    box-shadow:
        0 14px 30px rgba(186, 194, 208, 0.14),
        0 2px 10px rgba(186, 194, 208, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 2;
}

#app-notes .note-detail-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#app-notes .note-detail-menu-item {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: rgba(66, 81, 103, 0.96);
    cursor: pointer;
}

#app-notes .note-detail-menu-item:active {
    background: rgba(241, 245, 251, 0.88);
}

#app-notes .note-detail-menu-item-danger {
    color: rgba(202, 77, 77, 0.96);
}

#app-notes .note-delete-confirm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(249, 250, 252, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

#app-notes .note-delete-confirm.is-open {
    opacity: 1;
    pointer-events: auto;
}

#app-notes .note-delete-confirm-card {
    width: min(100%, 280px);
    padding: 20px 18px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(228, 233, 242, 0.94);
    box-shadow:
        0 18px 36px rgba(184, 192, 206, 0.16),
        0 2px 10px rgba(184, 192, 206, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    text-align: center;
}

#app-notes .note-delete-confirm-title {
    color: rgba(40, 53, 73, 0.98);
    font-size: 17px;
    font-weight: 700;
}

#app-notes .note-delete-confirm-text {
    margin-top: 8px;
    color: rgba(112, 124, 143, 0.94);
    font-size: 13px;
    line-height: 1.5;
}

#app-notes .note-delete-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

#app-notes .note-delete-confirm-btn {
    border: none;
    height: 38px;
    border-radius: 14px;
    background: rgba(243, 246, 251, 0.96);
    color: rgba(72, 88, 111, 0.96);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

#app-notes .note-delete-confirm-btn-danger {
    background: rgba(255, 238, 238, 0.96);
    color: rgba(204, 76, 76, 0.98);
}

#app-notes .note-detail-title {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: rgba(40, 53, 73, 0.98);
    font-size: 24px;
    font-weight: 680;
    line-height: 1.25;
    margin-bottom: 10px;
}

#app-notes .note-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

#app-notes .note-detail-body {
    width: 100%;
    min-height: 320px;
    border: none;
    outline: none;
    resize: none;
    background: rgba(247, 249, 253, 0.72);
    border-radius: 18px;
    padding: 14px 15px;
    color: rgba(67, 81, 103, 0.96);
    font-size: 15px;
    line-height: 1.8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ================= 微信聊天界面 ================= */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 20px 12px;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msg-bubble-user,
.msg-bubble-ai {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.msg-bubble-user {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0;
    flex-direction: row-reverse;
}

.msg-bubble-ai {
    justify-content: flex-start;
}

/* 聊天气泡长按反馈 */
.chat-selectable-bubble {
    position: relative;
    transition: transform 0.15s ease, opacity 0.15s ease;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.chat-selectable-bubble.long-press-active .msg-text {
    transform: scale(1.02);
    filter: brightness(0.98);
}

.chat-selectable-bubble .msg-text,
.chat-selectable-bubble .msg-main-text,
.chat-selectable-bubble .msg-quote-block,
.chat-selectable-bubble .msg-translation-block {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* 长按操作菜单 */
.chat-long-press-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.03);
    z-index: 9999;
    animation: chatMenuBackdropIn 180ms ease-out;
}

@keyframes chatMenuBackdropIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.chat-long-press-menu {
    position: absolute;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04);
    z-index: 10000;
    animation: chatMenuIn 220ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
    user-select: none;
    -webkit-user-select: none;
}

@keyframes chatMenuIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chat-long-press-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    min-width: 60px;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}

.chat-long-press-menu-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: rgba(0, 0, 0, 0.08);
}

.chat-long-press-menu-item:active {
    background: rgba(0, 0, 0, 0.04);
}

.chat-long-press-menu-item-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-long-press-menu-item-icon svg {
    width: 100%;
    height: 100%;
    stroke: #5a5a5a;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-long-press-menu-item-label {
    font-size: 11px;
    color: #5a5a5a;
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* 心声弹窗 */
.inner-voice-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalBackdropIn 200ms ease-out;
}

@keyframes modalBackdropIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.inner-voice-modal {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 70vh;
    box-shadow:
        0 20px 60px rgba(31, 41, 55, 0.2),
        0 8px 24px rgba(31, 41, 55, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: modalIn 280ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.inner-voice-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(120, 130, 150, 0.12);
}

.inner-voice-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.inner-voice-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(120, 130, 150, 0.08);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 20px;
    color: #52525b;
}

.inner-voice-modal-close:hover {
    background: rgba(120, 130, 150, 0.15);
}

.inner-voice-modal-close:active {
    transform: scale(0.92);
}

.inner-voice-modal-content {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
}

.inner-voice-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #71717a;
}

.inner-voice-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(120, 130, 150, 0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

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

.inner-voice-loading-text {
    font-size: 14px;
    color: #71717a;
}

.inner-voice-text {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.inner-voice-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(120, 130, 150, 0.12);
}

.inner-voice-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inner-voice-btn-secondary {
    background: rgba(120, 130, 150, 0.1);
    color: #52525b;
}

.inner-voice-btn-secondary:hover {
    background: rgba(120, 130, 150, 0.15);
}

.inner-voice-btn-secondary:active {
    transform: scale(0.96);
}

.inner-voice-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.inner-voice-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.inner-voice-btn-primary:active {
    transform: scale(0.96);
}

.inner-voice-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 引用预览区（输入框上方） */
.chat-quote-preview {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    animation: quotePreviewIn 200ms ease-out;
}

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

.chat-quote-preview-line {
    width: 3px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.chat-quote-preview-content {
    flex: 1;
    min-width: 0;
}

.chat-quote-preview-author {
    font-size: 12px;
    font-weight: 500;
    color: #667eea;
    margin-bottom: 2px;
}

.chat-quote-preview-text {
    font-size: 13px;
    color: #5a5a5a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-quote-preview-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s ease;
    flex-shrink: 0;
    font-size: 16px;
    color: #5a5a5a;
}

.chat-quote-preview-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.chat-quote-preview-close:active {
    transform: scale(0.92);
}

/* 消息中的引用条 */
.msg-content-stack {
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: 76%;
}

.msg-bubble-user .msg-content-stack {
    align-items: flex-end;
    max-width: 82%;
}

.msg-bubble-ai .msg-content-stack {
    align-items: flex-start;
}

.msg-content-stack .msg-text {
    width: max-content;
    max-width: 100%;
}

.msg-quote-block {
    max-width: 100%;
    margin-top: 6px;
    padding: 7px 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.12s ease;
}

.msg-bubble-user .msg-quote-block {
    align-self: flex-end;
}

.msg-bubble-ai .msg-quote-block {
    align-self: flex-start;
}

.msg-quote-block:hover {
    background: rgba(0, 0, 0, 0.07);
}

.msg-translation-block {
    align-self: flex-start;
    width: fit-content;
    max-width: min(100%, 320px);
    margin-top: 5px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: #f3f3f3;
    box-shadow: none;
    color: #333;
    font-size: 14px;
    line-height: 1.42;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.msg-bubble-user .msg-translation-block {
    align-self: flex-end;
}

.msg-bubble-ai .msg-translation-block {
    align-self: flex-start;
}

.msg-translation-block.loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9a9a9a;
}

.msg-translation-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transform: translateY(1px);
}

.msg-translation-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: msgTranslationDotPulse 1.2s ease-in-out infinite;
}

.msg-translation-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.msg-translation-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.msg-translation-block.error {
    background: #f5eeee;
    color: #a05a5a;
    cursor: pointer;
}

.msg-translation-block.error:focus-visible {
    outline: 2px solid rgba(160, 90, 90, 0.26);
    outline-offset: 2px;
}

@keyframes msgTranslationDotPulse {
    0%, 80%, 100% {
        opacity: 0.28;
        transform: translateY(0);
    }
    40% {
        opacity: 0.75;
        transform: translateY(-1px);
    }
}

.msg-main-text {
    display: inline;
}

.msg-quote-text {
    font-size: 13px;
    color: rgba(31, 41, 55, 0.68);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 聊天气泡多选（长按进入） */

.chat-selection-mode .chat-selectable-bubble {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 44px;
}

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

.chat-selection-mode .chat-selectable-bubble::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.6px solid rgba(120, 130, 150, 0.7);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}

.chat-selection-mode .chat-selectable-bubble.chat-bubble-selected::before {
    border-color: #07c160;
    background: #07c160;
    box-shadow:
        0 4px 10px rgba(7, 193, 96, 0.28),
        inset 0 0 0 1px rgba(255,255,255,0.22);
}

.chat-selection-mode .chat-selectable-bubble.chat-bubble-selected::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 19px;
    width: 7px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.chat-selection-mode .chat-selectable-bubble.chat-bubble-selected .msg-text {
    box-shadow:
        0 0 0 2px rgba(7, 193, 96, 0.16),
        0 8px 16px rgba(31, 41, 55, 0.08);
}

/* 多选模式修正：统一左侧勾选列 + 工具栏布局 */
.chat-selection-mode .chat-messages {
    padding-bottom: 72px;
}

.chat-selection-mode .msg-bubble-ai.chat-selectable-bubble {
    padding-left: 44px;
    padding-right: 0;
}

.chat-selection-mode .msg-bubble-user.chat-selectable-bubble {
    padding-left: 44px;
    padding-right: 0;
}

.chat-selection-mode .msg-bubble-ai.chat-selectable-bubble::before,
.chat-selection-mode .msg-bubble-user.chat-selectable-bubble::before {
    left: 14px;
    right: auto;
    top: 14px;
}

.chat-selection-mode .msg-bubble-ai.chat-selectable-bubble.chat-bubble-selected::after,
.chat-selection-mode .msg-bubble-user.chat-selectable-bubble.chat-bubble-selected::after {
    left: 20px;
    right: auto;
    top: 19px;
}

.chat-selection-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 8px 14px max(10px, env(safe-area-inset-bottom));
    margin: 0;
    border-radius: 0;
    background: rgba(247, 247, 248, 0.98);
    border: 0;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -8px 24px rgba(31, 41, 55, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#app-chat.chat-selection-mode .chat-selection-toolbar {
    display: flex;
}

.chat-selection-toolbar.active {
    display: flex;
}

#app-chat.chat-selection-mode .chat-input-bar {
    display: none;
}

.chat-selection-toolbar-left,
.chat-selection-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-selection-toolbar-right {
    margin-left: auto;
}

.chat-selection-count {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.chat-selection-btn {
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.chat-selection-btn:active {
    transform: scale(0.97);
}

.chat-selection-btn.danger {
    border-color: rgba(239, 68, 68, 0.24);
    color: #dc2626;
}

#app-chat .chat-selection-btn {
    min-width: 58px;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: none !important;
}

#app-chat .chat-selection-btn.danger {
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    background: rgba(254, 242, 242, 0.98) !important;
}

.msg-text {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 10px;
    word-wrap: break-word;
    font-size: 15px;
    line-height: 1.4;
    position: relative;
}

.msg-bubble-user .msg-text {
    background: #95ec69;
    color: #000;
}

.msg-bubble-ai .msg-text {
    background: #e5e5ea;
    color: #000;
}

.msg-bubble-ai.system {
    justify-content: center;
    color: #999;
    font-size: 13px;
    margin: 8px 0;
}

.cross-mode-summary {
    margin: 10px auto 14px;
    padding: 0 20px;
}

.cross-mode-summary::before {
    content: '';
    display: block;
}

.cross-mode-summary .msg-text,
.cross-mode-summary {
    max-width: 88%;
    text-align: left;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.8;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 8px 18px rgba(31, 41, 55, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #e5e5e5;
    border-radius: 22px;
    margin: 0 12px 12px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chat-input {
    flex: 1;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 15px;
    background: #f5f5f5;
    outline: none;
    font-family: inherit;
    transition: background 0.2s;
}

.chat-input:focus {
    border-color: #007aff;
    background: #fff;
}

.input-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}

.input-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.input-btn:active {
    background: rgba(0, 0, 0, 0.05);
}

.input-btn.send {
    color: #007aff;
    font-weight: 600;
    font-size: 14px;
    padding: 0 8px;
}

.input-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid #e5e5e5;
    padding-left: 8px;
}

.msg-time {
    display: none;
}

.msg-timestamp {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin: 12px 0;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* 微信内容容器 */
.wechat-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.wechat-tab {
    flex: 1;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translate3d(6px, 0, 0);
    transition:
        opacity 140ms var(--ease-ios),
        transform 160ms var(--ease-ios-out);
    contain: layout paint;
    will-change: transform, opacity;
}

.wechat-tab.is-active {
    display: flex;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 通讯录列表 */
.contacts-list {
    padding: 0;
}

.contacts-list .chat-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 0.5px solid #e5e5e5;
    cursor: pointer;
}

/* ================= 朋友圈样式（微信风格） ================= */

/* 朋友圈容器 */
.moments-container {
    flex: 1;
    overflow-y: auto;
    background: #f5f5f5;
}

/* 朋友圈封面区域 */
.moments-cover {
    position: relative;
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.moments-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.moments-cover:hover::after {
    opacity: 1;
}

.moments-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 封面右下角的用户信息 */
.moments-user-info {
    position: absolute;
    bottom: 20px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.moments-user-name {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.moments-user-avatar {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    background-size: cover;
    background-position: center;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    color: #999;
}

/* 动态列表 */
.moments-list {
    position: relative;
    margin-top: -22px;
    padding: 18px 0 0;
    background: linear-gradient(
        180deg,
        rgba(244, 246, 250, 0.94) 0%,
        #f4f6fa 34px,
        #f4f6fa 100%
    );
    border-radius: 26px 26px 0 0;
}

.moments-list::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.26) 0%,
        rgba(244, 246, 250, 0.88) 62%,
        #f4f6fa 100%
    );
}

/* 单条动态 */
.moment-item {
    display: flex;
    padding: 15px;
    border-bottom: 0.5px solid #e5e5e5;
    background: #fff;
}

/* 动态左侧头像 */
.moment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    flex-shrink: 0;
    margin-right: 12px;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
}

/* 动态右侧内容区 */
.moment-body {
    flex: 1;
    min-width: 0;
}

/* 动态作者昵称 */
.moment-author {
    font-size: 15px;
    font-weight: 600;
    color: #576b95;
    margin-bottom: 6px;
}

/* 动态文字内容 */
.moment-content {
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 10px;
    word-break: break-all;
}

/* 动态图片区域 */
.moment-images {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
    max-width: 240px;
}

.moment-images.single {
    grid-template-columns: 1fr;
    max-width: 180px;
}

.moment-images.double {
    grid-template-columns: repeat(2, 1fr);
}

.moment-images.triple,
.moment-images.multi {
    grid-template-columns: repeat(3, 1fr);
}

.moment-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

/* 动态时间和操作栏 */
.moment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.moment-time {
    font-size: 12px;
    color: #b2b2b2;
}

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

.moment-delete-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: #c2c6cf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}

.moment-delete-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: block;
}

.moment-delete-btn:active {
    color: #8f96a3;
    background: rgba(15, 23, 42, 0.05);
    transform: scale(0.94);
}

.moment-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-right: 2px;
}

.moment-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 28px;
    min-height: 28px;
    padding: 3px 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6f84ad;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    transition: background 0.16s ease, opacity 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.moment-action-link:hover {
    background: rgba(111, 132, 173, 0.08);
}

.moment-action-link:active {
    opacity: 0.92;
    transform: scale(0.97);
    background: rgba(111, 132, 173, 0.12);
}

.moment-action-link.is-active {
    color: #576b95;
}

.moment-action-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: currentColor;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
    flex-shrink: 0;
}

.moment-action-link-comment {
    min-width: 28px;
}

.moment-action-symbol-comment {
    width: 16px;
    height: 16px;
    transform: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.25 5.75C5.25 4.7835 6.0335 4 7 4H13C13.9665 4 14.75 4.7835 14.75 5.75V10.25C14.75 11.2165 13.9665 12 13 12H9.2L6.4 14.2C6.07094 14.4586 5.59256 14.224 5.59256 13.8056V12.875C5.39078 12.5718 5.25 12.2077 5.25 11.8125V5.75Z' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.moment-action-separator {
    width: 1px;
    height: 11px;
    background: rgba(111, 132, 173, 0.24);
    border-radius: 999px;
}

.moment-action-count,
.moment-action-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: currentColor;
    font-variant-numeric: tabular-nums;
}

/* 点赞列表 */
.moment-likes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    background: #f7f7f7;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 13px;
    color: #576b95;
}

.moment-likes .like-icon {
    color: #576b95;
    margin-right: 2px;
    font-size: 11px;
    line-height: 1;
}

.moment-likes .like-names {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.moment-likes .like-name {
    color: #576b95;
    font-weight: 500;
}

/* 评论列表 */
.moment-comments {
    background: #f7f7f7;
    border-radius: 4px;
    margin-top: 6px;
    padding: 0;
    overflow: hidden;
}

.moment-likes + .moment-comments {
    margin-top: 0;
    border-radius: 0 0 4px 4px;
}

.moment-comment {
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 0.5px solid #e8e8e8;
}

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

.moment-comment .comment-author {
    color: #576b95;
    font-weight: 500;
}

.moment-comment .comment-reply-prefix {
    color: #7c8aa8;
    font-weight: 500;
    margin-left: 2px;
}

.moment-comment .comment-content {
    color: #1a1a1a;
}

.comment-reply-btn {
    margin-left: 8px;
    padding: 2px 8px;
    border: none;
    border-radius: 999px;
    background: rgba(87, 107, 149, 0.12);
    color: #576b95;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.comment-reply-btn:active {
    transform: scale(0.96);
    background: rgba(87, 107, 149, 0.22);
}

/* 角色回复按钮 */
.moment-comment.role-reply {
    background: #f0f4ff;
    border-left: 3px solid #576b95;
    padding-left: 7px;
}

.moment-comment.role-reply .comment-author {
    color: #576b95;
    font-weight: 600;
}

/* 角色回复指示 */
.comment-reply-indicator {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #576b95;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

/* 评论操作按钮 */
.comment-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0.5px solid #e8e8e8;
}

.comment-action-btn {
    padding: 4px 12px;
    font-size: 12px;
    color: #576b95;
    background: transparent;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.comment-action-btn:active {
    background: #576b95;
    color: #fff;
    border-color: #576b95;
}

/* 评论输入框弹层 */
.comment-input-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(15, 23, 42, 0.08);
    z-index: 1400;
}

.comment-input-modal {
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-top: 0.5px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.08);
}

.comment-input-modal input {
    flex: 1;
    min-width: 0;
    padding: 11px 15px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    font-size: 14px;
    outline: none;
    background: rgba(243, 245, 248, 0.96);
    color: #1f2937;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.comment-input-modal input:focus {
    border-color: rgba(87, 107, 149, 0.42);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(87, 107, 149, 0.10);
}

.comment-input-modal .send-btn {
    flex-shrink: 0;
    min-width: 56px;
    height: 36px;
    padding: 0 14px;
    background: linear-gradient(135deg, #6478a7 0%, #576b95 100%);
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(87, 107, 149, 0.24);
    transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.comment-input-modal .send-btn:active {
    transform: scale(0.97);
}

.comment-input-modal .send-btn:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}

/* 发布动态弹窗 */
.post-moment-modal .modal-body {
    padding: 15px;
}

.post-moment-modal textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 15px;
    resize: none;
    outline: none;
    font-family: inherit;
}

.post-moment-modal textarea:focus {
    border-color: #576b95;
}

/* 独立发布动态页面 */
#app-moment-post {
    background: #fff;
}

.moment-post-nav {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 12px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.08);
}

.moment-post-back,
.moment-post-submit {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.moment-post-back {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #111;
    font-size: 34px;
    line-height: 1;
}

.moment-post-title {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.3px;
}

.moment-post-submit {
    min-width: 58px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: #07c160;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.moment-post-submit:disabled {
    opacity: 0.45;
}

.moment-post-page {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 12px 0 calc(28px + var(--safe-bottom, 0px));
}

.moment-post-editor {
    padding: 18px 18px 12px;
    border-bottom: 0.5px solid #f0f1f4;
}

.moment-post-textarea {
    width: 100%;
    min-height: 180px;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: #1f2937;
    font-size: 22px;
    line-height: 1.6;
    font-family: inherit;
}

.moment-post-textarea::placeholder {
    color: #c7c9d1;
}

.moment-post-counter {
    margin-top: 18px;
    text-align: right;
    font-size: 13px;
    color: #a0a7b2;
}

.moment-post-image-card {
    width: 138px;
    height: 62px;
    margin: 16px 18px 18px;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7c818c;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.moment-post-image-card:active {
    transform: scale(0.98);
    background: #f8f9fb;
}

.moment-post-image-plus {
    font-size: 34px;
    line-height: 1;
    color: #8d929c;
    margin-top: -2px;
}

.moment-post-image-text {
    font-size: 15px;
    color: #7c818c;
}

.moment-post-image-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 18px;
}

.moment-post-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
}

.moment-post-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.moment-post-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.moment-post-options {
    border-top: 0.5px solid #f0f1f4;
    background: #fff;
}

.moment-post-option {
    min-height: 66px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-bottom: 0.5px solid #f0f1f4;
    color: #111827;
}

.moment-post-option-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.moment-post-option-icon {
    width: 30px;
    text-align: center;
    font-size: 24px;
    color: #979797;
    font-weight: 500;
}

.moment-post-option-label {
    font-size: 16px;
    color: #3f3f46;
}

.moment-post-option-value {
    margin-right: 8px;
    font-size: 15px;
    color: #7c818c;
}

.moment-post-option-right {
    font-size: 28px;
    line-height: 1;
    color: #c4c7cf;
    margin-top: -2px;
}

.moment-mention-picker {
    display: none;
    padding: 8px 18px 14px 62px;
    border-bottom: 0.5px solid #f0f1f4;
    background: #fff;
}

.moment-mention-picker.is-open {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.moment-mention-chip {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 5px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #374151;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.moment-mention-chip.is-selected {
    border-color: rgba(7, 193, 96, 0.34);
    background: rgba(7, 193, 96, 0.1);
    color: #0f8f4b;
}

.moment-mention-avatar {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
}

.moment-mention-empty {
    color: #9ca3af;
    font-size: 13px;
}

.moment-mentions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.moment-mention-tag {
    color: #4b6b9b;
    font-size: 13px;
    line-height: 1.35;
}

#app-moment-post .app-status-bar {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#app-moment-post.app-view::before {
    display: none;
}

/* 朋友圈空状态 */
.moments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.moments-empty .icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.moments-empty .text {
    font-size: 14px;
}

/* 用户个人资料 */
.user-profile {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-header {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0.5px solid #e5e5e5;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 12px;
    cursor: pointer;
}

.profile-name {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
}

.profile-real-name {
    font-size: 13px;
    color: #999;
}

.profile-bio {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    text-align: center;
}

.profile-edit-btn {
    margin-top: 12px;
    padding: 8px 16px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* 微信底部导航栏 */
.wechat-tabbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    background: #fff;
    border-top: 0.5px solid #e5e5e5;
    padding-bottom: calc(var(--safe-bottom, 0px));
}

/* 编辑个人资料时隐藏微信导航与底栏 */
#app-wechat.editing-user-profile .nav-bar,
#app-wechat.editing-user-profile .wechat-tabbar {
    display: none;
}

#app-wechat.editing-user-profile #tab-me {
    flex: 1;
    min-height: 0;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 1;
    height: 100%;
    transition: opacity 0.2s;
    color: #999;
}

.tab-item:active {
    opacity: 0.7;
}

.tab-item.active {
    color: #007aff;
}

.tab-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.tab-label {
    font-size: 11px;
    font-weight: 500;
}

/* 时间分割线 */
.time-divider {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 16px 0;
    padding: 8px 0;
    position: relative;
}

.time-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(to right, transparent, #d9d9d9, transparent);
}

/* 朋友圈背景设置弹窗 */
.moments-bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 15px;
}

.moments-bg-thumb {
    aspect-ratio: 16/9;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    background-size: cover;
    background-position: center;
}

.moments-bg-thumb:active {
    transform: scale(0.95);
    border-color: #576b95;
}

.moments-bg-thumb.selected {
    border-color: #576b95;
    box-shadow: 0 0 0 2px rgba(87, 107, 149, 0.3);
}

/* ================= UI Polish Overrides · 现代微信/iOS质感优化 ================= */

:root {
    --surface-primary: rgba(255, 255, 255, 0.94);
    --surface-secondary: rgba(248, 249, 252, 0.9);
    --surface-tertiary: rgba(255, 255, 255, 0.76);
    --hairline: rgba(203, 211, 224, 0.3);
    --text-primary: #253143;
    --text-secondary: #667386;
    --text-tertiary: #98a3b3;
    --wechat-green: #07c160;
    --wechat-green-soft: rgba(7, 193, 96, 0.09);
    --wechat-page-bg: #f7f7f7;
    --app-page-bg: linear-gradient(180deg, #f7f7f7 0%, #f5f5f5 100%);
    --app-page-overlay:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 26%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.52), transparent 30%);
    --app-nav-bg: rgba(253, 253, 252, 0.9);
    --app-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 252, 251, 0.96));
    --app-card-bg-soft: rgba(255, 255, 255, 0.8);
    --app-card-border: rgba(226, 232, 240, 0.86);
    --app-card-shadow:
        0 10px 24px rgba(148, 163, 184, 0.09),
        0 2px 8px rgba(148, 163, 184, 0.045);
    --app-card-shadow-strong:
        0 14px 30px rgba(148, 163, 184, 0.11),
        0 2px 10px rgba(148, 163, 184, 0.055);
    --app-input-bg: rgba(245, 247, 250, 0.86);
    --app-input-border: rgba(255, 255, 255, 0.84);
    --app-danger-bg: rgba(255, 238, 238, 0.96);
    --app-danger-text: rgba(204, 76, 76, 0.98);
}

/* 页面背景和手机外壳更轻盈 */
html,
body {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.95), transparent 28%),
        linear-gradient(135deg, #eceff4 0%, #e2e4e8 100%);
}

.ios-container.phone-mode-small,
.ios-container.phone-mode-medium,
.ios-container.phone-mode-large,
.ios-container.phone-mode-iphone15,
.ios-container.phone-mode-iphone15plus,
.ios-container.phone-mode-custom,
.app-view {
    box-shadow:
        0 36px 90px rgba(31, 41, 55, 0.18),
        0 14px 34px rgba(31, 41, 55, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.76);
}

/* 主屏幕细节 */
.ios-container.phone-mode-small,
.ios-container.phone-mode-medium,
.ios-container.phone-mode-large,
.ios-container.phone-mode-iphone15,
.ios-container.phone-mode-iphone15plus,
.ios-container.phone-mode-custom {
    background: var(--ios-bg);
}

.widget {
    transform: translateZ(0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.widget:active {
    transform: scale(0.985);
}

.app-icon {
    box-shadow:
        0 10px 20px rgba(31, 41, 55, 0.12),
        0 2px 5px rgba(31, 41, 55, 0.08);
}

.dock-bar {
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(255, 255, 255, 0.68);
    box-shadow:
        0 18px 34px rgba(31, 41, 55, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

/* App 容器统一质感 */
.app-view {
    background: var(--wechat-page-bg);
}

.app-view::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 25%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.52), transparent 30%);
    z-index: 0;
}

.app-view > * {
    position: relative;
    z-index: 1;
}

/* 状态栏和导航栏 */
.app-status-bar,
.app-view .status-bar {
    background: rgba(248, 249, 252, 0.82);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.nav-bar {
    height: 76px;
    padding-top: 8px;
    background: rgba(248, 249, 252, 0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 0.5px solid var(--hairline);
}

.chat-nav-bar {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#app-chat .chat-nav-bar {
    height: 56px;
    padding-top: 0;
}

.nav-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}

.chat-nav-bar .nav-title {
    position: absolute;
    left: 50%;
    bottom: 13px;
    width: 260px;
    max-width: calc(100% - 190px);
    padding: 0 8px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
}

.nav-back,
.nav-action {
    color: #007aff;
}

.nav-back {
    font-size: 32px;
    min-width: 52px;
    opacity: 0.95;
}

.nav-action {
    min-width: 52px;
    font-size: 24px;
    font-weight: 500;
}

.chat-nav-bar .nav-back {
    position: absolute;
    left: 15px;
    bottom: 6px;
}

.chat-nav-bar .nav-action {
    min-width: 24px;
    color: #111;
    font-size: 30px;
    line-height: 1;
}

.chat-nav-actions {
    position: absolute;
    right: 22px;
    bottom: 9px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 0;
}

#app-chat .chat-nav-bar .nav-title {
    bottom: 11px;
}

#app-chat .chat-nav-bar .nav-back {
    bottom: 4px;
}

#app-chat .chat-nav-actions {
    bottom: 7px;
}

.chat-mode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #111;
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.chat-mode-toggle:active {
    transform: scale(0.96);
}

.chat-mode-toggle.active {
    color: #1f7a52;
    background: rgba(7, 193, 96, 0.07);
}

.chat-mode-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-mode-status-dot {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 0 0 2px rgba(248, 249, 252, 0.94);
}

.chat-mode-toggle.active .chat-mode-status-dot {
    background: #07c160;
}

.chat-mode-banner {
    display: none !important;
}

#app-chat.offline-mode .chat-messages {
    display: none;
}

.offline-story-feed {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 18px;
    background: #ededed;
}

#app-chat.offline-mode .offline-story-feed {
    display: block;
}

.offline-choice-panel {
    display: none;
}

#app-chat.offline-mode .offline-choice-panel {
    display: none;
}

#app-chat.offline-mode.offline-custom-input-hidden .chat-input-bar {
    display: none !important;
}

.offline-choice-btn {
    width: 100%;
    border: 1px solid rgba(87, 111, 132, 0.18);
    background: #f8fafc;
    color: #243044;
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 40px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

.offline-choice-btn:active {
    background: #eef6f3;
    border-color: rgba(72, 142, 111, 0.28);
}

.offline-choice-btn-custom {
    color: #315f54;
    background: #eef8f4;
}

.offline-choice-loading {
    padding: 8px 2px;
    color: #718096;
    font-size: 13px;
    line-height: 1.5;
}

.story-block {
    padding: 0;
    margin: 0 0 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #1f2933;
}

.story-block::before,
.story-label,
.story-title {
    display: none !important;
}

.story-block.narration,
.story-block.dialogue-user,
.story-block.dialogue-role {
    display: flex;
    max-width: 100%;
    background: transparent;
    color: #1f2933;
}

.story-block.dialogue-user {
    align-items: flex-end;
    margin-right: 0;
    margin-left: auto;
    justify-content: flex-end;
}

.story-block.dialogue-role {
    justify-content: flex-start;
    padding-left: 0;
}

.story-speaker-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    margin: 0 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow:
        0 10px 20px rgba(122, 92, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.story-speaker-tag-user {
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #64748b 100%);
}

.story-paragraph {
    font-size: 16px;
    line-height: 1.45;
    color: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-align: left;
    text-indent: 0;
    letter-spacing: 0;
    margin: 0 0 10px;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

.story-paragraph-user-speech {
    width: fit-content;
    max-width: 78%;
    box-sizing: border-box;
    text-indent: 0;
    padding: 9px 13px;
    border-radius: 8px;
    background: #E8F4F0;
    border: 1px solid rgba(95, 150, 120, 0.18);
    box-shadow: none;
    color: #243044;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

.story-paragraph-user-speech::before,
.story-paragraph-user-speech::after {
    content: none;
}

.story-paragraph-role-speech,
.story-paragraph-narration {
    width: fit-content;
    max-width: 78%;
    box-sizing: border-box;
    padding: 9px 13px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #1f2933;
    font-size: 16px;
    line-height: 1.45;
}

.story-block .story-paragraph:last-child {
    margin-bottom: 0;
}

.story-empty {
    margin: auto 0;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    color: #667386;
    box-shadow: none;
}

.story-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #253143;
    margin-bottom: 12px;
    letter-spacing: 0.2px;
}

.story-empty-text {
    font-size: 15px;
    line-height: 2;
}

/* 微信主页面 */
#app-wechat {
    background:
        linear-gradient(180deg, #fffefd 0%, #fafaf9 42%, #f7f8fa 100%);
}

.wechat-content {
    background: transparent;
}

.wechat-tab {
    background: transparent;
}

#app-wechat #tab-chats .chat-list {
    padding: 6px 10px 12px;
    background: transparent;
}

/* 微信列表卡片化：仅作用于会话列表页 */
#app-wechat #tab-chats .chat-item {
    min-height: 72px;
    padding: 11px 12px;
    margin: 0 0 5px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(37, 49, 67, 0.026);
    border-bottom: none;
    border-radius: 15px;
    box-shadow:
        0 1px 2px rgba(51, 65, 85, 0.012),
        0 4px 10px rgba(51, 65, 85, 0.016),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
    overflow: visible;
}

#app-wechat #tab-chats .chat-item:active {
    transform: scale(0.996);
    background: rgba(250, 251, 252, 0.9);
    border-color: rgba(37, 49, 67, 0.036);
    box-shadow:
        0 1px 2px rgba(51, 65, 85, 0.014),
        0 3px 8px rgba(51, 65, 85, 0.016),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#app-wechat #tab-chats .chat-item .avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 13px !important;
    margin-right: 12px;
    flex: 0 0 52px;
    position: relative;
    overflow: visible;
    isolation: isolate;
    background-color: rgba(243, 246, 250, 0.96);
    box-shadow:
        0 1px 2px rgba(31, 41, 55, 0.024),
        0 0 0 0.5px rgba(15, 23, 42, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

#app-wechat #tab-chats .chat-info {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding-top: 1px;
    padding-right: 0;
}

#app-wechat #tab-chats .chat-main-row,
#app-wechat #tab-chats .chat-sub-row {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}

#app-wechat #tab-chats .chat-main-row {
    gap: 10px;
}

#app-wechat #tab-chats .chat-sub-row {
    gap: 9px;
    transform: translateY(-0.5px);
}

#app-wechat #tab-chats .chat-name {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 650;
    color: #253143;
    letter-spacing: -0.24px;
    line-height: 1.22;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app-wechat #tab-chats .chat-preview {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: #98a3b3;
    line-height: 1.34;
    white-space: nowrap;
    overflow: hidden;
}

#app-wechat #tab-chats .chat-preview-text {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-wechat #tab-chats .chat-meta {
    align-self: flex-start;
    margin-left: 6px;
    padding-top: 0;
    min-width: 40px;
    transform: translateY(1px);
}

#app-wechat #tab-chats .chat-time {
    flex: 0 0 auto;
    min-width: 32px;
    margin-left: auto;
    text-align: right;
    color: #aab4c1;
    font-size: 10px;
    font-weight: 560;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    transform: translateY(0.5px);
}

/* 空状态更精致：仅作用于微信会话列表页 */
#app-wechat #tab-chats .chat-list > div[style*="还没有聊天对象"] {
    min-height: 420px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.54);
    border-radius: 24px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
}

/* 微信底部 Tab：仅作用于微信页，统一为 iOS 线性图标风格 */
#app-wechat .wechat-tabbar {
    height: calc(64px + var(--safe-bottom, 0px));
    padding: 6px 10px calc(8px + var(--safe-bottom, 0px));
    background: rgba(255, 255, 255, 0.72);
    border-top: 0.5px solid rgba(37, 49, 67, 0.05);
    backdrop-filter: blur(24px) saturate(138%);
    -webkit-backdrop-filter: blur(24px) saturate(138%);
    box-shadow:
        0 -8px 24px rgba(51, 65, 85, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

#app-wechat .tab-item {
    color: #b7bfca;
    gap: 4px;
    padding: 2px 0 0;
    border-radius: 16px;
    transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

#app-wechat .tab-item.active {
    color: #1f9f5f;
}

#app-wechat .tab-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    border-radius: 999px;
    position: relative;
    color: inherit;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

#app-wechat .tab-item.active .tab-icon {
    background: rgba(7, 193, 96, 0.1);
    box-shadow:
        0 4px 10px rgba(7, 193, 96, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

#app-wechat .tab-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    stroke: currentColor;
}

#app-wechat .tab-icon::before,
#app-wechat .tab-icon::after {
    content: none;
}

#app-wechat .tab-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.92;
}

/* 聊天窗口 */
#app-chat {
    background: #ededed;
}

.chat-messages {
    padding: 16px 13px 18px;
    background: transparent;
    gap: 6px;
    scroll-padding-top: 76px;
}

.msg-bubble-user,
.msg-bubble-ai {
    gap: 9px;
    margin-bottom: 10px;
    align-items: flex-start;
}

.msg-bubble-user {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-start;
}

.msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    box-shadow: 0 5px 12px rgba(31, 41, 55, 0.10);
    flex: 0 0 38px;
    min-width: 38px;
}

.msg-text {
    max-width: 76%;
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-break: strict;
    color: #253143;
    box-shadow: 0 5px 12px rgba(51, 65, 85, 0.045);
}

.msg-bubble-user .msg-text {
    flex: 0 1 auto;
    max-width: 82%;
    background: linear-gradient(135deg, #8fe96a 0%, #77dc55 100%);
    color: #172033;
    border-top-right-radius: 6px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.msg-bubble-ai .msg-text {
    background: rgba(255, 255, 255, 0.97);
    color: #253143;
    border-top-left-radius: 6px;
}

.time-divider {
    margin: 12px 0 14px;
    color: #9aa3af;
}

.time-divider::before {
    display: none;
}

.msg-timestamp,
.time-divider {
    font-size: 11px;
}

/* 输入栏 */
.chat-input-bar {
    margin: 0;
    padding: 9px 10px 20px 10px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    gap: 7px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: none;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

#app-chat.offline-mode {
    background: #ededed;
}

#app-chat.offline-mode .nav-bar,
#app-chat.offline-mode .app-status-bar,
#app-chat.offline-mode .app-view .status-bar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

#app-chat.offline-mode .chat-nav-bar .nav-title {
    color: #2f2a25;
}

#app-chat.offline-mode .chat-input-bar {
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

#app-chat.offline-mode .chat-input {
    background: rgba(246, 248, 251, 0.9);
    color: #253143;
}

#app-chat.offline-mode .chat-input::placeholder {
    color: #98a3b3;
}

#app-chat.offline-mode .input-actions {
    border-left-color: rgba(37, 49, 67, 0.06);
}

#app-chat.offline-mode .input-btn {
    background: rgba(246, 248, 251, 0.88);
    color: #4b5565;
}

#app-chat.offline-mode .input-btn.send {
    min-width: 54px;
    background: linear-gradient(135deg, #3f4d63 0%, #253143 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(51, 65, 85, 0.18);
}

#app-chat.offline-mode .rabbit-trigger,
#app-chat.offline-mode #chatMediaPanel {
    display: none !important;
}

.chat-input {
    border: none;
    background: rgba(246, 248, 251, 0.92);
    color: #253143;
    border-radius: 18px;
    padding: 10px 14px;
}

.chat-input:focus {
    border: none;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.12);
}

.input-btn {
    background: rgba(245, 247, 250, 0.88);
    color: #495260;
}

.input-btn.send {
    width: auto;
    min-width: 46px;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    color: #fff;
    background: var(--wechat-green);
    font-weight: 700;
}

#app-chat.offline-mode .input-btn.send:active {
    transform: scale(0.97);
    opacity: 0.96;
}

.input-actions {
    border-left-color: rgba(15, 23, 42, 0.07);
}

.rabbit-trigger {
    position: relative;
    overflow: hidden;
}

.rabbit-trigger.active {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.9), rgba(255, 214, 165, 0.95));
    color: #7c3f58;
    box-shadow:
        0 8px 18px rgba(255, 168, 186, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.chat-media-panel {
    margin: 0;
    padding: 0;
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92) 56%, rgba(250, 251, 252, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow:
        0 18px 32px rgba(31, 41, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    transform-origin: bottom center;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        max-height 0.22s ease,
        margin 0.22s ease,
        padding 0.22s ease;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.chat-media-panel.active {
    margin: 0 10px 10px;
    padding: 14px;
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 420px;
    overflow-y: auto;
    pointer-events: auto;
}

.chat-media-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.chat-media-panel-badge {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc, #f5f6f8);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.88),
        0 8px 18px rgba(148, 163, 184, 0.16);
    font-size: 20px;
    flex-shrink: 0;
}

.chat-media-panel-text {
    flex: 1;
    min-width: 0;
}

.chat-media-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.2px;
}

.chat-media-panel-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: #8b95a7;
}

.chat-media-close {
    border: none;
    background: rgba(255, 255, 255, 0.76);
    color: #7b8798;
    padding: 7px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.chat-media-home,
.chat-media-detail-view {
    display: none;
}

.chat-media-home.active,
.chat-media-detail-view.active {
    display: block;
}

.chat-media-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.chat-media-entry-card {
    border: none;
    border-radius: 24px;
    padding: 16px 14px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 12px 28px rgba(31, 41, 55, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.92);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    min-height: 100px;
}

.chat-media-entry-card:active {
    transform: scale(0.98);
}

.chat-media-entry-card.stickers {
    background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255, 241, 247, 0.96));
}

.chat-media-entry-card.images {
    background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(237, 247, 255, 0.96));
}

.chat-media-entry-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(255,255,255,0.85);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 8px 18px rgba(31, 41, 55, 0.08);
}

.chat-media-entry-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.chat-media-entry-body strong {
    font-size: 15px;
    color: #1f2937;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.chat-media-entry-body small {
    font-size: 12px;
    color: #8b95a7;
    line-height: 1.5;
    display: block;
    word-break: break-word;
}

.chat-media-entry-arrow {
    margin-top: auto;
    align-self: flex-end;
    font-size: 24px;
    line-height: 1;
    color: #c0c8d4;
}

.chat-media-coming-soon {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px dashed rgba(185, 192, 204, 0.45);
}

.chat-media-coming-soon-title {
    font-size: 13px;
    font-weight: 700;
    color: #667085;
}

.chat-media-coming-soon-text {
    margin-top: 5px;
    font-size: 12px;
    color: #98a2b3;
    line-height: 1.5;
}

.chat-media-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.chat-media-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    letter-spacing: -0.2px;
}

.chat-media-section-desc {
    margin-top: 3px;
    font-size: 12px;
    color: #8b95a7;
    line-height: 1.45;
}

.chat-media-mini-btn {
    border: none;
    border-radius: 16px;
    height: 34px;
    padding: 0 14px;
    background: linear-gradient(135deg, #f7f9fc, #fbfbfa);
    color: #5f6f86;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 8px 16px rgba(148, 163, 184, 0.13);
    flex-shrink: 0;
}

.chat-sticker-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.chat-sticker-library-card {
    border: none;
    border-radius: 20px;
    padding: 8px 8px 10px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 10px 24px rgba(31, 41, 55, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.88);
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.chat-sticker-library-card:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.95);
}

.chat-sticker-library-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    background: #f8fafc;
}

.chat-sticker-library-card span {
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}

.chat-sticker-library-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 18px 14px;
    color: #98a2b3;
}

.chat-sticker-library-empty-icon {
    font-size: 34px;
    line-height: 1.2;
}

.chat-sticker-library-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: #667085;
}

.chat-sticker-library-empty-text {
    font-size: 12px;
    line-height: 1.6;
    color: #98a2b3;
}

.chat-upload-card {
    width: 100%;
    border: none;
    border-radius: 22px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(238, 247, 255, 0.94));
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow:
        0 12px 24px rgba(31, 41, 55, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.88);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.chat-upload-card:active {
    transform: scale(0.985);
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(232, 244, 255, 1));
}

.chat-upload-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dff0ff, #eef7ff);
    color: #3b82f6;
    font-size: 20px;
    flex-shrink: 0;
}

.chat-upload-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.chat-upload-content strong {
    font-size: 14px;
    color: #1f2937;
    font-weight: 700;
}

.chat-upload-content small {
    font-size: 12px;
    color: #8b95a7;
}

.chat-upload-arrow {
    font-size: 24px;
    line-height: 1;
    color: #b4bdc9;
    transform: translateY(-1px);
}

.chat-media-entry-card.games {
    background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(241, 244, 255, 0.96));
}

.chat-game-panel {
    margin: 0 10px 10px;
    padding: 14px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 244, 255, 0.95) 54%, rgba(247, 250, 255, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        0 18px 32px rgba(31, 41, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    display: none;
    flex-direction: column;
    gap: 14px;
}

.chat-game-panel.active {
    display: flex;
}

.chat-game-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.chat-game-panel-title {
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.2px;
}

.chat-game-panel-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #8b95a7;
    line-height: 1.5;
}

.chat-game-status {
    align-self: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.06), rgba(59, 130, 246, 0.10));
    color: #42526b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.chat-game-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-game-chip {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 6px 14px rgba(31, 41, 55, 0.05);
}

.chat-game-chip.current {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.08), rgba(99, 102, 241, 0.16));
    color: #374151;
}

.gomoku-board {
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    width: min(100%, 100vw);
    aspect-ratio: 1;
    gap: 0;
    padding: 12px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(217, 188, 133, 0.96), rgba(196, 160, 103, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.32),
        0 14px 28px rgba(120, 86, 42, 0.20);
    overflow: hidden;
}

.gomoku-cell {
    position: relative;
    aspect-ratio: 1;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.gomoku-cell::before,
.gomoku-cell::after {
    content: '';
    position: absolute;
    background: rgba(107, 70, 28, 0.34);
    pointer-events: none;
}

.gomoku-cell::before {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}

.gomoku-cell::after {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.gomoku-cell:active {
    transform: scale(0.96);
}

.gomoku-cell:disabled {
    cursor: default;
}

.gomoku-cell.preview {
    background: rgba(255, 255, 255, 0.08);
}

.gomoku-cell.black::before,
.gomoku-cell.black::after,
.gomoku-cell.white::before,
.gomoku-cell.white::after {
    opacity: 0.55;
}

.gomoku-cell.black .gomoku-piece,
.gomoku-cell.white .gomoku-piece {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    z-index: 1;
    box-shadow:
        0 6px 14px rgba(31, 41, 55, 0.24),
        inset 0 1px 1px rgba(255,255,255,0.18);
}

.gomoku-cell.black .gomoku-piece {
    background: radial-gradient(circle at 30% 28%, #5b6470 0%, #202833 42%, #111827 100%);
}

.gomoku-cell.white .gomoku-piece {
    background: radial-gradient(circle at 30% 28%, #ffffff 0%, #eef2f7 55%, #dce3ec 100%);
    box-shadow:
        0 6px 14px rgba(31, 41, 55, 0.14),
        inset 0 1px 1px rgba(255,255,255,0.92);
}

.gomoku-cell.last-move .gomoku-piece {
    box-shadow:
        0 0 0 3px rgba(250, 204, 21, 0.55),
        0 8px 18px rgba(31, 41, 55, 0.26);
}

.chat-game-hint {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    color: #667085;
    font-size: 12px;
    line-height: 1.65;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.chat-game-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-game-btn {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.chat-game-btn:active {
    transform: scale(0.97);
}

.chat-game-btn.primary {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #fff;
    box-shadow: 0 12px 20px rgba(31, 41, 55, 0.18);
}

.chat-game-btn.secondary {
    background: rgba(255, 255, 255, 0.88);
    color: #4b5563;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 10px 18px rgba(31, 41, 55, 0.06);
}

.msg-text.msg-image,
.msg-text.msg-sticker {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: fit-content;
    max-width: 72%;
    padding: 6px;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
    align-self: flex-start;
}

.msg-text.msg-image img {
    display: block;
    width: 148px;
    max-width: 100%;
    border-radius: 18px;
    object-fit: cover;
    box-shadow:
        0 12px 24px rgba(31, 41, 55, 0.12),
        0 2px 6px rgba(31, 41, 55, 0.08);
    background: #fff;
}

.msg-text.msg-sticker {
    min-width: 86px;
}

.msg-text.msg-sticker img,
.msg-text.msg-sticker .sticker-image {
    display: block;
    width: 132px;
    max-width: 100%;
    border-radius: 22px;
    object-fit: cover;
    background: rgba(255,255,255,0.92);
    box-shadow:
        0 14px 26px rgba(31, 41, 55, 0.12),
        0 2px 8px rgba(31, 41, 55, 0.08);
}

.msg-text.msg-sticker .sticker-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 64px;
    padding: 14px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(251, 244, 255, 0.96));
    box-shadow:
        0 12px 24px rgba(31, 41, 55, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.88);
    color: #374151;
    font-size: 22px;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}

.msg-bubble-user .msg-text.msg-image,
.msg-bubble-user .msg-text.msg-sticker,
.msg-bubble-ai .msg-text.msg-image,
.msg-bubble-ai .msg-text.msg-sticker {
    margin-left: 0;
    margin-right: 0;
}

/* 语音消息气泡 */
.msg-voice {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    min-width: 168px;
    max-width: 248px;
    padding: 0;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 10px 20px rgba(31, 41, 55, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.msg-bubble-user .msg-voice {
    background:
        linear-gradient(135deg, rgba(155, 239, 114, 0.98) 0%, rgba(133, 228, 95, 0.98) 58%, rgba(123, 220, 85, 0.98) 100%);
    border-color: rgba(22, 163, 74, 0.18);
    box-shadow:
        0 12px 22px rgba(34, 197, 94, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.voice-shell {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    padding: 10px 11px 11px;
}

.voice-main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.voice-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.voice-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.voice-status-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    max-width: 100%;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-bubble-user .voice-status-badge {
    background: rgba(255, 255, 255, 0.34);
    color: rgba(22, 101, 52, 0.9);
}

.voice-play-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94));
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition:
        transform 0.16s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        opacity 0.18s ease;
    box-shadow:
        0 6px 12px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.voice-play-btn:active {
    transform: scale(0.94);
}

.msg-bubble-user .voice-play-btn {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 250, 239, 0.92));
    color: #166534;
    box-shadow:
        0 6px 14px rgba(22, 101, 52, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.voice-play-btn:disabled {
    cursor: default;
    opacity: 0.58;
    box-shadow: none;
}

.voice-play-icon {
    position: absolute;
    display: block;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.voice-play-icon-play {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid currentColor;
    margin-left: 2px;
    opacity: 1;
    transform: scale(1);
}

.voice-play-icon-pause {
    width: 10px;
    height: 12px;
    opacity: 0;
    transform: scale(0.88);
}

.voice-play-icon-pause::before,
.voice-play-icon-pause::after {
    content: '';
    position: absolute;
    top: 0;
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: currentColor;
}

.voice-play-icon-pause::before {
    left: 0;
}

.voice-play-icon-pause::after {
    right: 0;
}

.msg-voice.playing .voice-play-icon-play {
    opacity: 0;
    transform: scale(0.88);
}

.msg-voice.playing .voice-play-icon-pause {
    opacity: 1;
    transform: scale(1);
}

.voice-duration {
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    flex: 0 0 auto;
}

.msg-bubble-user .voice-duration {
    color: rgba(20, 83, 45, 0.9);
}

.voice-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    width: 100%;
    padding-right: 2px;
}

.voice-waveform span {
    display: block;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.86), rgba(100, 116, 139, 0.40));
    transform-origin: center;
    opacity: 0.82;
}

.voice-waveform span:nth-child(1) { height: 7px; }
.voice-waveform span:nth-child(2) { height: 11px; }
.voice-waveform span:nth-child(3) { height: 15px; }
.voice-waveform span:nth-child(4) { height: 9px; }
.voice-waveform span:nth-child(5) { height: 13px; }
.voice-waveform span:nth-child(6) { height: 17px; }
.voice-waveform span:nth-child(7) { height: 10px; }
.voice-waveform span:nth-child(8) { height: 14px; }
.voice-waveform span:nth-child(9) { height: 8px; }
.voice-waveform span:nth-child(10) { height: 12px; }
.voice-waveform span:nth-child(11) { height: 16px; }
.voice-waveform span:nth-child(12) { height: 9px; }

.msg-bubble-user .voice-waveform span {
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.86), rgba(34, 197, 94, 0.34));
    opacity: 0.9;
}

.msg-voice.playing .voice-waveform span {
    animation: voiceWavePulse 1.05s ease-in-out infinite;
}

.msg-voice.playing .voice-waveform span:nth-child(2) { animation-delay: 0.08s; }
.msg-voice.playing .voice-waveform span:nth-child(3) { animation-delay: 0.16s; }
.msg-voice.playing .voice-waveform span:nth-child(4) { animation-delay: 0.24s; }
.msg-voice.playing .voice-waveform span:nth-child(5) { animation-delay: 0.32s; }
.msg-voice.playing .voice-waveform span:nth-child(6) { animation-delay: 0.40s; }
.msg-voice.playing .voice-waveform span:nth-child(7) { animation-delay: 0.48s; }
.msg-voice.playing .voice-waveform span:nth-child(8) { animation-delay: 0.56s; }
.msg-voice.playing .voice-waveform span:nth-child(9) { animation-delay: 0.64s; }
.msg-voice.playing .voice-waveform span:nth-child(10) { animation-delay: 0.72s; }
.msg-voice.playing .voice-waveform span:nth-child(11) { animation-delay: 0.80s; }
.msg-voice.playing .voice-waveform span:nth-child(12) { animation-delay: 0.88s; }

@keyframes voiceWavePulse {
    0%, 100% {
        transform: scaleY(0.62);
        opacity: 0.54;
    }
    50% {
        transform: scaleY(1.12);
        opacity: 1;
    }
}

.voice-transcript-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.msg-bubble-user .voice-transcript-block {
    border-top-color: rgba(22, 163, 74, 0.14);
}

.voice-transcript-label {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.22px;
}

.msg-bubble-user .voice-transcript-label {
    color: rgba(20, 83, 45, 0.52);
}

.voice-transcript {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #475569;
    word-break: break-word;
}

.msg-bubble-user .voice-transcript {
    color: rgba(20, 83, 45, 0.92);
}

.msg-voice.playing {
    box-shadow:
        0 14px 24px rgba(31, 41, 55, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.msg-bubble-user .msg-voice.playing {
    box-shadow:
        0 14px 26px rgba(34, 197, 94, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.msg-voice.playing .voice-status-badge {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.msg-bubble-user .msg-voice.playing .voice-status-badge {
    background: rgba(255, 255, 255, 0.42);
    color: #166534;
}

.msg-voice.voice-error .voice-status-badge,
.msg-voice.voice-empty .voice-status-badge {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}

.msg-bubble-user .msg-voice.voice-error .voice-status-badge,
.msg-bubble-user .msg-voice.voice-empty .voice-status-badge {
    background: rgba(255, 255, 255, 0.46);
    color: #b91c1c;
}

.voice-audio-core {
    display: none;
}

/* 语音转写显隐控制 */
.voice-transcript-block {
    display: none;
}

.transcript-visible .voice-transcript-block,
.msg-voice.transcript-visible .voice-transcript-block {
    display: flex;
    animation: voiceTranscriptReveal 180ms var(--ease-ios-out);
}

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

/* 语音消息长按操作菜单 */
.voice-action-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 12px calc(14px + env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    animation: voiceActionBackdropIn 180ms var(--ease-ios);
}

@keyframes voiceActionBackdropIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.voice-action-menu {
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: voiceActionMenuIn 220ms var(--ease-ios-out);
}

@keyframes voiceActionMenuIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.voice-action-menu-item {
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.18px;
    font-family: inherit;
    cursor: pointer;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition:
        transform 140ms var(--ease-ios),
        background-color 180ms var(--ease-ios),
        color 180ms var(--ease-ios),
        box-shadow 180ms var(--ease-ios);
}

.voice-action-menu-item:active {
    transform: scale(0.985);
    background: rgba(248, 250, 252, 0.98);
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.voice-action-menu-item-primary {
    color: #007aff;
    font-weight: 700;
}

.voice-action-menu-item-danger {
    color: #ff3b30;
    font-weight: 700;
}

.voice-action-menu-item-cancel {
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.98);
    font-weight: 700;
}

.voice-action-menu-item-cancel:active {
    background: rgba(244, 246, 250, 0.98);
}

@media (max-width: 380px) {
    .voice-action-menu-backdrop {
        padding-left: 10px;
        padding-right: 10px;
    }

    .voice-action-menu-item {
        min-height: 54px;
        font-size: 15px;
        border-radius: 16px;
    }
}
/* 朋友圈和个人页统一卡片感（简洁版，去掉封面与列表之间突兀虚化） */
.moments-container {
    background: #fff;
}

.moments-cover {
    height: 250px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.moments-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(17, 24, 39, 0.03) 0%,
        rgba(17, 24, 39, 0.08) 48%,
        rgba(17, 24, 39, 0.16) 100%
    );
    pointer-events: none;
}

.moments-user-info {
    right: 14px;
    bottom: -10px;
    gap: 10px;
    z-index: 6;
}

.moments-user-name {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(15, 23, 42, 0.35);
}

.moments-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.98);
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.12);
}

.moments-list {
    margin-top: 0;
    padding: 0;
    background: #fff;
    border-radius: 0;
}

.moments-list::before {
    display: none;
}

.moment-item {
    margin: 0;
    padding: 14px 14px 12px;
    border: none;
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.08);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.moment-item:first-child {
    padding-top: 18px;
}

.moment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 10px;
}

.moment-author {
    margin-bottom: 4px;
}

.moment-content {
    margin-bottom: 8px;
    line-height: 1.45;
}

.moment-images {
    gap: 5px;
    margin-bottom: 8px;
}

.moment-image {
    border-radius: 6px;
}

.moment-time {
    color: #9ca3af;
}

.moment-action-link {
    color: #7b879b;
    min-height: 26px;
    padding: 2px 4px;
    border-radius: 6px;
}

.moment-action-link:hover {
    background: rgba(15, 23, 42, 0.04);
}

.moment-action-link:active {
    background: rgba(15, 23, 42, 0.07);
    transform: scale(0.98);
}

.moment-action-link.is-active {
    color: #576b95;
}

.moment-action-separator {
    background: rgba(123, 135, 155, 0.3);
}

.moment-likes,
.moment-comments {
    background: #f6f7f9;
    border-radius: 6px;
}

.user-profile {
    padding: 16px;
    background:
        radial-gradient(circle at top right, rgba(120, 170, 255, 0.14), transparent 26%),
        linear-gradient(180deg, #f8faff 0%, #f3f6fb 100%);
    gap: 14px;
}

.profile-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.92)),
        radial-gradient(circle at top left, rgba(98, 161, 255, 0.18), transparent 36%);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 18px 40px rgba(31, 41, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.profile-hero-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(14px);
    opacity: 0.65;
    pointer-events: none;
}

.profile-hero-glow-left {
    top: -26px;
    left: -18px;
    background: rgba(0, 122, 255, 0.14);
}

.profile-hero-glow-right {
    right: -22px;
    bottom: 22px;
    background: rgba(7, 193, 96, 0.12);
}

.profile-header {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
        0 12px 28px rgba(31, 41, 55, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.profile-avatar.profile-avatar-large {
    width: 92px;
    height: 92px;
    margin-bottom: 0;
    border-radius: 28px;
    border: 3px solid rgba(255, 255, 255, 0.96);
    box-shadow:
        0 12px 24px rgba(31, 41, 55, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    font-size: 46px;
}

.profile-avatar-edit {
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 122, 255, 0.08);
    color: #007aff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.profile-name {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0;
    letter-spacing: -0.4px;
}

.profile-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(7, 193, 96, 0.1);
    color: #07c160;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.profile-real-name {
    font-size: 13px;
    color: #8b95a7;
    letter-spacing: 0.2px;
}

.profile-bio-card {
    width: 100%;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(246, 248, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.14);
    text-align: left;
}

.profile-bio-label {
    font-size: 11px;
    font-weight: 700;
    color: #9aa3b2;
    margin-bottom: 6px;
    letter-spacing: 0.4px;
}

.profile-bio {
    font-size: 14px;
    color: #4b5563;
    margin-top: 0;
    text-align: left;
    line-height: 1.6;
}

.profile-section-card {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow:
        0 12px 28px rgba(31, 41, 55, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    padding: 16px;
}

.profile-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
    letter-spacing: -0.2px;
}

.profile-native-list {
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.82);
}

.profile-list-row {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.82);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.profile-list-row:last-child {
    border-bottom: 0;
}

.profile-list-row:active {
    background: rgba(243, 246, 250, 0.92);
}

.profile-list-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.profile-list-icon .ui-line-icon {
    width: 21px;
    height: 21px;
}

.profile-list-icon.wallet {
    background: linear-gradient(135deg, #8fc8b4, #5fa28d);
}

.profile-list-icon.shop {
    background: linear-gradient(135deg, #d8f7e8, #7bd6a8);
    color: #0f8b57;
    font-size: 20px;
}

.profile-list-icon.settings {
    background: linear-gradient(135deg, #a7adbb, #7d8698);
}

.profile-list-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.profile-list-arrow {
    color: #c2c8d1;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

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

.profile-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 12px;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #f6f8fc);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 8px 18px rgba(31, 41, 55, 0.04);
}

.profile-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-quick-icon.status {
    background: linear-gradient(135deg, #34c759, #19b36b);
}

.profile-quick-icon.favorite {
    background: linear-gradient(135deg, #ff8fb1, #ff6584);
}

.profile-quick-icon.album {
    background: linear-gradient(135deg, #5ea8ff, #3478f6);
}

.profile-quick-icon.settings {
    background: linear-gradient(135deg, #8893a9, #677287);
}

.profile-quick-text {
    min-width: 0;
}

.profile-quick-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 3px;
}

.profile-quick-desc {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}

.profile-edit-btn,
.btn-primary {
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0, 122, 255, 0.16);
}

.profile-edit-btn {
    margin-top: 4px;
    min-width: 156px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1689ff 0%, #007aff 100%);
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 380px) {
    .profile-quick-grid {
        grid-template-columns: 1fr;
    }

    .profile-avatar.profile-avatar-large {
        width: 84px;
        height: 84px;
        border-radius: 24px;
    }

    .profile-name {
        font-size: 22px;
    }
}

#app-wallet {
    background: linear-gradient(180deg, #fbfaf6 0%, #f3f4f1 100%);
}

#app-shop {
    background: linear-gradient(180deg, #fbfaf6 0%, #f3f4f1 100%);
}

.wallet-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 18px;
    padding-bottom: calc(24px + var(--safe-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shop-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 18px;
    padding-bottom: calc(24px + var(--safe-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shop-balance-panel {
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(250, 250, 245, 0.96) 0%, rgba(237, 244, 238, 0.92) 100%);
    border: 1px solid rgba(217, 224, 216, 0.58);
    box-shadow: 0 10px 22px rgba(60, 71, 70, 0.045);
}

.shop-balance-label {
    font-size: 12px;
    color: #8d948f;
    font-weight: 500;
}

.shop-balance-value {
    margin-top: 5px;
    font-size: 28px;
    font-weight: 620;
    color: #26313a;
    letter-spacing: 0;
}

.shop-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-item-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(217, 224, 216, 0.58);
    box-shadow: 0 8px 20px rgba(60, 71, 70, 0.04);
}

.shop-item-card.love-letter-shop-card {
    background: linear-gradient(145deg, #FFF7FA 0%, #FFEAF1 100%);
    border-color: rgba(235, 130, 160, 0.22);
}

.shop-item-card.vibrator-shop-card {
    background: linear-gradient(145deg, #FFFBFD 0%, #F9EEF6 58%, #F7EAF4 100%);
    border-color: rgba(190, 130, 170, 0.2);
}

.shop-item-card.lingerie-shop-card {
    background: linear-gradient(145deg, #FFF0F5 0%, #FBE8F0 64%, #FFF8FB 100%);
    border-color: rgba(210, 120, 155, 0.22);
}

.shop-item-image-wrap {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 16px;
    background: rgba(246, 248, 244, 0.96);
    display: grid;
    place-items: center;
}

.shop-item-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.shop-item-image-wrap.love-letter-image-wrap {
    background: linear-gradient(145deg, #FFF5F8 0%, #FFE7EF 100%);
    border: 1px solid rgba(235, 130, 160, 0.2);
}

.shop-item-image-wrap.vibrator-image-wrap {
    background: rgba(255, 250, 253, 0.9);
    border: 1px solid rgba(190, 130, 170, 0.18);
}

.shop-item-image-wrap.lingerie-image-wrap {
    background: rgba(255, 246, 250, 0.92);
    border: 1px solid rgba(210, 120, 155, 0.2);
}

.shop-item-letter-icon {
    width: 42px;
    height: 42px;
    display: block;
    overflow: visible;
}

.shop-item-massage-icon {
    width: 44px;
    height: 44px;
    display: block;
    overflow: visible;
}

.shop-item-letter-icon .letter-paper {
    fill: #FFF7F9;
    stroke: rgba(184, 106, 128, 0.58);
    stroke-width: 1.35;
}

.shop-item-letter-icon .letter-paper-line {
    fill: none;
    stroke: rgba(184, 106, 128, 0.34);
    stroke-width: 1.45;
    stroke-linecap: round;
}

.shop-item-letter-icon .letter-envelope {
    fill: #FFDDE8;
    stroke: rgba(184, 106, 128, 0.7);
    stroke-width: 1.45;
}

.shop-item-letter-icon .letter-flap,
.shop-item-letter-icon .letter-fold {
    fill: none;
    stroke: rgba(184, 106, 128, 0.72);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shop-item-letter-icon .letter-ribbon {
    fill: none;
    stroke: rgba(217, 108, 141, 0.62);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.shop-item-letter-icon .letter-heart {
    fill: #E88AA6;
    stroke: #B86A80;
    stroke-width: 1.1;
    stroke-linejoin: round;
}

.shop-item-main {
    min-width: 0;
    flex: 1;
}

.shop-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.shop-item-top h3 {
    margin: 0;
    color: #27333d;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 620;
}

.shop-item-price {
    color: #5f876b;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.shop-item-card p {
    margin: 7px 0 12px;
    color: #7d8580;
    font-size: 12px;
    line-height: 1.45;
}

.shop-buy-btn {
    height: 32px;
    min-width: 72px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #07c160;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.shop-buy-btn:active {
    transform: scale(0.97);
}

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

.chat-gift-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 12px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 20px rgba(31, 41, 55, 0.06);
    text-align: left;
}

.chat-gift-image-wrap {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(244, 247, 252, 0.96);
}

.chat-gift-image-wrap img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.chat-gift-card.vibrator-gift-card {
    background: linear-gradient(145deg, #FFFBFD 0%, #F9EEF6 58%, #F7EAF4 100%);
    border: 1px solid rgba(190, 130, 170, 0.16);
}

.chat-gift-card.lingerie-gift-card {
    background: linear-gradient(145deg, #FFF0F5 0%, #FBE8F0 64%, #FFF8FB 100%);
    border: 1px solid rgba(210, 120, 155, 0.2);
}

.chat-gift-card.love-letter-gift-card {
    background: linear-gradient(145deg, #FFE7EF 0%, #FFF2F6 62%, #FFF7FA 100%);
    border: 1px solid rgba(235, 130, 160, 0.22);
}

.chat-gift-card.vibrator-gift-card .chat-gift-image-wrap {
    background: rgba(255, 250, 253, 0.86);
    border: 1px solid rgba(190, 130, 170, 0.16);
}

.chat-gift-card.lingerie-gift-card .chat-gift-image-wrap {
    background: rgba(255, 246, 250, 0.9);
    border: 1px solid rgba(210, 120, 155, 0.18);
}

.chat-gift-card.love-letter-gift-card .chat-gift-image-wrap {
    background: rgba(255, 250, 252, 0.9);
    border: 1px solid rgba(235, 130, 160, 0.18);
}

.chat-gift-card.vibrator-gift-card .chat-gift-main strong {
    color: #5A4654;
}

.chat-gift-card.lingerie-gift-card .chat-gift-main strong {
    color: #5A4654;
}

.chat-gift-card.love-letter-gift-card .chat-gift-main strong {
    color: #633946;
}

.chat-gift-card.love-letter-gift-card .chat-gift-main small {
    color: rgba(118, 73, 86, 0.58);
}

.chat-gift-letter-icon,
#app-chat .gift-message-letter-icon {
    width: 34px;
    height: 34px;
    display: block;
    overflow: visible;
}

.chat-gift-letter-icon .letter-paper,
#app-chat .gift-message-letter-icon .letter-paper {
    fill: #FFF7F9;
    stroke: rgba(184, 106, 128, 0.58);
    stroke-width: 1.35;
}

.chat-gift-letter-icon .letter-paper-line,
#app-chat .gift-message-letter-icon .letter-paper-line {
    fill: none;
    stroke: rgba(184, 106, 128, 0.34);
    stroke-width: 1.45;
    stroke-linecap: round;
}

.chat-gift-letter-icon .letter-envelope,
#app-chat .gift-message-letter-icon .letter-envelope {
    fill: #FFDDE8;
    stroke: rgba(184, 106, 128, 0.7);
    stroke-width: 1.45;
}

.chat-gift-letter-icon .letter-flap,
.chat-gift-letter-icon .letter-fold,
#app-chat .gift-message-letter-icon .letter-flap,
#app-chat .gift-message-letter-icon .letter-fold {
    fill: none;
    stroke: rgba(184, 106, 128, 0.72);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-gift-letter-icon .letter-ribbon,
#app-chat .gift-message-letter-icon .letter-ribbon {
    fill: none;
    stroke: rgba(217, 108, 141, 0.62);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.chat-gift-letter-icon .letter-heart,
#app-chat .gift-message-letter-icon .letter-heart {
    fill: #E88AA6;
    stroke: #B86A80;
    stroke-width: 1.1;
    stroke-linejoin: round;
}

.shop-item-massage-icon,
.chat-gift-massage-icon,
#app-chat .gift-message-massage-icon {
    width: 34px;
    height: 34px;
    display: block;
    overflow: visible;
}

.shop-item-massage-icon {
    width: 44px;
    height: 44px;
}

.shop-item-massage-icon .massage-glow,
.chat-gift-massage-icon .massage-glow,
#app-chat .gift-message-massage-icon .massage-glow {
    fill: rgba(232, 180, 210, 0.18);
}

.shop-item-massage-icon .massage-head,
.chat-gift-massage-icon .massage-head,
#app-chat .gift-message-massage-icon .massage-head {
    fill: #F6DDEB;
    stroke: #C58AB3;
    stroke-width: 1.4;
}

.shop-item-massage-icon .massage-neck,
.chat-gift-massage-icon .massage-neck,
#app-chat .gift-message-massage-icon .massage-neck {
    fill: none;
    stroke: #C58AB3;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.shop-item-massage-icon .massage-handle,
.chat-gift-massage-icon .massage-handle,
#app-chat .gift-message-massage-icon .massage-handle {
    fill: #F9EEF6;
    stroke: #B982A7;
    stroke-width: 1.4;
}

.shop-item-massage-icon .massage-highlight,
.chat-gift-massage-icon .massage-highlight,
#app-chat .gift-message-massage-icon .massage-highlight {
    fill: none;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.shop-item-massage-icon .massage-button,
.chat-gift-massage-icon .massage-button,
#app-chat .gift-message-massage-icon .massage-button {
    fill: #D8A6C4;
}


.chat-gift-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-gift-main strong {
    color: #27333d;
    font-size: 14px;
    line-height: 1.2;
}

.chat-gift-main small {
    color: #7d8580;
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-gift-empty {
    display: none;
    padding: 18px 10px;
    text-align: center;
}

.chat-gift-empty-title {
    color: #4b5563;
    font-size: 14px;
    font-weight: 650;
}

.chat-gift-empty-text {
    margin-top: 6px;
    color: #8b95a7;
    font-size: 12px;
}

.msg-text.msg-gift {
    padding: 0;
    overflow: hidden;
    background: #fff7ed;
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.gift-message-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.gift-message-image {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 38px;
}

.gift-message-main {
    min-width: 0;
}

.gift-message-label {
    color: #b45309;
    font-size: 11px;
    font-weight: 650;
}

.gift-message-name {
    margin-top: 2px;
    color: #27333d;
    font-size: 15px;
    font-weight: 680;
}

.gift-message-desc {
    margin-top: 3px;
    color: #7c6f64;
    font-size: 12px;
    line-height: 1.35;
}

.wallet-balance-panel {
    padding: 18px 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(250, 250, 245, 0.96) 0%, rgba(237, 244, 238, 0.92) 100%);
    border: 1px solid rgba(217, 224, 216, 0.58);
    box-shadow: 0 10px 22px rgba(60, 71, 70, 0.045);
}

.wallet-balance-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.wallet-panel-label {
    font-size: 12px;
    color: #8d948f;
    font-weight: 500;
}

.wallet-balance-value {
    font-size: 34px;
    font-weight: 620;
    color: #26313a;
    line-height: 1.1;
    letter-spacing: 0;
}

.wallet-work-panel,
.wallet-record-panel {
    background: transparent;
}

.wallet-section-header {
    padding: 0 2px 10px;
}

.wallet-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wallet-section-title {
    font-size: 16px;
    font-weight: 650;
    color: #26313a;
}

.wallet-section-subtitle {
    margin-top: 4px;
    font-size: 11px;
    color: #a7aca7;
}

.wallet-work-list {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(60, 71, 70, 0.035);
}

.wallet-work-row {
    min-height: 66px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 0.5px solid rgba(225, 227, 222, 0.84);
}

.wallet-work-row:last-child {
    border-bottom: 0;
}

.wallet-work-row.active {
    background: rgba(238, 247, 241, 0.72);
}

.wallet-work-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #eef3ee;
    color: #61766b;
    font-size: 13px;
    font-weight: 660;
}

.wallet-work-main {
    min-width: 0;
    flex: 1;
}

.wallet-work-name {
    font-size: 15px;
    font-weight: 560;
    color: #27333d;
    line-height: 1.25;
}

.wallet-work-meta {
    margin-top: 5px;
    font-size: 12px;
    color: #7d8580;
    line-height: 1.3;
}

.wallet-work-btn {
    min-width: 54px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(238, 241, 237, 0.9);
    color: #52605a;
    font-size: 12px;
    font-weight: 560;
    white-space: nowrap;
    cursor: pointer;
}

.wallet-work-btn:active {
    background: rgba(224, 229, 222, 0.95);
}

.wallet-work-row.active .wallet-work-btn {
    min-width: 88px;
    background: rgba(219, 236, 224, 0.94);
    color: #416350;
}

.wallet-record-list {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(60, 71, 70, 0.035);
}

.wallet-record-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 9px 14px;
    border-bottom: 0.5px solid rgba(225, 227, 222, 0.84);
}

.wallet-record-item:last-child {
    border-bottom: 0;
}

.wallet-record-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #f3eee7;
    color: #bf7d4b;
    font-size: 16px;
    font-weight: 660;
}

.wallet-record-item.income .wallet-record-icon {
    background: #edf5ef;
    color: #5f876b;
}

.wallet-record-main {
    min-width: 0;
    flex: 1;
}

.wallet-record-title {
    font-size: 15px;
    font-weight: 560;
    color: #27333d;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-record-note {
    margin-top: 5px;
    font-size: 12px;
    color: #7d8580;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-record-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 6px 2px;
    border-radius: 50%;
    background: #c2c7bf;
}

.wallet-record-side {
    flex-shrink: 0;
    text-align: right;
    align-self: flex-start;
    padding-top: 1px;
}

.wallet-record-amount {
    font-size: 15px;
    font-weight: 560;
    color: #a06642;
    letter-spacing: 0;
}

.wallet-record-item.income .wallet-record-amount {
    color: #5f876b;
}

.wallet-empty {
    padding: 18px 16px 20px;
    text-align: center;
}

.wallet-empty-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f1f2ee;
    color: #b4bab2;
    font-size: 15px;
    font-weight: 620;
}

.wallet-empty-title {
    font-size: 13px;
    font-weight: 560;
    color: #6f766f;
}

.wallet-empty-text {
    margin-top: 4px;
    font-size: 11px;
    color: #aaafa9;
}

#app-mask-list,
#app-mask-editor {
    background: #f5f5f5;
}

.mask-page-scroll,
.mask-editor-scroll {
    flex: 1;
    overflow-y: auto;
    background: #f5f5f5;
    padding-bottom: calc(14px + var(--safe-bottom, 0px));
}

.mask-list {
    margin-top: 8px;
    background: #ffffff;
}

.mask-list-row {
    position: relative;
    background: #ffffff;
}

.mask-list-row::after {
    content: '';
    position: absolute;
    left: 74px;
    right: 0;
    bottom: 0;
    height: 0.5px;
    background: rgba(0, 0, 0, 0.08);
}

.mask-list-row:last-child::after {
    display: none;
}

.mask-select-main {
    width: 100%;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.mask-select-main:active,
.mask-row-btn:active,
.mask-avatar-upload:active {
    background: #ededed;
}

.mask-avatar,
.mask-avatar-preview {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
}

.mask-list-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mask-list-name {
    font-size: 16px;
    line-height: 1.2;
    color: #1f1f1f;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mask-list-desc {
    font-size: 13px;
    line-height: 1.3;
    color: #8a8a8a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mask-check {
    width: 24px;
    flex: 0 0 24px;
    color: #07c160;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.mask-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    padding: 0 14px 10px 74px;
}

.mask-row-btn {
    min-width: 48px;
    height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #576b95;
    font-size: 13px;
    cursor: pointer;
}

.mask-row-btn.danger {
    color: #ff3b30;
}

.mask-row-btn:disabled {
    color: #c4c4c4;
    cursor: default;
}

.mask-form {
    margin-top: 8px;
    background: #ffffff;
}

.mask-avatar-field {
    padding: 0;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.07);
}

.mask-avatar-upload {
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.mask-avatar-upload-text {
    flex: 1;
    color: #2f3744;
    font-size: 15px;
}

.mask-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 16px 13px;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.07);
    color: #738096;
    font-size: 12px;
    font-weight: 500;
}

.mask-field input,
.mask-field textarea {
    width: 100%;
    border: 0.5px solid rgba(60, 60, 67, 0.08);
    border-radius: 10px;
    outline: none;
    background: #fafafa;
    color: #1f1f1f;
    font-size: 15px;
    line-height: 1.45;
    font-family: inherit;
    font-weight: 400;
    resize: none;
}

.mask-field input {
    height: 38px;
    padding: 0 11px;
}

.mask-field textarea {
    height: 124px;
    padding: 9px 11px;
}

.mask-field input:focus,
.mask-field textarea:focus {
    border-color: rgba(0, 122, 255, 0.24);
    background: #ffffff;
}

.mask-field input::placeholder,
.mask-field textarea::placeholder {
    color: #b8bcc4;
}

.mask-save-action {
    width: auto;
    min-width: 44px;
    padding: 0 8px;
    font-size: 15px;
    color: #007aff;
    background: transparent;
    border: 0;
    font-weight: 600;
}

.mask-save-action:disabled {
    color: rgba(60, 60, 67, 0.3);
    cursor: default;
}

.mask-form-arrow {
    color: #c7c7cc;
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}

/* 设置和弹窗统一 */
.settings-scroll {
    background:
        radial-gradient(circle at top right, rgba(188, 211, 255, 0.14), transparent 30%),
        radial-gradient(circle at 10% 0%, rgba(180, 255, 235, 0.10), transparent 32%),
        linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
}

.settings-header,
.settings-section,
.profile-settings {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 10px 26px rgba(31, 41, 55, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.settings-header {
    position: relative;
    padding: 20px 18px;
    background:
        radial-gradient(circle at top left, rgba(222, 233, 255, 0.36), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        0 14px 30px rgba(31, 41, 55, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.settings-section {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 253, 255, 0.90));
}

.setting-header {
    padding: 11px 16px;
    font-size: 12px;
    color: #7b8798;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0.96), rgba(241, 244, 249, 0.88));
    font-weight: 700;
    letter-spacing: 0.8px;
}

.setting-cell {
    min-height: 72px;
    padding: 14px 15px;
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.04);
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.setting-cell:hover {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.setting-cell:active {
    background: rgba(245, 252, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cell-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    margin-right: 13px;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 10px 20px rgba(31, 41, 55, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#app-settings .cell-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.78), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    opacity: 0.95;
}

.cell-text-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 10px;
}

.cell-text {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.cell-subtext {
    font-size: 12px;
    line-height: 1.45;
    color: #7c879c;
}

.cell-detail {
    color: #92a0b8;
    font-size: 14px;
    margin-right: 8px;
    font-weight: 700;
}

.cell-arrow {
    color: #b6bfce;
    font-size: 20px;
}

.cell-action-btn {
    flex-shrink: 0;
    height: 34px;
    margin-right: 8px;
    padding: 0 14px;
    border: none;
    border-radius: 17px;
    background: linear-gradient(
        135deg,
        rgba(45, 212, 191, 0.90) 0%,
        rgba(7, 193, 96, 0.78) 100%
    );
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow:
        0 12px 20px rgba(20, 184, 166, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.cell-action-btn:hover {
    box-shadow:
        0 16px 28px rgba(20, 184, 166, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.cell-action-btn:active {
    transform: scale(0.96);
    opacity: 0.96;
}

/* 设置页：iOS 原生列表风格 */
#app-settings .settings-scroll {
    padding: 12px 16px 18px;
    background: #f2f2f7;
}

#app-settings .nav-bar {
    height: 52px;
    padding-top: 0;
    align-items: center;
}

#app-settings .nav-title {
    line-height: 52px;
}

#app-settings .nav-back {
    height: 52px;
    align-items: center;
}

#app-settings .settings-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 12px;
}

#app-settings .user-avatar {
    width: 52px;
    height: 52px;
    font-size: 21px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(142, 142, 147, 0.92) 0%, rgba(99, 102, 110, 0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

#app-settings .user-info {
    min-width: 0;
}

#app-settings .user-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 2px;
    color: #111827;
}

#app-settings .user-sub {
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
}

#app-settings .settings-section {
    margin: 0 0 14px;
    background: #fff;
    border: 0.5px solid rgba(60, 60, 67, 0.12);
    border-radius: 12px;
    overflow: hidden;
}

#app-settings .setting-header {
    padding: 14px 16px 8px;
    background: transparent;
    border: none;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;
    color: #6b7280;
}

#app-settings .setting-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 12px 16px;
    background: transparent;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);
    cursor: pointer;
}

#app-settings .settings-section > .setting-cell:last-child,
#app-settings .setting-cell:last-child {
    border-bottom: none;
}

#app-settings .setting-cell:active {
    background: rgba(118, 118, 128, 0.08);
}

#app-settings .setting-cell::after {
    content: none;
}

#app-settings .cell-icon {
    width: 29px;
    height: 29px;
    border-radius: 7px;
    margin-right: 0;
    flex-shrink: 0;
    box-shadow: none;
}

#app-settings .cell-text,
#app-settings .cell-detail {
    font-weight: 400;
    letter-spacing: 0;
}

#app-settings .cell-text {
    font-size: 16px;
    color: #111827;
}

#app-settings .cell-detail {
    color: #8e8e93;
    font-size: 14px;
}

#app-settings .cell-arrow {
    margin-left: auto;
    color: #c7c7cc;
    font-size: 20px;
    line-height: 1;
}

#app-settings .cell-text-group {
    gap: 2px;
    padding-right: 6px;
}

#app-settings .cell-subtext {
    font-size: 12px;
    line-height: 1.3;
    color: #8e8e93;
}

#app-settings .cell-action-btn {
    height: 30px;
    padding: 0 12px;
    margin-right: 0;
    border-radius: 15px;
    background: #f2f2f7;
    color: #007aff;
    box-shadow: none;
}

#app-settings .setting-cell.danger {
    background: transparent;
}

#app-settings .setting-cell.danger .cell-text {
    color: #ff3b30;
    font-weight: 400;
}

#app-settings .setting-cell.danger:active,
#app-settings .setting-cell.danger:hover {
    background: rgba(255, 59, 48, 0.06);
}

#app-settings .cell-icon.blue,
#app-settings .cell-icon.pink,
#app-settings .cell-icon.purple,
#app-settings .cell-icon.gray,
#app-settings .cell-icon.green,
#app-settings .cell-icon.orange,
#app-settings .cell-icon.red {
    box-shadow: none;
}

#app-settings .setting-cell-storage {
    align-items: flex-start;
    padding-top: 13px;
    padding-bottom: 13px;
}

#app-settings .setting-cell-storage .cell-text-group {
    padding-top: 1px;
}

#app-settings .setting-cell-storage .cell-action-btn {
    margin-top: 1px;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    border: none;
    background: #007aff;
    color: #fff;
    box-shadow: none;
    min-width: 0;
    font-weight: 600;
    letter-spacing: 0.2px;
}

#app-settings .settings-section .setting-header + .setting-cell {
    border-top: none;
}

#app-settings .settings-section:first-of-type {
    margin-top: 2px;
}

#app-settings .settings-section:nth-of-type(3) .setting-cell,
#app-settings .settings-section:nth-of-type(4) .setting-cell {
    min-height: 52px;
}

#app-settings .setting-cell .cell-text-group + .cell-detail {
    margin-left: auto;
}

#app-settings .setting-cell .cell-arrow {
    flex-shrink: 0;
}

#app-settings .setting-cell .cell-icon + .cell-text,
#app-settings .setting-cell .cell-icon + .cell-text-group {
    min-width: 0;
}

#app-settings .settings-section > .setting-cell:not(.danger):active .cell-arrow {
    color: #aab1bd;
}

#app-settings .setting-header + .setting-cell,
#app-settings .setting-header + .setting-cell-storage {
    border-top: 0.5px solid rgba(60, 60, 67, 0.12);
}

#app-settings .setting-cell + .setting-header {
    border-top: 0.5px solid rgba(60, 60, 67, 0.12);
}

#app-settings .settings-section:last-of-type {
    margin-bottom: 0;
}

.storage-chart {
    padding: 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(213, 227, 255, 0.32), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248, 252, 255, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.84);
    box-shadow:
        0 12px 26px rgba(31, 41, 55, 0.045),
        inset 0 1px 0 rgba(255,255,255,0.88);
}

.storage-bar {
    height: 14px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.72);
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.06);
}

.storage-used {
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(52, 199, 89, 0.22);
}

.storage-info {
    gap: 10px;
    margin-top: 16px;
}

.storage-item {
    min-height: 22px;
    gap: 10px;
    font-size: 13px;
    color: #5b6474;
}

.storage-item .dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.08);
}

.storage-clean-section {
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,255,0.94));
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow:
        0 14px 28px rgba(31, 41, 55, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.92);
}

.storage-clean-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.storage-quick-clean {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,255,0.94));
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow:
        0 14px 28px rgba(31, 41, 55, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.92);
}

.storage-quick-clean-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.storage-quick-clean-title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
}

.storage-quick-clean-desc {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: #7b8495;
}

.storage-clean-title strong {
    display: block;
    font-size: 15px;
    color: #111827;
    letter-spacing: -0.2px;
}

.storage-clean-title span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #8b95a7;
}

.storage-clear-all-btn {
    flex-shrink: 0;
    min-width: 82px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.9) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 12px 22px rgba(16, 185, 129, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.28);
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.storage-clear-all-btn:active {
    transform: scale(0.96);
    opacity: 0.96;
}

.storage-clean-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.storage-clean-chip {
    width: 100%;
    border: none;
    border-radius: 18px;
    padding: 14px 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(244,247,252,0.95));
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 10px 22px rgba(31, 41, 55, 0.045),
        inset 0 1px 0 rgba(255,255,255,0.92);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.storage-clean-chip:active {
    transform: scale(0.985);
    background: linear-gradient(145deg, rgba(255,255,255,1), rgba(239,243,249,0.96));
}

.storage-clean-chip-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.96), rgba(237, 245, 255, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 8px 16px rgba(31, 41, 55, 0.06);
    flex-shrink: 0;
}

.storage-clean-chip-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.storage-clean-chip-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.2px;
}

.storage-clean-chip-text span {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
}

.storage-clean-chip-text small {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
}

.storage-list {
    margin-top: 18px;
    padding: 14px 16px 4px;
    border-radius: 20px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow:
        0 12px 24px rgba(31, 41, 55, 0.045),
        inset 0 1px 0 rgba(255,255,255,0.92);
}

.storage-list-item {
    padding: 12px 0;
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.06);
    font-size: 14px;
}

.storage-list-item .name {
    color: #1f2937;
    font-weight: 600;
}

.storage-list-item .size {
    color: #94a3b8;
    font-weight: 600;
}

.modal {
    background: rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-content {
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow:
        0 26px 70px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.modal-header {
    background: rgba(248, 249, 252, 0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* ================= 清除线下聊天确认弹窗 · iOS 危险操作风格 ================= */
.clear-offline-chat-modal {
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(14px) saturate(118%);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
    align-items: center;
}

.clear-offline-chat-modal .clear-offline-chat-modal-content {
    width: min(90vw, 348px);
    max-width: 348px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.16),
        0 8px 20px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    transform: translateY(14px) scale(0.985);
}

.clear-offline-chat-modal.active .clear-offline-chat-modal-content {
    transform: translateY(0) scale(1);
}

.clear-offline-chat-modal .clear-offline-chat-modal-header {
    min-height: 58px;
    padding: 12px 14px 12px 18px;
    background: rgba(250, 251, 255, 0.88);
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.055);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.clear-offline-chat-modal .clear-offline-chat-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.25px;
    text-align: left;
}

.clear-offline-chat-modal .clear-offline-chat-modal-close {
    min-width: 30px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(246, 248, 252, 0.96);
    color: #8a94a6;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease;
}

.clear-offline-chat-modal .clear-offline-chat-modal-close:active {
    transform: scale(0.94);
    background: rgba(241, 245, 249, 0.98);
    color: #687385;
    border-color: rgba(148, 163, 184, 0.26);
}

.clear-offline-chat-modal .clear-offline-chat-modal-body {
    padding: 18px 18px 18px;
}

.clear-offline-chat-modal .clear-offline-chat-modal-description {
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: 0;
}

.clear-offline-chat-modal .clear-offline-chat-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clear-offline-chat-modal .clear-offline-chat-btn {
    flex: 1;
    min-width: 0;
    height: 44px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.15px;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        opacity 0.16s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.clear-offline-chat-modal .clear-offline-chat-btn:active {
    transform: scale(0.97);
}

.clear-offline-chat-modal .clear-offline-chat-btn-cancel {
    background: rgba(244, 246, 250, 0.92);
    color: #667085;
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.clear-offline-chat-modal .clear-offline-chat-btn-cancel:active {
    background: rgba(238, 242, 247, 0.96);
    color: #4b5563;
}

.clear-offline-chat-modal .clear-offline-chat-btn-danger {
    background: linear-gradient(180deg, #ff5b55 0%, #ff3b30 100%);
    color: #fff;
    border-color: rgba(229, 57, 53, 0.30);
    box-shadow:
        0 12px 22px rgba(255, 59, 48, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.clear-offline-chat-modal .clear-offline-chat-btn-danger:active {
    background: linear-gradient(180deg, #f95650 0%, #f2352a 100%);
    box-shadow:
        0 8px 16px rgba(255, 59, 48, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ================= 退出线下模式弹窗 · iOS Decision Sheet ================= */
.exit-offline-mode-modal {
    background: rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(12px) saturate(106%);
    -webkit-backdrop-filter: blur(12px) saturate(106%);
    align-items: center;
}

.exit-offline-mode-modal .exit-offline-mode-modal-content {
    width: min(88vw, 338px);
    max-width: 338px;
    border-radius: 28px;
    background: rgba(252, 252, 254, 0.98);
    border: 0.5px solid rgba(255, 255, 255, 0.58);
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08),
        0 1px 3px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    transform: translateY(9px) scale(0.994);
}

.exit-offline-mode-modal.active .exit-offline-mode-modal-content {
    transform: translateY(0) scale(1);
}

.exit-offline-mode-modal .exit-offline-mode-modal-header {
    min-height: 52px;
    padding: 14px 16px 10px 20px;
    background: rgba(252, 252, 254, 0.76);
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.04);
    backdrop-filter: blur(9px) saturate(115%);
    -webkit-backdrop-filter: blur(9px) saturate(115%);
}

.exit-offline-mode-modal .exit-offline-mode-modal-title {
    font-size: 17px;
    font-weight: 660;
    color: rgba(17, 24, 39, 0.92);
    letter-spacing: -0.36px;
    text-align: left;
}

.exit-offline-mode-modal .exit-offline-mode-modal-close {
    min-width: 22px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: rgba(120, 120, 128, 0.06);
    color: rgba(60, 60, 67, 0.28);
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.16s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.exit-offline-mode-modal .exit-offline-mode-modal-close:active {
    transform: scale(0.94);
    background: rgba(120, 120, 128, 0.11);
    color: rgba(60, 60, 67, 0.46);
}

.exit-offline-mode-modal .exit-offline-mode-modal-body {
    padding: 14px 16px 17px;
}

.exit-offline-mode-modal .exit-offline-mode-modal-intro {
    margin: 0 0 12px;
    color: rgba(60, 60, 67, 0.48);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.1px;
}

.exit-offline-mode-modal .exit-offline-mode-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    border: 0.5px solid rgba(60, 60, 67, 0.08);
}

.exit-offline-mode-modal .exit-offline-mode-btn {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 12px 16px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    transition:
        background 0.18s ease,
        opacity 0.18s ease;
}

.exit-offline-mode-modal .exit-offline-mode-btn:active {
    background: rgba(0, 0, 0, 0.04);
}

.exit-offline-mode-modal .exit-offline-mode-btn + .exit-offline-mode-btn {
    border-top: 0.5px solid rgba(60, 60, 67, 0.06);
}

.exit-offline-mode-modal .exit-offline-mode-btn-primary {
    flex-direction: row;
    gap: 0;
}

.exit-offline-mode-modal .exit-offline-mode-btn-primary .exit-offline-mode-btn-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exit-offline-mode-modal .exit-offline-mode-btn-primary .exit-offline-mode-btn-title {
    font-size: 16px;
    font-weight: 600;
    color: #4a9af0;
    letter-spacing: -0.24px;
    line-height: 1.3;
}

.exit-offline-mode-modal .exit-offline-mode-btn-caption {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(60, 60, 67, 0.48);
    letter-spacing: 0;
}

.exit-offline-mode-modal .exit-offline-mode-btn-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(74, 154, 240, 0.1);
    color: #4a9af0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.exit-offline-mode-modal .exit-offline-mode-btn-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    color: #4a9af0;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.exit-offline-mode-modal .exit-offline-mode-btn-secondary {
    flex-direction: row;
}

.exit-offline-mode-modal .exit-offline-mode-btn-secondary .exit-offline-mode-btn-content {
    flex: 1;
}

.exit-offline-mode-modal .exit-offline-mode-btn-secondary .exit-offline-mode-btn-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(60, 60, 67, 0.78);
    letter-spacing: -0.24px;
    line-height: 1.3;
}

.exit-offline-mode-modal .exit-offline-mode-modal-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 0.5px solid rgba(60, 60, 67, 0.035);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.exit-offline-mode-modal .exit-offline-mode-modal-note-item {
    display: block;
}

.exit-offline-mode-modal .exit-offline-mode-modal-note-label {
    display: none;
}

.exit-offline-mode-modal .exit-offline-mode-modal-note-text {
    color: rgba(60, 60, 67, 0.38);
    font-size: 12px;
    line-height: 1.68;
    letter-spacing: 0;
}

.role-memory-modal {
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px) saturate(108%);
    -webkit-backdrop-filter: blur(12px) saturate(108%);
    align-items: flex-end;
}

.role-memory-modal .role-memory-modal-content {
    width: min(100%, 430px);
    max-height: min(82vh, 720px);
    border-radius: 26px 26px 0 0;
    background: rgba(252, 252, 254, 0.98);
    border: 0.5px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.role-memory-modal .role-memory-modal-header {
    flex-shrink: 0;
    min-height: 62px;
    padding: 16px 18px 12px 20px;
    background: rgba(252, 252, 254, 0.84);
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.06);
}

.role-memory-modal .role-memory-modal-title {
    font-size: 19px;
    font-weight: 700;
    color: rgba(17, 24, 39, 0.94);
    letter-spacing: 0;
}

.role-memory-modal .role-memory-modal-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(60, 60, 67, 0.48);
}

.role-memory-modal .role-memory-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(120, 120, 128, 0.10);
    color: rgba(60, 60, 67, 0.48);
    border: none;
}

.role-memory-modal .role-memory-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px calc(18px + var(--safe-bottom, 0px));
}

.role-memory-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.role-memory-editor textarea {
    width: 100%;
    min-height: 118px;
    resize: vertical;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.96);
    color: #1f2937;
    padding: 12px 13px;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}

.role-memory-editor textarea:focus {
    border-color: rgba(0, 122, 255, 0.42);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.10);
}

.role-memory-editor-actions {
    display: flex;
    gap: 9px;
}

.role-memory-btn {
    flex: 1;
    min-height: 40px;
    border: none;
    border-radius: 13px;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}

.role-memory-btn.primary {
    background: #007aff;
    color: #fff;
}

.role-memory-btn.secondary {
    background: rgba(120, 120, 128, 0.10);
    color: rgba(60, 60, 67, 0.68);
}

.role-memory-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.role-memory-item {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 0.5px solid rgba(60, 60, 67, 0.08);
}

.role-memory-item-main {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.role-memory-item-text {
    color: #253143;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.role-memory-item-meta {
    margin-top: 6px;
    color: rgba(60, 60, 67, 0.42);
    font-size: 11px;
}

.role-memory-item-delete {
    flex: 0 0 auto;
    align-self: center;
    border: none;
    border-radius: 11px;
    padding: 0 10px;
    min-height: 34px;
    background: rgba(255, 59, 48, 0.08);
    color: #ff3b30;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
}

.role-memory-empty {
    padding: 22px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.70);
    border: 0.5px dashed rgba(60, 60, 67, 0.16);
    text-align: center;
}

.role-memory-empty-title {
    color: #253143;
    font-size: 15px;
    font-weight: 700;
}

.role-memory-empty-text {
    margin-top: 6px;
    color: rgba(60, 60, 67, 0.48);
    font-size: 12px;
    line-height: 1.55;
}

.input-group input,
.input-group textarea {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: rgba(0, 122, 255, 0.42);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.10);
}

/* 小屏适配 */
#app-wechat #tab-chats .chat-unread-dot {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    width: 12px;
    min-width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff5a5f 0%, #ff3b30 100%);
    border: 2px solid rgba(255, 255, 255, 0.98);
    box-shadow:
        0 4px 10px rgba(255, 59, 48, 0.22),
        0 0 0 0.5px rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: translate(28%, -28%);
    pointer-events: none;
}

#app-wechat #tab-chats .chat-unread-dot.has-count {
    width: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.1px;
    transform: translate(30%, -30%);
}

#app-wechat #tab-chats .chat-preview-prefix {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 76px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

#app-wechat #tab-chats .chat-preview-prefix-icon {
    font-size: 9px;
    line-height: 1;
    opacity: 0.8;
}

#app-wechat #tab-chats .chat-preview-prefix-label {
    line-height: 1;
}

#app-wechat #tab-chats .chat-preview-prefix-voice {
    background: rgba(99, 102, 241, 0.072);
    color: #7882c2;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.06);
}

#app-wechat #tab-chats .chat-preview-prefix-photo {
    background: rgba(59, 130, 246, 0.08);
    color: #6f97cf;
}

#app-wechat #tab-chats .chat-preview-prefix-sticker {
    background: rgba(245, 158, 11, 0.1);
    color: #c89a56;
}

#app-wechat #tab-chats .chat-preview-prefix-gift {
    background: rgba(34, 197, 94, 0.1);
    color: #3f9a68;
}

#app-wechat #tab-chats .chat-preview-prefix-transfer {
    background: rgba(217, 141, 63, 0.1);
    color: #b87435;
}

@media (max-width: 380px) {
    #app-wechat #tab-chats .chat-list {
        padding-left: 8px;
        padding-right: 8px;
    }

    #app-wechat #tab-chats .chat-item {
        border-radius: 14px;
        padding: 10px 11px;
        margin-bottom: 5px;
    }

    #app-wechat #tab-chats .chat-item .avatar {
        width: 50px !important;
        height: 50px !important;
        margin-right: 11px;
    }

    #app-wechat #tab-chats .chat-name {
        font-size: 15px;
    }

    #app-wechat #tab-chats .chat-time {
        font-size: 9px;
        min-width: 28px;
    }

    #app-wechat .wechat-tabbar {
        height: calc(62px + var(--safe-bottom, 0px));
        padding-left: 6px;
        padding-right: 6px;
    }

    #app-wechat .tab-icon {
        width: 28px;
        height: 28px;
    }

    #app-wechat .tab-icon svg {
        width: 20px;
        height: 20px;
    }

    .msg-text {
        max-width: 74%;
    }

    .chat-media-entry-grid {
        grid-template-columns: 1fr;
    }

    .chat-sticker-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gomoku-board {
        padding: 8px;
    }
}

/* ================= Home Screen Neutral Cool Theme Overrides ================= */

:root {
    --ios-bg:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.97), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(213, 227, 255, 0.42), transparent 22%),
        radial-gradient(circle at 50% 72%, rgba(242, 246, 255, 0.70), transparent 38%),
        linear-gradient(160deg, #fbfcff 0%, #f2f6fd 42%, #ebf0f8 72%, #e8edf6 100%);
    --widget-bg: rgba(255, 255, 255, 0.62);
    --shadow-light: rgba(255, 255, 255, 0.94);
    --shadow-dark: rgba(107, 129, 167, 0.16);

    /* Battery + weather cards tokens */
    --widget-battery-bg: #f7fbf7;
    --widget-weather-bg: #eaf3ff;
    --widget-text-primary: #1f3352;
    --widget-text-secondary: #4e627f;
    --widget-accent-battery: #34c759;
    --widget-accent-weather: #69a7ff;
    --widget-card-radius: 32px;
    --widget-shadow: 0 12px 30px rgba(82, 106, 143, 0.14);
    --widget-border: rgba(255, 255, 255, 0.78);
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
}

html,
body {
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.98), transparent 24%),
        radial-gradient(circle at 18% 24%, rgba(220, 230, 246, 0.34), transparent 18%),
        linear-gradient(135deg, #edf1f6 0%, #e5eaf0 100%);
}

.ios-container {
    background: var(--ios-bg);
}

.ios-container.phone-mode-small,
.ios-container.phone-mode-medium,
.ios-container.phone-mode-large,
.ios-container.phone-mode-iphone15,
.ios-container.phone-mode-iphone15plus,
.ios-container.phone-mode-custom {
    background: var(--ios-bg);
    box-shadow:
        0 36px 90px rgba(84, 101, 131, 0.20),
        0 14px 34px rgba(84, 101, 131, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.80);
}

.status-time,
.wifi-icon,
.bar,
.battery-body,
.battery-body::after,
.battery-level {
    color: #314155;
}

.bar,
.battery-level {
    background: #314155;
}

.battery-body {
    border-color: #314155;
}

.widgets-area {
    gap: var(--space-12);
    margin: var(--space-16) 0 var(--space-24) 0;
}

.widget {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--widget-border);
    border-radius: var(--widget-card-radius);
    box-shadow: var(--widget-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    padding: var(--space-16);
}

.widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), transparent 42%);
    pointer-events: none;
}

.widget-header {
    color: rgba(76, 95, 122, 0.54);
    letter-spacing: 0.2px;
}

.circle-bg {
    stroke: rgba(123, 147, 184, 0.16);
}

.circle-progress {
    stroke: #34c759;
    filter: drop-shadow(0 4px 8px rgba(52, 199, 89, 0.18));
}

.battery-percent {
    color: var(--widget-accent-battery);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.battery-widget {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 252, 246, 0.92)),
        var(--widget-battery-bg);
}

.weather-widget {
    background:
        radial-gradient(circle at top right, rgba(189, 214, 247, 0.42), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(236, 244, 255, 0.9)),
        var(--widget-weather-bg);
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 16px;
}

.weather-widget .weather-info {
    position: relative;
    z-index: 3;
    margin-top: 10px;
}

.weather-widget .weather-sun {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe79b 0%, #ffd266 55%, #ffbf47 100%);
    box-shadow: 0 0 0 7px rgba(255, 202, 94, 0.12), 0 6px 14px rgba(255, 183, 76, 0.35);
    z-index: 2;
}

.weather-widget .weather-sun::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 202, 94, 0.25);
}

.weather-widget .weather-clouds {
    position: absolute;
    left: -8px;
    right: -12px;
    bottom: -4px;
    height: 58px;
    border-radius: 26px 26px 0 0;
    background:
        radial-gradient(50px 20px at 10% 88%, rgba(201, 224, 255, 0.78) 0%, rgba(201, 224, 255, 0) 100%),
        radial-gradient(62px 24px at 36% 98%, rgba(188, 216, 255, 0.72) 0%, rgba(188, 216, 255, 0) 100%),
        radial-gradient(66px 25px at 66% 90%, rgba(174, 208, 255, 0.68) 0%, rgba(174, 208, 255, 0) 100%),
        radial-gradient(56px 20px at 90% 100%, rgba(158, 197, 252, 0.62) 0%, rgba(158, 197, 252, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.weather-info .location,
.weather-info .condition {
    color: var(--widget-text-secondary);
}

.weather-info .temp {
    color: var(--widget-text-primary);
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.45);
}

.app-grid {
    margin-top: 26px;
    gap: 20px 8px;
}

.app-item {
    transition: transform 0.16s ease, opacity 0.16s ease;
}

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

.app-icon {
    box-shadow:
        0 12px 24px rgba(101, 121, 152, 0.15),
        0 2px 8px rgba(101, 121, 152, 0.08),
        0 0 0 5px rgba(255, 255, 255, 0.24);
}

.app-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%);
    pointer-events: none;
}

.app-label,
.dock-item .app-label {
    color: #55657c;
    font-weight: 520;
    letter-spacing: 0.16px;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.92);
}

.app-label small {
    color: rgba(168, 144, 112, 0.72);
    font-weight: 480;
    letter-spacing: 0.18px;
}

.dock-bar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(241, 246, 252, 0.24)),
        rgba(239, 244, 250, 0.22);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.58);
    box-shadow:
        0 14px 30px rgba(110, 129, 158, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.dock-item .app-icon {
    box-shadow:
        0 10px 20px rgba(101, 121, 152, 0.13),
        0 0 0 4px rgba(255, 255, 255, 0.22);
}

.home-bar {
    background: rgba(85, 101, 124, 0.22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ================= 世界书样式（iOS高级简洁） ================= */
.worldbook-container {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    padding: 14px 12px 18px;
    background:
        radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.78), transparent 34%),
        linear-gradient(180deg, #f8f9fc 0%, #f3f5f9 100%);
}

.worldbook-list-wrap { display: block; }

.worldbook-empty {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 58%;
    padding: 38px 16px 24px;
}

.worldbook-empty-card {
    width: 100%;
    max-width: 252px;
    margin-inline: auto;
    text-align: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.worldbook-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    color: #8A97A8;
}

.worldbook-empty-icon .ui-line-icon {
    width: 48px;
    height: 48px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.worldbook-empty-text {
    font-size: 16px;
    font-weight: 580;
    color: #3f4b5d;
    letter-spacing: 0;
    line-height: 1.35;
    margin-bottom: 8px;
}

.worldbook-empty-hint {
    font-size: 13px;
    color: #8A97A8;
    line-height: 1.6;
    margin-bottom: 18px;
}

.worldbook-empty-btn {
    min-height: 34px;
    padding: 0 14px;
    border: 0.5px solid rgba(94, 117, 145, 0.12);
    border-radius: 11px;
    background: rgba(138, 151, 168, 0.12);
    color: #50657d;
    font-size: 13px;
    font-weight: 560;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
    transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.worldbook-empty-btn:active {
    transform: scale(0.975);
    background: rgba(138, 151, 168, 0.18);
    color: #45586f;
}

/* 规则列表卡片（兼容 worldbook-item 与 worldbook-rule-card） */
.worldbook-list { display: flex; flex-direction: column; gap: 9px; }

.worldbook-item,
.worldbook-rule-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 78px;
    background: linear-gradient(180deg, rgba(255,255,255,0.975), rgba(251,253,255,0.955));
    border: 1px solid rgba(15, 23, 42, 0.045);
    border-radius: 16px;
    padding: 12px;
    box-shadow:
        0 6px 14px rgba(31, 41, 55, 0.042),
        0 1px 2px rgba(31, 41, 55, 0.02),
        inset 0 1px 0 rgba(255,255,255,0.9);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.worldbook-item:active,
.worldbook-rule-card:active {
    transform: scale(0.992);
    background: linear-gradient(180deg, rgba(247,250,255,0.975), rgba(245,249,254,0.958));
    box-shadow:
        0 4px 10px rgba(31, 41, 55, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.88);
}

/* ================= 世界书添加规则弹窗 · iOS Sheet 风格 ================= */
.world-rule-modal {
    align-items: flex-end;
}

.world-rule-sheet {
    width: min(92%, 380px);
    border-radius: 24px 24px 20px 20px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.world-rule-header {
    padding: 13px 16px 11px;
    justify-content: center;
    position: relative;
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.05);
    background: rgba(250, 251, 255, 0.9);
}

.world-rule-title {
    font-size: 17px;
    font-weight: 640;
    color: #1f2937;
    letter-spacing: -0.1px;
}

.world-rule-cancel {
    position: absolute;
    left: 14px;
    min-width: 48px;
    text-align: left;
    font-size: 15px;
    font-weight: 520;
    color: #007aff;
    opacity: 0.9;
}

.world-rule-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.world-rule-group { margin-bottom: 0; }

.world-rule-group label {
    font-size: 12px;
    font-weight: 620;
    color: #8792a6;
    text-transform: none;
    margin-bottom: 7px;
    letter-spacing: 0.1px;
}

.world-rule-input,
.world-rule-editor {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: rgba(248, 250, 253, 0.98);
    padding: 13px 14px;
    color: #111827;
    font-size: 15px;
    line-height: 1.55;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.world-rule-input::placeholder,
.world-rule-editor::placeholder { color: #b8c1cf; }

.world-rule-input:focus,
.world-rule-editor:focus {
    border-color: rgba(0, 122, 255, 0.34);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.07);
}

.world-rule-editor {
    min-height: 140px;
    resize: none;
    border-radius: 18px;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
}

.world-rule-tip-card {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.14);
    background: rgba(241, 247, 255, 0.82);
}

.world-rule-tip-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 122, 255, 0.13);
    color: #007aff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.world-rule-tip-text { font-size: 12px; line-height: 1.6; color: #3f5f86; }

.world-rule-save-btn {
    height: 47px;
    margin-top: 6px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.05px;
    background: linear-gradient(180deg, #2f90ff 0%, #007aff 100%);
    box-shadow: 0 8px 15px rgba(0, 122, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.world-rule-save-btn:active { transform: scale(0.988); }

.world-rule-sheet .btn-danger {
    background: rgba(255, 59, 48, 0.05);
    color: #c53a34;
    border: 1px solid rgba(255, 59, 48, 0.16);
    box-shadow: none;
    font-weight: 620;
}

/* 世界书列表内容层级与图标箭头精修 */
.worldbook-rule-card .cell-icon,
.worldbook-item .cell-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    margin-right: 0;
    flex: 0 0 42px;
    align-self: center;
    box-shadow:
        0 6px 14px rgba(31, 41, 55, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.worldbook-rule-card .cell-text-group,
.worldbook-item .cell-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    gap: 4px;
    padding-right: 8px;
}

.worldbook-rule-card .cell-text,
.worldbook-item .cell-text {
    font-size: 16px;
    font-weight: 680;
    color: #111827;
    line-height: 1.32;
    letter-spacing: -0.16px;
}

.worldbook-rule-card .cell-subtext,
.worldbook-item .cell-subtext {
    font-size: 12.5px;
    color: #98a3b4;
    line-height: 1.45;
}

.worldbook-rule-card .cell-arrow,
.worldbook-item .cell-arrow {
    align-self: center;
    margin-left: auto;
    padding-left: 2px;
    font-size: 18px;
    color: #bec8d6;
    transform: translateY(0);
}

/* ================= 小清新设置页微调（更柔和、更通透） ================= */
#app-settings .settings-scroll {
    background:
        radial-gradient(circle at 20% 0%, rgba(190, 220, 255, 0.18), transparent 35%),
        radial-gradient(circle at 95% 25%, rgba(200, 255, 230, 0.14), transparent 30%),
        linear-gradient(180deg, #f1f6ff 0%, #eef4ff 48%, #f2f7f4 100%);
}

#app-settings .settings-header {
    border: 1px solid rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(circle at 20% 0%, rgba(188, 211, 255, 0.28), transparent 38%),
        radial-gradient(circle at 90% 18%, rgba(180, 255, 235, 0.16), transparent 35%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(248, 252, 255, 0.82));
    box-shadow:
        0 16px 36px rgba(31, 41, 55, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

#app-settings .user-avatar {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.12), rgba(7, 193, 96, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow:
        0 12px 24px rgba(31, 41, 55, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

#app-settings .setting-header {
    background: rgba(245, 247, 251, 0.70);
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.035);
    color: #7c879c;
    letter-spacing: 0.55px;
}

#app-settings .setting-cell {
    background: rgba(255, 255, 255, 0.66);
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.035);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    transition:
        background 0.18s ease,
        transform 0.12s ease,
        box-shadow 0.18s ease;
}

#app-settings .setting-cell:hover {
    background: rgba(255, 255, 255, 0.80);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#app-settings .setting-cell:active {
    background: rgba(244, 251, 255, 0.90);
    transform: scale(0.995);
}

#app-settings .cell-icon {
    width: 40px;
    height: 40px;
    border-radius: 18px;
    box-shadow:
        0 8px 16px rgba(31, 41, 55, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

#app-settings .cell-text {
    font-weight: 820;
    color: #0f172a;
}

#app-settings .cell-subtext {
    color: #90a0b9;
}

#app-settings .cell-detail {
    color: #a0adbf;
}

#app-settings .cell-arrow {
    color: #c0c7da;
}

#app-settings .cell-action-btn {
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(33, 182, 150, 0.90) 0%,
        rgba(7, 193, 96, 0.65) 100%
    );
    box-shadow:
        0 10px 18px rgba(20, 184, 166, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* ================= 设置页：冷白极简 iOS（干净不脏）覆盖 ================= */
/* 背景与卡片：去彩雾、减少发灰/发闷 */
#app-settings .settings-scroll {
    background: linear-gradient(180deg, #f6f7fb 0%, #f2f4f8 100%);
}

/* Header/用户卡片：更纯净 */
#app-settings .settings-header {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow:
        0 10px 24px rgba(31, 41, 55, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#app-settings .user-avatar {
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.70);
    box-shadow:
        0 10px 20px rgba(31, 41, 55, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* 分组标题：去字距夸张，更中性 */
#app-settings .setting-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.04);
    color: #7f8a9c;
    letter-spacing: 0.3px;
}

/* 列表卡片：减少玻璃拟态与饱和，让颜色更“干净” */
#app-settings .setting-cell {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(8px) saturate(100%);
    -webkit-backdrop-filter: blur(8px) saturate(100%);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

#app-settings .setting-cell:hover {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#app-settings .setting-cell:active {
    background: rgba(245, 251, 255, 0.96);
    transform: scale(0.995);
}

/* 关闭图标雾面叠加，避免“脏灰” */
#app-settings .cell-icon::before {
    opacity: 0;
}

/* 图标：保留清晰色彩但降低荧光与阴影（不再 filter 灰化） */
#app-settings .cell-icon {
    box-shadow:
        0 8px 16px rgba(31, 41, 55, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    filter: none;
}

#app-settings .cell-icon.blue {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.96) 0%, rgba(0, 85, 212, 0.96) 100%);
    box-shadow: 0 10px 18px rgba(0, 122, 255, 0.14), inset 0 1px 0 rgba(255,255,255,0.45);
}

#app-settings .cell-icon.pink {
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.92) 0%, rgba(230, 14, 64, 0.92) 100%);
    box-shadow: 0 10px 18px rgba(255, 45, 85, 0.12), inset 0 1px 0 rgba(255,255,255,0.45);
}

#app-settings .cell-icon.purple {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.90) 0%, rgba(156, 62, 191, 0.90) 100%);
    box-shadow: 0 10px 18px rgba(175, 82, 222, 0.12), inset 0 1px 0 rgba(255,255,255,0.45);
}

#app-settings .cell-icon.green {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.92) 0%, rgba(34, 182, 68, 0.92) 100%);
    box-shadow: 0 10px 18px rgba(52, 199, 89, 0.12), inset 0 1px 0 rgba(255,255,255,0.45);
}

#app-settings .cell-icon.orange {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.92) 0%, rgba(230, 126, 34, 0.92) 100%);
    box-shadow: 0 10px 18px rgba(255, 149, 0, 0.11), inset 0 1px 0 rgba(255,255,255,0.45);
}

#app-settings .cell-icon.gray {
    background: linear-gradient(135deg, rgba(142, 142, 147, 0.92) 0%, rgba(116, 116, 128, 0.92) 100%);
    box-shadow: 0 10px 18px rgba(120, 134, 156, 0.10), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* 一键清理按钮：系统绿、更稳、不发荧光 */
#app-settings .cell-action-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.88) 100%);
    box-shadow:
        0 12px 20px rgba(16, 185, 129, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* 危险项：别用脏粉底，改浅色中性底 + 清晰红字/边框 */
#app-settings .setting-cell.danger {
    background: rgba(255, 59, 48, 0.06);
    border-bottom-color: rgba(255, 59, 48, 0.12);
}

/* ================= 五子棋 UI 增强：倒计时/胜负动效/重新开始反馈 ================= */

.gomoku-board-wrap {
    position: relative;
    /* 给顶部计时区域一点空间：棋盘整体下移，为30s倒计时进度条腾出空间 */
    margin-top: 8px;
}

/* 计时器（实时） */
.gomoku-timer {
    min-width: 78px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: #111827;
    box-shadow:
        0 10px 22px rgba(31, 41, 55, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    /* JS 会在每秒更新：0~1 */
    --gomoku-progress: 1;
}

.gomoku-timer::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(7, 193, 96, 0.65), rgba(59, 130, 246, 0.55));
    transform-origin: left center;
    transform: scaleX(var(--gomoku-progress));
    transition: transform 0.3s ease;
    pointer-events: none;
}

.gomoku-timer.warning {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, rgba(255, 244, 220, 0.95), rgba(255, 255, 255, 0.75));
    box-shadow:
        0 16px 26px rgba(245, 158, 11, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.gomoku-timer.danger {
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.42);
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.98), rgba(255, 255, 255, 0.75));
    animation: gomokuTimerDangerPulse 0.38s ease-in-out infinite;
}

@keyframes gomokuTimerDangerPulse {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.03); }
    100% { transform: translateY(0) scale(1); }
}

/* 结果遮罩 */
.gomoku-result-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.985);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 5;
    border-radius: 22px;
}

.gomoku-result-overlay.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    animation: gomokuResultOverlayIn 0.28s ease-out both;
}

@keyframes gomokuResultOverlayIn {
    from { opacity: 0; transform: scale(0.985) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.gomoku-result-card {
    width: 100%;
    max-width: 320px;
    border-radius: 22px;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

.gomoku-result-overlay.active .gomoku-result-card {
    transform: translateY(0) scale(1);
    animation: gomokuResultCardPop 0.38s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes gomokuResultCardPop {
    0% { transform: translateY(10px) scale(0.98); opacity: 0.2; }
    60% { transform: translateY(-2px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.gomoku-result-icon {
    font-size: 34px;
    line-height: 1;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.24);
    margin-bottom: 10px;
    box-shadow: 0 12px 24px rgba(31, 41, 55, 0.08);
}

.gomoku-result-title {
    font-size: 18px;
    font-weight: 950;
    color: #0f172a;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.gomoku-result-text {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}

.gomoku-result-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.gomoku-result-btn {
    flex: 1;
    height: 38px;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 10px 20px rgba(31, 41, 55, 0.08);
    background: rgba(255, 255, 255, 0.88);
    color: #1f2937;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.gomoku-result-btn:active {
    transform: scale(0.98);
    opacity: 0.94;
}

.gomoku-result-btn.primary {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(55, 65, 81, 0.98) 100%);
    color: #fff;
    border: none;
    box-shadow:
        0 16px 26px rgba(31, 41, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.gomoku-result-btn:not(.primary) {
    background: rgba(255, 255, 255, 0.86);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.22);
}

.gomoku-result-card.win .gomoku-result-btn:not(.primary) {
    color: #ef4444;
    border-color: rgba(34, 197, 94, 0.20);
}

.gomoku-result-card.lose .gomoku-result-btn.primary {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.98) 0%, rgba(220, 38, 38, 0.98) 100%);
}

.gomoku-result-card.draw .gomoku-result-btn.primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.98) 0%, rgba(59, 130, 246, 0.98) 100%);
}

/* 胜/负/平的色彩与强调 */
.gomoku-result-card.win {
    border-color: rgba(34, 197, 94, 0.25);
}

.gomoku-result-card.lose {
    border-color: rgba(239, 68, 68, 0.25);
}

.gomoku-result-card.draw {
    border-color: rgba(59, 130, 246, 0.22);
}

.gomoku-board-wrap.result-win {
    box-shadow:
        inset 0 0 0 1px rgba(34, 197, 94, 0.22),
        0 24px 70px rgba(34, 197, 94, 0.12);
}

.gomoku-board-wrap.result-lose {
    box-shadow:
        inset 0 0 0 1px rgba(239, 68, 68, 0.22),
        0 24px 70px rgba(239, 68, 68, 0.10);
}

.gomoku-board-wrap.result-draw {
    box-shadow:
        inset 0 0 0 1px rgba(59, 130, 246, 0.18),
        0 24px 70px rgba(59, 130, 246, 0.10);
}

/* 结束按钮（结束对局）更醒目 */
.chat-game-close {
    border: none;
    background: rgba(255, 255, 255, 0.78);
    color: #ef4444;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: transform 0.16s ease, opacity 0.16s ease;
    min-width: 72px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-game-close:active {
    transform: scale(0.97);
    opacity: 0.95;
}

/* 重新开始按钮：胜/负后脉冲提示 */
.gomoku-board-wrap.result-win ~ .chat-game-actions .chat-game-action-btn.primary,
.gomoku-board-wrap.result-lose ~ .chat-game-actions .chat-game-action-btn.primary,
.gomoku-board-wrap.result-draw ~ .chat-game-actions .chat-game-action-btn.primary {
    animation: gomokuRestartHint 1s ease-in-out infinite;
}

@keyframes gomokuRestartHint {
    0% { box-shadow: 0 12px 20px rgba(31, 41, 55, 0.18); transform: translateY(0); }
    50% { box-shadow: 0 18px 30px rgba(31, 41, 55, 0.24); transform: translateY(-1px); }
    100% { box-shadow: 0 12px 20px rgba(31, 41, 55, 0.18); transform: translateY(0); }
}

/* 五子棋特效层 */
.gomoku-effect-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    border-radius: 22px;
}

.gomoku-effect-layer.show {
    opacity: 1;
}

/* confetti */
.gomoku-effect-layer .confetti {
    position: absolute;
    top: -10%;
    width: 8px;
    height: 14px;
    border-radius: 3px;
    transform: translateX(-50%);
    opacity: 0.95;
    will-change: transform, opacity;
    animation-name: gomokuConfettiFall;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes gomokuConfettiFall {
    0% {
        transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(120%) rotate(220deg) scale(0.9);
        opacity: 0;
    }
}

/* sad-particle */
.gomoku-effect-layer .sad-particle {
    position: absolute;
    top: -6%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 30% 30%, rgba(248, 250, 252, 1), rgba(239, 68, 68, 0.55));
    opacity: 0.9;
    will-change: transform, opacity;
    animation-name: gomokuSadFloat;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes gomokuSadFloat {
    0% {
        transform: translateX(-50%) translateY(0) scale(0.9);
        opacity: 0.95;
        filter: blur(0px);
    }
    100% {
        transform: translateX(-50%) translateY(120%) scale(1.1);
        opacity: 0;
        filter: blur(1px);
    }
}

/* draw：轻微闪烁层 */
.gomoku-effect-layer.show.draw {
    background:
        radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.12), transparent 55%),
        radial-gradient(circle at 20% 70%, rgba(59, 130, 246, 0.08), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(7, 193, 96, 0.06), transparent 50%);
    animation: gomokuDrawShimmer 1.6s ease-in-out infinite;
}

@keyframes gomokuDrawShimmer {
    0% { opacity: 0.35; }
    50% { opacity: 0.8; }
    100% { opacity: 0.35; }
}

/* 让胜负棋盘边缘也有轻微“脉冲呼吸” */
.gomoku-board-wrap.result-win,
.gomoku-board-wrap.result-lose,
.gomoku-board-wrap.result-draw {
    animation: gomokuBoardResultBreath 0.9s ease-out both;
}

@keyframes gomokuBoardResultBreath {
    0% { transform: scale(1); }
    30% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

/* 五子棋顶部文案（计时/执黑执白信息） */
.gomoku-topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px;
}

/* 玩家卡片（用于显示执黑/执白与昵称） */
.gomoku-player-card {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 86px;
    position: relative;
}

.gomoku-player-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gomoku-player-copy strong {
    font-size: 12px;
    font-weight: 950;
    color: #111827;
    line-height: 1.1;
}

.gomoku-player-copy span {
    font-size: 11px;
    font-weight: 800;
    color: #8b95a7;
    line-height: 1.1;
}

/* 棋子头像圆点 */
.gomoku-player-piece {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow:
        0 10px 18px rgba(31, 41, 55, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.gomoku-player-piece.black {
    background: radial-gradient(circle at 30% 28%, #6b7280 0%, #111827 45%, #0b1220 100%);
}

.gomoku-player-piece.white {
    background: radial-gradient(circle at 30% 28%, #ffffff 0%, #e5e7eb 55%, #d1d5db 100%);
    border: 1px solid rgba(15, 23, 42, 0.10);
}

/* 计时区域 */
.gomoku-timer-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: -12px;
}

.gomoku-timer-label {
    font-size: 11px;
    font-weight: 900;
    color: #8b95a7;
    line-height: 1;
    min-height: 14px; /* label 可能为空：保留一点高度让 timer 更居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gomoku-timer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
}

.gomoku-timer-piece {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow:
        0 6px 12px rgba(31, 41, 55, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.gomoku-timer-piece.black {
    background: radial-gradient(circle at 30% 28%, #5b6470 0%, #111827 45%, #0b1220 100%);
}

.gomoku-timer-piece.white {
    background: radial-gradient(circle at 30% 28%, #ffffff 0%, #e5e7eb 55%, #d1d5db 100%);
    border: 1px solid rgba(15, 23, 42, 0.10);
}

/* 状态提示（保持原先隐藏，避免挤压底部输入） */
#chatGameStatus { display: none !important; }

/* 兼容：如果某些地方需要“每秒抖动”而非 pulse */
@media (prefers-reduced-motion: reduce) {
    .gomoku-timer.danger,
    .gomoku-board-wrap.result-win ~ .chat-game-actions .chat-game-action-btn.primary,
    .gomoku-board-wrap.result-lose ~ .chat-game-actions .chat-game-action-btn.primary,
    .gomoku-board-wrap.result-draw ~ .chat-game-actions .chat-game-action-btn.primary,
    .gomoku-board-wrap.result-win,
    .gomoku-board-wrap.result-lose,
    .gomoku-board-wrap.result-draw {
        animation: none !important;
    }
}

/* ================= 重新生成回复弹窗 · iOS Sheet Refinement ================= */
#regenerateModal {
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

#regenerateModal .modal-content {
    width: min(92%, 372px);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        0 28px 72px rgba(15, 23, 42, 0.18),
        0 8px 20px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transform: translateY(18px) scale(0.985);
}

#regenerateModal.active .modal-content {
    transform: translateY(0) scale(1);
}

#regenerateModal .modal-header {
    min-height: 60px;
    padding: 14px 16px 13px 18px;
    background: rgba(250, 251, 255, 0.74);
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.055);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

#regenerateModal .modal-title {
    font-size: 17px;
    font-weight: 640;
    letter-spacing: -0.18px;
    color: #111827;
    text-align: left;
}

#regenerateModal .modal-close {
    min-width: 30px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(246, 248, 252, 0.96);
    color: #8b95a7;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.16s ease;
}

#regenerateModal .modal-close:active {
    transform: scale(0.94);
    background: rgba(239, 243, 247, 0.98);
    color: #697385;
    border-color: rgba(148, 163, 184, 0.24);
}

#regenerateModal .modal-body {
    padding: 16px 16px 18px;
}

#regenerateModal .input-group {
    margin-bottom: 0;
}

#regenerateModal .input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 640;
    color: #4b5563;
    letter-spacing: -0.05px;
    text-transform: none;
}

#regenerateModal .regenerate-hint {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.6;
    color: #98a2b3;
}

#regenerateModal textarea#regenerateRequirement {
    min-height: 108px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.95);
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    resize: none;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02);
}

#regenerateModal textarea#regenerateRequirement::placeholder {
    color: #b1bac8;
}

#regenerateModal textarea#regenerateRequirement:focus {
    border-color: rgba(0, 122, 255, 0.34);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.08);
}

#regenerateModal .regenerate-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

#regenerateModal .regenerate-actions .btn-secondary,
#regenerateModal .regenerate-actions .btn-primary {
    width: auto;
    min-width: 0;
    margin-top: 0;
    height: 46px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.12px;
    transition:
        transform 0.16s ease,
        opacity 0.16s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#regenerateModal .regenerate-actions .btn-secondary {
    flex: 0 0 112px;
    padding: 0 18px;
    background: rgba(244, 246, 250, 0.94);
    color: #667085;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 1px 2px rgba(15, 23, 42, 0.03);
}

#regenerateModal .regenerate-actions .btn-secondary:active {
    transform: scale(0.98);
    background: rgba(238, 242, 247, 0.98);
    color: #4b5563;
}

#regenerateModal .regenerate-actions .btn-primary {
    flex: 1;
    padding: 0 18px;
    background: linear-gradient(180deg, #2390ff 0%, #007aff 100%);
    color: #fff;
    border: 1px solid rgba(0, 122, 255, 0.16);
    box-shadow:
        0 14px 24px rgba(0, 122, 255, 0.22),
        0 4px 10px rgba(0, 122, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#regenerateModal .regenerate-actions .btn-primary:active {
    transform: scale(0.985);
    box-shadow:
        0 9px 16px rgba(0, 122, 255, 0.16),
        0 2px 6px rgba(0, 122, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (max-width: 380px) {
    #regenerateModal .modal-content {
        width: min(94%, 352px);
        border-radius: 24px;
    }

    #regenerateModal .modal-header {
        padding: 13px 14px 12px 16px;
    }

    #regenerateModal .modal-body {
        padding: 14px 14px 16px;
    }

    #regenerateModal .regenerate-actions .btn-secondary {
        flex-basis: 104px;
    }
}

/* ================= 启动页 / 开机动画（主屏统一风格） ================= */
.boot-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(160deg, #fffefa 0%, #fbf8f1 48%, #f7f1e8 100%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    overflow: hidden;
}

.boot-splash::before {
    content: none;
    display: none;
}

.boot-splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-splash.hide .boot-title-wrap {
    animation: bootTitleExit 0.46s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.boot-splash-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 24px 10px;
    transform: translateY(-8px);
    text-align: center;
    z-index: 1;
}

.boot-kicker {
    font-size: 8.5px;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: rgba(80, 88, 101, 0.32);
    transform: translateY(-38px);
}

.boot-title-wrap {
    display: inline-flex;
    align-items: last baseline;
    justify-content: center;
    gap: 6px;
    color: #3d4655;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
    opacity: 0;
    transform: translateY(8px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0, 0, 0, 0) 62%);
    mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0, 0, 0, 0) 62%);
    -webkit-mask-size: 240% 100%;
    mask-size: 240% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    animation:
        bootTitleReveal 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both,
        bootTitleBreathe 1.8s ease-in-out 1.55s both;
    will-change: opacity, transform, -webkit-mask-position, mask-position;
}

.boot-brand,
.boot-brand-sub {
    display: inline-block;
    font-weight: 430;
    line-height: 1;
    opacity: 1;
    transform: none;
    filter: none;
}

.boot-brand {
    font-size: clamp(29px, 7vw, 40px);
    letter-spacing: 2.1px;
}

.boot-brand-sub {
    font-size: clamp(16px, 4.1vw, 21px);
    letter-spacing: 0.95px;
    color: rgba(61, 70, 85, 0.80);
}

@keyframes bootTitleReveal {
    0% {
        opacity: 0;
        transform: translateY(8px);
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    28% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

@keyframes bootTitleBreathe {
    0%, 100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    46% {
        opacity: 0.86;
        transform: translateY(0) scale(0.996);
    }
}

@keyframes bootTitleExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(0.992);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

@media (max-width: 420px) {
    .boot-splash-inner { gap: 13px; padding: 0 18px 8px; transform: translateY(-7px); }
    .boot-kicker { font-size: 8px; letter-spacing: 3px; transform: translateY(-34px); }
    .boot-title-wrap { gap: 5px; }
    .boot-brand { font-size: clamp(27px, 7.4vw, 35px); letter-spacing: 1.9px; }
    .boot-brand-sub { font-size: clamp(15px, 4.2vw, 19px); }
}

/* ================= Home UI Final Refine · iOS Native Desktop ================= */
:root {
    --home-bg-air:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.98), transparent 24%),
        radial-gradient(circle at 82% 16%, rgba(205, 223, 255, 0.16), transparent 22%),
        radial-gradient(circle at 50% 72%, rgba(240, 246, 255, 0.30), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(223, 233, 248, 0.18), transparent 34%),
        linear-gradient(165deg, #fdfefe 0%, #f5f8fc 44%, #eef2f8 72%, #eaedf5 100%);
    --home-widget-radius: 24px;
    --home-widget-padding: 13px;
    --home-widget-shadow:
        0 6px 16px rgba(88, 107, 140, 0.06),
        0 1px 4px rgba(88, 107, 140, 0.03);
    --home-widget-border: rgba(255, 255, 255, 0.68);
    --home-icon-size: 56px;
    --home-icon-radius: 14px;
    --home-icon-gap-y: 16px;
    --home-icon-gap-x: 10px;
    --home-label-size: 10px;
    --home-dock-radius: 24px;
    --home-dock-blur: blur(22px) saturate(132%);
    --home-press-scale: 0.96;
    --home-motion-fast: 0.16s cubic-bezier(.2,.8,.2,1);
}

#homeScreen .home-p2 {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#homeScreen .home-p2 .home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0 0;
    gap: 2px;
    position: relative;
}

#homeScreen .home-p2 .home-hero::before {
    content: '';
    position: absolute;
    top: -14px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.34), rgba(255, 248, 242, 0.08) 44%, transparent 72%);
    filter: blur(1px);
    pointer-events: none;
}

#homeScreen .home-p2 .home-date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16px;
    color: rgba(86, 102, 122, 0.66);
}

#homeScreen .home-p2 .home-clock {
    font-size: 50px;
    font-weight: 320;
    line-height: 1;
    letter-spacing: -1.3px;
    color: rgba(23, 37, 58, 0.9);
    text-shadow: 0 10px 24px rgba(88, 107, 140, 0.08);
}

#homeScreen .home-p2 .home-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 4px;
}

#homeScreen .home-p2 .widgets-area {
    margin: 14px 0 16px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    align-items: start;
}

#homeScreen .home-p2 .widget {
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    box-shadow:
        0 10px 22px rgba(88, 107, 140, 0.08),
        0 2px 6px rgba(88, 107, 140, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#homeScreen .home-p2 .widget::before {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.96), transparent 44%),
        radial-gradient(circle at 88% 18%, rgba(197, 221, 255, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 62%);
}

#homeScreen .home-p2 .widgets-area .battery-widget {
    justify-self: start;
    transform: translateX(-12px) translateY(18px) rotate(-1.6deg);
}

#homeScreen .home-p2 .widgets-area .weather-widget {
    justify-self: end;
    transform: translateX(12px) translateY(-18px) rotate(1.6deg);
}

#homeScreen .home-p2 .dock-bar {
    margin-top: 0;
}

#homeScreen .home-bottom {
    position: relative;
    z-index: 4;
    padding-top: 12px;
}

#homeScreen .dock-bar {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto 8px;
    padding: 10px 12px 9px;
    gap: 10px;
    border-radius: 24px;
    transform: translateY(-2px);
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(251, 253, 255, 0.12)),
        rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(124%);
    -webkit-backdrop-filter: blur(16px) saturate(124%);
    box-shadow:
        0 5px 10px rgba(205, 216, 232, 0.05),
        0 1px 3px rgba(205, 216, 232, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.ios-container {
    background: var(--ios-bg, var(--home-bg-air));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(54px + 6px + var(--safe-top)) 18px calc(12px + var(--safe-bottom));
}

.ios-container.phone-mode-small,
.ios-container.phone-mode-medium,
.ios-container.phone-mode-large,
.ios-container.phone-mode-iphone15,
.ios-container.phone-mode-iphone15plus,
.ios-container.phone-mode-custom {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)),
        var(--ios-bg, var(--home-bg-air));
}

.widgets-area {
    margin: 14px 0 22px;
    padding: 0 14px;
    gap: 11px;
}

.widget {
    border-radius: var(--home-widget-radius);
    padding: var(--home-widget-padding);
    border: 1px solid var(--home-widget-border);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(24px) saturate(132%);
    -webkit-backdrop-filter: blur(24px) saturate(132%);
    box-shadow: var(--home-widget-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.widget::before {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.88), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 62%);
}

.battery-widget,
.weather-widget {
    min-height: 146px;
    border-radius: var(--home-widget-radius);
}

.battery-widget {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(244, 251, 246, 0.92)),
        rgba(248, 252, 248, 0.92);
}

.weather-widget {
    background:
        radial-gradient(circle at top right, rgba(188, 213, 247, 0.22), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 245, 255, 0.86)),
        rgba(235, 244, 255, 0.92);
    align-items: stretch;
    justify-content: flex-start;
}

.widget-header {
    font-size: 13px;
    font-weight: 620;
    margin-bottom: 8px;
    color: rgba(78, 96, 121, 0.82);
    letter-spacing: 0.1px;
}

.battery-percent {
    font-size: 19px;
    font-weight: 700;
}

.weather-widget .weather-info {
    margin-top: 8px;
}

.weather-info .location,
.weather-info .condition {
    font-size: 13px;
    color: #62748e;
}

.weather-info .temp {
    font-size: 44px;
    font-weight: 320;
    line-height: 1.02;
    letter-spacing: -1px;
    color: #20324c;
}

.weather-widget .weather-sun {
    opacity: 0.74;
    box-shadow:
        0 0 0 5px rgba(255, 202, 94, 0.09),
        0 6px 14px rgba(255, 183, 76, 0.24);
}

.weather-widget .weather-clouds {
    opacity: 0.58;
}

.app-grid {
    margin-top: 16px;
    padding: 12px 8px 2px;
    gap: var(--home-icon-gap-y) var(--home-icon-gap-x);
    align-content: start;
}

.app-item {
    gap: 6px;
    transition: transform var(--home-motion-fast), box-shadow var(--home-motion-fast), opacity var(--home-motion-fast);
}

.app-icon {
    width: var(--home-icon-size);
    height: var(--home-icon-size);
    border-radius: var(--home-icon-radius);
    box-shadow:
        0 10px 20px rgba(92, 113, 148, 0.12),
        0 2px 6px rgba(92, 113, 148, 0.07),
        0 0 0 3px rgba(255, 255, 255, 0.24);
}

.app-icon::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 44%);
}

.app-label,
.dock-item .app-label {
    font-size: var(--home-label-size);
    font-weight: 560;
    letter-spacing: 0.05px;
    color: #526379;
}

.app-label {
    margin-top: 0;
    min-height: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.app-item:active,
.dock-item:active {
    transform: scale(var(--home-press-scale));
}

.app-item:hover .app-icon,
.dock-item:hover .app-icon {
    transform: translateY(-1px);
    box-shadow:
        0 14px 24px rgba(92, 113, 148, 0.14),
        0 4px 10px rgba(92, 113, 148, 0.08),
        0 0 0 3px rgba(255, 255, 255, 0.28);
}

.dock-bar {
    width: 84%;
    max-width: 318px;
    gap: 30px;
    padding: 13px 22px;
    margin: 6px auto 8px;
    transform: translateY(-5px);
    border-radius: var(--home-dock-radius);
    backdrop-filter: var(--home-dock-blur);
    -webkit-backdrop-filter: var(--home-dock-blur);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(241, 247, 255, 0.24)),
        rgba(244, 248, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        0 10px 20px rgba(88, 107, 140, 0.09),
        0 2px 6px rgba(88, 107, 140, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.dock-item .app-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    box-shadow:
        0 8px 15px rgba(92, 113, 148, 0.09),
        0 0 0 3px rgba(255, 255, 255, 0.18);
}

.home-bar {
    background: rgba(86, 102, 122, 0.18);
}

.widget:hover {
    box-shadow:
        0 14px 30px rgba(88, 107, 140, 0.12),
        0 2px 8px rgba(88, 107, 140, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.app-item,
.widget,
.dock-item {
    animation: homeFadeIn 0.28s ease both;
}

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

/* ================= iOS Page Transition Motion ================= */
.ios-container.home-leaving {
    animation: homeFadeOutToApp 0.12s var(--ease-ios-out) forwards;
}

.ios-container.home-returning {
    animation: homeReturnFromApp 0.16s var(--ease-ios-spring) forwards;
}

.app-view.app-opening {
    animation: appOpenIOS 0.16s var(--ease-ios-out) forwards;
    transform-origin: 50% 88%;
}

.app-view.app-closing {
    animation: appCloseIOS 0.14s var(--ease-ios) forwards;
    transform-origin: 50% 88%;
    pointer-events: none;
}

@keyframes appOpenIOS {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.94) translateY(18px);
        filter: saturate(0.98);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
        filter: saturate(1);
    }
}

@keyframes appCloseIOS {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.97) translateY(22px);
    }
}

@keyframes homeFadeOutToApp {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.985) translateY(8px);
        filter: blur(1px);
    }
}

@keyframes homeReturnFromApp {
    0% {
        opacity: 0;
        transform: scale(0.986) translateY(8px);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* 全屏模式下 app-view 的 opening/closing transform 兼容 */
.ios-container.fullscreen-mode ~ .app-view.app-opening {
    animation: appOpenIOSFullscreen 0.15s var(--ease-ios-out) forwards;
}
.ios-container.fullscreen-mode ~ .app-view.app-closing {
    animation: appCloseIOSFullscreen 0.13s var(--ease-ios) forwards;
}

@keyframes appOpenIOSFullscreen {
    0% { opacity: 0; transform: scale(0.985) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes appCloseIOSFullscreen {
    0% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.992) translateY(10px); }
}

/* ================= Internal App Cream System ================= */
.app-view {
    background: var(--app-page-bg);
}

.app-view::before {
    background: var(--app-page-overlay);
}

#app-wechat,
#app-chat,
#app-messages,
#app-worldbook,
#app-settings,
#app-notes,
#app-music {
    background: var(--app-page-bg);
}

.app-status-bar,
.app-view .status-bar,
.nav-bar {
    background: var(--app-nav-bg);
    border-bottom-color: var(--hairline);
}

.modal-content {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.modal-header {
    background: var(--app-nav-bg);
    border-bottom: 0.5px solid var(--hairline);
}

.modal-title,
.menu-text {
    color: var(--text-primary);
}

.modal-close {
    color: var(--text-secondary);
}

.menu-item {
    border-bottom-color: var(--hairline);
}

.nav-title,
#app-music .song-name,
#app-settings .user-name,
#app-settings .cell-text,
#app-messages .msg-sender,
.worldbook-empty-text,
.worldbook-rule-card .cell-text,
.worldbook-item .cell-text,
.profile-name,
.profile-section-title,
.profile-quick-name,
.moment-content,
.moment-author {
    color: var(--text-primary);
}

#app-wechat .wechat-content,
#app-wechat .wechat-tab,
#app-wechat #tab-chats .chat-list,
#app-chat .chat-messages,
#app-messages .message-list,
#app-worldbook .worldbook-container,
#app-settings .settings-scroll,
#app-notes .notes-container,
#app-notes .note-detail-shell,
.moments-container,
.moments-list,
.user-profile {
    background: transparent;
}

#app-wechat #tab-chats .chat-item,
.contacts-list .chat-item,
#app-messages .msg-thread,
#app-notes .note-card,
.worldbook-empty-card,
.worldbook-item,
.worldbook-rule-card,
.settings-header,
.settings-section,
.profile-header,
.profile-section-card,
.profile-bio-card,
.moment-item,
.chat-media-panel,
.chat-game-panel,
.chat-media-entry-card,
.chat-sticker-library-card,
.chat-upload-card,
.chat-game-hint,
.voice-action-menu-item,
.chat-selection-toolbar {
    background: var(--app-card-bg);
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#app-wechat #tab-chats .chat-item,
.contacts-list .chat-item,
#app-messages .msg-thread,
.moment-item {
    border-radius: 20px;
}

.contacts-list .chat-item {
    margin: 0 10px 8px;
    border-bottom: none;
}

#app-wechat #tab-chats .chat-item .avatar,
.contacts-list .chat-item .avatar,
#app-messages .avatar,
.moment-avatar,
.worldbook-rule-card .cell-icon,
.worldbook-item .cell-icon,
#app-settings .cell-icon,
#app-music .album-cover {
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow:
        0 8px 18px rgba(186, 194, 208, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#app-wechat #tab-chats .chat-name,
#app-messages .msg-sender,
.worldbook-empty-text,
.worldbook-rule-card .cell-text,
.worldbook-item .cell-text,
#app-settings .cell-text,
#app-notes .note-title,
#app-notes .note-detail-title,
.profile-name,
.profile-section-title,
.profile-quick-name,
#app-chat .chat-media-panel-title,
#app-chat .chat-game-panel-title,
#app-chat .chat-media-entry-body strong,
#app-chat .chat-upload-content strong {
    color: var(--text-primary);
}

#app-wechat #tab-chats .chat-preview,
#app-wechat #tab-chats .chat-time,
#app-wechat .tab-item,
#app-wechat .tab-label,
#app-messages .msg-thread .msg-text,
#app-messages .msg-time,
.worldbook-empty-hint,
.worldbook-rule-card .cell-subtext,
.worldbook-item .cell-subtext,
#app-settings .user-sub,
#app-settings .cell-subtext,
#app-settings .cell-detail,
#app-settings .cell-arrow,
#app-notes .note-date,
#app-notes .note-snippet,
#app-notes .note-detail-meta,
.profile-real-name,
.profile-bio,
.profile-quick-desc,
.moment-time,
.moment-action-link,
.chat-media-panel-subtitle,
.chat-media-entry-body small,
.chat-upload-content small,
.chat-game-panel-subtitle,
.chat-game-hint,
.chat-media-coming-soon-title,
.chat-media-coming-soon-text,
.voice-duration,
.voice-status-badge,
.voice-transcript,
#app-music .artist,
#app-music .time-labels span {
    color: var(--text-secondary);
}

.notes-search-bar,
.world-rule-input,
.world-rule-editor,
.input-group input,
.input-group textarea,
.chat-input,
#app-notes .note-detail-body {
    background: var(--app-input-bg);
    border: 1px solid var(--app-card-border);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.notes-search-bar input,
.world-rule-input,
.world-rule-editor,
.input-group input,
.input-group textarea,
.chat-input,
#app-notes .note-detail-body {
    color: var(--text-primary);
}

.notes-search-bar input::placeholder,
.world-rule-input::placeholder,
.world-rule-editor::placeholder,
.input-group input::placeholder,
.input-group textarea::placeholder,
.chat-input::placeholder,
#app-notes .note-detail-body::placeholder {
    color: var(--text-tertiary);
}

.input-group label,
.world-rule-group label,
#app-settings .setting-header,
.profile-bio-label {
    color: var(--text-secondary);
}

.btn-danger,
#app-settings .setting-cell.danger,
.world-rule-sheet .btn-danger,
#app-notes .note-delete-confirm-btn-danger,
#app-notes .note-detail-menu-item-danger,
.chat-selection-btn.danger,
.voice-action-menu-item-danger {
    color: var(--app-danger-text);
}

.btn-danger,
.world-rule-sheet .btn-danger,
#app-notes .note-delete-confirm-btn-danger {
    background: var(--app-danger-bg);
    border-color: rgba(234, 103, 103, 0.16);
}

#app-wechat .wechat-tabbar,
#app-chat .chat-input-bar,
.chat-selection-toolbar,
.voice-action-menu-item-cancel,
#app-notes .note-detail-action,
#app-notes .note-delete-confirm-btn,
#app-notes .note-detail-menu,
#app-notes .note-delete-confirm-card {
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

#app-wechat .wechat-tabbar {
    border-top: 0.5px solid var(--hairline);
}

#app-wechat .tab-item {
    color: var(--text-tertiary);
}

#app-wechat .tab-item.active {
    color: #2b9360;
}

#app-wechat .tab-item.active .tab-icon {
    background: rgba(202, 239, 221, 0.78);
    box-shadow:
        0 4px 10px rgba(95, 171, 127, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#app-chat {
    background: #ededed;
}

#app-chat .chat-messages {
    background: transparent;
}

#app-chat .msg-bubble-ai .msg-text {
    background: var(--app-card-bg);
    color: var(--text-primary);
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#app-chat .msg-content-stack {
    width: fit-content;
    max-width: 76%;
}

#app-chat .msg-bubble-user .msg-content-stack {
    max-width: 82%;
}

#app-chat .msg-content-stack .msg-text {
    width: fit-content;
    max-width: 100%;
}

#app-chat .msg-bubble-user .msg-text {
    background: linear-gradient(135deg, #98e875 0%, #82dc5f 100%);
    color: #172033;
    overflow-wrap: normal;
    word-break: normal;
    word-wrap: normal;
    box-shadow:
        0 8px 18px rgba(74, 163, 92, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

#app-chat .chat-input-bar {
    margin: 0;
}

#app-chat.gomoku-game-active .chat-input-bar {
    display: none;
}

#app-chat.gomoku-game-active .chat-game-panel {
    margin-top: 16px;
}

#app-chat .input-actions {
    border-left-color: var(--hairline);
}

#app-chat .input-btn {
    background: rgba(244, 247, 252, 0.92);
    color: #5d6e87;
}

#app-chat .input-btn.send {
    background: linear-gradient(135deg, #79c69d 0%, #5fb785 100%);
    color: #fff;
}

#app-chat .chat-media-coming-soon {
    background: rgba(255, 255, 255, 0.68);
    border: 1px dashed rgba(204, 212, 224, 0.5);
}

#app-messages {
    display: flex;
    flex-direction: column;
}

#app-messages .message-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 20px;
}

#app-messages .avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex: 0 0 48px;
}

#app-messages .msg-thread {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px;
}

#app-messages .msg-content {
    flex: 1;
    min-width: 0;
}

#app-messages .msg-sender {
    min-height: 18px;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
}

#app-messages .msg-thread .msg-text {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.45;
}

#app-messages .msg-time {
    display: block;
    align-self: flex-start;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
}

#app-worldbook .worldbook-container {
    padding-top: 14px;
}

.world-rule-sheet {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.world-rule-header {
    background: var(--app-nav-bg);
    border-bottom-color: var(--hairline);
}

.world-rule-title,
.world-rule-tip-text {
    color: var(--text-primary);
}

.world-rule-tip-card {
    background: rgba(245, 248, 252, 0.88);
    border: 1px solid var(--app-card-border);
}

#app-settings .settings-scroll {
    background: transparent;
}

#app-settings .settings-header,
#app-settings .settings-section {
    background: var(--app-card-bg);
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#app-settings .setting-header {
    background: rgba(246, 248, 252, 0.92);
    border-bottom: 0.5px solid var(--hairline);
}

#app-settings .setting-cell {
    background: rgba(255, 255, 255, 0.56);
    border-bottom-color: var(--hairline);
}

#app-settings .setting-cell:hover {
    background: rgba(255, 255, 255, 0.76);
}

#app-settings .setting-cell:active {
    background: rgba(247, 249, 253, 0.94);
}

#app-notes .notes-search-bar,
#app-notes .note-detail-action,
#app-notes .note-delete-confirm-btn {
    background: rgba(243, 246, 251, 0.92);
    color: #5b6d86;
}

#app-notes .note-detail-action.is-saved {
    background: rgba(234, 247, 238, 0.96);
    color: rgba(70, 118, 86, 0.96);
}

.moments-container {
    padding-bottom: 12px;
}

.moments-list {
    padding: 12px 12px 4px;
}

.moment-item {
    margin: 0 0 10px;
    padding: 14px;
    border-bottom: none;
}

.moment-author {
    color: #506584;
}

.moment-time {
    color: var(--text-tertiary);
}

.moment-likes,
.moment-comments {
    background: rgba(244, 247, 252, 0.92);
}

.user-profile {
    padding: 16px;
}

#app-music .music-bg {
    background:
        radial-gradient(circle at 50% 18%, rgba(210, 224, 246, 0.42), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(244, 247, 252, 0.16));
}

#app-music .music-content {
    color: var(--text-primary);
}

#app-music .album-cover {
    background: var(--app-card-bg);
    color: var(--text-primary);
}

#app-music .artist {
    color: var(--text-secondary);
}

#app-music .progress-bar {
    background: rgba(225, 231, 240, 0.72);
}

#app-music .progress-fill {
    background: linear-gradient(90deg, rgba(126, 171, 255, 0.96), rgba(108, 196, 177, 0.92));
}

/* 微信“我”页：原生列表式布局 */
#app-wechat #tab-me {
    background: #f5f5f5;
}

#app-wechat #tab-me .user-profile {
    padding: 8px 0 18px;
    gap: 8px;
    background: #f5f5f5;
}

#app-wechat #tab-me .profile-user-row,
#app-wechat #tab-me .profile-native-list {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

#app-wechat #tab-me .profile-user-row {
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
}

#app-wechat #tab-me .profile-user-row:active,
#app-wechat #tab-me .profile-list-row:active {
    background: #ededed;
}

#app-wechat #tab-me .profile-avatar.profile-avatar-large {
    width: 64px;
    height: 64px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-size: 30px;
    flex: 0 0 64px;
}

#app-wechat #tab-me .profile-user-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

#app-wechat #tab-me .profile-name {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    color: #1f1f1f;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-wechat #tab-me .profile-bio {
    margin: 0;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.35;
    color: #888888;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-wechat #tab-me .profile-native-list {
    margin-top: 8px;
    overflow: hidden;
}

#app-wechat #tab-me .profile-list-row {
    min-height: 58px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    border: 0;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    position: relative;
}

#app-wechat #tab-me .profile-list-row::after {
    content: '';
    position: absolute;
    left: 58px;
    right: 0;
    bottom: 0;
    height: 0.5px;
    background: rgba(0, 0, 0, 0.08);
}

#app-wechat #tab-me .profile-list-row:last-child::after {
    display: none;
}

#app-wechat #tab-me .profile-list-icon {
    width: 28px;
    height: 28px;
    border-radius: 0;
    background: transparent;
    color: #5d746d;
    flex: 0 0 28px;
}

#app-wechat #tab-me .profile-list-icon.settings {
    color: #6d7280;
}

#app-wechat #tab-me .profile-list-icon.wallet {
    color: #5d746d;
}

#app-wechat #tab-me .profile-list-icon.mask {
    color: #6f7d95;
    font-size: 13px;
    font-weight: 700;
}

#app-wechat #tab-me .profile-list-icon .ui-line-icon {
    width: 23px;
    height: 23px;
    stroke-width: 1.8;
}

#app-wechat #tab-me .profile-list-text {
    min-width: 0;
    flex: 1;
    display: flex;
    justify-content: center;
}

#app-wechat #tab-me .profile-quick-name {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: #222222;
}

#app-wechat #tab-me .profile-list-arrow {
    color: #c8c8c8;
    font-size: 23px;
    line-height: 1;
    flex: 0 0 auto;
}

#app-music .ctrl-btn {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--app-card-border);
    color: var(--text-primary);
    box-shadow: var(--app-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#app-music .ctrl-btn.play {
    background: linear-gradient(135deg, #87b6ff 0%, #6f9dff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow:
        0 12px 24px rgba(116, 156, 240, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ================= iOS Motion System · Step 1 ================= */
:root {
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
    --ease-ios: cubic-bezier(.22,.61,.36,1);
    --ease-ios-out: cubic-bezier(.16,1,.3,1);
    --ease-ios-spring: cubic-bezier(.2,.9,.2,1.06);
    --press-scale-icon: .94;
    --press-scale-card: .985;
}

.app-item,
.dock-item,
.widget,
button,
.btn-primary,
.btn-danger,
.chat-selection-btn,
.input-btn,
.toggle-switch,
.setting-cell,
.chat-item,
.menu-item,
.moment-item {
    transition:
        transform var(--motion-fast) var(--ease-ios),
        opacity var(--motion-fast) var(--ease-ios),
        box-shadow var(--motion-base) var(--ease-ios),
        background-color var(--motion-base) var(--ease-ios),
        border-color var(--motion-base) var(--ease-ios);
    will-change: transform;
}

.app-item:active,
.dock-item:active,
.input-btn:active,
.chat-selection-btn:active,
.toggle-switch:active,
.setting-cell:active,
.chat-item:active,
.menu-item:active {
    transform: scale(var(--press-scale-icon));
}

.widget:active,
.moment-item:active {
    transform: scale(var(--press-scale-card)) translateY(-1px);
}

.app-icon,
.dock-item .app-icon {
    transition:
        transform var(--motion-fast) var(--ease-ios-out),
        box-shadow var(--motion-base) var(--ease-ios-out),
        filter var(--motion-base) var(--ease-ios-out);
}

.app-item:hover .app-icon,
.dock-item:hover .app-icon {
    transform: translateY(-2px) scale(1.01);
}

.input-group input,
.input-group textarea,
.chat-input,
.comment-input-modal input {
    transition:
        border-color var(--motion-base) var(--ease-ios),
        box-shadow var(--motion-base) var(--ease-ios),
        background-color var(--motion-base) var(--ease-ios);
}

.input-group input:focus,
.input-group textarea:focus,
.chat-input:focus,
.comment-input-modal input:focus {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.10);
}

.modal,
.chat-media-panel,
.comment-input-overlay {
    transition:
        opacity var(--motion-base) var(--ease-ios),
        transform var(--motion-base) var(--ease-ios-out),
        visibility var(--motion-base) var(--ease-ios);
}

@media (prefers-reduced-motion: reduce) {
    .app-item,
    .dock-item,
    .widget,
    .app-icon,
    .dock-item .app-icon,
    .modal,
    .chat-media-panel,
    .comment-input-overlay {
        transition: none !important;
        animation: none !important;
    }
}

/* 底板统一为白色，避免动效过程中露出黑底 */
html,
body {
    background: #fff !important;
}

/* ================= 聊天图片预览与保存 ================= */
.msg-text.msg-image img,
.msg-text.msg-sticker img,
.msg-text.msg-sticker .sticker-image {
    cursor: zoom-in;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.msg-text.msg-image img:active,
.msg-text.msg-sticker img:active,
.msg-text.msg-sticker .sticker-image:active {
    transform: scale(0.98);
    filter: brightness(0.97);
}

.chat-image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.chat-image-preview-modal.active {
    display: flex;
}

.chat-image-preview-shell {
    width: min(100%, 520px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.chat-image-preview-image {
    width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

.chat-image-preview-toolbar {
    display: flex;
    width: 100%;
    justify-content: center;
}

.chat-image-preview-action {
    height: 40px;
    min-width: 136px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #2ecb73 0%, #07c160 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 24px rgba(7, 193, 96, 0.3);
    cursor: pointer;
}

.chat-image-preview-action:active {
    transform: scale(0.97);
}

.chat-image-preview-close {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.chat-image-preview-close:active {
    transform: scale(0.94);
}

/* Cute themed home screen */
#homeScreen {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 42% 18%, rgba(255, 244, 220, 0.18) 0%, rgba(255, 244, 220, 0.08) 28%, transparent 64%),
        radial-gradient(ellipse at 78% 18%, rgba(221, 235, 255, 0.08) 0%, rgba(221, 235, 255, 0.03) 24%, transparent 58%),
        linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(255, 252, 247, 0.84) 46%, rgba(252, 253, 255, 0.72) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        var(--ios-bg, var(--home-bg-air));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#homeScreen::before,
#homeScreen::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
    z-index: 0;
    filter: blur(12px);
}

#homeScreen::before {
    top: 72px;
    left: 32px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 242, 214, 0.10) 0%, rgba(255, 242, 214, 0.04) 38%, transparent 74%);
}

#homeScreen::after {
    right: 18px;
    bottom: 138px;
    width: 168px;
    height: 168px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(225, 236, 255, 0.08) 0%, rgba(225, 236, 255, 0.025) 36%, transparent 70%);
}

#homeScreen .status-bar {
    position: relative;
    z-index: 3;
    background: transparent;
    box-shadow: none;
    color: rgba(43, 55, 74, 0.90);
}

#homeScreen .status-bar-content {
    padding: 0 2px;
}

#homeScreen .status-time,
#homeScreen .status-icons {
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.34);
}

#homeScreen .cute-home {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 12px 6px 0;
}

#homeScreen .home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    padding-top: 13px;
}

#homeScreen .home-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 253, 249, 0.26));
    border: 1px solid rgba(255, 255, 255, 0.52);
    color: rgba(73, 89, 111, 0.88);
    font-size: 14px;
    font-weight: 620;
    letter-spacing: 0.01em;
    backdrop-filter: blur(16px) saturate(128%);
    -webkit-backdrop-filter: blur(16px) saturate(128%);
    box-shadow:
        0 4px 12px rgba(196, 210, 231, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

#homeScreen .home-clock {
    font-size: clamp(72px, 16vw, 92px);
    line-height: 0.88;
    font-weight: 260;
    letter-spacing: -0.052em;
    color: rgba(37, 51, 72, 0.94);
    text-shadow:
        0 7px 14px rgba(203, 214, 232, 0.10),
        0 1px 5px rgba(255, 255, 255, 0.24);
}

#homeScreen .home-weather-card,
#homeScreen .home-wallpaper-card,
#homeScreen .home-memory-card,
#homeScreen .dock-bar {
    border: 1px solid rgba(255, 255, 255, 0.40);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.50), rgba(252, 254, 255, 0.14)),
        rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(19px) saturate(128%);
    -webkit-backdrop-filter: blur(19px) saturate(128%);
    box-shadow:
        0 6px 14px rgba(205, 216, 232, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

#homeScreen .home-weather-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 224px);
    min-height: 68px;
    padding: 9px 14px;
    border-radius: 24px;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(252, 254, 255, 0.08)),
        rgba(246, 249, 253, 0.025);
    backdrop-filter: blur(10px) saturate(108%);
    -webkit-backdrop-filter: blur(10px) saturate(108%);
    box-shadow:
        0 2px 6px rgba(205, 216, 232, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#homeScreen .home-weather-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 28%, rgba(255, 232, 178, 0.018), transparent 9%),
        radial-gradient(circle at 82% 24%, rgba(218, 232, 255, 0.025), transparent 10%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 54%);
    pointer-events: none;
}

#homeScreen .home-weather-card .weather-info {
    position: relative;
    z-index: 1;
    margin-top: 0;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "temp condition"
        "location location";
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    row-gap: 3px;
    flex: 0 1 auto;
    min-width: auto;
}

#homeScreen .home-weather-card .location {
    grid-area: location;
    margin-right: 0;
    text-align: center;
}

#homeScreen .home-weather-card .temp {
    grid-area: temp;
    font-size: 30px;
    font-weight: 640;
    line-height: 1;
    letter-spacing: -0.045em;
    color: rgba(37, 51, 72, 0.90);
    text-shadow: 0 1px 3px rgba(210, 220, 236, 0.05);
    margin-right: 0;
    transform: translateY(0.25px);
}

#homeScreen .home-weather-card .condition {
    grid-area: condition;
    margin-left: 0;
    text-align: left;
}

#homeScreen .home-weather-card .weather-sun {
    width: 13px;
    height: 13px;
    position: relative;
    top: 0;
    left: 0;
    flex: 0 0 auto;
    z-index: 1;
    opacity: 0.66;
    margin-right: 0;
    box-shadow:
        0 0 0 1.5px rgba(255, 220, 126, 0.024),
        0 1px 3px rgba(255, 204, 92, 0.032);
}

#homeScreen .home-weather-card .weather-clouds {
    position: relative;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 20px;
    height: 9px;
    opacity: 0.025;
    margin-left: 5px;
    filter: blur(0.1px);
}

#homeScreen .home-orb,
#homeScreen .home-card-symbol,
#homeScreen .home-card-title,
#homeScreen .home-card-copy {
    display: none;
}

#homeScreen .home-memory-card .battery-circle {
    position: relative;
    width: 96px;
    height: 96px;
    margin-top: 2px;
}

#homeScreen .home-memory-card .battery-circle svg {
    width: 96px;
    height: 96px;
    transform: rotate(-90deg);
}

#homeScreen .home-memory-card .circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.38);
    stroke-width: 2.6;
}

#homeScreen .home-memory-card .circle-progress {
    fill: none;
    stroke: rgba(130, 180, 132, 0.92);
    stroke-width: 2.8;
    stroke-linecap: round;
}

#homeScreen .home-memory-card .battery-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: rgba(63, 86, 57, 0.9);
}

#homeScreen .app-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    column-gap: 12px;
    min-height: 0;
    margin: 0;
    padding: 28px 18px 0;
    z-index: 3;
}

#homeScreen .home-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 5px 8px;
    border-radius: 24px;
    width: 100%;
    max-width: 106px;
    gap: 5px;
    z-index: 3;
    transition:
        transform 0.18s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(253, 254, 255, 0.018));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 2px 5px rgba(205, 216, 232, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

#homeScreen .home-entry-chat,
#homeScreen .home-entry-notes,
#homeScreen .home-entry-worldbook {
    top: auto;
}

#homeScreen .home-entry-notes {
    grid-row: 1;
    grid-column: 1;
    left: auto;
}

#homeScreen .home-entry-chat {
    grid-row: 1;
    grid-column: 2;
    left: auto;
    transform: none;
}

#homeScreen .home-entry-worldbook {
    grid-row: 1;
    grid-column: 3;
    right: auto;
}

#homeScreen .home-entry .app-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(251, 253, 255, 0.04)),
        rgba(255, 255, 255, 0.02);
    box-shadow:
        0 2px 6px rgba(205, 216, 232, 0.03),
        0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

#homeScreen .home-entry .app-icon svg,
#homeScreen .dock-item .app-icon svg {
    width: 34px;
    height: 34px;
    display: block;
    color: rgba(69, 88, 114, 0.96);
}

#homeScreen .home-entry .app-icon .glyph-accent,
#homeScreen .dock-item .app-icon .glyph-accent {
    fill: rgba(255, 206, 116, 0.88);
    stroke: none;
}

#homeScreen .wechat-icon svg {
    color: rgba(92, 125, 144, 0.92);
}

#homeScreen .notes-icon svg {
    color: rgba(89, 106, 132, 0.92);
}

#homeScreen .shijieshu-icon svg {
    color: rgba(85, 102, 128, 0.92);
}

#homeScreen .messages-icon svg,
#homeScreen .settings-icon svg,
#homeScreen .music-icon svg {
    color: rgba(80, 100, 126, 0.92);
}

#homeScreen .music-icon svg {
    width: 20px;
    height: 20px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.05;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#homeScreen .home-entry .app-label {
    width: 100%;
    min-height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 0;
    color: rgba(39, 53, 74, 0.94);
    text-align: center;
    text-shadow: 0 1px 5px rgba(255, 255, 255, 0.22);
}

#homeScreen .home-entry .app-label span {
    font-size: 12px;
    font-weight: 660;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin-bottom: 1px;
}

#homeScreen .home-entry .app-label small {
    font-size: 9px;
    font-weight: 600;
    color: rgba(93, 110, 133, 0.62);
}

#homeScreen .dock-item .app-label {
    color: rgba(57, 72, 94, 0.86);
    font-size: 10px;
    font-weight: 680;
}

#homeScreen .home-bottom {
    position: relative;
    z-index: 4;
    padding-top: 12px;
}

#homeScreen .dock-bar {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto 8px;
    padding: 10px 12px 9px;
    gap: 10px;
    border-radius: 24px;
    transform: translateY(-2px);
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(251, 253, 255, 0.08)),
        rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px) saturate(112%);
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    box-shadow:
        0 1px 4px rgba(205, 216, 232, 0.03),
        0 0.5px 1.5px rgba(205, 216, 232, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

#homeScreen .dock-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.10), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 58%);
    pointer-events: none;
}

#homeScreen .dock-item {
    flex: 1;
    position: relative;
    z-index: 1;
    gap: 6px;
}

#homeScreen .dock-item:hover .app-icon {
    transform: translateY(-1px) scale(1.015);
}

#homeScreen .dock-item .app-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(251, 253, 255, 0.08)),
        rgba(255, 255, 255, 0.03);
    box-shadow:
        0 3px 7px rgba(205, 216, 232, 0.045),
        0 1px 2px rgba(205, 216, 232, 0.025),
        0 0 0 1px rgba(255, 255, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

#homeScreen .home-bar {
    display: none;
}

#homeScreen.phone-mode-small .home-clock {
    font-size: 64px;
}

#homeScreen.phone-mode-small .home-wallpaper-card,
#homeScreen.phone-mode-small .home-memory-card {
    width: 144px;
    min-height: 160px;
    padding: 18px 16px;
}

#homeScreen.phone-mode-small .home-entry-chat,
#homeScreen.phone-mode-small .home-entry-notes,
#homeScreen.phone-mode-small .home-entry-worldbook {
    top: auto;
}

#homeScreen.phone-mode-small .home-entry-notes {
    left: auto;
}

#homeScreen.phone-mode-small .home-entry-chat {
    left: auto;
    right: auto;
}

#homeScreen.phone-mode-small .home-entry-worldbook {
    right: auto;
    bottom: auto;
}

/* ================= Settings SVG Icon System ================= */
#app-settings,
#wallpaperModal,
#appearanceModal,
#storageModal {
    --settings-icon-ink: rgba(76, 94, 118, 0.94);
    --settings-icon-bg-neutral: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 251, 0.92));
    --settings-icon-bg-cool: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 246, 252, 0.93));
    --settings-icon-bg-warm: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 244, 237, 0.94));
    --settings-icon-bg-mist: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 244, 250, 0.94));
    --settings-icon-bg-sage: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 247, 244, 0.94));
    --settings-icon-fill: rgba(252, 246, 236, 0.92);
    --settings-icon-fill-cool: rgba(239, 245, 251, 0.96);
    --settings-icon-accent: rgba(226, 203, 166, 0.78);
    --settings-icon-accent-cool: rgba(204, 219, 236, 0.86);
    --settings-icon-border: rgba(255, 255, 255, 0.9);
    --settings-icon-shadow:
        0 10px 18px rgba(184, 195, 209, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.settings-line-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.settings-line-icon .icon-stroke,
.settings-action-btn-icon .icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-line-icon .icon-fill {
    fill: var(--settings-icon-fill);
}

.settings-line-icon .icon-fill-cool {
    fill: var(--settings-icon-fill-cool);
}

.settings-line-icon .icon-accent {
    fill: var(--settings-icon-accent);
}

.settings-line-icon .icon-accent-cool {
    fill: var(--settings-icon-accent-cool);
}

#app-settings .cell-icon,
#appearanceModal .cell-icon,
#storageModal .storage-clean-chip-icon,
#wallpaperModal .wallpaper-upload-thumb,
#wallpaperModal .wallpaper-remove-thumb {
    position: relative;
    overflow: hidden;
    color: var(--settings-icon-ink);
    border: 1px solid var(--settings-icon-border);
    box-shadow: var(--settings-icon-shadow);
}

#app-settings .cell-icon::before,
#appearanceModal .cell-icon::before,
#storageModal .storage-clean-chip-icon::before,
#wallpaperModal .wallpaper-upload-thumb::before,
#wallpaperModal .wallpaper-remove-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.88), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
}

#app-settings .cell-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 16px;
    color: var(--settings-icon-ink);
}

#app-settings .cell-icon.blue {
    background: var(--settings-icon-bg-cool);
}

#app-settings .cell-icon.pink {
    background: var(--settings-icon-bg-warm);
}

#app-settings .cell-icon.purple {
    background: var(--settings-icon-bg-mist);
}

#app-settings .cell-icon.gray {
    background: var(--settings-icon-bg-neutral);
}

#app-settings .cell-icon.green {
    background: var(--settings-icon-bg-sage);
}

#app-settings .cell-icon.orange {
    background: var(--settings-icon-bg-warm);
}

#app-settings .cell-icon svg {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
}

#appearanceModal .cell-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-right: 12px;
    border-radius: 12px;
    background: var(--settings-icon-bg-neutral);
}

#appearanceModal .cell-icon.blue {
    background: var(--settings-icon-bg-cool);
}

#appearanceModal .cell-icon.green {
    background: var(--settings-icon-bg-sage);
}

#appearanceModal .cell-icon.gray {
    background: var(--settings-icon-bg-neutral);
}

#appearanceModal .cell-icon svg {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
}

#appearanceModal .settings-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: var(--settings-icon-bg-cool);
    color: rgba(82, 99, 122, 0.96);
    box-shadow:
        0 12px 22px rgba(184, 195, 209, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

#appearanceModal .settings-action-btn-secondary {
    background: var(--settings-icon-bg-warm);
}

#appearanceModal .settings-action-btn:active {
    transform: scale(0.985);
}

#appearanceModal .settings-action-btn-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}

#appearanceModal .settings-action-btn-icon svg {
    width: 18px;
    height: 18px;
}

#wallpaperModal .wallpaper-upload-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--settings-icon-bg-cool);
}

#wallpaperModal .wallpaper-remove-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--settings-icon-bg-neutral);
    font: inherit;
}

#wallpaperModal .wallpaper-remove-thumb span {
    position: relative;
    z-index: 1;
    color: rgba(76, 94, 118, 0.86);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

#wallpaperModal .wallpaper-upload-thumb svg,
#wallpaperModal .wallpaper-remove-thumb svg {
    width: 34px;
    height: 34px;
    position: relative;
    z-index: 1;
}

#storageModal .storage-clean-chip-icon {
    font-size: 0;
    background: var(--settings-icon-bg-neutral);
}

#storageModal .storage-clean-chip-icon svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
}

/* ================= WeChat Visual Alignment ================= */
#app-wechat {
    background: #f7f7f7;
}

#app-wechat::before {
    background: none;
}

#app-wechat .status-bar,
#app-wechat .nav-bar {
    background: rgba(247, 247, 247, 0.94);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(18px) saturate(110%);
    -webkit-backdrop-filter: blur(18px) saturate(110%);
    box-shadow: none;
}

#app-wechat .nav-title {
    color: rgba(37, 49, 67, 0.95);
    font-weight: 680;
    letter-spacing: -0.03em;
}

#app-wechat .nav-back,
#app-wechat .nav-action {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #3f4d63;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#app-wechat .nav-back {
    font-size: 28px;
}

#app-wechat .nav-action {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

#app-wechat .wechat-content {
    padding-top: 6px;
}

#app-wechat #tab-chats .chat-list,
#app-wechat #tab-contacts .contacts-list {
    padding: 0 0 18px;
    background: #f7f7f7;
}

#app-wechat #tab-chats .chat-item,
#app-wechat #tab-contacts .chat-item {
    min-height: 76px;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

#app-wechat #tab-chats .chat-item:hover,
#app-wechat #tab-contacts .chat-item:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: none;
}

#app-wechat #tab-chats .chat-item:active,
#app-wechat #tab-contacts .chat-item:active {
    background: #ededed;
    border-color: rgba(0, 0, 0, 0.07);
    transform: none;
}

#app-wechat #tab-chats .chat-item .avatar,
#app-wechat #tab-contacts .chat-item .avatar {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px;
    margin-right: 12px;
    border-radius: 12px !important;
    background-color: #eef2f5;
    border: 0;
    box-shadow: none !important;
}

#app-wechat #tab-chats .chat-info,
#app-wechat #tab-contacts .chat-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

#app-wechat #tab-chats .chat-name,
#app-wechat #tab-contacts .chat-name {
    color: rgba(37, 49, 67, 0.95);
    font-weight: 680;
    letter-spacing: -0.02em;
}

#app-wechat #tab-chats .chat-preview,
#app-wechat #tab-contacts .chat-preview {
    color: rgba(102, 115, 134, 0.9);
}

#app-wechat #tab-contacts .chat-preview {
    font-size: 13px;
}

#app-wechat #tab-chats .chat-preview-text {
    color: inherit;
}

#app-wechat #tab-chats .chat-time {
    color: rgba(148, 163, 184, 0.9);
    font-size: 10px;
    font-weight: 620;
}

#app-wechat #tab-chats .chat-unread-dot {
    background: #fa5151;
    border-color: rgba(255, 255, 255, 0.98);
    box-shadow: none;
}

#app-wechat #tab-chats .chat-preview-prefix {
    gap: 5px;
    max-width: none;
    height: 22px;
    padding: 0 8px 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 4px 10px rgba(148, 163, 184, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: 0.01em;
}

#app-wechat #tab-chats .chat-preview-prefix-icon {
    width: 11px;
    height: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0;
    opacity: 1;
}

#app-wechat #tab-chats .chat-preview-prefix-icon svg {
    width: 11px;
    height: 11px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#app-wechat #tab-chats .chat-preview-prefix-label {
    letter-spacing: 0.01em;
}

#app-wechat #tab-chats .chat-preview-prefix-voice {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(243, 245, 248, 0.92));
    color: rgba(102, 115, 134, 0.92);
}

#app-wechat #tab-chats .chat-preview-prefix-photo {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(243, 245, 248, 0.92));
    color: rgba(102, 115, 134, 0.92);
}

#app-wechat #tab-chats .chat-preview-prefix-sticker,
#app-wechat #tab-chats .chat-preview-prefix-gift {
    background: linear-gradient(180deg, rgba(250, 251, 252, 0.96), rgba(244, 246, 249, 0.92));
    color: rgba(102, 115, 134, 0.92);
}

#app-wechat #tab-chats .chat-preview-prefix-transfer {
    background: linear-gradient(180deg, rgba(250, 251, 252, 0.96), rgba(244, 246, 249, 0.92));
    color: rgba(102, 115, 134, 0.92);
}

#app-wechat .wechat-tabbar {
    height: calc(68px + var(--safe-bottom, 0px));
    padding: 7px 12px calc(8px + var(--safe-bottom, 0px));
    background: rgba(247, 247, 247, 0.96);
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(18px) saturate(110%);
    -webkit-backdrop-filter: blur(18px) saturate(110%);
    box-shadow: none;
}

#app-wechat .tab-item {
    gap: 5px;
    color: #7d8794;
}

#app-wechat .tab-item.active {
    color: #07C160;
}

#app-wechat .tab-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

#app-wechat .tab-item.active .tab-icon {
    background: transparent;
    border: 0;
    box-shadow: none;
}

#app-wechat .tab-icon svg {
    width: 20px;
    height: 20px;
}

#app-wechat .tab-label {
    font-size: 11px;
    font-weight: 560;
    letter-spacing: 0.01em;
}

#app-wechat .tab-item.active .tab-label {
    font-weight: 650;
}

#app-wechat .wechat-empty-state {
    min-height: 420px;
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#app-wechat .contacts-empty-state {
    min-height: 260px;
}

#app-wechat .wechat-empty-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    color: rgba(102, 115, 134, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 8px 16px rgba(148, 163, 184, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

#app-wechat .wechat-empty-icon svg {
    width: 34px;
    height: 34px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#app-wechat .wechat-empty-title {
    font-size: 17px;
    font-weight: 680;
    color: rgba(37, 49, 67, 0.94);
    letter-spacing: -0.02em;
}

#app-wechat .wechat-empty-text {
    max-width: 240px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(102, 115, 134, 0.88);
}

/* WeChat chat list: native-like rows, not floating cards */
#app-wechat #tab-chats {
    background: transparent;
}

#app-wechat #tab-chats .chat-list {
    padding: 2px 0 10px;
    background: transparent;
}

#app-wechat #tab-chats .chat-item {
    min-height: 70px;
    padding: 10px 16px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    transition: background-color 0.14s ease;
}

#app-wechat #tab-chats .chat-item::after {
    content: "";
    position: absolute;
    left: 82px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(31, 41, 55, 0.055);
    transform: scaleY(0.5);
    transform-origin: bottom;
    pointer-events: none;
}

#app-wechat #tab-chats .chat-item:last-child::after {
    content: none;
}

#app-wechat #tab-chats .chat-item:hover {
    background: rgba(255, 255, 255, 0.28);
    border: 0;
    box-shadow: none;
}

#app-wechat #tab-chats .chat-item:active {
    background: rgba(236, 238, 240, 0.52);
    border: 0;
    box-shadow: none;
    transform: none;
}

#app-wechat #tab-chats .chat-item .avatar {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px;
    margin-right: 16px;
    border-radius: 11px !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: rgba(242, 244, 246, 0.9);
}

#app-wechat #tab-chats .chat-info {
    min-width: 0;
    align-self: stretch;
    gap: 5px;
    padding: 1px 0 0;
}

#app-wechat #tab-chats .chat-main-row {
    gap: 10px;
}

#app-wechat #tab-chats .chat-name {
    color: rgba(17, 24, 39, 0.94);
    font-size: 16px;
    font-weight: 540;
    letter-spacing: 0;
}

#app-wechat #tab-chats .chat-preview {
    color: rgba(107, 114, 128, 0.82);
    font-size: 13px;
    font-weight: 400;
}

#app-wechat #tab-chats .chat-time {
    color: rgba(107, 114, 128, 0.58);
    font-size: 11px;
    font-weight: 400;
}

#app-wechat #tab-chats .chat-preview-prefix {
    height: auto;
    padding: 0;
    gap: 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font-size: 12px;
    font-weight: 400;
}

#app-wechat #tab-chats .chat-preview-prefix-voice,
#app-wechat #tab-chats .chat-preview-prefix-photo,
#app-wechat #tab-chats .chat-preview-prefix-sticker,
#app-wechat #tab-chats .chat-preview-prefix-gift,
#app-wechat #tab-chats .chat-preview-prefix-transfer {
    background: transparent;
    color: inherit;
    box-shadow: none;
}

#app-wechat #tab-chats .chat-unread-dot {
    background: #fa5151;
    border: 1.5px solid #fffefd;
    box-shadow: none;
}

#app-wechat #tab-chats .chat-unread-dot.has-count {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: 10px;
}

#app-wechat .wechat-tabbar {
    height: calc(64px + var(--safe-bottom, 0px));
    padding: 5px 8px calc(7px + var(--safe-bottom, 0px));
    background: #f7f7f7;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#app-wechat .tab-item {
    gap: 3px;
    color: rgba(32, 35, 39, 0.78);
    border-radius: 0;
}

#app-wechat .tab-item.active {
    color: #08b96b;
}

#app-wechat .tab-icon {
    width: 29px;
    height: 29px;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#app-wechat .tab-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 1.78;
}

#app-wechat .tab-icon svg path,
#app-wechat .tab-icon svg rect,
#app-wechat .tab-icon svg circle {
    stroke-width: 1.78;
}

#app-wechat .tab-item.active .tab-icon {
    background: transparent;
    border: 0;
    box-shadow: none;
}

#app-wechat .tab-label {
    font-size: 11px;
    font-weight: 380;
    letter-spacing: 0;
    color: currentColor;
}

#app-wechat .tab-item.active .tab-label {
    font-weight: 480;
}

/* WeChat contacts: native continuous list rows */
#app-wechat #tab-contacts {
    background: transparent;
}

#app-wechat #tab-contacts .contacts-list {
    padding: 2px 0 10px;
    background: transparent;
}

#app-wechat #tab-contacts .chat-item {
    min-height: 62px;
    padding: 8px 16px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    transition: background-color 0.14s ease;
}

#app-wechat #tab-contacts .chat-item::after {
    content: "";
    position: absolute;
    left: 74px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(31, 41, 55, 0.055);
    transform: scaleY(0.5);
    transform-origin: bottom;
    pointer-events: none;
}

#app-wechat #tab-contacts .chat-item:last-child::after {
    content: none;
}

#app-wechat #tab-contacts .chat-item:hover {
    background: rgba(255, 255, 255, 0.24);
    border: 0;
    box-shadow: none;
}

#app-wechat #tab-contacts .chat-item:active {
    background: rgba(236, 238, 240, 0.52);
    border: 0;
    box-shadow: none;
    transform: none;
}

#app-wechat #tab-contacts .chat-item .avatar {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    margin-right: 14px;
    border-radius: 8px !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: rgba(242, 244, 246, 0.9);
}

#app-wechat #tab-contacts .chat-info {
    min-width: 0;
    align-self: stretch;
    justify-content: center;
    gap: 3px;
    padding: 1px 0;
}

#app-wechat #tab-contacts .chat-name {
    color: rgba(17, 24, 39, 0.94);
    font-size: 16px;
    font-weight: 430;
    letter-spacing: 0;
    margin-bottom: 0;
}

#app-wechat #tab-contacts .chat-preview {
    color: rgba(107, 114, 128, 0.62);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
}

@media (max-width: 380px) {
    #app-wechat #tab-chats .chat-list {
        padding-left: 0;
        padding-right: 0;
    }

    #app-wechat #tab-chats .chat-item {
        padding: 9px 14px;
        border-radius: 0;
        margin-bottom: 0;
    }

    #app-wechat #tab-chats .chat-item::after {
        left: 78px;
    }

    #app-wechat #tab-chats .chat-item .avatar {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px;
        margin-right: 16px;
    }

    #app-wechat .wechat-tabbar {
        height: calc(62px + var(--safe-bottom, 0px));
        padding-left: 6px;
        padding-right: 6px;
    }

    #app-wechat #tab-contacts .chat-item {
        padding: 8px 14px;
    }

    #app-wechat #tab-contacts .chat-item::after {
        left: 72px;
    }
}

/* WeChat moments: native feed flow, not cards */
#app-wechat #tab-moments {
    background: transparent;
}

#app-wechat #tab-moments .moments-container {
    padding-bottom: 12px;
    background: transparent;
}

#app-wechat #tab-moments .moments-cover {
    height: 250px;
    border-radius: 0;
    box-shadow: none;
}

#app-wechat #tab-moments .moments-cover::after {
    opacity: 1;
    background: linear-gradient(
        180deg,
        rgba(17, 24, 39, 0.02) 0%,
        rgba(17, 24, 39, 0.08) 56%,
        rgba(17, 24, 39, 0.18) 100%
    );
}

#app-wechat #tab-moments .moments-user-info {
    right: 14px;
    bottom: -12px;
    z-index: 2;
}

#app-wechat #tab-moments .moments-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.18);
}

#app-wechat #tab-moments .moments-user-name {
    font-size: 22px;
    font-weight: 540;
    letter-spacing: 0;
    text-shadow: 0 1px 5px rgba(15, 23, 42, 0.34);
}

#app-wechat #tab-moments .moments-list {
    margin-top: 0;
    padding: 28px 0 0;
    background: transparent;
    border-radius: 0;
}

#app-wechat #tab-moments .moments-list::before {
    content: none;
}

#app-wechat #tab-moments .moment-item {
    position: relative;
    display: flex;
    margin: 0;
    padding: 14px 16px 13px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#app-wechat #tab-moments .moment-item::after {
    content: "";
    position: absolute;
    left: 70px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(31, 41, 55, 0.06);
    transform: scaleY(0.5);
    transform-origin: bottom;
    pointer-events: none;
}

#app-wechat #tab-moments .moment-item:last-child::after {
    content: none;
}

#app-wechat #tab-moments .moment-item:first-child {
    padding-top: 14px;
}

#app-wechat #tab-moments .moment-item:active {
    background: transparent;
    transform: none;
}

#app-wechat #tab-moments .moment-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-right: 12px;
    border-radius: 6px;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: rgba(242, 244, 246, 0.9);
}

#app-wechat #tab-moments .moment-body {
    flex: 1;
    min-width: 0;
}

#app-wechat #tab-moments .moment-author {
    margin-bottom: 5px;
    color: #576b95;
    font-size: 15px;
    font-weight: 520;
    letter-spacing: 0;
}

#app-wechat #tab-moments .moment-content {
    margin-bottom: 9px;
    color: rgba(17, 24, 39, 0.94);
    font-size: 15px;
    line-height: 1.48;
}

#app-wechat #tab-moments .moment-images {
    gap: 5px;
    margin-bottom: 9px;
}

#app-wechat #tab-moments .moment-image {
    border-radius: 3px;
}

#app-wechat #tab-moments .moment-footer {
    margin-top: 2px;
}

#app-wechat #tab-moments .moment-time {
    color: rgba(107, 114, 128, 0.64);
    font-size: 12px;
}

#app-wechat #tab-moments .moment-delete-btn {
    color: rgba(107, 114, 128, 0.48);
}

#app-wechat #tab-moments .moment-actions {
    gap: 7px;
}

#app-wechat #tab-moments .moment-action-link {
    min-height: 24px;
    padding: 2px 4px;
    color: #576b95;
    background: transparent;
    border-radius: 4px;
    font-weight: 400;
}

#app-wechat #tab-moments .moment-action-link:hover,
#app-wechat #tab-moments .moment-action-link:active {
    background: rgba(87, 107, 149, 0.08);
}

#app-wechat #tab-moments .moment-likes,
#app-wechat #tab-moments .moment-comments {
    background: rgba(244, 245, 247, 0.96);
    border-radius: 3px;
    box-shadow: none;
}

#app-wechat #tab-moments .moment-likes {
    margin-top: 8px;
    padding: 7px 9px;
}

#app-wechat #tab-moments .moment-comments {
    margin-top: 6px;
}

#app-wechat #tab-moments .moment-likes + .moment-comments {
    margin-top: 0;
    border-radius: 0 0 3px 3px;
}

#app-wechat #tab-moments .moment-comment {
    padding: 6px 9px;
    border-bottom-color: rgba(31, 41, 55, 0.06);
}

#app-wechat #tab-moments .moments-empty {
    margin: 34px 24px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* WeChat moments interaction icons */
#app-wechat #tab-moments .moment-action-symbol {
    width: 15px;
    height: 15px;
    color: currentColor;
    opacity: 0.86;
    font-size: 14px;
    line-height: 15px;
    transform: translateY(-0.5px);
    transition: opacity 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

#app-wechat #tab-moments .moment-action-symbol-like {
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
}

#app-wechat #tab-moments .moment-action-link.is-active {
    color: #df5f67;
}

#app-wechat #tab-moments .moment-action-link.is-active .moment-action-symbol-like {
    opacity: 0.95;
    transform: translateY(-0.5px) scale(1.04);
}

#app-wechat #tab-moments .moment-action-link:active .moment-action-symbol-like {
    transform: translateY(-0.5px) scale(1.14);
}

#app-wechat #tab-moments .moment-action-link-comment {
    min-width: 26px;
}

#app-wechat #tab-moments .moment-action-symbol-comment {
    width: 15px;
    height: 15px;
    transform: none;
    background-color: currentColor;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 6.75h9.5c1.52 0 2.75 1.16 2.75 2.6v3.45c0 1.44-1.23 2.6-2.75 2.6h-5.1l-3.52 2.36c-.43.29-1.01-.01-1.01-.53V15.4c-1.45-.07-2.62-1.2-2.62-2.6V9.35c0-1.44 1.23-2.6 2.75-2.6Z' fill='none' stroke='%23000' stroke-width='1.72' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 6.75h9.5c1.52 0 2.75 1.16 2.75 2.6v3.45c0 1.44-1.23 2.6-2.75 2.6h-5.1l-3.52 2.36c-.43.29-1.01-.01-1.01-.53V15.4c-1.45-.07-2.62-1.2-2.62-2.6V9.35c0-1.44 1.23-2.6 2.75-2.6Z' fill='none' stroke='%23000' stroke-width='1.72' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#app-wechat #tab-moments .moment-action-link:hover .moment-action-symbol,
#app-wechat #tab-moments .moment-action-link:active .moment-action-symbol,
#app-wechat #tab-moments .moment-action-link.is-active .moment-action-symbol {
    opacity: 1;
}

/* ================= 兔兔工具箱：内部入口轻量化 ================= */
/* 仅覆盖内部功能入口；保留外层白色圆角面板、顶部标题区与“收起/重回”按钮结构 */
#app-chat .chat-media-home .chat-media-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    border-radius: 16px;
    background: rgba(255, 252, 246, 0.72);
    border: 0;
    box-shadow: none;
    padding: 8px 4px 6px;
}

#app-chat .chat-media-home .chat-media-entry-card {
    min-height: 76px;
    width: 100%;
    padding: 6px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    text-align: center;
    position: relative;
}

#app-chat .chat-media-home .chat-media-entry-card + .chat-media-entry-card {
    border-top: 0;
}

#app-chat .chat-media-home .chat-media-entry-card.stickers,
#app-chat .chat-media-home .chat-media-entry-card.images,
#app-chat .chat-media-home .chat-media-entry-card.games,
#app-chat .chat-media-home .chat-media-entry-card.gift,
#app-chat .chat-media-home .chat-media-entry-card.transfer {
    background: transparent;
}

#app-chat .chat-media-home .chat-media-entry-card:active {
    transform: scale(0.97);
    background: transparent;
}

#app-chat .chat-media-home .chat-media-entry-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    font-size: 18px;
    background: #6f9bc8;
    box-shadow: 0 4px 10px rgba(80, 116, 154, 0.14);
    color: #ffffff;
}

#app-chat .chat-media-home .chat-media-entry-body {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    gap: 0;
    align-items: center;
}

#app-chat .chat-media-home .chat-media-entry-body strong {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    color: #343a43;
    letter-spacing: 0;
    white-space: nowrap;
}

#app-chat .chat-media-home .chat-media-entry-body small {
    display: none;
}

#app-chat .chat-media-home .chat-media-entry-arrow {
    display: none;
}

/* ================= 兔兔工具箱：边缘与底部衔接精修 ================= */
#app-chat .chat-media-panel {
    border-radius: 24px 24px 18px 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 0.5px solid rgba(226, 232, 240, 0.34);
    box-shadow:
        0 8px 18px rgba(31, 41, 55, 0.035),
        0 1px 3px rgba(31, 41, 55, 0.025);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

#app-chat .chat-media-panel.active {
    margin: 0 8px 2px;
    padding: 12px 12px 9px;
}

#app-chat .chat-media-panel-header {
    margin-bottom: 10px;
}

#app-chat .chat-media-panel-badge {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 4px 10px rgba(148, 163, 184, 0.08);
}

#app-chat .chat-media-close {
    background: rgba(246, 248, 252, 0.66);
    box-shadow: none;
}

#app-chat .chat-media-home .chat-media-entry-grid {
    border-radius: 16px;
    background: rgba(255, 252, 246, 0.74);
    border: 0;
}

#app-chat .chat-media-home .chat-media-entry-card {
    padding: 6px 2px;
}

#app-chat .chat-media-home .chat-media-entry-card + .chat-media-entry-card {
    border-top: 0;
}

#app-chat .chat-media-home .chat-media-entry-card:active {
    background: transparent;
}

#app-chat .chat-media-home .chat-media-entry-icon {
    background: #6f9bc8;
}

#app-chat .chat-media-coming-soon {
    display: none;
}

#app-chat .chat-transfer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 2px 2px;
    border-radius: 0;
    background: transparent;
}

#app-chat .chat-transfer-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    font-weight: 560;
    color: #707783;
}

#app-chat .chat-transfer-field > input {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 0 14px;
    background: rgba(255, 254, 251, 0.96);
    color: #273241;
    font-size: 14px;
    font-weight: 450;
    outline: none;
    box-shadow: none;
}

#app-chat .chat-transfer-field > input::placeholder {
    color: rgba(99, 106, 116, 0.44);
    font-weight: 400;
}

#app-chat .chat-transfer-field > input:focus {
    border-color: rgba(216, 146, 69, 0.46);
    background: #fffdfa;
}

#app-chat .chat-transfer-amount-row {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 56px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: rgba(255, 254, 251, 0.96);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

#app-chat .chat-transfer-field:focus-within .chat-transfer-amount-row {
    border-color: rgba(216, 146, 69, 0.5);
    background: #fffdfa;
}

#app-chat .chat-transfer-amount-row input,
#app-chat .chat-transfer-field .chat-transfer-amount-row input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #273241;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    outline: none;
}

#app-chat .chat-transfer-amount-row input::placeholder {
    color: rgba(39, 50, 65, 0.32);
    font-weight: 500;
}

#app-chat .chat-transfer-amount-row input::-webkit-outer-spin-button,
#app-chat .chat-transfer-amount-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#app-chat .chat-transfer-amount-row input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

#app-chat .chat-transfer-currency {
    flex: 0 0 auto;
    color: #c98842;
    font-size: 22px;
    font-weight: 620;
    line-height: 1;
}

#app-chat .chat-transfer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

#app-chat .chat-transfer-btn {
    height: 48px;
    border: 0;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

#app-chat .chat-transfer-btn.secondary {
    background: rgba(237, 239, 242, 0.92);
    color: #56616f;
}

#app-chat .chat-transfer-btn.primary {
    background: #d9984e;
    color: #fff;
    box-shadow: none;
}

#app-chat .chat-transfer-btn:active {
    filter: brightness(0.97);
}

#app-chat .msg-text.msg-transfer {
    width: 236px;
    max-width: min(236px, 76vw);
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none;
    overflow: hidden;
}

#app-chat .transfer-card {
    display: flex;
    flex-direction: column;
    min-height: 116px;
    background: #d98d3f;
    color: #fff;
}

#app-chat .transfer-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 10px;
}

#app-chat .transfer-card-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
}

#app-chat .transfer-card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
}

#app-chat .transfer-card-main {
    min-width: 0;
}

#app-chat .transfer-card-title {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
}

#app-chat .transfer-card-amount {
    margin-top: 5px;
    font-size: 24px;
    font-weight: 750;
    line-height: 1.1;
}

#app-chat .transfer-card-note {
    margin: -2px 14px 10px 60px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.35;
    word-break: break-word;
}

#app-chat .transfer-card-status {
    margin-top: auto;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.96);
    color: #8a929e;
    font-size: 12px;
    line-height: 1.2;
}

/* ================= WeChat native chat page alignment ================= */
#app-chat,
#app-chat.offline-mode,
#app-wechat,
#app-wechat .wechat-content {
    background: #ededed;
}

#app-chat::before,
#app-wechat::before {
    background: none;
}

#app-chat .app-status-bar,
#app-chat .chat-nav-bar {
    background: #f7f7f7;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#app-chat .app-status-bar {
    z-index: 130;
    flex-shrink: 0;
    border-bottom: 0;
}

#app-chat .chat-nav-bar {
    position: relative;
    z-index: 125;
    height: 56px;
    min-height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 0.5px solid rgba(17, 24, 39, 0.08);
    box-sizing: border-box;
}

#app-chat.offline-mode .nav-bar,
#app-chat.offline-mode .app-status-bar,
#app-chat.offline-mode .app-view .status-bar {
    background: #f7f7f7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#app-chat .chat-nav-bar .nav-title {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: auto;
    z-index: 2;
    width: calc(100% - 184px);
    max-width: 220px;
    height: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    transform: translateX(-50%);
    pointer-events: none;
}

#app-chat .chat-nav-bar .nav-back,
#app-chat .chat-nav-bar .nav-action,
#app-chat .chat-mode-toggle {
    width: 24px;
    min-width: 24px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(37, 49, 67, 0.94);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}

#app-chat .chat-nav-bar .nav-back {
    position: absolute;
    left: 18px;
    top: 0;
    bottom: auto;
    z-index: 2;
    text-align: center;
}

#app-chat .chat-nav-actions {
    position: absolute;
    right: 18px;
    top: 0;
    bottom: auto;
    z-index: 2;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
}

#app-chat .chat-nav-actions .nav-action {
    position: static;
    right: auto;
    top: auto;
    bottom: auto;
}

#app-chat .chat-nav-bar .nav-back:hover,
#app-chat .chat-nav-bar .nav-back:active,
#app-chat .chat-nav-bar .nav-action:hover,
#app-chat .chat-nav-bar .nav-action:active,
#app-chat .chat-mode-toggle:hover,
#app-chat .chat-mode-toggle:active {
    background: transparent;
    transform: none;
}

#app-chat .chat-nav-icon,
#app-chat .chat-mode-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#app-chat .chat-mode-toggle.active {
    color: rgba(37, 49, 67, 0.94);
    background: transparent;
}

#app-chat .chat-mode-status-dot {
    right: 0;
    bottom: 15px;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px #f7f7f7;
}

#app-chat .chat-mode-toggle.active .chat-mode-status-dot {
    background: #07c160;
}

#app-chat .chat-messages {
    padding: 16px 13px calc(112px + var(--safe-bottom, 0px));
    background: transparent;
    gap: 6px;
    scroll-padding-top: 76px;
    scroll-padding-bottom: calc(112px + var(--safe-bottom, 0px));
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    gap: 8px;
    margin-bottom: 9px;
    align-items: flex-start;
}

#app-chat .msg-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#app-chat .msg-avatar-spacer {
    background: transparent !important;
    color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#app-chat .msg-text {
    padding: 9px 12px;
    border-radius: 6px;
    border: 0;
    box-shadow: none;
    color: #111111;
    font-size: 15px;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: break-word;
    text-shadow: none;
}

#app-chat .msg-bubble-ai .msg-text {
    background: #ffffff;
    color: #111111;
    border: 0;
    box-shadow: none;
    border-top-left-radius: 6px;
}

#app-chat .msg-bubble-user .msg-text {
    background: #95ec69;
    color: #111111;
    border: 0;
    box-shadow: none;
    border-top-right-radius: 6px;
}

#app-chat .msg-bubble-user .msg-text::after,
#app-chat .msg-bubble-ai .msg-text::after {
    content: none;
}

#app-chat .msg-quote {
    box-shadow: none;
}

#app-chat .msg-voice {
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: none;
}

#app-chat .msg-bubble-user .msg-voice {
    background: #95ec69;
    border: 0;
    box-shadow: none;
}

#app-chat .msg-voice.playing,
#app-chat .msg-bubble-user .msg-voice.playing {
    box-shadow: none;
}

#app-chat .msg-text.msg-image img,
#app-chat .msg-text.msg-sticker img,
#app-chat .msg-text.msg-sticker .sticker-image,
#app-chat .msg-text.msg-sticker .sticker-pill,
#app-chat .msg-text.msg-transfer {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

#app-chat .msg-text.msg-sticker .sticker-pill {
    background: #ffffff;
}

#app-chat .chat-input-bar {
    margin: 0;
    padding: 9px 10px 20px 10px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    gap: 7px;
    background: #f7f7f7;
    border: 0;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#app-chat .chat-input {
    background: #ffffff;
    color: #111111;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
}

#app-chat .chat-input:focus {
    box-shadow: none;
}

#app-chat .input-actions {
    border-left-color: rgba(0, 0, 0, 0.08);
}

#app-chat .input-btn {
    background: transparent;
    color: #576b95;
    box-shadow: none;
}

#app-chat .input-btn.send {
    background: #07c160;
    color: #ffffff;
    box-shadow: none;
}

#app-chat.offline-mode .input-btn.send {
    background: #07c160;
}

#app-chat .chat-media-panel {
    background: #ffffff;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Settings page: native continuous iOS-style list */
#app-settings .settings-scroll {
    padding: 0;
    background: #f7f7f7;
}

#app-settings .settings-header {
    display: none;
}

#app-settings .settings-section,
#app-settings .settings-native-list {
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#app-settings .setting-header {
    display: none;
}

#app-settings .setting-cell {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 66px;
    padding: 0 18px 0 26px;
    gap: 15px;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition: background-color 0.14s ease;
}

#app-settings .setting-cell::after {
    content: "";
    position: absolute;
    left: 83px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: rgba(60, 60, 67, 0.075);
    transform: scaleY(0.5);
    transform-origin: bottom;
    pointer-events: none;
}

#app-settings .setting-cell:last-of-type::after {
    content: none;
}

#app-settings .setting-cell:hover,
#app-settings .setting-cell:active,
#app-settings .setting-cell.danger:hover,
#app-settings .setting-cell.danger:active {
    background: #f2f2f7;
    box-shadow: none;
    transform: none;
}

#app-settings .cell-icon,
#app-settings .cell-icon.blue,
#app-settings .cell-icon.pink,
#app-settings .cell-icon.purple,
#app-settings .cell-icon.gray,
#app-settings .cell-icon.green,
#app-settings .cell-icon.orange,
#app-settings .cell-icon.red {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    box-shadow: none;
    filter: none;
}

#app-settings .cell-icon::before {
    content: none;
}

#app-settings .cell-icon.blue {
    background: #007aff;
}

#app-settings .cell-icon.purple {
    background: #af52de;
}

#app-settings .cell-icon.green {
    background: #34c759;
}

#app-settings .cell-icon.orange {
    background: #ff7a66;
}

#app-settings .cell-icon.red {
    background: #ff3b30;
}

#app-settings .cell-icon.gray {
    background: #8e8e93;
}

#app-settings .cell-icon svg {
    width: 22px;
    height: 22px;
}

#app-settings .settings-line-icon .icon-stroke {
    stroke: currentColor;
    stroke-width: 1.9;
}

#app-settings .settings-line-icon .icon-fill,
#app-settings .settings-line-icon .icon-fill-cool,
#app-settings .settings-line-icon .icon-accent,
#app-settings .settings-line-icon .icon-accent-cool {
    fill: currentColor;
}

#app-settings .cell-text,
#app-settings .setting-cell.danger .cell-text {
    flex: 1;
    min-width: 0;
    color: #1c1c1e;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.15px;
}

#app-settings .cell-text-group {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 0;
}

#app-settings .cell-subtext,
#app-settings .cell-detail,
#app-settings .cell-action-btn {
    display: none;
}

#app-settings .cell-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: #3c3c43;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.72;
}

#app-settings .setting-cell-storage {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

#app-settings .setting-cell.danger {
    background: #ffffff;
}

#app-settings .setting-cell.danger .cell-text {
    color: #111111;
}

@media (max-width: 380px) {
    #app-settings .setting-cell {
        min-height: 64px;
        padding-left: 24px;
        padding-right: 17px;
        gap: 14px;
    }

    #app-settings .cell-icon,
    #app-settings .cell-icon.blue,
    #app-settings .cell-icon.pink,
    #app-settings .cell-icon.purple,
    #app-settings .cell-icon.gray,
    #app-settings .cell-icon.green,
    #app-settings .cell-icon.orange,
    #app-settings .cell-icon.red {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 8px;
    }

    #app-settings .setting-cell::after {
        left: 76px;
    }

    #app-settings .cell-text,
    #app-settings .setting-cell.danger .cell-text {
        font-size: 16px;
    }

    #app-settings .cell-arrow {
        font-size: 24px;
    }
}

/* ================= Global UI Unification: calm native iOS / WeChat ================= */
:root {
    --ui-bg: #ffffff;
    --ui-bg-soft: #ffffff;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f7f7f8;
    --ui-separator: rgba(60, 60, 67, 0.12);
    --ui-separator-soft: rgba(60, 60, 67, 0.075);
    --ui-text: #1f2a37;
    --ui-text-strong: #111827;
    --ui-text-muted: #7b8794;
    --ui-text-faint: #a3acb8;
    --ui-blue: #2f7dd1;
    --ui-blue-soft: rgba(47, 125, 209, 0.1);
    --ui-green: #2dbb6f;
    --ui-green-soft: rgba(45, 187, 111, 0.12);
    --ui-red: #d65f5f;
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-shadow-light: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ui-shadow-modal: 0 18px 44px rgba(15, 23, 42, 0.14);
    --ios-bg: var(--ui-bg);
    --widget-bg: rgba(255, 255, 255, 0.86);
    --shadow-dark: rgba(15, 23, 42, 0.08);
    --paper-ink: var(--ui-text);
    --ios-blue: var(--ui-blue);
}

html,
body {
    background: var(--ui-bg);
    color: var(--ui-text);
}

.ios-container,
.ios-container.phone-mode-small,
.ios-container.phone-mode-medium,
.ios-container.phone-mode-large,
.ios-container.phone-mode-iphone15,
.ios-container.phone-mode-iphone15plus,
.ios-container.phone-mode-custom,
.app-view {
    background: var(--ui-bg);
    color: var(--ui-text);
}

.ios-container.phone-mode-small,
.ios-container.phone-mode-medium,
.ios-container.phone-mode-large,
.ios-container.phone-mode-iphone15,
.ios-container.phone-mode-iphone15plus,
.ios-container.phone-mode-custom {
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.home-p2,
.cute-home,
.wechat-content,
.settings-scroll,
.notes-content,
.music-content,
.messages-content,
.worldbook-content,
.screen-size-content,
.chat-messages,
#app-chat,
#app-chat.offline-mode,
#app-wechat,
#app-worldbook,
#app-notes,
#app-music,
#app-messages,
#app-screen-size,
#app-settings {
    background: var(--ui-bg) !important;
}

.home-orb,
.home-orb-left,
.home-orb-right,
.weather-sun,
.weather-clouds,
.boot-kicker {
    display: none !important;
}

.status-time,
.nav-title,
.modal-title,
.home-clock,
.chat-name,
.contact-name,
.note-title,
.worldbook-title,
.screen-size-name,
.cell-text,
.chat-media-panel-title,
.gomoku-player-name {
    color: var(--ui-text-strong);
    font-weight: 600;
    letter-spacing: 0;
}

.home-date,
.condition,
.chat-preview,
.chat-time,
.cell-subtext,
.cell-detail,
.screen-size-detail,
.modal-description,
.storage-quick-clean-desc,
.chat-media-panel-subtitle,
.chat-media-section-desc,
.worldbook-empty-text,
.api-preset-description,
.api-preset-tip {
    color: var(--ui-text-muted) !important;
    font-weight: 400;
    letter-spacing: 0;
}

.nav-bar,
.app-status-bar,
.status-bar,
.chat-nav-bar,
#app-chat .chat-nav-bar,
#app-wechat .wechat-tabbar,
.chat-input-bar,
#app-chat .chat-input-bar {
    background: rgba(247, 247, 248, 0.96) !important;
    border-color: var(--ui-separator) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
}

.nav-back,
.nav-action,
.modal-close,
.btn-text-light,
.chat-media-close,
.moment-action-link,
.moment-post-back,
.moment-post-submit,
.api-preset-clear-btn,
.api-preset-delete-btn {
    color: var(--ui-blue) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

button,
.setting-cell,
.chat-item,
.contact-item,
.screen-size-option,
.moment-action-link {
    transition: background-color 0.14s ease, opacity 0.14s ease, transform 0.14s ease;
}

button:active,
.setting-cell:active,
.chat-item:active,
.contact-item:active,
.screen-size-option:active {
    transform: none !important;
    opacity: 0.78;
}

.btn-primary,
.settings-action-btn,
.worldbook-empty-btn,
.world-rule-save-btn,
.chat-media-mini-btn,
.storage-clear-all-btn,
.input-btn.send,
#app-chat .input-btn.send,
.gomoku-result-btn,
.clear-offline-chat-btn-danger {
    background: var(--ui-green) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.btn-danger,
.setting-cell.danger .cell-text,
.chat-selection-btn.danger,
.clear-offline-chat-btn-danger,
#deleteWorldRuleBtn {
    color: var(--ui-red) !important;
}

.btn-danger,
#deleteWorldRuleBtn {
    background: rgba(214, 95, 95, 0.09) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.btn-text-light,
.settings-action-btn-secondary,
.chat-media-close,
.clear-offline-chat-btn-cancel,
.gomoku-result-btn-secondary {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    border: 0 !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
}

.modal {
    background: rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-content,
.world-rule-sheet,
.clear-offline-chat-modal .clear-offline-chat-modal-content {
    background: var(--ui-surface) !important;
    border: 0.5px solid var(--ui-separator) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-modal) !important;
}

.modal-header,
.world-rule-header,
.clear-offline-chat-modal .clear-offline-chat-modal-header {
    background: var(--ui-surface) !important;
    border-bottom: 0.5px solid var(--ui-separator) !important;
    box-shadow: none !important;
}

.modal-body,
.world-rule-body {
    background: var(--ui-surface) !important;
}

input,
textarea,
select,
.chat-input,
#app-chat .chat-input,
.api-preset-save-row input {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 0.5px solid var(--ui-separator) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
    outline: none;
}

input:focus,
textarea:focus,
select:focus,
.chat-input:focus,
#app-chat .chat-input:focus {
    border-color: rgba(47, 125, 209, 0.38) !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 209, 0.08) !important;
}

.settings-section,
.settings-native-list,
.chat-list,
.contacts-list,
.storage-list,
.screen-size-list,
.api-preset-section,
.worldbook-list,
.notes-list {
    background: var(--ui-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.setting-cell,
.chat-item,
.contact-item,
.screen-size-option,
.api-preset-item,
.note-card,
.worldbook-item {
    background: var(--ui-surface) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-color: var(--ui-separator-soft) !important;
}

.setting-cell:hover,
.setting-cell:active,
.chat-item:hover,
.chat-item:active,
.contact-item:hover,
.contact-item:active,
.screen-size-option:active,
.api-preset-item:active,
.note-card:active,
.worldbook-item:active {
    background: #f2f3f5 !important;
    box-shadow: none !important;
}

.cell-icon,
#app-settings .cell-icon,
#app-settings .cell-icon.blue,
#app-settings .cell-icon.pink,
#app-settings .cell-icon.purple,
#app-settings .cell-icon.gray,
#app-settings .cell-icon.green,
#app-settings .cell-icon.orange,
#app-settings .cell-icon.red,
.app-icon,
.menu-icon,
.chat-media-entry-icon,
.chat-upload-icon,
.chat-media-panel-badge,
.chat-game-panel-badge,
.worldbook-empty-icon,
.moment-post-option-icon,
.phone-preview-icon {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    border: 0.5px solid var(--ui-separator) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
    filter: none !important;
}

.wechat-icon,
.home-entry-chat .app-icon,
.tab-item.active .tab-icon,
.cell-icon.green,
#app-settings .cell-icon.green {
    color: var(--ui-green) !important;
    background: var(--ui-green-soft) !important;
}

.settings-icon,
.notes-icon,
.messages-icon,
.music-icon,
.shijieshu-icon,
.cell-icon.blue,
.cell-icon.purple,
.cell-icon.pink,
.cell-icon.orange,
.cell-icon.red,
.cell-icon.gray,
#app-settings .cell-icon.blue,
#app-settings .cell-icon.purple,
#app-settings .cell-icon.pink,
#app-settings .cell-icon.orange,
#app-settings .cell-icon.red,
#app-settings .cell-icon.gray {
    color: var(--ui-text) !important;
    background: var(--ui-surface-muted) !important;
}

.ui-line-icon,
.app-icon svg,
.cell-icon svg,
.tab-icon svg,
.chat-nav-icon,
.settings-line-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-line-icon path,
.ui-line-icon circle,
.ui-line-icon rect,
.app-icon svg path,
.app-icon svg circle,
.app-icon svg rect,
.cell-icon svg path,
.cell-icon svg circle,
.cell-icon svg rect,
.tab-icon svg path,
.tab-icon svg circle,
.tab-icon svg rect {
    stroke: currentColor;
}

.glyph-accent,
.icon-fill,
.icon-fill-cool,
.icon-accent,
.icon-accent-cool {
    fill: currentColor !important;
    stroke: none !important;
}

.home-hero,
.home-weather-card,
.dock-bar,
.widget,
.chat-media-panel,
.chat-media-entry-grid,
.chat-upload-card,
.gomoku-player-card,
.gomoku-result-card,
.worldbook-empty-card,
.world-rule-tip-card,
.storage-quick-clean,
.storage-chart,
.api-preset-section,
.moment-post-image-card {
    background: var(--ui-surface) !important;
    border: 0.5px solid var(--ui-separator) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-light) !important;
}

#app-worldbook .worldbook-empty-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#app-worldbook .worldbook-empty-icon {
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #8A97A8 !important;
}

#app-worldbook .worldbook-empty-icon .ui-line-icon {
    width: 48px !important;
    height: 48px !important;
    stroke-width: 1.35 !important;
}

#app-worldbook .worldbook-empty-text {
    color: #3f4b5d !important;
    font-weight: 580 !important;
}

#app-worldbook .worldbook-empty-hint {
    color: #8A97A8 !important;
}

#app-worldbook .worldbook-empty-btn {
    background: rgba(138, 151, 168, 0.12) !important;
    color: #50657d !important;
    border: 0.5px solid rgba(94, 117, 145, 0.12) !important;
    border-radius: 11px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    font-weight: 560 !important;
}

#app-worldbook .worldbook-empty-btn:active {
    background: rgba(138, 151, 168, 0.18) !important;
    color: #45586f !important;
}

.chat-media-entry-card,
#app-chat .chat-media-home .chat-media-entry-card {
    background: transparent !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

#app-chat .msg-text,
#app-chat .msg-voice {
    border-radius: 7px !important;
    box-shadow: none !important;
}

#app-chat .msg-bubble-user .msg-text,
#app-chat .msg-bubble-user .msg-voice {
    background: #8fe36a !important;
    color: #111111 !important;
}

#app-chat .input-btn.send {
    min-width: 48px !important;
    height: 32px !important;
    padding: 0 11px !important;
    border-radius: 8px !important;
    background: #07C160 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased;
    border: 0 !important;
    box-shadow: none !important;
}

#app-chat .input-btn.send:hover,
#app-chat .input-btn.send:active,
#app-chat.offline-mode .input-btn.send:hover,
#app-chat.offline-mode .input-btn.send:active {
    background: #06B65A !important;
    color: #ffffff !important;
}

#app-chat .msg-bubble-ai .msg-text,
#app-chat .msg-voice,
#app-chat .msg-text.msg-sticker .sticker-pill {
    background: #ffffff !important;
    color: #111111 !important;
}

.avatar,
.msg-avatar,
.moments-user-avatar,
.moment-avatar,
.avatar-preview {
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
}

.home-bar {
    background: rgba(31, 42, 55, 0.34) !important;
    box-shadow: none !important;
}

.boot-splash,
.shutdown-screen {
    background: var(--ui-bg-soft) !important;
}

.home-p2,
.cute-home {
    --home-bg: var(--ui-bg);
    --home-card-bg: var(--ui-surface);
    --home-widget-shadow: var(--ui-shadow-light);
    --app-page-bg: var(--ui-bg);
    --app-card-bg: var(--ui-surface);
    --app-card-shadow: none;
    --app-card-shadow-strong: none;
}

.home-hero::before,
.home-hero::after,
.home-main::before,
.home-main::after,
.dock-bar::before,
.dock-bar::after,
.widget::before,
.widget::after,
.app-icon::before,
.app-icon::after,
.cell-icon::before,
.cell-icon::after,
.chat-media-entry-icon::before,
.chat-media-entry-icon::after,
.chat-upload-icon::before,
.chat-upload-icon::after {
    content: none !important;
    display: none !important;
}

.home-entry,
.dock-item,
.app-item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dock-bar {
    background: rgba(255, 255, 255, 0.82) !important;
}

.weather-widget .temp,
.home-clock {
    color: var(--ui-text-strong) !important;
    text-shadow: none !important;
}

/* Home weather reserved for future Doki pet space */
#homeScreen .home-weather-card {
    display: none !important;
}

#homeScreen .cute-home {
    padding-top: 22px;
}

#homeScreen.hide-status-bar .cute-home {
    padding-top: 0;
}

#homeScreen .home-hero {
    flex: 0 0 auto;
    padding: 14px 0 0 !important;
    gap: 5px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#homeScreen .home-p2 .home-clock {
    font-size: clamp(58px, 15vw, 82px);
    line-height: 0.96;
}

#homeScreen .home-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    padding: clamp(34px, 8vh, 72px) 0 0 !important;
}

#homeScreen .app-grid {
    width: 100%;
    margin: 0 !important;
    padding-top: 0 !important;
}

#homeScreen.phone-mode-small .cute-home {
    padding-top: 14px;
}

#homeScreen.phone-mode-small.hide-status-bar .cute-home {
    padding-top: 0;
}

#homeScreen.phone-mode-small .home-main {
    padding-top: 28px !important;
}

#homeScreen.phone-mode-small .home-p2 .home-clock {
    font-size: 56px;
}

#homeScreen .home-entry-chat .app-icon {
    color: var(--ui-text) !important;
    background: var(--ui-surface-muted) !important;
}

/* Doki MVP */
:root {
    --doki-color: #E6A36F;
    --doki-color-dark: #C88455;
    --doki-color-light: #F2C39A;
}

#app-doki,
#app-doki .doki-app-content {
    background: var(--ui-bg) !important;
}

#homeScreen .home-main {
    position: relative;
    flex-direction: column;
}

#homeScreen .app-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 6px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#homeScreen .home-entry-doki {
    grid-row: 1;
    grid-column: 4;
}

#homeScreen .home-entry-forum {
    grid-row: 2;
    grid-column: 1;
}

#homeScreen .home-entry-doki .app-icon,
#homeScreen .doki-icon,
#homeScreen .home-entry-forum .app-icon,
#homeScreen .forum-icon {
    color: rgba(59, 76, 101, 0.94) !important;
    background: var(--ui-surface-muted) !important;
}

.pet-letter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: currentColor;
    font-size: 14px;
    line-height: 1;
    font-weight: 760;
    letter-spacing: 0;
}

.doki-pixel {
    --pet-size: 44px;
    --pet-color: var(--doki-color);
    --pet-dark: var(--doki-color-dark);
    --pet-light: var(--doki-color-light);
    position: relative;
    width: var(--pet-size);
    height: calc(var(--pet-size) * 0.92);
    display: inline-block;
    color: #2F2A26;
    transform-origin: 50% 86%;
    animation: dokiBreath 3.4s ease-in-out infinite;
}

.doki-frame-image {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.12s ease;
}

.doki-pixel.has-frame .doki-frame-image {
    opacity: 1;
}

.doki-pet-hand-image {
    position: absolute;
    z-index: 4;
    left: 60%;
    top: 2%;
    width: 48%;
    height: auto;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(4deg);
    transform-origin: 24% 88%;
}

.doki-pixel.is-action-pet .doki-pet-hand-image {
    opacity: 1;
}

.doki-eat-mouth {
    display: none;
}

.doki-pixel.has-frame.is-action-pet {
    animation: dokiPetMotion 2.1s ease-in-out;
}

.doki-pixel.has-frame.is-action-pet .doki-pet-hand-image {
    animation: dokiPetImage2HandMotion 2.1s ease-in-out;
}

.doki-pixel.has-frame.is-action-pet::before,
.doki-pixel.has-frame.is-action-pet::after,
.doki-pixel.has-frame.is-action-blink::before,
.doki-pixel.has-frame.is-action-blink::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 42.6%;
    width: 12.5%;
    height: 9.5%;
    border-radius: 50%;
    border-bottom: calc(var(--pet-size) * 0.017) solid rgba(107, 66, 39, 0.86);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.doki-pixel.has-frame.is-action-pet::before,
.doki-pixel.has-frame.is-action-blink::before {
    left: 39.2%;
    background: radial-gradient(ellipse at 50% 58%, rgba(242, 202, 165, 0.97) 0 58%, rgba(242, 202, 165, 0.68) 72%, transparent 100%);
    transform: translate(-50%, -50%) rotate(4deg);
}

.doki-pixel.has-frame.is-action-pet::after,
.doki-pixel.has-frame.is-action-blink::after {
    left: 60.8%;
    background: radial-gradient(ellipse at 50% 58%, rgba(248, 235, 219, 0.97) 0 58%, rgba(248, 235, 219, 0.68) 72%, transparent 100%);
    transform: translate(-50%, -50%) rotate(-4deg);
}

.doki-pixel.has-frame .doki-body,
.doki-pixel.has-frame .doki-leg,
.doki-pixel.has-frame .doki-tail {
    opacity: 0;
}

.doki-pixel-large {
    --pet-size: 124px;
}

.doki-body {
    position: absolute;
    left: 50%;
    bottom: calc(var(--pet-size) * 0.1);
    width: calc(var(--pet-size) * 0.86);
    height: calc(var(--pet-size) * 0.78);
    border-radius: 48% 48% 42% 42%;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.55), transparent 24%),
        radial-gradient(ellipse at 36% 22%, rgba(255, 238, 220, 0.72), transparent 30%),
        radial-gradient(ellipse at 29% 11%, rgba(189, 145, 102, 0.18) 0 4%, transparent 5%),
        radial-gradient(ellipse at 50% 8%, rgba(189, 145, 102, 0.16) 0 3.5%, transparent 4.5%),
        radial-gradient(ellipse at 71% 11%, rgba(189, 145, 102, 0.18) 0 4%, transparent 5%),
        linear-gradient(180deg, var(--pet-light), var(--pet-color) 45%, var(--pet-color)),
        var(--pet-color);
    box-shadow:
        inset 0 -8px 0 rgba(200, 132, 85, 0.12),
        0 12px 22px rgba(155, 116, 82, 0.10);
    transform: translateX(-50%);
}

.doki-body::before,
.doki-body::after {
    content: "";
    position: absolute;
    top: calc(var(--pet-size) * -0.075);
    width: calc(var(--pet-size) * 0.24);
    height: calc(var(--pet-size) * 0.26);
    border-radius: 42% 72% 38% 58%;
    background:
        radial-gradient(circle at 54% 52%, rgba(255, 205, 194, 0.82) 0 28%, transparent 30%),
        linear-gradient(145deg, var(--pet-light), var(--pet-color) 64%);
    box-shadow: inset 0 -2px 0 rgba(200, 132, 85, 0.08);
    transform-origin: 50% 92%;
}

.doki-body::before {
    left: 7%;
    transform: rotate(-23deg);
}

.doki-body::after {
    right: 7%;
    transform: rotate(23deg) scaleX(-1);
}

.doki-eye {
    position: absolute;
    top: 45%;
    width: calc(var(--pet-size) * 0.105);
    height: calc(var(--pet-size) * 0.12);
    border-radius: 999px;
    background:
        radial-gradient(circle at 36% 30%, #fff 0 13%, transparent 15%),
        radial-gradient(circle at 62% 68%, rgba(128, 80, 46, 0.55) 0 20%, transparent 22%),
        #2F241D;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
    transform-origin: center;
    animation: dokiBlink 5.8s ease-in-out infinite;
}

.doki-eye-left { left: 30%; }
.doki-eye-right { right: 30%; }

.doki-cheek {
    position: absolute;
    top: 62%;
    width: calc(var(--pet-size) * 0.16);
    height: calc(var(--pet-size) * 0.07);
    border-radius: 999px;
    background: rgba(255, 150, 140, 0.32);
    filter: blur(0.3px);
}

.doki-cheek-left { left: 16%; }
.doki-cheek-right { right: 16%; }

.doki-nose {
    position: absolute;
    left: 50%;
    top: 57%;
    width: calc(var(--pet-size) * 0.05);
    height: calc(var(--pet-size) * 0.038);
    border-radius: 55% 55% 62% 62%;
    background: #D97D68;
    transform: translateX(-50%);
}

.doki-mouth {
    position: absolute;
    left: 50%;
    top: 63%;
    width: calc(var(--pet-size) * 0.13);
    height: calc(var(--pet-size) * 0.075);
    border-bottom: calc(var(--pet-size) * 0.014) solid rgba(86, 62, 45, 0.72);
    border-radius: 0 0 999px 999px;
    transform: translateX(-50%);
}

.doki-bell {
    position: absolute;
    left: 50%;
    bottom: calc(var(--pet-size) * -0.015);
    width: calc(var(--pet-size) * 0.14);
    height: calc(var(--pet-size) * 0.14);
    border-radius: 999px;
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.55), transparent 24%),
        linear-gradient(180deg, #F7C76D, #C98924);
    box-shadow: 0 2px 4px rgba(128, 86, 28, 0.18);
    transform: translateX(-50%);
}

.doki-bell::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16%;
    width: 34%;
    height: 12%;
    border-radius: 999px;
    background: rgba(85, 58, 24, 0.55);
    transform: translateX(-50%);
}

.doki-whisker {
    position: absolute;
    top: 59%;
    width: calc(var(--pet-size) * 0.2);
    height: calc(var(--pet-size) * 0.11);
    opacity: 0.55;
}

.doki-whisker::before,
.doki-whisker::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(var(--pet-size) * 0.012);
    border-radius: 999px;
    background: rgba(74, 55, 40, 0.66);
}

.doki-whisker::before {
    top: 16%;
    transform: rotate(8deg);
}

.doki-whisker::after {
    top: 62%;
    transform: rotate(-10deg);
}

.doki-whisker-left {
    left: 3%;
}

.doki-whisker-right {
    right: 3%;
    transform: scaleX(-1);
}

.doki-tail {
    position: absolute;
    right: calc(var(--pet-size) * -0.005);
    bottom: calc(var(--pet-size) * 0.19);
    z-index: -1;
    width: calc(var(--pet-size) * 0.31);
    height: calc(var(--pet-size) * 0.49);
    border: calc(var(--pet-size) * 0.095) solid var(--pet-color);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: rotate(26deg);
    box-shadow: inset -4px 0 0 rgba(200, 132, 85, 0.12);
}

.doki-leg {
    position: absolute;
    bottom: calc(var(--pet-size) * 0.02);
    width: calc(var(--pet-size) * 0.21);
    height: calc(var(--pet-size) * 0.13);
    border-radius: 45% 45% 38% 38%;
    background:
        radial-gradient(circle at 36% 62%, rgba(255, 183, 169, 0.65) 0 10%, transparent 12%),
        radial-gradient(circle at 52% 58%, rgba(255, 183, 169, 0.55) 0 8%, transparent 10%),
        radial-gradient(circle at 67% 62%, rgba(255, 183, 169, 0.55) 0 8%, transparent 10%),
        var(--pet-light);
    box-shadow: inset 0 -3px 0 rgba(200, 132, 85, 0.11);
}

.doki-leg-left { left: 24%; }
.doki-leg-right { right: 24%; }

.doki-pixel.is-reacting {
    animation: dokiReact 0.42s ease, dokiBreath 3.4s ease-in-out infinite;
}

@keyframes dokiBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(0.5px) scale(1.012, 0.985); }
}

@keyframes dokiBlink {
    0%, 90%, 100% { transform: scaleY(1); }
    92%, 94% { transform: scaleY(0.12); }
}

@keyframes dokiReact {
    0%, 100% { transform: translateY(0) scale(1); }
    38% { transform: translateY(-2px) scale(1.04, 0.96); }
    70% { transform: translateY(0.5px) scale(0.99, 1.01); }
}

@keyframes dokiPetMotion {
    0%, 100% { transform: translateY(0) scale(1); }
    20% { transform: translateY(0.5px) scale(1.004, 0.998); }
    42% { transform: translateY(-1px) rotate(-0.25deg) scale(0.999, 1.005); }
    66% { transform: translateY(-0.5px) rotate(0.2deg) scale(1.002); }
    84% { transform: translateY(0.25px) scale(1.001); }
}

@keyframes dokiPetImage2HandMotion {
    0%, 100% {
        opacity: 0;
        transform: translate(-22%, -66%) rotate(2deg);
    }
    12%, 88% {
        opacity: 0.98;
    }
    22% {
        transform: translate(-43%, -54%) rotate(1deg);
    }
    44% {
        transform: translate(-52%, -45%) rotate(5deg);
    }
    64% {
        transform: translate(-39%, -50%) rotate(2deg);
    }
    80% {
        transform: translate(-48%, -46%) rotate(4deg);
    }
}

.doki-app-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 22px;
    overflow-y: auto;
}

.doki-adopt-view,
.doki-status-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.doki-status-view[hidden],
.doki-adopt-view[hidden] {
    display: none !important;
}

.doki-stage {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doki-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 118px;
    height: 18px;
    border-radius: 999px;
    background: rgba(206, 174, 139, 0.13);
    filter: blur(0.3px);
    transform: translateX(-50%);
}

.doki-stage .doki-pixel,
.doki-stage .doki-feedback {
    z-index: 1;
}

.doki-stage-adopt {
    min-height: 170px;
}

.doki-adopt-form h2,
.doki-profile h2 {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: 0;
}

.doki-adopt-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doki-field {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border-bottom: 0.5px solid var(--ui-separator-soft);
}

.doki-field span {
    color: var(--ui-text-muted);
    font-size: 13px;
}

.doki-field input,
.doki-field select {
    width: 100%;
    min-height: 34px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    color: var(--ui-text-strong) !important;
    font-size: 15px;
}

.doki-adopt-btn,
.doki-actions button {
    min-height: 38px;
    border: 0.5px solid var(--ui-separator) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 560;
    transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.doki-adopt-btn:active,
.doki-actions button:active {
    transform: scale(0.97);
    background: rgba(255, 247, 239, 0.82) !important;
    border-color: rgba(200, 160, 118, 0.48) !important;
}

.doki-adopt-btn {
    margin-top: 6px;
}

.doki-profile {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.doki-profile p {
    margin: 5px 0 0;
    color: var(--ui-text-muted);
    font-size: 13px;
}

#dokiIntimacyBadge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
    font-size: 12px;
}

.doki-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doki-stat {
    display: grid;
    grid-template-columns: 54px 1fr 34px;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    font-size: 13px;
}

.doki-stat-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ui-surface-muted);
}

.doki-stat-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: rgba(178, 137, 93, 0.74);
    transition: width 0.22s ease;
}

.doki-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.doki-feedback {
    position: absolute;
    left: 50%;
    bottom: 0;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.92);
    color: rgba(92, 78, 63, 0.86);
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    box-shadow: 0 8px 16px rgba(160, 145, 130, 0.10);
}

.doki-feedback.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

#homeScreen.phone-mode-small .app-grid {
    column-gap: 2px;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

@media (max-height: 720px) {
    .doki-stage {
        min-height: 128px;
    }
}

/* Home polish pass: lighter iOS desktop rhythm */
#homeScreen.ios-container {
    background:
        var(--home-wallpaper-bg, linear-gradient(180deg, #fbfbf9 0%, #f6f6f4 48%, #f1f3f5 100%)) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#homeScreen.has-wallpaper .home-p2,
#homeScreen.has-wallpaper .cute-home {
    background: transparent !important;
}

#homeScreen .cute-home {
    padding-top: 18px;
}

#homeScreen .home-hero {
    padding-top: 10px !important;
    gap: 7px !important;
}

#homeScreen .home-date {
    min-height: 28px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.34) !important;
    border: 0.5px solid rgba(83, 100, 124, 0.07) !important;
    color: rgba(80, 96, 118, 0.68) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) saturate(116%);
    -webkit-backdrop-filter: blur(14px) saturate(116%);
}

#homeScreen .home-p2 .home-clock {
    font-weight: 270;
    color: rgba(31, 43, 60, 0.92) !important;
}

#homeScreen .home-main {
    padding-top: clamp(30px, 7.2vh, 62px) !important;
}

#homeScreen .app-grid {
    column-gap: 7px;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

#homeScreen .home-entry {
    gap: 6px;
    padding-top: 4px;
}

#homeScreen .home-entry .app-icon,
#homeScreen .dock-item .app-icon,
#homeScreen .home-entry-chat .app-icon,
#homeScreen .home-entry-doki .app-icon,
#homeScreen .doki-icon {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(250, 252, 255, 0.20)),
        rgba(255, 255, 255, 0.18) !important;
    border: 0.5px solid rgba(58, 75, 101, 0.095) !important;
    color: rgba(59, 76, 101, 0.94) !important;
    box-shadow:
        0 1px 3px rgba(83, 101, 128, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

#homeScreen .home-entry .app-icon svg,
#homeScreen .dock-item .app-icon svg {
    color: rgba(59, 76, 101, 0.94) !important;
    stroke-width: 1.95;
}

#homeScreen .home-entry .app-icon .glyph-accent,
#homeScreen .dock-item .app-icon .glyph-accent {
    fill: rgba(59, 76, 101, 0.82) !important;
}

#homeScreen .home-entry:hover .app-icon,
#homeScreen .dock-item:hover .app-icon {
    box-shadow:
        0 2px 6px rgba(83, 101, 128, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

#homeScreen .dock-bar {
    width: 80%;
    max-width: 302px;
    min-height: 66px;
    gap: 22px;
    padding: 8px 18px !important;
    margin-bottom: 7px;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.50) !important;
    border: 0.5px solid rgba(58, 75, 101, 0.085) !important;
    box-shadow:
        0 3px 9px rgba(83, 101, 128, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

#homeScreen .dock-item .app-icon {
    width: 47px;
    height: 47px;
    border-radius: 12px !important;
}

#homeScreen .home-bar {
    background: rgba(31, 42, 55, 0.22) !important;
}

#homeScreen.phone-mode-small .cute-home {
    padding-top: 13px;
}

#homeScreen.phone-mode-small .home-main {
    padding-top: 24px !important;
}

@media (max-height: 720px) {
    #homeScreen .dock-bar {
        min-height: 62px;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}

@media (min-height: 900px) and (max-aspect-ratio: 3/5) {
    #homeScreen .cute-home {
        padding-bottom: clamp(18px, 3.2vh, 38px);
    }

    #homeScreen .home-bottom {
        transform: translateY(clamp(-40px, -3.2vh, -24px));
    }

    #homeScreen .dock-bar {
        margin-bottom: clamp(10px, 1.8vh, 22px);
    }

}

@media (min-height: 1040px) and (max-aspect-ratio: 3/5) {
    #homeScreen .cute-home {
        padding-bottom: clamp(22px, 3.8vh, 46px);
    }

    #homeScreen .home-bottom {
        transform: translateY(clamp(-54px, -4vh, -36px));
    }

    #homeScreen .dock-bar {
        margin-bottom: clamp(12px, 2vh, 26px);
    }
}

/* Fullscreen status-bar fusion: keep the real iOS status area and app surface continuous. */
#homeScreen.fullscreen-mode.hide-status-bar {
    --status-fusion-bg: #ffffff;
    background:
        var(--status-fusion-bg) !important;
}

#homeScreen.fullscreen-mode.hide-status-bar .cute-home {
    background: var(--status-fusion-bg) !important;
    padding-top: calc(var(--safe-top, 0px) + 8px) !important;
    padding-bottom: calc(16px + var(--safe-bottom, 0px)) !important;
}

#homeScreen.fullscreen-mode.hide-status-bar .home-p2 {
    background: var(--status-fusion-bg) !important;
}

#homeScreen.fullscreen-mode.hide-status-bar .home-bottom {
    padding-bottom: calc(8px + var(--safe-bottom, 0px)) !important;
    transform: translateY(-2px) !important;
}

#homeScreen.fullscreen-mode.hide-status-bar .dock-bar {
    margin-bottom: 6px !important;
}

/* Final toolbox layout override: WeChat-like compact action grid. */
#app-chat .chat-media-home .chat-media-entry-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px 4px 6px !important;
    background: rgba(255, 252, 246, 0.74) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

#app-chat .chat-media-home .chat-media-entry-card {
    min-height: 76px !important;
    padding: 6px 1px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    text-align: center !important;
}

#app-chat .chat-media-home .chat-media-entry-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 50% !important;
    background: #6f9bc8 !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 4px 10px rgba(80, 116, 154, 0.14) !important;
}

#app-chat .chat-media-home .chat-media-entry-icon .ui-line-icon {
    width: 21px;
    height: 21px;
    stroke: currentColor !important;
    fill: none !important;
}

#app-chat .chat-media-home .chat-media-entry-icon .ui-line-icon path,
#app-chat .chat-media-home .chat-media-entry-icon .ui-line-icon circle,
#app-chat .chat-media-home .chat-media-entry-icon .ui-line-icon rect {
    fill: none !important;
    stroke: currentColor !important;
}

#app-chat .chat-media-home .chat-media-entry-body {
    align-items: center !important;
}

#app-chat .chat-media-home .chat-media-entry-body strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #343a43 !important;
    letter-spacing: 0 !important;
}

#app-chat .transfer-card-icon .ui-line-icon {
    color: #ffffff;
    fill: none !important;
    stroke: currentColor !important;
}

#app-chat .transfer-card-icon .ui-line-icon path,
#app-chat .transfer-card-icon .ui-line-icon rect,
#app-chat .transfer-card-icon .ui-line-icon circle {
    fill: none !important;
    stroke: currentColor !important;
}

#app-chat .msg-content-stack:has(.msg-transfer) {
    max-width: min(74vw, 330px);
}

#app-chat .msg-bubble-user .msg-content-stack:has(.msg-transfer) {
    flex-shrink: 0;
}

#app-chat .msg-text.msg-transfer {
    position: relative !important;
    width: clamp(300px, 70vw, 330px) !important;
    max-width: calc(100vw - 92px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#app-chat .msg-text.msg-transfer::after {
    content: '' !important;
    position: absolute;
    top: 26px;
    width: 0;
    height: 0;
    display: block;
}

#app-chat .msg-bubble-user .msg-text.msg-transfer::after {
    right: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid #fa9d3b;
}

#app-chat .msg-bubble-ai .msg-text.msg-transfer::after {
    left: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #fa9d3b;
}

#app-chat .msg-bubble-user .msg-text.msg-transfer.is-received::after,
#app-chat .msg-bubble-ai .msg-text.msg-transfer.is-received::after {
    border-left-color: #f9d8af;
    border-right-color: #f9d8af;
}

#app-chat .msg-bubble-user .msg-text.msg-transfer.is-refunded::after,
#app-chat .msg-bubble-ai .msg-text.msg-transfer.is-refunded::after {
    border-left-color: #d7c8b8;
    border-right-color: #d7c8b8;
}

#app-chat .transfer-card {
    height: 92px !important;
    min-height: 92px !important;
    border-radius: 7px !important;
    background: #fa9d3b !important;
    color: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    appearance: none !important;
    cursor: pointer !important;
}

#app-chat .transfer-card.received {
    background: rgba(250, 157, 59, 0.48) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

#app-chat .transfer-card.refunded {
    background: #d7c8b8 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#app-chat .transfer-card:disabled {
    cursor: default !important;
}

#app-chat .transfer-card-body {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    height: 66px !important;
    padding: 11px 15px 0 !important;
}

#app-chat .transfer-card-icon {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#app-chat .transfer-card-icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 2.35 !important;
}

#app-chat .transfer-card-icon .transfer-arrow-icon {
    width: 34px !important;
    height: 34px !important;
    fill: #fff !important;
    stroke: none !important;
}

#app-chat .transfer-card-icon .transfer-arrow-icon path {
    fill: #fff !important;
    stroke: none !important;
}

#app-chat .transfer-card-main {
    min-width: 0 !important;
}

#app-chat .transfer-card-amount {
    margin: 0 !important;
    font-size: 25px !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
}

#app-chat .transfer-card-amount.compact {
    font-size: 23px !important;
}

#app-chat .transfer-card-desc {
    margin-top: 4px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#app-chat .transfer-card-footer {
    height: 26px !important;
    padding: 2px 20px 8px !important;
    border-top: 0 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

#app-chat .transfer-card.received .transfer-card-icon {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.88) !important;
}

#app-chat .transfer-card.received .transfer-card-desc,
#app-chat .transfer-card.received .transfer-card-footer {
    color: rgba(255, 255, 255, 0.76) !important;
}

#app-chat .transfer-card.refunded .transfer-card-desc,
#app-chat .transfer-card.refunded .transfer-card-footer {
    color: rgba(255, 255, 255, 0.78) !important;
}

#app-chat .transfer-action-overlay {
    position: absolute;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

#app-chat .transfer-action-overlay.active {
    display: flex;
}

#app-chat .transfer-action-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
}

#app-chat .transfer-action-sheet {
    position: relative;
    width: calc(100% - 20px);
    max-width: 390px;
    margin: 0 10px max(10px, env(safe-area-inset-bottom));
    padding: 18px 16px 12px;
    border-radius: 8px;
    background: #fff;
    color: #1f2733;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.18);
}

#app-chat .transfer-action-meta {
    font-size: 14px;
    line-height: 1.35;
    color: #6f7782;
    text-align: center;
}

#app-chat .transfer-action-amount {
    margin-top: 8px;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    color: #121820;
}

#app-chat .transfer-action-note {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.35;
    color: #717986;
    text-align: center;
    overflow-wrap: anywhere;
}

#app-chat .transfer-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

#app-chat .transfer-action-btn,
#app-chat .transfer-action-cancel {
    height: 44px;
    border: 0;
    border-radius: 7px;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}

#app-chat .transfer-action-btn.primary {
    background: #07c160;
    color: #fff;
}

#app-chat .transfer-action-btn.danger {
    background: #f2f3f5;
    color: #d54941;
}

#app-chat .transfer-action-cancel {
    width: 100%;
    margin-top: 10px;
    background: #f6f7f9;
    color: #2a313b;
}

#app-chat .msg-content-stack:has(.msg-gift) {
    max-width: min(62vw, 245px);
}

#app-chat .msg-content-stack:has(.msg-love-letter-reply) {
    max-width: min(72vw, 330px);
}

#app-chat .msg-bubble-user .msg-content-stack:has(.msg-gift) {
    flex-shrink: 0;
}

#app-chat .msg-text.msg-gift {
    position: relative !important;
    width: clamp(230px, 52vw, 245px) !important;
    max-width: calc(100vw - 118px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    color: #4f3d31 !important;
}

#app-chat .msg-text.msg-gift::after {
    content: '' !important;
    position: absolute;
    top: 24px;
    width: 0;
    height: 0;
    display: block;
}

#app-chat .msg-bubble-user .msg-text.msg-gift::after {
    right: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #f8ead8;
}

#app-chat .msg-bubble-ai .msg-text.msg-gift::after {
    left: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #f8ead8;
}

#app-chat .msg-bubble-user .msg-text.msg-gift:has(.love-letter-gift-card)::after {
    border-left-color: #FFF2F6;
}

#app-chat .msg-bubble-ai .msg-text.msg-gift:has(.love-letter-gift-card)::after {
    border-right-color: #FFF2F6;
}

#app-chat .gift-message-card {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    height: 96px !important;
    min-height: 86px !important;
    max-height: 108px !important;
    padding: 13px 14px !important;
    border-radius: 10px !important;
    background: #f8ead8 !important;
    border: 1px solid rgba(210, 150, 90, 0.25) !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#app-chat .gift-message-card.love-letter-gift-card {
    position: relative !important;
    width: 100% !important;
    height: 96px !important;
    min-height: 92px !important;
    max-height: 108px !important;
    padding: 13px 14px !important;
    gap: 11px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #FFDDE8 0%, #FFE7EF 48%, #FFF2F6 100%) !important;
    border: 1px solid rgba(235, 130, 160, 0.28) !important;
    box-shadow: 0 5px 14px rgba(202, 91, 124, 0.045) !important;
    overflow: hidden !important;
    scroll-margin-top: 76px !important;
}

#app-chat .gift-message-card.vibrator-gift-card {
    background: linear-gradient(145deg, #FFFBFD 0%, #F9EEF6 58%, #F7EAF4 100%) !important;
    border: 1px solid rgba(190, 130, 170, 0.22) !important;
    color: #5A4654 !important;
}

#app-chat .gift-message-card.lingerie-gift-card {
    background: linear-gradient(145deg, #FFF0F5 0%, #FBE8F0 64%, #FFF8FB 100%) !important;
    border: 1px solid rgba(210, 120, 155, 0.24) !important;
    color: #5A4654 !important;
}

#app-chat .gift-message-card.vibrator-gift-card .gift-message-icon {
    background: rgba(255, 250, 253, 0.88) !important;
    border: 1px solid rgba(190, 130, 170, 0.18) !important;
}

#app-chat .gift-message-card.lingerie-gift-card .gift-message-icon {
    background: rgba(255, 246, 250, 0.92) !important;
    border: 1px solid rgba(210, 120, 155, 0.2) !important;
}

#app-chat .gift-message-card.vibrator-gift-card .gift-message-name {
    color: #5A4654 !important;
}

#app-chat .gift-message-card.lingerie-gift-card .gift-message-name {
    color: #5A4654 !important;
}

#app-chat .gift-message-card.vibrator-gift-card .gift-message-label {
    color: rgba(90, 70, 84, 0.62) !important;
}

#app-chat .gift-message-card.lingerie-gift-card .gift-message-label {
    color: rgba(90, 70, 84, 0.62) !important;
}

#app-chat .gift-message-card.vibrator-gift-card .gift-message-desc {
    color: rgba(90, 70, 84, 0.44) !important;
}

#app-chat .gift-message-card.lingerie-gift-card .gift-message-desc {
    color: rgba(90, 70, 84, 0.46) !important;
}

#app-chat .gift-message-card.love-letter-gift-card::before {
    content: '' !important;
    position: absolute !important;
    right: 14px !important;
    top: 13px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(216, 108, 141, 0.16) !important;
    box-shadow: -18px 32px 0 rgba(232, 138, 166, 0.12) !important;
    pointer-events: none !important;
}

#app-chat .gift-message-card.love-letter-gift-card::after {
    content: '♡' !important;
    position: absolute !important;
    right: 28px !important;
    top: 19px !important;
    color: rgba(217, 108, 141, 0.18) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

#app-chat .gift-message-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

#app-chat .love-letter-gift-card .gift-message-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border-radius: 12px !important;
    background: rgba(255, 250, 252, 0.84) !important;
    border: 1px solid rgba(235, 130, 160, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#app-chat .gift-message-letter-icon {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    overflow: visible !important;
}

#app-chat .gift-message-letter-icon .letter-paper {
    fill: #FFF7F9 !important;
    stroke: rgba(184, 106, 128, 0.58) !important;
    stroke-width: 1.35 !important;
}

#app-chat .gift-message-letter-icon .letter-paper-line {
    fill: none !important;
    stroke: rgba(184, 106, 128, 0.34) !important;
    stroke-width: 1.45 !important;
    stroke-linecap: round !important;
}

#app-chat .gift-message-letter-icon .letter-envelope {
    fill: #FFDDE8 !important;
    stroke: rgba(184, 106, 128, 0.7) !important;
    stroke-width: 1.45 !important;
}

#app-chat .gift-message-letter-icon .letter-flap,
#app-chat .gift-message-letter-icon .letter-fold {
    fill: none !important;
    stroke: rgba(184, 106, 128, 0.72) !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#app-chat .gift-message-letter-icon .letter-ribbon {
    fill: none !important;
    stroke: rgba(217, 108, 141, 0.62) !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
}

#app-chat .gift-message-letter-icon .letter-heart {
    fill: #E88AA6 !important;
    stroke: #B86A80 !important;
    stroke-width: 1.1 !important;
    stroke-linejoin: round !important;
}

#app-chat .gift-message-image {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
}

#app-chat .gift-message-fallback {
    color: #a66d3f !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

#app-chat .gift-message-main {
    min-width: 0 !important;
    flex: 1 !important;
}

#app-chat .love-letter-gift-card .gift-message-main {
    position: relative !important;
    z-index: 1 !important;
}

#app-chat .gift-message-label {
    margin: 3px 0 0 !important;
    color: rgba(91, 74, 62, 0.66) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#app-chat .love-letter-gift-card .gift-message-label {
    margin-top: 5px !important;
    color: rgba(118, 73, 86, 0.62) !important;
    font-size: 12.5px !important;
}

#app-chat .gift-message-name {
    margin: 0 !important;
    color: #4f3d31 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#app-chat .love-letter-gift-card .gift-message-name {
    color: #633946 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
}

#app-chat .gift-message-desc {
    margin: 4px 0 0 !important;
    color: rgba(91, 74, 62, 0.48) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#app-chat .love-letter-gift-card .gift-message-desc {
    color: rgba(118, 73, 86, 0.42) !important;
    font-size: 12px !important;
}

#app-chat .msg-text.msg-love-letter-reply {
    width: min(72vw, 330px) !important;
    max-width: calc(100vw - 138px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4B3F42 !important;
    overflow: visible !important;
}

#app-chat .love-letter-reply-card {
    position: relative !important;
    padding: 18px 20px 20px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 34%),
        linear-gradient(145deg, #FFFDFB 0%, #FFFBFB 48%, #FFF9F9 100%) !important;
    border: 1px solid rgba(230, 150, 170, 0.07) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 1px 0 rgba(255, 255, 255, 0.46) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    scroll-margin-top: 76px !important;
}

#app-chat .love-letter-reply-card::after {
    content: none !important;
}

#app-chat .love-letter-reply-card::before {
    content: none !important;
}

#app-chat .love-letter-reply-title {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #65555a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

#app-chat .love-letter-reply-title::before {
    content: '✉' !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: rgba(150, 96, 108, 0.42) !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

#app-chat .love-letter-reply-rule {
    position: relative !important;
    z-index: 2 !important;
    width: 36px !important;
    max-width: 36px !important;
    height: 1px !important;
    margin: 7px 0 13px !important;
    background: rgba(230, 150, 170, 0.12) !important;
}

#app-chat .love-letter-reply-body {
    position: relative !important;
    z-index: 2 !important;
    max-width: 94% !important;
    color: #4F464A !important;
    font-size: 14.8px !important;
    font-weight: 400 !important;
    line-height: 1.78 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

#app-chat .love-letter-reply-body p {
    margin: 0 0 10px !important;
}

#app-chat .love-letter-reply-body p:last-child {
    margin-bottom: 0 !important;
}

#app-chat .love-letter-reply-body br {
    content: '' !important;
    display: block !important;
    margin: 0 0 12px !important;
}

#app-chat .love-letter-reply-ending {
    width: 28px !important;
    height: 1px !important;
    margin: 12px 0 10px auto !important;
    background: rgba(230, 150, 170, 0.08) !important;
}

#app-chat .love-letter-reply-signature {
    color: rgba(79, 70, 74, 0.46) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: right !important;
    letter-spacing: 0 !important;
}

#app-chat .love-letter-writing-notice {
    color: rgba(96, 88, 92, 0.62) !important;
}

#app-chat .chat-system-notice {
    align-self: center;
    max-width: 72%;
    margin: 2px auto 10px;
    color: #9b9b9b;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

#app-chat .msg-content-stack:has(.msg-red-packet) {
    max-width: min(74vw, 330px);
}

#app-chat .msg-bubble-user .msg-content-stack:has(.msg-red-packet) {
    flex-shrink: 0;
}

#app-chat .msg-text.msg-red-packet {
    position: relative !important;
    width: clamp(300px, 70vw, 330px) !important;
    max-width: calc(100vw - 92px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#app-chat .msg-text.msg-red-packet::after {
    content: '' !important;
    position: absolute;
    top: 26px;
    width: 0;
    height: 0;
    display: block;
}

#app-chat .msg-bubble-ai .msg-text.msg-red-packet::after {
    left: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #ff9829;
}

#app-chat .msg-bubble-user .msg-text.msg-red-packet::after {
    right: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid #ff9829;
}

#app-chat .msg-bubble-ai .msg-text.msg-red-packet.is-received::after {
    border-right-color: #ff9829;
}

#app-chat .msg-bubble-user .msg-text.msg-red-packet.is-received::after {
    border-left-color: #ff9829;
}

#app-chat .red-packet-card {
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #ff982b !important;
    color: #fff !important;
    overflow: hidden !important;
    text-align: left !important;
    box-shadow: none !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: transform 0.12s ease, filter 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

#app-chat .red-packet-card:active {
    transform: scale(0.992);
    filter: brightness(0.98);
}

#app-chat .red-packet-card.received {
    background: #ff982b;
    cursor: pointer;
    box-shadow: none;
}

#app-chat .red-packet-body {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    height: 66px !important;
    padding: 11px 15px 0 !important;
    box-sizing: border-box !important;
}

#app-chat .red-packet-icon {
    position: relative;
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    box-shadow: none !important;
}

#app-chat .red-packet-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background: #dc3021;
}

#app-chat .red-packet-flap {
    position: absolute;
    left: 50%;
    top: 3px;
    z-index: 1;
    width: 36px;
    height: 12px;
    transform: translateX(-50%);
    background: #ff4435;
    border-bottom-left-radius: 50% 5px;
    border-bottom-right-radius: 50% 5px;
    box-shadow: none;
}

#app-chat .red-packet-coin {
    position: absolute;
    left: 50%;
    top: 22px;
    z-index: 2;
    width: 15px;
    height: 15px;
    transform: translateX(-50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f5d27b;
    color: #d53c28;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}

#app-chat .red-packet-main {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 50px !important;
    padding-top: 0 !important;
    flex: 1 1 0 !important;
}

#app-chat .red-packet-title {
    display: block !important;
    max-width: 100% !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 460 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#app-chat .red-packet-desc {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.2;
}

#app-chat .red-packet-footer {
    position: relative;
    display: flex !important;
    align-items: center !important;
    height: 26px !important;
    padding: 2px 20px 8px !important;
    border-top: 0 !important;
    background: rgba(232, 128, 28, 0.08);
    color: rgba(255, 239, 221, 0.88) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

#app-chat .red-packet-footer::before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 1px;
    background: rgba(255, 210, 143, 0.2);
}

.red-packet-overlay,
.red-packet-detail-page {
    position: absolute;
    inset: 0;
    z-index: 1400;
    border-radius: inherit;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.red-packet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(242, 242, 242, 0.72);
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
}

.red-packet-envelope {
    position: absolute;
    left: 50%;
    top: 47.5%;
    width: min(78%, 328px);
    height: min(64%, 534px);
    min-height: 430px;
    transform: translate(-50%, -50%);
    border-radius: 9px;
    background: linear-gradient(180deg, #f75545 0%, #ec4938 56%, #e54231 100%);
    color: #f9e4b7;
    box-shadow: 0 22px 54px rgba(111, 47, 31, 0.24), 0 2px 0 rgba(255, 255, 255, 0.1) inset;
    overflow: hidden;
}

.red-packet-envelope::before {
    content: '';
    position: absolute;
    left: -22%;
    right: -22%;
    top: 43%;
    height: 28%;
    border-top: 1px solid rgba(154, 44, 32, 0.26);
    border-radius: 0 0 50% 50%;
    background: linear-gradient(180deg, rgba(196, 48, 35, 0.16) 0%, rgba(201, 51, 37, 0.04) 58%, transparent 100%);
}

.red-packet-envelope::after {
    content: '';
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -6%;
    height: 38%;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(255, 105, 83, 0.26) 0%, rgba(190, 41, 31, 0.08) 58%, transparent 100%);
    pointer-events: none;
}

.red-packet-envelope-lid {
    position: absolute;
    left: -16%;
    right: -16%;
    top: -12%;
    height: 40%;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(180deg, #fa6755 0%, #f24f40 68%, #df3d30 100%);
    box-shadow: 0 2px 0 rgba(129, 38, 29, 0.13);
}

.red-packet-envelope-lid::after {
    content: '';
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 10px;
    height: 1px;
    background: rgba(255, 214, 157, 0.16);
}

.red-packet-envelope-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 37% 22px 25%;
    text-align: center;
}

.red-packet-overlay-close {
    position: absolute;
    left: 50%;
    bottom: max(22px, 4.4%);
    width: 46px;
    height: 46px;
    transform: translateX(-50%);
    border: 1.5px solid rgba(186, 145, 78, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    color: #ae8240;
    font-size: 32px;
    font-weight: 200;
    line-height: 38px;
    z-index: 3;
    box-shadow: 0 1px 5px rgba(94, 63, 30, 0.06);
}

.red-packet-envelope-sender,
.red-packet-detail-sender {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
}

.red-packet-overlay-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 2px rgba(72, 24, 18, 0.12);
}

.red-packet-envelope-sender span:last-child {
    min-width: 0;
    max-width: 210px;
    color: #f7ddb6;
    font-size: 15px;
    font-weight: 520;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.red-packet-envelope-note {
    margin-top: 25px;
    max-width: 92%;
    color: #fff2cc;
    font-size: 22px;
    font-weight: 560;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgba(117, 36, 28, 0.12);
}

.red-packet-open-button {
    position: absolute;
    left: 50%;
    bottom: 12.4%;
    width: 106px;
    height: 106px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 244, 198, 0.34);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 24%, #fff0bd 0%, #f2d184 42%, #ddae51 100%);
    color: #5a4228;
    font-family: "Songti SC", "STSong", "SimSun", serif;
    font-size: 53px;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 6px 0 rgba(112, 58, 31, 0.16), 0 15px 28px rgba(96, 44, 27, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.38);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}

.red-packet-open-button:active {
    transform: translateX(-50%) scale(0.96);
    filter: brightness(0.98);
    box-shadow: 0 3px 0 rgba(112, 58, 31, 0.16), 0 9px 18px rgba(96, 44, 27, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.red-packet-detail-page {
    background: #ffffff;
    color: #1c1c1c;
    min-height: 100%;
}

.red-packet-detail-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 64px;
    background: #f4473b;
    color: #fff;
    pointer-events: none;
}

.red-packet-detail-back,
.red-packet-detail-more {
    position: absolute;
    top: 26px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    opacity: 0.96;
    font-size: 42px;
    font-weight: 200;
    line-height: 36px;
    z-index: 30;
    pointer-events: auto;
    cursor: pointer;
}

.red-packet-detail-back {
    left: 34px;
}

.red-packet-detail-more {
    right: 26px;
    font-size: 20px;
    letter-spacing: 4px;
}

.red-packet-detail-curve {
    position: absolute;
    left: -34%;
    right: -34%;
    top: 36px;
    height: 74px;
    z-index: 4;
    background: #f4473b;
    border-bottom: 3px solid #e3c36c;
    border-radius: 0 0 50% 50%;
    box-shadow: 0 8px 14px rgba(141, 49, 37, 0.08);
    pointer-events: none;
}

.red-packet-detail-body {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding: 122px 24px 32px;
    text-align: center;
    pointer-events: none;
}

.red-packet-detail-body button {
    pointer-events: auto;
}

.red-packet-detail-sender .red-packet-overlay-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: none;
}

.red-packet-detail-sender strong {
    max-width: 288px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1f1f1f;
    font-size: 21px;
    font-weight: 620;
    line-height: 1.18;
}

.red-packet-detail-note {
    margin-top: 13px;
    max-width: 320px;
    color: #9b9b9b;
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.red-packet-detail-amount {
    margin-top: 22px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: #c7a264;
}

.red-packet-detail-amount span {
    font-size: clamp(62px, 16vw, 76px);
    font-weight: 620;
    letter-spacing: 0;
    line-height: 0.92;
}

.red-packet-detail-amount small {
    margin-left: 8px;
    font-size: 19px;
    font-weight: 500;
}

.red-packet-detail-wallet {
    margin-top: 9px;
    color: #bd9f64;
    font-size: 17px;
    line-height: 1.2;
}

.red-packet-detail-reply {
    margin-top: 30px;
    min-width: 184px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 5px;
    background: #f5f5f5;
    color: #bd9f64;
    font-size: 15px;
    line-height: 44px;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.red-packet-detail-reply span {
    margin-right: 6px;
    font-size: 19px;
    vertical-align: -2px;
}

@media (max-width: 420px) {
    #app-chat .msg-text.msg-transfer {
        width: min(300px, calc(100vw - 112px)) !important;
    }

    #app-chat .msg-text.msg-red-packet {
        width: min(300px, calc(100vw - 112px)) !important;
    }

    #app-chat .transfer-card-amount {
        font-size: 23px !important;
    }

    #app-chat .transfer-card-amount.compact {
        font-size: 21px !important;
    }

    .red-packet-envelope {
        width: min(78%, 300px);
        min-height: 408px;
    }

    .red-packet-open-button {
        width: 96px;
        height: 96px;
        font-size: 47px;
    }

    .red-packet-detail-body {
        padding-top: 122px;
    }

    .red-packet-detail-amount span {
        font-size: clamp(62px, 16vw, 76px);
    }
}

/* WeChat header/list transition: keep the list flush without a hard doubled divider. */
#app-wechat .nav-bar {
    border-bottom-color: transparent !important;
    box-shadow: 0 1px 0 rgba(225, 229, 235, 0.62) !important;
}

#app-wechat .wechat-content {
    padding-top: 0 !important;
    background: #f3f4f6 !important;
}

#app-wechat #tab-chats .chat-list {
    padding-top: 0 !important;
}

#app-wechat #tab-chats::before {
    content: none !important;
    display: none !important;
}

#app-wechat #tab-chats .chat-item,
#app-wechat #tab-chats .chat-item:hover,
#app-wechat #tab-chats .chat-item:active {
    background: #ffffff !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Moments publish page: native WeChat-style composer. */
#app-moment-post {
    background: #f6f7f9 !important;
}

#app-moment-post .app-status-bar {
    background: #ffffff !important;
}

#app-moment-post .moment-post-nav {
    position: relative;
    height: 52px;
    padding: 0 14px 0 10px;
    background: #ffffff;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

#app-moment-post .moment-post-back {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    justify-content: flex-start;
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 34px;
    font-weight: 300 !important;
}

#app-moment-post .moment-post-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #111111;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
}

#app-moment-post .moment-post-submit {
    position: relative;
    z-index: 1;
    min-width: 52px;
    height: 32px;
    padding: 0 13px;
    border: 0 !important;
    border-radius: 6px;
    background: #07c160 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 600 !important;
    line-height: 32px;
}

#app-moment-post .moment-post-submit:disabled {
    background: #edf4fb !important;
    color: #9aabba !important;
    opacity: 1;
    cursor: default;
}

#app-moment-post .moment-post-page {
    padding: 0 0 calc(24px + var(--safe-bottom, 0px));
    background: #f6f7f9;
}

#app-moment-post .moment-post-editor {
    position: relative;
    min-height: 238px;
    padding: 20px 18px 32px;
    background: #ffffff;
    border-bottom: 0;
}

#app-moment-post .moment-post-textarea {
    min-height: 176px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    color: #1f2329;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;
}

#app-moment-post .moment-post-textarea::placeholder {
    color: #c8ccd3;
    font-size: 18px;
}

#app-moment-post .moment-post-counter {
    position: absolute;
    right: 18px;
    bottom: 12px;
    margin: 0;
    color: #b7bdc6;
    font-size: 12px;
    line-height: 1;
}

#app-moment-post .moment-post-image-grid {
    --moment-post-tile: clamp(76px, 21vw, 86px);
    display: grid;
    grid-template-columns: repeat(3, var(--moment-post-tile));
    gap: 9px;
    padding: 0 18px 22px;
    background: #ffffff;
}

#app-moment-post .moment-post-image-preview {
    display: contents;
    padding: 0;
}

#app-moment-post .moment-post-image-card {
    width: var(--moment-post-tile);
    height: var(--moment-post-tile);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0.5px solid #dce1e8 !important;
    border-radius: 9px !important;
    background: #f7f8fa !important;
    box-shadow: none !important;
    color: #a9afb8 !important;
}

#app-moment-post .moment-post-image-card[hidden] {
    display: none !important;
}

#app-moment-post .moment-post-image-card:active {
    transform: none;
    background: #f0f2f5 !important;
}

#app-moment-post .moment-post-image-plus {
    margin: -4px 0 0;
    color: #9ca3ad;
    font-size: 34px;
    font-weight: 200;
    line-height: 1;
}

#app-moment-post .moment-post-image-text {
    color: #a8aeb7;
    font-size: 11px;
    line-height: 1.1;
}

#app-moment-post .moment-post-preview-item {
    width: var(--moment-post-tile);
    height: var(--moment-post-tile);
    aspect-ratio: auto;
    border-radius: 8px;
    background: #eef0f3;
}

#app-moment-post .moment-post-preview-remove {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: 0 !important;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 14px;
}

#app-moment-post .moment-post-options {
    margin-top: 10px;
    background: #ffffff;
    border-top: 0.5px solid #eceff3;
    border-bottom: 0.5px solid #eceff3;
}

#app-moment-post .moment-post-option {
    min-height: 58px;
    padding: 0 14px 0 18px;
    background: #ffffff;
    border-bottom: 0.5px solid #edf0f4;
}

#app-moment-post .moment-post-option:last-child {
    border-bottom: 0;
}

#app-moment-post .moment-post-option-left {
    gap: 12px;
}

#app-moment-post .moment-post-option-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8c96a3 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

#app-moment-post .moment-post-option-icon .ui-line-icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.65;
}

#app-moment-post .moment-post-option-label {
    color: #30343b;
    font-size: 16px;
    font-weight: 400;
}

#app-moment-post .moment-post-option-value {
    margin-right: 7px;
    color: #7f9bbd;
    font-size: 15px;
}

#app-moment-post #momentMentionSummary:empty {
    margin-right: 0;
}

#app-moment-post .moment-post-option-right {
    color: #c7cbd2;
    font-size: 25px;
    font-weight: 300;
}

#app-moment-post .moment-mention-picker {
    padding: 8px 18px 14px 54px;
    background: #ffffff;
    border-bottom: 0.5px solid #edf0f4;
}

/* Chat composer clearance: keep the final message fully scrollable above the input bar. */
#app-chat .chat-messages {
    padding-bottom: calc(30px + var(--safe-bottom, 0px)) !important;
    scroll-padding-top: 92px !important;
    scroll-padding-bottom: calc(30px + var(--safe-bottom, 0px)) !important;
}

#app-chat .msg-text.msg-gift:has(.love-letter-gift-card),
#app-chat .love-letter-gift-card,
#app-chat .msg-text.msg-love-letter-reply,
#app-chat .love-letter-reply-card {
    scroll-margin-top: 92px !important;
    scroll-margin-bottom: calc(30px + var(--safe-bottom, 0px)) !important;
}

/* ================= 本地论坛 ================= */
.forum-app {
    background: #fff;
}

.forum-app::before {
    content: none;
}

.forum-nav {
    background: rgba(255, 255, 255, 0.92);
    height: 52px;
    padding-top: 0;
    align-items: center;
}

.forum-nav .nav-title {
    top: 50%;
    transform: translate(-50%, -50%);
}

.forum-nav .nav-back {
    min-width: 44px;
}

.forum-nav-add,
.forum-save-action {
    border: 0;
    background: transparent;
    color: #4f89c4;
    font: inherit;
    font-size: 22px;
}

.forum-save-action {
    font-size: 15px;
    font-weight: 650;
}

.forum-save-action:disabled,
.forum-create-submit:disabled {
    opacity: 0.35;
}

.forum-home-scroll,
.forum-create-scroll,
.forum-detail-scroll,
.forum-post-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
}

.forum-empty-state {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 28px;
    text-align: center;
    color: #8e98a6;
}

.forum-empty-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
    color: #c7cdd5;
}

.forum-empty-title {
    font-size: 16px;
    font-weight: 650;
    color: #3f4652;
    margin-bottom: 8px;
}

.forum-empty-text {
    font-size: 13px;
    color: #9aa3af;
}

.forum-list-row,
.forum-post-row,
.forum-choice-row {
    width: 100%;
    border: 0;
    border-bottom: 0.5px solid #edf0f4;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.forum-list-row {
    min-height: 72px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.forum-list-row:active,
.forum-post-row:active,
.forum-choice-row:active {
    background: #f7f9fb;
}

.forum-list-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eef6ff;
    color: #5e94c8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
}

.forum-list-icon svg {
    width: 25px;
    height: 25px;
}

.forum-list-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.forum-list-title {
    color: #232b36;
    font-size: 16px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-list-preview {
    color: #9aa3af;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-list-meta {
    flex: 0 0 auto;
    color: #a6afba;
    font-size: 11px;
}

.forum-form {
    padding: 12px 0 28px;
}

.forum-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 0.5px solid #edf0f4;
}

.forum-field span,
.forum-section-title,
.forum-section-header {
    color: #7e8793;
    font-size: 13px;
    font-weight: 650;
}

.forum-field input,
.forum-field textarea {
    width: 100%;
    border: 0;
    outline: none;
    background: #f7f9fb;
    border-radius: 8px;
    padding: 11px 12px;
    color: #273142;
    font-size: 15px;
    line-height: 1.45;
    resize: none;
}

.forum-form-section {
    padding: 14px 0 6px;
    border-bottom: 0.5px solid #edf0f4;
}

.forum-section-title {
    padding: 0 16px 10px;
}

.forum-choice-row {
    min-height: 64px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-top: 0.5px solid #f2f4f7;
    border-bottom: 0;
}

.forum-choice-row.selected {
    background: #f7fbff;
    box-shadow: inset 3px 0 0 #8dbde8;
}

.forum-choice-avatar,
.forum-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 650;
}

.forum-choice-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.forum-choice-name {
    color: #273142;
    font-size: 15px;
    font-weight: 650;
}

.forum-choice-tag {
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef5fc;
    color: #6f98bd;
    font-size: 11px;
    font-weight: 650;
}

.forum-choice-desc {
    color: #9aa3af;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-choice-check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: #5c9cd5;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    line-height: 22px;
}

.forum-picker-empty,
.forum-section-empty,
.forum-comments-empty {
    color: #a2abb6;
    font-size: 13px;
    padding: 18px 16px;
}

.forum-create-submit {
    width: calc(100% - 32px);
    height: 46px;
    margin: 18px 16px 0;
    border: 0;
    border-radius: 10px;
    background: #6faae0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

#app-forum-create,
#app-forum-create .forum-create-scroll {
    background: #f5f5f5;
}

#app-forum-create .forum-nav {
    background: rgba(245, 245, 245, 0.86);
    border-bottom-color: rgba(208, 213, 221, 0.44);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#app-forum-create .forum-save-action {
    color: #4f86ca;
    font-size: 16px;
    font-weight: 650;
    padding: 0 2px;
}

#app-forum-create .forum-save-action:disabled {
    color: #c3c8cf;
    opacity: 1;
}

#app-forum-create .forum-form {
    padding: 16px 0 calc(28px + var(--safe-bottom, 0px));
}

#app-forum-create .forum-form-section {
    margin: 0 0 22px;
    padding: 0;
    border-bottom: 0;
}

#app-forum-create .forum-section-title,
#app-forum-create .forum-field-label {
    display: block;
    padding: 0 18px 7px;
    color: #8a8f98;
    font-size: 13px;
    font-weight: 500;
}

#app-forum-create .forum-field {
    gap: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

#app-forum-create .forum-name-field {
    margin: 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}

#app-forum-create .forum-name-field .forum-field-label {
    padding: 0;
    color: #8a94a3;
    font-size: 14px;
    font-weight: 500;
}

#app-forum-create .forum-name-field input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    background: #fff;
    padding: 0 13px;
    color: #202834;
    font-size: 16px;
    text-align: left;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

#app-forum-create .forum-name-field input:focus {
    border-color: rgba(116, 139, 166, 0.28) !important;
    box-shadow: none !important;
    background: #fff;
}

#app-forum-create .forum-name-field input::placeholder,
#app-forum-create .forum-world-field textarea::placeholder {
    color: #c2c6cc;
}

#app-forum-create .forum-role-picker {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 2px;
    scrollbar-width: none;
}

#app-forum-create .forum-role-picker::-webkit-scrollbar {
    display: none;
}

.forum-role-card,
.forum-mask-card {
    border: 0;
    background: #fff;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.forum-role-card {
    position: relative;
    width: 72px;
    min-width: 72px;
    height: 82px;
    padding: 8px 6px 7px;
    border: 0.5px solid rgba(214, 218, 224, 0.86);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: none;
}

.forum-role-card:active,
.forum-mask-card:active {
    background: #f8f9fa;
}

.forum-role-card.selected {
    border-color: rgba(111, 146, 184, 0.76);
    background: #f7faff;
    box-shadow: none;
}

#app-forum-create .forum-role-card .forum-choice-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
    filter: saturate(0.82);
}

#app-forum-create .forum-role-card .forum-choice-name {
    width: 100%;
    color: #2f3744;
    font-size: 13px;
    font-weight: 620;
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-forum-create .forum-role-card .forum-choice-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6f92b8;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    opacity: 0;
    transform: scale(0.88);
}

#app-forum-create .forum-role-card.selected .forum-choice-check {
    opacity: 1;
    transform: scale(1);
}

#app-forum-create .forum-mask-picker {
    margin: 0 16px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    border: 0.5px solid rgba(210, 214, 220, 0.78);
}

.forum-mask-card {
    position: relative;
    width: 100%;
    min-height: 68px;
    padding: 11px 44px 11px 12px;
    border: 0;
    border-bottom: 0.5px solid rgba(232, 234, 238, 0.92);
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: none;
}

.forum-mask-card:last-child {
    border-bottom: 0;
}

.forum-mask-card.selected {
    background: #f7faff;
}

#app-forum-create .forum-mask-card .forum-choice-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
    filter: saturate(0.82);
}

#app-forum-create .forum-mask-card .forum-choice-text {
    gap: 4px;
}

#app-forum-create .forum-mask-card .forum-choice-name {
    color: #252d38;
    font-size: 15px;
    font-weight: 650;
}

#app-forum-create .forum-mask-card .forum-choice-desc {
    color: #8f98a5;
    font-size: 12px;
    line-height: 1.35;
}

#app-forum-create .forum-mask-card .forum-choice-check {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: #6f92b8;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

#app-forum-create .forum-mask-card.selected .forum-choice-check {
    opacity: 1;
    transform: scale(1);
}

#app-forum-create .forum-world-field {
    gap: 0;
    margin: 0 16px;
}

#app-forum-create .forum-field-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
}

#app-forum-create .forum-field-heading .forum-field-label {
    padding: 0 0 4px;
}

#app-forum-create .forum-field-heading small {
    color: #9aa3ad;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

#app-forum-create .forum-world-field textarea {
    min-height: 132px;
    margin-top: 8px;
    border: 0.5px solid rgba(210, 214, 220, 0.86) !important;
    border-radius: 12px;
    background: #fff;
    padding: 12px 13px;
    color: #263140;
    font-size: 15px;
    line-height: 1.55;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

#app-forum-create .forum-world-field textarea:focus {
    border-color: rgba(141, 169, 202, 0.62) !important;
    box-shadow: none !important;
    background: #fff;
}

#app-forum-create .forum-picker-empty {
    width: calc(100% - 32px);
    margin: 0 16px;
    border-radius: 12px;
    background: #fff;
    color: #9aa3ad;
    border: 0.5px solid rgba(210, 214, 220, 0.78);
    padding: 16px;
}

#app-forum-create .forum-create-submit {
    display: none;
}

.forum-nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #4f89c4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forum-icon-btn svg {
    width: 23px;
    height: 23px;
}

.forum-danger-icon {
    color: #c97b7b;
}

#app-forum-detail,
#app-forum-detail .forum-detail-scroll {
    background: #f5f5f5;
}

#app-forum-detail .forum-nav {
    background: rgba(250, 250, 251, 0.9);
    border-bottom-color: rgba(214, 219, 226, 0.52);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#app-forum-detail .nav-title {
    max-width: 210px;
    color: #1f2937;
    font-size: 18px;
    font-weight: 620;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-forum-detail .forum-nav-actions {
    gap: 4px;
}

#app-forum-detail .forum-icon-btn {
    width: 34px;
    height: 34px;
    color: #6f7f93;
    border-radius: 50%;
}

#app-forum-detail .forum-icon-btn:active {
    background: rgba(113, 128, 150, 0.1);
}

#app-forum-detail .forum-icon-btn svg {
    width: 22px;
    height: 22px;
}

#app-forum-detail .forum-danger-icon {
    color: #8995a5;
}

.forum-detail-scroll {
    padding-bottom: 106px;
}

#app-forum-detail .forum-detail-scroll {
    padding-bottom: calc(92px + var(--safe-bottom, 0px));
}

#app-forum-detail .forum-post-section {
    background: #fff;
}

.forum-section-header {
    height: 34px;
    padding: 11px 16px 6px;
    background: #f6f7f9;
    color: #8d96a3;
}

#app-forum-detail .forum-section-header {
    height: auto;
    padding: 18px 16px 8px;
    background: #fff;
    color: #7f8da1;
    font-size: 14px;
    font-weight: 620;
    letter-spacing: 0;
}

#app-forum-detail .forum-post-list {
    background: #fff;
}

.forum-post-row {
    min-height: 70px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

#app-forum-detail .forum-post-row {
    min-height: 78px;
    padding: 14px 16px 15px;
    border-bottom: 0.5px solid rgba(229, 233, 239, 0.78);
    background: #fff;
    gap: 8px;
}

#app-forum-detail .forum-post-row-main {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

#app-forum-detail .forum-post-row-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#app-forum-detail .forum-post-thumb {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 8px;
    background-color: #eef2f6;
    background-size: cover;
    background-position: center;
}

#app-forum-detail .forum-post-thumb-loading {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7f8da0;
    font-size: 10px;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.72) 0 6px, transparent 7px),
        linear-gradient(145deg, #edf3f8 0%, #dfe8f1 45%, #cdd9e5 100%);
}

#app-forum-detail .forum-post-thumb-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.58) 45%, transparent 80%);
    animation: forumThumbShimmer 1.4s ease-in-out infinite;
}

#app-forum-detail .forum-post-thumb-loading span {
    position: relative;
    z-index: 1;
}

#app-forum-detail .forum-post-thumb-failed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a2acb8;
    font-size: 10px;
}

@keyframes forumThumbShimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

#app-forum-detail .forum-post-row:active {
    background: #f8fafc;
}

.forum-post-title-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

#app-forum-detail .forum-post-title-line {
    align-items: flex-start;
    gap: 7px;
}

.forum-hot-tag {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 5px;
    background: #fff1e9;
    color: #c96f4b;
    font-size: 10px;
    font-weight: 800;
}

#app-forum-detail .forum-hot-tag {
    margin-top: 2px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255, 120, 80, 0.12);
    color: #c57758;
    font-size: 9px;
    font-weight: 720;
    line-height: 1.1;
    letter-spacing: 0;
}

.forum-post-title {
    min-width: 0;
    flex: 1;
    color: #222b37;
    font-size: 15px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-forum-detail .forum-post-title {
    color: #243042;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.38;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.forum-post-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #9da6b2;
    font-size: 12px;
}

#app-forum-detail .forum-post-meta {
    display: block;
    color: #a3adbb;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-post-meta span:first-child {
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-fab-group {
    position: absolute;
    right: 18px;
    bottom: calc(20px + var(--safe-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 5;
}

#app-forum-detail .forum-fab-group {
    right: 16px;
    bottom: calc(16px + var(--safe-bottom, 0px));
    gap: 9px;
}

.forum-fab {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #6faae0;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(86, 136, 184, 0.24);
}

#app-forum-detail .forum-fab {
    width: 48px;
    height: 48px;
    background: #6f8eaa;
    color: #fff;
    box-shadow: 0 8px 18px rgba(60, 76, 96, 0.16);
}

#app-forum-detail .forum-fab:active {
    background: #617f9b;
}

.forum-fab svg {
    width: 24px;
    height: 24px;
}

#app-forum-detail .forum-fab svg {
    width: 22px;
    height: 22px;
}

.forum-fab-refresh {
    background: #88b7dc;
}

#app-forum-detail .forum-fab-refresh {
    background: #6f95b8;
    box-shadow: 0 10px 22px rgba(74, 114, 151, 0.22);
}

#app-forum-detail .forum-fab-refresh:active {
    background: #5f86aa;
}

#app-forum-detail .forum-refresh-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forum-fab:disabled {
    opacity: 0.6;
}

.forum-fab.loading .forum-refresh-icon {
    animation: forumSpin 0.8s linear infinite;
}

@keyframes forumSpin {
    to { transform: rotate(360deg); }
}

.forum-post-scroll {
    padding-bottom: 74px;
}

#app-forum-post .forum-nav {
    height: 52px;
    padding-top: 0;
    align-items: center;
}

#app-forum-post .forum-nav .nav-title {
    top: 50%;
    transform: translate(-50%, -50%);
}

#app-forum-post .forum-nav .nav-back {
    min-width: 44px;
}

.forum-post-share-btn {
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forum-post-share-btn svg {
    width: 25px;
    height: 25px;
}

.forum-post-detail {
    padding: 12px 18px 22px;
    border-bottom: 8px solid #f6f7f9;
}

.forum-post-detail h1 {
    color: #1f2937;
    font-size: 22px;
    line-height: 1.34;
    font-weight: 760;
    letter-spacing: 0;
    margin: 0 0 14px;
}

.forum-post-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.forum-post-author strong,
.forum-comment-meta strong {
    display: block;
    color: #334155;
    font-size: 13px;
    font-weight: 650;
}

.forum-post-author small,
.forum-comment-meta small {
    display: block;
    color: #a3acb8;
    font-size: 11px;
    margin-top: 2px;
}

.forum-post-body {
    color: #2f3b4a;
    font-size: 16px;
    line-height: 1.72;
    white-space: pre-wrap;
    word-break: break-word;
}

.forum-post-image-wrap {
    margin: 18px 0 0;
}

.forum-post-image {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 12px;
    background: #eef2f6;
}

.forum-post-image-pending {
    margin-top: 16px;
    height: 132px;
    border-radius: 12px;
    background: linear-gradient(110deg, #eef2f6 0%, #f8fafc 45%, #eef2f6 80%);
    color: #97a3b2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.forum-post-image-failed {
    background: #f3f5f7;
    color: #98a3af;
    padding: 0 18px;
    text-align: center;
}

.forum-comments-section {
    padding-top: 12px;
}

.forum-comment-row {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 0.5px solid #f0f2f5;
}

.forum-comment-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 9px;
    font-size: 13px;
}

.forum-comment-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.forum-comment-content {
    color: #344052;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}

.forum-comment-reply-context {
    color: #8b96a5;
    font-size: 12px;
    line-height: 1.35;
}

.forum-comment-actions {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.forum-comment-action {
    min-width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8e949b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1;
}

.forum-comment-action svg {
    width: 21px;
    height: 21px;
}

.forum-comment-action.active {
    color: #6c8fc4;
}

.forum-comment-action.danger {
    color: #a0a4aa;
}

.forum-comment-composer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(10px + var(--safe-bottom, 0px));
    background: rgba(255, 255, 255, 0.92);
    border-top: 0.5px solid #e8ecf1;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.forum-comment-composer input {
    flex: 1;
    height: 38px;
    border: 0;
    border-radius: 19px;
    background: #f2f5f8;
    padding: 0 14px;
    outline: none;
    color: #273142;
    font-size: 14px;
}

.forum-comment-composer button {
    border: 0;
    background: transparent;
    color: #4f89c4;
    font-size: 15px;
    font-weight: 700;
}

.forum-sheet-overlay,
.forum-input-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(24, 32, 42, 0.22);
}

.forum-publish-sheet {
    width: min(390px, calc(100% - 28px));
    margin-bottom: 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(31, 41, 55, 0.18);
    padding: 8px 0 10px;
    overflow: hidden;
}

.forum-sheet-grabber {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #d8dde4;
    margin: 2px auto 12px;
}

.forum-sheet-title {
    text-align: center;
    color: #202936;
    font-size: 16px;
    font-weight: 720;
    margin-bottom: 6px;
}

.forum-sheet-option {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.forum-sheet-option-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eef6ff;
    color: #6797c4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forum-sheet-option-icon svg {
    width: 21px;
    height: 21px;
}

.forum-sheet-option strong {
    display: block;
    color: #273142;
    font-size: 15px;
    margin-bottom: 3px;
}

.forum-sheet-option small {
    color: #98a3af;
    font-size: 12px;
}

.forum-sheet-cancel {
    width: calc(100% - 28px);
    height: 42px;
    margin: 8px 14px 0;
    border: 0;
    border-radius: 12px;
    background: #f4f6f8;
    color: #586474;
    font-size: 15px;
    font-weight: 650;
}

.forum-input-overlay {
    align-items: center;
}

.forum-input-modal {
    width: min(360px, calc(100% - 34px));
    max-height: min(620px, calc(100vh - 80px));
    overflow-y: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(31, 41, 55, 0.18);
}

.forum-input-title {
    padding: 18px 18px 8px;
    text-align: center;
    color: #202936;
    font-size: 17px;
    font-weight: 740;
}

.forum-input-actions {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
}

.forum-input-actions button {
    flex: 1;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: #f2f5f8;
    color: #5c6675;
    font-size: 15px;
    font-weight: 650;
}

.forum-input-actions button.primary {
    background: #6faae0;
    color: #fff;
}

.forum-share-overlay {
    align-items: center;
}

.forum-share-sheet {
    width: min(420px, calc(100% - 56px));
    max-height: min(560px, calc(100vh - 120px));
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(31, 41, 55, 0.2);
}

.forum-share-head {
    min-height: 60px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid #edf0f4;
}

.forum-share-head strong {
    color: #2b3441;
    font-size: 20px;
    font-weight: 740;
}

.forum-share-head button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8f949b;
    font-size: 30px;
    line-height: 1;
}

.forum-share-preview {
    margin: 14px 18px 4px;
    padding: 11px 12px;
    border-radius: 10px;
    background: #f6f8fb;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.forum-share-preview span {
    color: #8994a3;
    font-size: 12px;
}

.forum-share-preview strong {
    color: #2b3441;
    font-size: 14px;
    line-height: 1.35;
}

.forum-share-targets {
    max-height: 360px;
    overflow-y: auto;
    padding: 12px 18px 18px;
}

.forum-share-target {
    width: 100%;
    min-height: 64px;
    border: 0;
    border-bottom: 0.5px solid #edf0f4;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.forum-share-target:last-child {
    border-bottom: 0;
}

.forum-share-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    color: #fff;
    font-size: 22px;
    font-weight: 650;
}

.forum-share-name {
    color: #111827;
    font-size: 18px;
    font-weight: 700;
}

.forum-share-empty {
    padding: 18px 0 22px;
    color: #98a3af;
    font-size: 14px;
    text-align: center;
}

#app-chat .msg-text.msg-forum-share {
    max-width: 240px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

#app-chat .forum-share-card {
    width: 220px;
    border-radius: 10px;
    background: #fff;
    border: 0.5px solid rgba(214, 219, 226, 0.92);
    overflow: hidden;
    color: #253041;
    box-shadow: 0 3px 10px rgba(44, 56, 74, 0.07);
}

#app-chat .forum-share-card-kicker {
    padding: 9px 11px 0;
    color: #8090a5;
    font-size: 12px;
}

#app-chat .forum-share-card-title {
    padding: 4px 11px 0;
    color: #1f2937;
    font-size: 15px;
    font-weight: 740;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#app-chat .forum-share-card-meta {
    padding: 6px 11px 10px;
    color: #8b96a5;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= Red White Local Music Player ================= */
#app-music {
    --music-red: #d84b4b;
    --music-red-deep: #C85A5A;
    --music-red-soft: rgba(206, 92, 92, 0.07);
    --music-text: #1F2933;
    --music-muted: #8A95A3;
    --music-control: #4B5563;
    --music-line: rgba(31, 41, 51, 0.08);
    --music-bg: #f9f8f8;
    --music-card: rgba(255, 255, 255, 0.96);
    --music-page-pad: 24px;
    --music-surface:
        linear-gradient(180deg, #fffefe 0%, #fffafa 44%, #fbfdff 100%);
    background:
        radial-gradient(circle at 50% 31%, rgba(216, 90, 90, 0.05), transparent 36%),
        var(--music-surface) !important;
}

#app-music .app-status-bar,
#app-music .status-bar {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 254, 254, 0.94) 100%) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#app-music .music-nav {
    height: 58px;
    min-height: 58px;
    padding: 0 var(--music-page-pad);
    position: relative;
    display: flex;
    background: rgba(255, 254, 254, 0.94) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    align-items: center;
    justify-content: space-between;
}

#app-music .music-nav-back {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent !important;
    color: var(--music-text) !important;
    font-size: 34px;
    line-height: 40px;
}

#app-music .music-nav-copy {
    position: absolute;
    left: 72px;
    right: 72px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
    pointer-events: none;
}

#app-music .music-nav .nav-title {
    position: static;
    max-width: 100%;
    transform: none;
    color: var(--music-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 58px;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-music .music-nav-subtitle {
    display: none;
    min-height: 0;
    max-width: 100%;
    margin-top: 0;
    color: var(--music-muted);
    font-size: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-music .music-nav.is-player-page .music-nav-subtitle {
    display: none;
}

#app-music .music-nav.is-player-page .music-nav-copy {
    top: 0;
    bottom: 0;
}

#app-music .music-nav-spacer {
    width: 40px;
    min-width: 40px;
}

#app-music .music-content {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 10px 0 82px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(31, 41, 51, 0.018) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, #ffffff 0%, #fffafa 52%, #fbfdff 100%) !important;
    background-size: 100% 100%, 100% 100%;
    color: var(--music-text);
}

#app-music.is-music-player-page .music-content {
    padding: 14px 14px 18px;
    background:
        linear-gradient(90deg, rgba(31, 41, 51, 0.016) 0 1px, transparent 1px 100%),
        radial-gradient(ellipse at 50% 20%, rgba(216, 90, 90, 0.045), transparent 39%),
        linear-gradient(180deg, #ffffff 0%, #fffafa 56%, #fbfdff 100%) !important;
}

#app-music.is-music-player-page::before {
    display: none;
}

#app-music .music-page {
    height: 100%;
    min-height: 0;
}

#app-music .music-page[hidden] {
    display: none !important;
}

#app-music .music-home-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

#app-music .music-recommend-card {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px var(--music-page-pad);
    background:
        radial-gradient(circle at 82% 26%, rgba(216, 75, 75, 0.06), transparent 34%),
        linear-gradient(180deg, rgba(216, 75, 75, 0.025), rgba(255, 255, 255, 0));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#app-music .music-recommend-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    text-align: left;
}

#app-music .music-recommend-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cf5757;
    font-size: 12px;
    font-weight: 680;
}

#app-music .music-recommend-kicker::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(216, 75, 75, 0.62);
}

#app-music .music-recommend-copy strong {
    display: block;
    margin-top: 0;
    color: var(--music-text);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 760;
}

#app-music .music-recommend-copy p {
    margin: 0;
    color: var(--music-muted);
    font-size: 13px;
    line-height: 1.35;
}

#app-music .music-recommend-disc {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 1;
    background:
        radial-gradient(circle at center, #f8c8cb 0 8px, #de777c 9px 12px, transparent 13px),
        repeating-radial-gradient(circle at center, #050505 0 5px, #181818 5px 7px, #080808 7px 10px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 0 12px rgba(0, 0, 0, 0.65);
}

#app-music .music-recommend-disc span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: radial-gradient(circle at center, #ffe4e6 0 4px, #f4b3b7 5px 100%);
}

#app-music .music-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px var(--music-page-pad) 10px;
    border-top: 0.5px solid rgba(216, 75, 75, 0.08);
}

#app-music .music-section-heading h3 {
    margin: 0;
    color: var(--music-text);
    font-size: 18px;
    font-weight: 720;
    line-height: 1.2;
}

#app-music .music-section-heading span {
    color: var(--music-red);
    font-size: 12px;
    line-height: 1;
}

#app-music .music-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--music-red);
}

#app-music .music-import-btn {
    border: 0;
    background: transparent;
    color: var(--music-red);
    font-size: 13px;
    font-weight: 560;
    line-height: 1;
    padding: 0;
    height: 24px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

#app-music .music-file-input {
    display: none;
}

#app-music .music-song-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.72);
    border: 0;
    border-top: 0.5px solid var(--music-line);
}

#app-music .music-song-row {
    width: 100%;
    height: 64px;
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0;
    padding: 0 var(--music-page-pad);
    border: 0;
    border-bottom: 0.5px solid var(--music-line);
    background: transparent;
    color: var(--music-text);
    text-align: left;
    cursor: pointer;
}

#app-music .music-song-row.is-selecting {
    grid-template-columns: 30px minmax(0, 1fr) 0;
    padding-left: var(--music-page-pad);
}

#app-music .music-song-row:not(.is-selecting) .music-song-select {
    display: none;
}

#app-music .music-song-row:last-child {
    border-bottom: 0;
}

#app-music .music-song-row.is-active {
    background: rgba(216, 75, 75, 0.035);
}

#app-music .music-song-main {
    min-width: 0;
    height: 64px;
    min-height: 64px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

#app-music .music-song-row:not(.is-selecting) .music-song-main {
    grid-column: 1;
}

#app-music .music-song-row:not(.is-selecting) .music-song-more {
    grid-column: 2;
}

#app-music .music-song-row.is-selecting .music-song-select {
    grid-column: 1;
}

#app-music .music-song-row.is-selecting .music-song-main {
    grid-column: 2;
}

#app-music .music-song-select {
    width: 26px;
    height: 64px;
    display: none;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#app-music .music-song-row.is-selecting .music-song-select {
    display: grid;
}

#app-music .music-song-select span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(107, 119, 137, 0.42);
    background: #fff;
}

#app-music .music-song-row.is-selected .music-song-select span {
    border-color: var(--music-red);
    background: var(--music-red);
    box-shadow: inset 0 0 0 4px #fff;
}

#app-music .music-song-row.is-selecting .music-song-more {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

#app-music .music-song-index {
    color: rgba(216, 75, 75, 0.82);
    font-size: 12px;
    font-weight: 520;
    line-height: 1;
    text-align: left;
}

#app-music .music-song-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

#app-music .music-song-meta strong,
#app-music .music-mini-copy strong {
    display: block;
    color: var(--music-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-music .music-song-meta strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

#app-music .music-song-meta small,
#app-music .music-mini-copy small,
#app-music .music-song-duration {
    color: #a8a8ad;
    font-size: 12px;
    line-height: 1;
}

#app-music .music-song-duration {
    text-align: right;
    white-space: nowrap;
}

#app-music .music-song-more {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #b7b8be;
    font-size: 19px;
    line-height: 1;
    justify-self: end;
    cursor: pointer;
}

#app-music .music-song-menu {
    position: absolute;
    z-index: 20;
    width: 144px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid rgba(32, 33, 36, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(31, 41, 55, 0.14);
}

#app-music .music-song-menu[hidden] {
    display: none;
}

#app-music .music-song-menu button {
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--music-text);
    font-size: 13px;
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
}

#app-music .music-song-menu button:active {
    background: rgba(216, 75, 75, 0.07);
}

#app-music .music-song-menu button.danger {
    color: var(--music-red-deep);
}

#app-music .music-bulk-action-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 19;
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(216, 75, 75, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(31, 41, 55, 0.12);
}

#app-music .music-bulk-action-bar[hidden] {
    display: none;
}

#app-music .music-bulk-action-bar span {
    min-width: 0;
    color: var(--music-muted);
    font-size: 13px;
    text-align: center;
}

#app-music .music-bulk-action-bar button {
    min-width: 68px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: rgba(216, 75, 75, 0.08);
    color: var(--music-red-deep);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

#app-music .music-bulk-action-bar button.danger {
    background: var(--music-red);
    color: #fff;
}

#app-music .music-bulk-action-bar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#app-music.is-music-selecting .music-mini-player {
    display: none;
}

#app-music .music-import-sheet,
#app-music .music-link-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
}

#app-music .music-import-sheet[hidden],
#app-music .music-link-modal[hidden] {
    display: none;
}

#app-music .music-import-backdrop,
#app-music .music-link-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#app-music .music-import-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(32, 33, 36, 0.08);
    box-shadow: 0 22px 46px rgba(31, 41, 55, 0.16);
}

#app-music .music-import-title,
#app-music .music-link-title {
    color: var(--music-text);
    font-size: 16px;
    font-weight: 720;
    line-height: 1.2;
}

#app-music .music-import-title {
    padding: 2px 2px 10px;
}

#app-music .music-import-option {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-top: 0.5px solid var(--music-line);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

#app-music .music-import-option span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#app-music .music-import-option strong {
    color: var(--music-text);
    font-size: 14px;
    font-weight: 650;
}

#app-music .music-import-option small {
    color: var(--music-muted);
    font-size: 12px;
}

#app-music .music-import-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(216, 75, 75, 0.08);
    color: var(--music-red);
    flex: 0 0 34px;
}

#app-music .music-import-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#app-music .music-import-cancel {
    width: 100%;
    height: 40px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    background: rgba(216, 75, 75, 0.08);
    color: var(--music-red-deep);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}

#app-music .music-link-panel {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(32, 33, 36, 0.08);
    box-shadow: 0 22px 46px rgba(31, 41, 55, 0.16);
}

#app-music .music-link-panel textarea {
    width: 100%;
    min-height: 104px;
    margin-top: 12px;
    padding: 11px 12px;
    resize: none;
    border: 1px solid rgba(32, 33, 36, 0.1);
    border-radius: 8px;
    outline: none;
    background: rgba(247, 247, 248, 0.86);
    color: var(--music-text);
    font-size: 14px;
    line-height: 1.45;
}

#app-music .music-link-panel textarea:focus {
    border-color: rgba(216, 75, 75, 0.42);
    background: #fff;
}

#app-music .music-search-panel {
    top: 48%;
    max-height: min(520px, calc(100% - 44px));
    display: flex;
    flex-direction: column;
}

#app-music .music-search-screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 18px 20px;
    background: rgba(255, 255, 255, 0.98);
}

#app-music .music-search-form {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 64px;
    gap: 9px;
    align-items: center;
    margin: 0 0 12px;
}

#app-music .music-search-form input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: 17px;
    outline: none;
    background: #f7f7f8;
    color: var(--music-text);
    font-size: 13px;
}

#app-music .music-search-form input:focus {
    border-color: rgba(235, 43, 50, 0.32);
    background: #fff;
}

#app-music .music-search-back {
    width: 30px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #23272f;
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
}

#app-music .music-search-form button {
    height: 34px;
    border: 0;
    border-radius: 17px;
    background: #e93036;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

#app-music .music-search-form button:disabled {
    opacity: 0.72;
    cursor: default;
}

#app-music .music-search-results {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#app-music .music-search-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--music-muted);
    font-size: 13px;
    text-align: center;
}

#app-music .music-search-row {
    min-height: 66px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 12px;
    padding: 9px 4px 9px 12px;
    border-bottom: 0.5px solid rgba(31, 41, 51, 0.055);
}

#app-music .music-search-row:last-child {
    border-bottom: 0;
}

#app-music .music-search-cover {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(135deg, #f2f6ff, #f9fbff);
    color: rgba(109, 126, 154, 0.28);
    font-size: 18px;
    font-weight: 700;
}

#app-music .music-search-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#app-music .music-search-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#app-music .music-search-meta strong,
#app-music .music-search-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-music .music-search-meta strong {
    color: var(--music-text);
    font-size: 14px;
    font-weight: 650;
}

#app-music .music-search-meta small {
    color: var(--music-muted);
    font-size: 12px;
}

#app-music .music-search-row button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #cfd2d7;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

#app-music .music-search-play svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

#app-music .music-search-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(233, 48, 54, 0.16);
    border-top-color: #e93036;
    animation: musicSpin 0.8s linear infinite;
}

#app-music .music-search-floating {
    position: absolute;
    right: 15px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(79, 82, 88, 0.72);
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.16);
    cursor: pointer;
}

#app-music .music-search-floating svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

@keyframes musicSpin {
    to { transform: rotate(360deg); }
}

#app-music .music-search-row button:disabled {
    opacity: 0.58;
    cursor: default;
}

#app-music .music-search-actions {
    grid-template-columns: 1fr;
}

#app-music .music-link-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

#app-music .music-link-actions.music-search-actions {
    grid-template-columns: 1fr;
}

#app-music .music-link-actions button {
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: rgba(32, 33, 36, 0.06);
    color: var(--music-text);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}

#app-music .music-link-actions button.primary {
    background: var(--music-red);
    color: #fff;
}

#app-music .music-link-actions button:disabled {
    opacity: 0.72;
    cursor: default;
}

#app-music .music-link-panel textarea:disabled {
    opacity: 0.72;
}

#app-music .music-uid-panel {
    top: 52%;
    max-height: min(590px, calc(100% - 34px));
    display: flex;
    flex-direction: column;
    padding: 20px 18px 16px;
    border-radius: 18px 18px 14px 14px;
}

#app-music .music-uid-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
    margin-top: 14px;
}

#app-music .music-uid-form input {
    min-width: 0;
    height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(32, 33, 36, 0.1);
    border-radius: 8px;
    outline: none;
    background: #f7f7f8;
    color: var(--music-text);
    font-size: 14px;
}

#app-music .music-uid-form input:focus {
    border-color: rgba(233, 48, 54, 0.35);
    background: #fff;
}

#app-music .music-uid-form button {
    height: 40px;
    border: 0;
    border-radius: 18px;
    background: #e93036;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#app-music .music-uid-hint {
    margin: 10px 0 8px;
    color: var(--music-muted);
    font-size: 12px;
    line-height: 1.45;
}

#app-music .music-uid-results {
    min-height: 190px;
    max-height: 360px;
    overflow-y: auto;
    border-top: 0.5px solid rgba(31, 41, 51, 0.07);
}

#app-music .music-uid-row {
    width: 100%;
    min-height: 74px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border: 0;
    border-bottom: 0.5px solid rgba(31, 41, 51, 0.06);
    background: transparent;
    color: var(--music-text);
    text-align: left;
    cursor: pointer;
}

#app-music .music-uid-cover {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(135deg, #f2f5fa, #eaf0f9);
}

#app-music .music-uid-cover > span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
}

#app-music .music-uid-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#app-music .music-uid-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#app-music .music-uid-meta strong,
#app-music .music-uid-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-music .music-uid-meta strong {
    color: var(--music-text);
    font-size: 14px;
    font-weight: 740;
}

#app-music .music-uid-meta small {
    color: var(--music-muted);
    font-size: 12px;
}

#app-music .music-uid-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.7px solid #d6d8dd;
    background: #fff;
}

#app-music .music-uid-row.is-selected .music-uid-check {
    border-color: #e93036;
    background: #e93036;
    box-shadow: inset 0 0 0 5px #fff;
}

#app-music .music-uid-actions {
    grid-template-columns: 1fr;
}

#app-music .music-uid-actions button:first-child {
    order: 2;
    background: transparent;
    color: var(--music-muted);
}

#app-music .music-uid-actions button.primary {
    order: 1;
    height: 48px;
    border-radius: 8px;
    background: #f2262d;
}

#app-music .music-mini-player {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 78px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 13px;
    padding: 11px var(--music-page-pad) calc(11px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border: 0;
    border-top: 0.5px solid rgba(32, 33, 36, 0.08);
    background: rgba(255, 252, 250, 0.98);
    box-shadow: none;
    text-align: left;
    border-color: rgba(32, 33, 36, 0.08) !important;
    cursor: pointer;
}

#app-music .music-player-page:not([hidden]) ~ .music-mini-player {
    display: none;
}

#app-music .music-mini-cover,
#app-music .music-cover-disc {
    position: relative;
    overflow: hidden;
}

#app-music .music-mini-cover {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(216, 90, 90, 0.16), rgba(255, 255, 255, 0.92)),
        radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.75), transparent 42%);
    color: var(--music-red);
    font-size: 22px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(216, 75, 75, 0.11);
}

#app-music .music-mini-cover span,
#app-music .music-cover-disc span {
    position: relative;
    z-index: 0;
}

#app-music .music-mini-cover img,
#app-music .music-cover-disc img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#app-music .music-mini-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-self: center;
}

#app-music .music-mini-copy strong {
    font-size: 14px;
    font-weight: 620;
    line-height: 1.2;
}

#app-music .music-mini-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

#app-music .music-mini-play {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d84b4b;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}

#app-music .music-mini-play .music-control-icon {
    width: 19px;
    height: 19px;
    display: block;
    color: currentColor;
    margin: 0;
    transform: none;
}

#app-music .music-mini-play .music-play-icon {
    transform: translateX(1px);
}

#app-music .music-mini-play .music-pause-icon {
    width: 19px;
    height: 19px;
}

#app-music .music-player-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 6px 0 3px;
    overflow: visible;
}

#app-music .music-turntable-shell {
    position: relative;
    width: clamp(182px, 55vw, 226px);
    max-width: 100%;
    aspect-ratio: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
}

#app-music .music-turntable-shell::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -8px;
    height: 22px;
    border-radius: 50%;
    background: rgba(31, 41, 51, 0.10);
    filter: blur(18px);
    opacity: 0.26;
    pointer-events: none;
}

#app-music .music-vinyl {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.035) 22%, transparent 48%),
        radial-gradient(circle at center, transparent 0 20%, rgba(255,255,255,0.02) 20.4% 20.9%, transparent 21.3% 38%, rgba(255,255,255,0.014) 38.4% 38.8%, transparent 39.2% 62%, rgba(255,255,255,0.015) 62.4% 62.8%, transparent 63.2% 100%),
        repeating-radial-gradient(circle, rgba(255,255,255,0.017) 0 0.6px, transparent 0.6px 3.8px),
        radial-gradient(circle at 50% 50%, #25272c 0 30%, #1b1d21 30% 58%, #14161a 58% 84%, #101114 84% 100%);
    box-shadow:
        0 18px 34px rgba(16, 18, 22, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 0 0 5px rgba(0, 0, 0, 0.1),
        inset 0 -12px 24px rgba(0, 0, 0, 0.2);
    animation: musicVinylSpin 18s linear infinite;
    animation-play-state: paused;
}

#app-music .music-vinyl::before,
#app-music .music-vinyl::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

#app-music .music-vinyl::before {
    background: linear-gradient(122deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.045) 18%, transparent 44%);
    opacity: 0.56;
    transform: rotate(-14deg);
}

#app-music .music-vinyl::after {
    inset: 6px;
    background: radial-gradient(circle, transparent 62%, rgba(0,0,0,0.075) 82%, rgba(0,0,0,0.18) 100%);
}

#app-music .music-vinyl.is-spinning {
    animation-play-state: running;
}

#app-music .music-vinyl-rings {
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 6px, rgba(255,255,255,0.013) 6px 6.6px, transparent 6.6px 10px);
    opacity: 0.62;
    pointer-events: none;
}

#app-music .music-cover-disc {
    position: relative;
    z-index: 2;
    width: 64%;
    height: 64%;
    aspect-ratio: 1;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fffaf7 0 18%, #fff5f1 19% 100%);
    color: var(--music-red);
    font-size: 34px;
    font-weight: 800;
    border: 5px solid #07080a;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.05),
        0 0 0 5px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -5px 12px rgba(216, 90, 90, 0.06);
}

#app-music .music-player-meta {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 24px;
    text-align: center;
}

#app-music .music-track-title {
    color: var(--music-text);
    font-size: clamp(20px, 5.1vw, 21px);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#app-music .music-track-artist {
    color: var(--music-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

#app-music .music-track-artist:empty {
    display: none;
}

#app-music .music-lyric-area {
    width: 100%;
    --music-lyric-min-height: 118px;
    --music-lyric-gap: 10px;
    height: auto;
    min-height: var(--music-lyric-min-height);
    max-height: none;
    flex: 1 1 var(--music-lyric-min-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--music-lyric-gap);
    margin-top: clamp(18px, calc(var(--app-viewport-height) * 0.024), 32px);
    margin-bottom: clamp(10px, calc(var(--app-viewport-height) * 0.014), 22px);
    padding: 0 28px;
    overflow: hidden;
    text-align: center;
}

#app-music .music-lyric-line {
    height: 20px;
    min-height: 20px;
    color: rgba(75, 85, 99, 0.46);
    font-size: 13px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.82;
    transition: color 160ms ease, opacity 160ms ease, transform 160ms ease, font-size 160ms ease;
}

#app-music .music-lyric-line.is-near {
    opacity: 0.9;
}

#app-music .music-lyric-line.is-edge {
    opacity: 0.5;
}

#app-music .music-lyric-line.is-active {
    color: var(--music-text);
    font-size: 15px;
    line-height: 20px;
    font-weight: 650;
    opacity: 1;
}

#app-music .music-progress-wrap {
    width: 100%;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 24px 22px 0;
}

#app-music .music-progress {
    --music-progress: 0%;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    touch-action: none;
    cursor: pointer;
}

#app-music .music-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: visible;
    border-radius: 999px;
    background: rgba(31, 41, 51, 0.09);
    box-shadow: inset 0 1px 1px rgba(31, 41, 51, 0.035);
}

#app-music .music-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--music-progress);
    border-radius: 999px;
    background: #D85A5A;
}

#app-music .music-progress-thumb {
    position: absolute;
    top: 50%;
    left: var(--music-progress);
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid #fff;
    background: #D85A5A;
    box-shadow: 0 2px 6px rgba(216, 90, 90, 0.22);
    transition: width 130ms ease, height 130ms ease, box-shadow 130ms ease;
}

#app-music .music-progress.is-dragging .music-progress-thumb,
#app-music .music-progress:focus-visible .music-progress-thumb {
    width: 14px;
    height: 14px;
    box-shadow: 0 3px 9px rgba(216, 90, 90, 0.26);
}

#app-music .music-time-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: #8A95A3;
    font-size: 13px;
    line-height: 1;
}

#app-music .music-control-grid {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4.4vw, 20px);
    padding: 18px 0 20px;
    flex: 0 0 auto;
    border-top: none;
    background: transparent;
}

#app-music .music-icon-btn,
#app-music .music-play-btn {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

#app-music .music-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    background: transparent;
    color: var(--music-control);
    font-size: 20px;
}

#app-music .music-play-btn {
    width: 64px;
    height: 64px;
    background: var(--music-red);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    box-shadow:
        0 16px 34px rgba(208, 98, 98, 0.18),
        0 7px 17px rgba(208, 98, 98, 0.13),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

#app-music .music-control-icon {
    width: 23px;
    height: 23px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

#app-music .music-play-btn .music-control-icon {
    width: 30px;
    height: 30px;
}

#app-music .music-play-btn .music-play-icon {
    width: 30px;
    height: 30px;
    transform: translateX(1.5px);
}

#app-music .music-play-btn .music-pause-icon {
    width: 30px;
    height: 30px;
}

#app-music .music-mini-play .music-play-icon,
#app-music .music-mini-play .music-pause-icon {
    width: 19px;
    height: 19px;
}

#app-music .music-mode-btn.is-single-mode::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--music-red);
}

#app-music .music-mode-btn.is-shuffle-mode,
#app-music .music-mode-btn.is-heart-mode {
    color: var(--music-red);
}

#app-music .music-mode-btn.is-heart-mode::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--music-red);
    box-shadow: 0 0 0 4px rgba(216, 90, 90, 0.14);
}

#app-music .music-mode-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

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

@media (max-height: 700px) {
    #app-music .music-recommend-card {
        min-height: 88px;
        padding-top: 12px;
        padding-bottom: 14px;
    }

    #app-music .music-recommend-disc {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    #app-music .music-turntable-shell {
        width: clamp(166px, 50vw, 194px);
        margin-bottom: 10px;
    }

    #app-music .music-player-meta {
        gap: 4px;
    }

    #app-music .music-lyric-area {
        height: 92px;
        min-height: 92px;
        max-height: 92px;
        flex: 0 0 92px;
        gap: 5px;
        margin-top: 16px;
        margin-bottom: 0;
    }

    #app-music .music-track-title {
        font-size: 20px;
        line-height: 1.18;
    }

    #app-music .music-progress-wrap {
        padding-top: 20px;
    }

    #app-music .music-control-grid {
        padding-top: 13px;
        padding-bottom: 12px;
    }
}

/* Final white shell override for real-device status/navigation blending. */
:root {
    --ui-bg: #ffffff;
    --ui-bg-soft: #ffffff;
    --ui-surface-muted: #ffffff;
    --wechat-page-bg: #ffffff;
    --app-page-bg: #ffffff;
    --app-page-overlay: none;
    --app-nav-bg: #ffffff;
    color-scheme: light;
}

html,
body,
.ios-container,
.app-view,
.app-view::before,
#homeScreen.fullscreen-mode.hide-status-bar,
#homeScreen.fullscreen-mode.hide-status-bar .cute-home,
#homeScreen.fullscreen-mode.hide-status-bar .home-p2,
.home-p2,
.cute-home,
.wechat-content,
.wechat-tab,
#app-wechat,
#app-wechat .wechat-content,
#app-wechat #tab-chats .chat-list,
#app-wechat #tab-contacts .contacts-list,
#app-wechat #tab-me,
#app-chat,
#app-chat.offline-mode,
#app-chat .chat-messages,
#app-settings,
#app-settings .settings-scroll,
#app-screen-size,
#app-screen-size .settings-scroll,
#app-music,
#app-music .music-content,
.notes-content,
.messages-content,
.worldbook-content,
.screen-size-content {
    background: #ffffff !important;
    background-image: none !important;
}

.nav-bar,
.app-status-bar,
.status-bar,
.chat-nav-bar,
#app-chat .chat-nav-bar,
#app-chat.offline-mode .nav-bar,
#app-chat.offline-mode .app-status-bar,
#app-chat.offline-mode .app-view .status-bar,
#app-wechat .status-bar,
#app-wechat .nav-bar,
#app-wechat .wechat-tabbar,
#app-chat .chat-input-bar,
.chat-input-bar,
#app-music .app-status-bar,
#app-music .status-bar,
#app-music .music-nav,
#app-settings .nav-bar,
#app-screen-size .nav-bar,
#app-notes .nav-bar,
#app-messages .nav-bar,
#app-worldbook .nav-bar {
    background: #ffffff !important;
    background-image: none !important;
    border-color: var(--ui-separator) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#app-wechat .status-bar,
#app-wechat .app-status-bar {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

#app-messages .messages-compose-action {
    border: 0;
    background: transparent;
    color: #2f7cc8;
}

#app-messages .messages-compose-action svg {
    width: 25px;
    height: 25px;
    display: block;
}

/* App header rhythm: match the forum top spacing across regular screens. */
.app-view .nav-bar:not(.chat-nav-bar):not(.music-nav) {
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    align-items: center !important;
    flex-shrink: 0;
}

.app-view .nav-bar:not(.chat-nav-bar):not(.music-nav) .nav-title {
    top: 50% !important;
    line-height: 1.2 !important;
    transform: translate(-50%, -50%) !important;
}

.app-view .nav-bar:not(.chat-nav-bar):not(.music-nav) .nav-back,
.app-view .nav-bar:not(.chat-nav-bar):not(.music-nav) .nav-action {
    height: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}

#app-music .music-nav {
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    align-items: center !important;
}

#app-music .music-nav-copy {
    top: 0 !important;
    bottom: 0 !important;
    justify-content: center !important;
}

#app-music .music-nav .nav-title {
    position: static !important;
    top: auto !important;
    line-height: 52px !important;
    transform: none !important;
    display: block !important;
}

#app-music .music-nav-back,
#app-music .music-nav-spacer {
    width: 40px !important;
    min-width: 40px !important;
    height: 52px !important;
    min-height: 52px !important;
}

#app-music .music-nav-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#app-wechat .nav-bar {
    align-items: center !important;
    position: relative !important;
}

#app-wechat .nav-title {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    line-height: 1 !important;
    transform: translate(-50%, -50%) !important;
}

#app-wechat .nav-back,
#app-wechat .nav-action {
    position: absolute !important;
    top: 50% !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
    transform: translateY(-50%) !important;
}

#app-wechat .nav-back {
    left: 18px !important;
}

#app-wechat .nav-action {
    right: 18px !important;
    transform: translateY(-50%) !important;
}

/* Fullscreen safe-area fit: keep tappable chrome below the real device status bar. */
:root {
    --fullscreen-safe-top: max(var(--safe-top, 0px), var(--fullscreen-safe-top-fallback, 0px));
    --fullscreen-safe-bottom: max(var(--safe-bottom, 0px), var(--fullscreen-safe-bottom-fallback, 0px));
    --fullscreen-hidden-status-gap: clamp(12px, calc(var(--fullscreen-safe-top) * 0.42), 24px);
    --fullscreen-home-dock-bottom: clamp(16px, calc(var(--safe-bottom, 0px) + 2px), 44px);
    --fullscreen-home-dock-bottom-hidden: clamp(12px, calc(var(--safe-bottom, 0px) + 2px), 38px);
    --app-browser-bottom-inset: 0px;
    --browser-hidden-dock-drop: 0px;
    --fullscreen-nav-content-height: 52px;
}

html,
body {
    min-height: 100svh;
}

body {
    min-height: var(--app-viewport-height);
}

.ios-container.fullscreen-mode,
.ios-container.fullscreen-mode ~ .app-view {
    width: 100%;
    height: var(--app-viewport-height);
    min-height: var(--app-viewport-height);
    max-height: var(--app-viewport-height);
}

.ios-container.fullscreen-mode {
    padding: 0 !important;
}

.ios-container.fullscreen-mode .status-bar,
.ios-container.fullscreen-mode ~ .app-view .status-bar,
.ios-container.fullscreen-mode ~ .app-view .app-status-bar {
    height: calc(var(--safe-top, 0px) + var(--status-bar-height));
    padding-top: calc(var(--safe-top, 0px) + var(--status-bar-pad-top));
    flex: 0 0 calc(var(--safe-top, 0px) + var(--status-bar-height));
}

.ios-container.fullscreen-mode.hide-status-bar .status-bar,
.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .status-bar,
.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .app-status-bar {
    display: flex !important;
    height: 0;
    min-height: 0;
    flex-basis: 0;
    padding: 0;
    border: 0 !important;
    overflow: hidden;
}

.ios-container.fullscreen-mode.hide-status-bar .status-bar-content,
.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .status-bar-content {
    visibility: hidden;
    pointer-events: none;
}

.ios-container.fullscreen-mode.hide-status-bar .cute-home {
    padding-top: max(10px, calc(var(--fullscreen-safe-top) + 8px)) !important;
    padding-bottom: calc(16px + var(--fullscreen-safe-bottom)) !important;
}

.ios-container.fullscreen-mode.hide-status-bar .home-bottom {
    padding-bottom: calc(8px + var(--fullscreen-safe-bottom)) !important;
    transform: translateY(0) !important;
}

.ios-container.fullscreen-mode.hide-status-bar .dock-bar {
    margin-bottom: max(6px, calc(var(--fullscreen-safe-bottom) * 0.45)) !important;
}

.ios-container.fullscreen-mode.hide-status-bar .cute-home {
    padding-bottom: 0 !important;
}

.ios-container.fullscreen-mode.hide-status-bar .home-p2 .home-main {
    padding-bottom: 0 !important;
}

.ios-container.fullscreen-mode.hide-status-bar .home-bottom {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
}

.ios-container.fullscreen-mode.hide-status-bar .dock-bar {
    margin-bottom: 0 !important;
    transform: none !important;
}

.ios-container.fullscreen-mode .cute-home {
    position: relative;
    padding-bottom: 0 !important;
}

.ios-container.fullscreen-mode .home-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--fullscreen-home-dock-bottom) !important;
    padding: 0 0 !important;
    transform: none !important;
}

.ios-container.fullscreen-mode .dock-bar {
    margin-bottom: 0 !important;
    transform: none !important;
}

.ios-container.fullscreen-mode.hide-status-bar .home-bottom {
    bottom: var(--fullscreen-home-dock-bottom-hidden) !important;
}

.ios-container.fullscreen-mode.hide-status-bar {
    height: var(--app-viewport-height) !important;
    min-height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    overflow: hidden !important;
}

.ios-container.fullscreen-mode.hide-status-bar .home-bottom {
    transform: none !important;
}

@supports (-webkit-touch-callout: none) {
    :root {
        --fullscreen-home-dock-bottom-hidden: clamp(0px, calc(var(--safe-bottom, 0px) - 6px), 30px);
        --browser-hidden-dock-drop: clamp(72px, 10vh, 112px);
    }

    .ios-container.fullscreen-mode.hide-status-bar {
        height: calc(var(--app-viewport-height) + max(var(--app-browser-bottom-inset), var(--browser-hidden-dock-drop))) !important;
        min-height: calc(var(--app-viewport-height) + max(var(--app-browser-bottom-inset), var(--browser-hidden-dock-drop))) !important;
        max-height: calc(var(--app-viewport-height) + max(var(--app-browser-bottom-inset), var(--browser-hidden-dock-drop))) !important;
        overflow: visible !important;
    }

    .ios-container.fullscreen-mode.hide-status-bar .home-bottom {
        transform: translateY(var(--browser-hidden-dock-drop)) !important;
    }
}

#homeScreen .app-item:active,
#homeScreen .dock-item:active,
#homeScreen .home-entry:active {
    transform: none !important;
    opacity: 1 !important;
}

#homeScreen .app-item:active .app-icon,
#homeScreen .dock-item:active .app-icon,
#homeScreen .home-entry:active .app-icon {
    transform: none !important;
    filter: grayscale(36%) brightness(0.72) saturate(0.62) !important;
}

.ios-container.fullscreen-mode ~ #app-wechat.hide-status-bar .wechat-tabbar {
    height: calc(64px + var(--safe-bottom, 0px)) !important;
    min-height: calc(64px + var(--safe-bottom, 0px)) !important;
    padding: 5px 8px calc(7px + var(--safe-bottom, 0px)) !important;
    flex-shrink: 0;
}

.ios-container.fullscreen-mode ~ #app-music.hide-status-bar .music-content {
    padding-bottom: calc(82px + var(--safe-bottom, 0px)) !important;
}

.ios-container.fullscreen-mode ~ #app-music.hide-status-bar.is-music-player-page .music-content {
    padding: 14px 14px 18px !important;
}

.ios-container.fullscreen-mode ~ #app-music.hide-status-bar .music-mini-player {
    bottom: 0 !important;
    padding-bottom: calc(11px + var(--safe-bottom, 0px)) !important;
}

.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .nav-bar {
    height: calc(var(--fullscreen-nav-content-height) + var(--fullscreen-hidden-status-gap)) !important;
    min-height: calc(var(--fullscreen-nav-content-height) + var(--fullscreen-hidden-status-gap)) !important;
    padding-top: var(--fullscreen-hidden-status-gap) !important;
    align-items: center !important;
    flex-shrink: 0;
}

.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .chat-nav-bar,
.ios-container.fullscreen-mode ~ .app-view.hide-status-bar#app-chat .chat-nav-bar {
    height: calc(56px + var(--fullscreen-hidden-status-gap)) !important;
    min-height: calc(56px + var(--fullscreen-hidden-status-gap)) !important;
    padding-top: var(--fullscreen-hidden-status-gap) !important;
    align-items: center !important;
}

.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .nav-title {
    line-height: normal !important;
}

.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .nav-bar:not(.chat-nav-bar):not(.music-nav) .nav-title,
.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .nav-bar:not(.chat-nav-bar):not(.music-nav) .nav-back,
.ios-container.fullscreen-mode ~ #app-wechat.hide-status-bar .nav-title,
.ios-container.fullscreen-mode ~ #app-wechat.hide-status-bar .nav-back,
.ios-container.fullscreen-mode ~ #app-wechat.hide-status-bar .nav-action {
    top: calc(var(--fullscreen-hidden-status-gap) + 26px) !important;
}

.ios-container.fullscreen-mode ~ .app-view.hide-status-bar .nav-bar:not(.chat-nav-bar):not(.music-nav) .nav-action {
    top: auto !important;
}

.ios-container.fullscreen-mode ~ #app-wechat.hide-status-bar .nav-title {
    transform: translate(-50%, -50%) !important;
}

.ios-container.fullscreen-mode ~ #app-wechat.hide-status-bar .nav-back,
.ios-container.fullscreen-mode ~ #app-wechat.hide-status-bar .nav-action {
    transform: translateY(-50%) !important;
}

.ios-container.fullscreen-mode ~ #app-chat.hide-status-bar .chat-nav-bar .nav-title,
.ios-container.fullscreen-mode ~ #app-chat.hide-status-bar .chat-nav-bar .nav-back,
.ios-container.fullscreen-mode ~ #app-chat.hide-status-bar .chat-nav-bar .nav-action,
.ios-container.fullscreen-mode ~ #app-chat.hide-status-bar .chat-mode-toggle,
.ios-container.fullscreen-mode ~ #app-chat.hide-status-bar .chat-nav-actions {
    top: 0 !important;
}

/* Keep user wallpaper visible after the final white shell overrides. */
#homeScreen.ios-container.has-wallpaper,
#homeScreen.ios-container.fullscreen-mode.hide-status-bar.has-wallpaper {
    background: var(--home-wallpaper-bg) !important;
    background-image: var(--home-wallpaper-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#homeScreen.has-wallpaper .home-p2,
#homeScreen.has-wallpaper .cute-home,
#homeScreen.fullscreen-mode.hide-status-bar.has-wallpaper .home-p2,
#homeScreen.fullscreen-mode.hide-status-bar.has-wallpaper .cute-home {
    background: transparent !important;
    background-image: none !important;
}

/* White home refresh: pure-white shell with quiet cards. */
#homeScreen,
#homeScreen.ios-container,
#homeScreen.fullscreen-mode.hide-status-bar {
    background: #ffffff !important;
    background-image: none !important;
}

#homeScreen .home-p2,
#homeScreen .cute-home,
#homeScreen .status-bar {
    background: transparent !important;
    background-image: none !important;
}

#homeScreen {
    --home-shell-pad-x: clamp(8px, 2.2svw, 12px);
    --home-main-top: clamp(24px, 4.2svh, 42px);
    --home-grid-col-gap: clamp(6px, 1.45svw, 9px);
    --home-grid-row-gap: clamp(18px, 2.4svh, 24px);
    --home-entry-max: clamp(78px, 18svw, 92px);
    --home-icon-size-responsive: clamp(50px, 10.2svw, 58px);
    --home-icon-radius-responsive: clamp(14px, 3.1svw, 17px);
    --home-icon-svg-size: clamp(28px, 5.7svw, 32px);
    --home-label-size-responsive: clamp(12px, 2.35svw, 13px);
    --home-label-small-responsive: clamp(10px, 2.05svw, 11px);
    --home-calendar-width: clamp(204px, 45svw, 264px);
    --home-calendar-height: clamp(214px, 27svh, 252px);
    --home-calendar-margin: 0px;
    --home-calendar-pad-x: clamp(12px, 2.8svw, 16px);
    --home-calendar-pad-y: clamp(12px, 1.7svh, 16px);
    --home-calendar-radius: clamp(24px, 5.3svw, 32px);
    --home-calendar-heading-gap: clamp(10px, 1.5svh, 15px);
    --home-calendar-day-min: clamp(20px, 2.45svh, 24px);
    --home-calendar-dot: clamp(18px, 3.7svw, 21px);
    --home-calendar-weekday-size: clamp(8px, 1.9svw, 9px);
    --home-calendar-day-size: clamp(8.5px, 2.05svw, 10px);
    --home-calendar-month-size: clamp(10px, 2.2svw, 12px);
    --home-calendar-deco-size: clamp(10px, 2.2svw, 11px);
    --home-calendar-quote-size: clamp(12px, 2.45svw, 14px);
    --home-calendar-quote-pad: clamp(16px, 2.8svh, 24px);
    --home-dock-width-responsive: min(calc(100% - clamp(44px, 12svw, 70px)), 344px);
    --home-dock-min-height: clamp(70px, 8.4svh, 82px);
    --home-dock-gap: clamp(18px, 4.2svw, 24px);
    --home-dock-pad-x: clamp(20px, 5.2svw, 30px);
    --home-dock-icon-size: clamp(44px, 8.8svw, 50px);
    --home-dock-icon-radius: clamp(13px, 2.6svw, 15px);
}

@media (max-height: 760px) {
    #homeScreen {
        --home-main-top: clamp(18px, 3.2svh, 28px);
        --home-grid-row-gap: clamp(14px, 2.2svh, 19px);
        --home-calendar-height: clamp(200px, 27svh, 232px);
        --home-calendar-margin: 0px;
        --home-calendar-quote-pad: clamp(10px, 2.4svh, 16px);
        --home-dock-min-height: clamp(64px, 8.8svh, 72px);
    }
}

#homeScreen.phone-mode-small {
    --home-shell-pad-x: 8px;
    --home-main-top: 18px;
    --home-grid-col-gap: 4px;
    --home-grid-row-gap: 15px;
    --home-entry-max: 70px;
    --home-icon-size-responsive: 50px;
    --home-icon-radius-responsive: 14px;
    --home-icon-svg-size: 27px;
    --home-label-size-responsive: 12px;
    --home-label-small-responsive: 10px;
    --home-calendar-width: 166px;
    --home-calendar-height: 188px;
    --home-calendar-margin: 0px;
    --home-calendar-pad-x: 11px;
    --home-calendar-pad-y: 11px;
    --home-calendar-radius: 24px;
    --home-calendar-heading-gap: 8px;
    --home-calendar-day-min: 18px;
    --home-calendar-dot: 17px;
    --home-calendar-weekday-size: 7.5px;
    --home-calendar-day-size: 8.5px;
    --home-calendar-month-size: 9.5px;
    --home-calendar-deco-size: 10px;
    --home-calendar-quote-size: 11px;
    --home-calendar-quote-pad: 10px;
    --home-dock-width-responsive: min(calc(100% - 42px), 274px);
    --home-dock-min-height: 66px;
    --home-dock-gap: 16px;
    --home-dock-pad-x: 16px;
    --home-dock-icon-size: 42px;
    --home-dock-icon-radius: 13px;
}

#homeScreen.phone-mode-medium {
    --home-main-top: 22px;
    --home-grid-row-gap: 17px;
    --home-entry-max: 78px;
    --home-icon-size-responsive: 52px;
    --home-icon-radius-responsive: 15px;
    --home-icon-svg-size: 29px;
    --home-calendar-width: 198px;
    --home-calendar-height: 212px;
    --home-calendar-margin: 0px;
    --home-calendar-radius: 26px;
    --home-calendar-weekday-size: 8px;
    --home-calendar-day-size: 9px;
    --home-calendar-month-size: 10px;
    --home-calendar-quote-size: 12px;
    --home-calendar-quote-pad: 12px;
    --home-dock-width-responsive: min(calc(100% - 52px), 292px);
    --home-dock-min-height: 70px;
    --home-dock-icon-size: 45px;
}

#homeScreen.phone-mode-large,
#homeScreen.phone-mode-iphone15 {
    --home-calendar-width: 264px;
    --home-calendar-height: 250px;
    --home-calendar-margin: 0px;
    --home-calendar-quote-size: 13px;
}

#homeScreen.phone-mode-iphone15plus {
    --home-main-top: 38px;
    --home-calendar-width: 264px;
    --home-calendar-height: 254px;
    --home-calendar-margin: 0px;
    --home-dock-width-responsive: min(calc(100% - 76px), 326px);
    --home-dock-min-height: 80px;
    --home-dock-icon-size: 50px;
    --home-calendar-weekday-size: 8px;
    --home-calendar-day-size: 9px;
    --home-calendar-month-size: 10px;
    --home-calendar-quote-size: 14px;
}

#homeScreen .cute-home {
    padding: 18px var(--home-shell-pad-x) 0 !important;
}

#homeScreen.hide-status-bar .cute-home,
#homeScreen.fullscreen-mode.hide-status-bar .cute-home {
    padding-top: calc(var(--safe-top, 0px) + 10px) !important;
}

#homeScreen .home-hero {
    padding-top: 8px !important;
    gap: 5px !important;
}

#homeScreen .home-date {
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: rgba(99, 113, 134, 0.74) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

#homeScreen .home-p2 .home-clock {
    font-size: 64px !important;
    line-height: 0.94 !important;
    font-weight: 260 !important;
    letter-spacing: 0 !important;
    color: rgba(34, 46, 64, 0.94) !important;
    text-shadow: none !important;
}

#homeScreen .home-main {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start !important;
    padding: var(--home-main-top) 0 0 !important;
}

#homeScreen .app-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 4px !important;
    column-gap: var(--home-grid-col-gap);
    row-gap: var(--home-grid-row-gap);
    align-content: start;
    align-items: start;
    justify-items: center;
}

#homeScreen .home-entry,
#homeScreen .home-entry-chat,
#homeScreen .home-entry-notes,
#homeScreen .home-entry-worldbook,
#homeScreen .home-entry-bookstore,
#homeScreen .home-entry-forum {
    width: 100%;
    max-width: var(--home-entry-max);
    padding: 0 !important;
    gap: 7px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#homeScreen .home-entry-notes {
    grid-row: 1;
    grid-column: 1;
}

#homeScreen .home-entry-chat {
    grid-row: 1;
    grid-column: 2;
}

#homeScreen .home-entry-worldbook {
    grid-row: 1;
    grid-column: 3;
}

#homeScreen .home-entry-bookstore {
    grid-row: 1;
    grid-column: 4;
}

#homeScreen .home-entry-forum {
    grid-row: 2;
    grid-column: 1;
}

#homeScreen .home-entry .app-icon,
#homeScreen .dock-item .app-icon,
#homeScreen .home-entry-chat .app-icon,
#homeScreen .home-entry-bookstore .app-icon,
#homeScreen .home-entry-forum .app-icon,
#homeScreen .bookstore-icon {
    width: var(--home-icon-size-responsive);
    height: var(--home-icon-size-responsive);
    border-radius: var(--home-icon-radius-responsive) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(225, 230, 238, 0.92) !important;
    color: rgba(58, 75, 100, 0.96) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}

#homeScreen .home-entry .app-icon::after,
#homeScreen .dock-item .app-icon::after {
    display: none !important;
}

#homeScreen .home-entry .app-icon svg,
#homeScreen .dock-item .app-icon svg {
    width: var(--home-icon-svg-size);
    height: var(--home-icon-svg-size);
    color: rgba(58, 75, 100, 0.96) !important;
}

#homeScreen .home-entry .app-label,
#homeScreen .dock-item .app-label {
    margin-top: 0 !important;
    min-height: 0 !important;
    font-size: var(--home-label-size-responsive) !important;
    line-height: 1.18 !important;
    font-weight: 680 !important;
    letter-spacing: 0 !important;
    color: rgba(36, 49, 68, 0.94) !important;
    text-shadow: none !important;
}

#homeScreen .home-entry .app-label small {
    margin-top: 5px;
    font-size: var(--home-label-small-responsive) !important;
    line-height: 1.15 !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
    color: rgba(109, 124, 145, 0.72) !important;
}

#homeScreen .home-calendar-card {
    grid-row: 2;
    grid-column: 2 / -1;
    justify-self: center;
    align-self: start;
    width: var(--home-calendar-width);
    height: var(--home-calendar-height);
    min-height: 0;
    margin: var(--home-calendar-margin) auto 0;
    padding: var(--home-calendar-pad-y) var(--home-calendar-pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--home-calendar-radius);
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(225, 230, 238, 0.92);
    box-shadow: none;
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    pointer-events: none;
}

#homeScreen .home-calendar-card::before {
    display: none;
}

#homeScreen .home-calendar-card > * {
    position: relative;
    z-index: 1;
}

#homeScreen .home-calendar-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--home-calendar-heading-gap);
    font-size: var(--home-calendar-month-size);
    font-weight: 650;
    letter-spacing: 2.4px;
    color: rgba(118, 132, 152, 0.78);
}

#homeScreen .home-calendar-deco {
    font-size: var(--home-calendar-deco-size);
    line-height: 1;
    color: rgba(118, 132, 152, 0.68);
}

#homeScreen .home-calendar-month {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
}

#homeScreen .home-calendar-weekdays {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 8px;
    font-size: var(--home-calendar-weekday-size);
    font-weight: 650;
    letter-spacing: 0.2px;
    color: rgba(110, 125, 145, 0.82);
    text-align: center;
}

#homeScreen .home-calendar-dates {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
}

#homeScreen .home-calendar-day {
    width: 100%;
    min-height: var(--home-calendar-day-min);
    display: flex;
    align-items: center;
    justify-content: center;
}

#homeScreen .home-calendar-day strong {
    width: var(--home-calendar-dot);
    height: var(--home-calendar-dot);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: var(--home-calendar-day-size);
    font-weight: 650;
    line-height: 1;
    color: rgba(93, 108, 129, 0.82);
}

#homeScreen .home-calendar-day.is-active strong {
    color: rgba(42, 57, 79, 0.96);
    background: rgba(237, 241, 246, 0.92);
    box-shadow: none;
}

#homeScreen .home-calendar-quote {
    width: 100%;
    margin-top: auto;
    padding-top: var(--home-calendar-quote-pad);
    text-align: center;
    color: rgba(78, 96, 123, 0.76);
    font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
}

#homeScreen .home-calendar-quote span:first-child {
    display: block;
    max-width: calc(100% - 26px);
    margin: 0 auto;
    font-size: var(--home-calendar-quote-size);
    line-height: 1.45;
    white-space: nowrap;
}

#homeScreen .home-calendar-ornament {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1;
    color: rgba(99, 115, 137, 0.72);
}

#homeScreen .home-bottom {
    padding-top: 0 !important;
}

#homeScreen .dock-bar {
    width: var(--home-dock-width-responsive);
    min-height: var(--home-dock-min-height);
    margin-bottom: 7px !important;
    padding: 10px var(--home-dock-pad-x) !important;
    gap: var(--home-dock-gap) !important;
    border-radius: 34px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(225, 230, 238, 0.92) !important;
    box-shadow: none !important;
    backdrop-filter: blur(20px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
}

#homeScreen .dock-item .app-icon {
    width: var(--home-dock-icon-size);
    height: var(--home-dock-icon-size);
    border-radius: var(--home-dock-icon-radius) !important;
}

#homeScreen .home-bar {
    background: rgba(31, 42, 55, 0.22) !important;
    box-shadow: none !important;
}

@media (max-height: 720px) {
    #homeScreen .cute-home {
        padding-top: 12px !important;
    }

    #homeScreen .home-p2 .home-clock {
        font-size: 58px !important;
    }

    #homeScreen .dock-bar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

@media (max-height: 680px) {
    #homeScreen {
        --home-calendar-height: clamp(176px, 26svh, 210px);
        --home-calendar-margin: 0px;
        --home-calendar-day-min: 16px;
        --home-calendar-dot: 14px;
        --home-calendar-weekday-size: 7px;
        --home-calendar-day-size: 8px;
        --home-calendar-month-size: 9px;
        --home-calendar-deco-size: 10px;
        --home-calendar-quote-size: 10px;
        --home-calendar-quote-pad: 8px;
    }

    #homeScreen .home-calendar-ornament {
        margin-top: 8px;
    }
}

#homeScreen.phone-mode-small .cute-home {
    padding: 12px var(--home-shell-pad-x) 0 !important;
}

#homeScreen.phone-mode-small.hide-status-bar .cute-home {
    padding-top: calc(var(--safe-top, 0px) + 8px) !important;
}

#homeScreen.phone-mode-small .home-main,
#homeScreen.phone-mode-medium .home-main,
#homeScreen.phone-mode-large .home-main,
#homeScreen.phone-mode-iphone15 .home-main,
#homeScreen.phone-mode-iphone15plus .home-main {
    padding: var(--home-main-top) 0 0 !important;
}

#homeScreen.phone-mode-small .app-grid,
#homeScreen.phone-mode-medium .app-grid,
#homeScreen.phone-mode-large .app-grid,
#homeScreen.phone-mode-iphone15 .app-grid,
#homeScreen.phone-mode-iphone15plus .app-grid {
    column-gap: var(--home-grid-col-gap) !important;
    row-gap: var(--home-grid-row-gap) !important;
    padding: 0 4px !important;
}

#homeScreen.phone-mode-small .home-calendar-card,
#homeScreen.phone-mode-medium .home-calendar-card,
#homeScreen.phone-mode-large .home-calendar-card,
#homeScreen.phone-mode-iphone15 .home-calendar-card,
#homeScreen.phone-mode-iphone15plus .home-calendar-card {
    width: var(--home-calendar-width);
    height: var(--home-calendar-height);
    margin-top: var(--home-calendar-margin);
}

#homeScreen.phone-mode-small .dock-bar,
#homeScreen.phone-mode-medium .dock-bar,
#homeScreen.phone-mode-large .dock-bar,
#homeScreen.phone-mode-iphone15 .dock-bar,
#homeScreen.phone-mode-iphone15plus .dock-bar {
    width: var(--home-dock-width-responsive);
    min-height: var(--home-dock-min-height);
    gap: var(--home-dock-gap) !important;
    padding: 10px var(--home-dock-pad-x) !important;
}

/* WeChat premium minimal refresh */
#app-wechat {
    --wechat-list-bg: #ffffff;
    --wechat-soft-bg: #f7f7f7;
    --wechat-ink: #111111;
    --wechat-muted: #999999;
    --wechat-faint: #bbbbbb;
    --wechat-line: #f2f2f2;
    background: var(--wechat-list-bg) !important;
    color: var(--wechat-ink);
    font-family: "SF Pro Text", Inter, "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

#app-wechat .status-bar,
#app-wechat .app-status-bar,
#app-wechat .nav-bar {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}

#app-wechat .nav-bar {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 18px !important;
}

#app-wechat .nav-title {
    color: var(--wechat-ink) !important;
    font-family: "SF Pro Display", Inter, "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

#app-wechat .nav-back,
#app-wechat .nav-action {
    color: var(--wechat-ink) !important;
    font-size: 27px !important;
    font-weight: 300 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0.92;
}

#app-wechat .nav-action {
    font-size: 28px !important;
}

#app-wechat .wechat-content,
#app-wechat .wechat-tab,
#app-wechat #tab-chats,
#app-wechat #tab-contacts,
#app-wechat #tab-chats .chat-list,
#app-wechat #tab-contacts .contacts-list {
    background: var(--wechat-list-bg) !important;
}

#app-wechat .wechat-content {
    padding-top: 0 !important;
}

#app-wechat #tab-chats .chat-list,
#app-wechat #tab-contacts .contacts-list {
    padding: 0 0 18px !important;
}

#app-wechat #tab-chats .chat-item,
#app-wechat #tab-contacts .chat-item {
    position: relative;
    min-height: 82px !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    gap: 14px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.16s ease;
}

#app-wechat #tab-chats .chat-item::after,
#app-wechat #tab-contacts .chat-item::after {
    content: "" !important;
    position: absolute;
    left: 82px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: var(--wechat-line);
    transform: scaleY(0.5);
    transform-origin: bottom;
    pointer-events: none;
}

#app-wechat #tab-chats .chat-item:last-child::after,
#app-wechat #tab-contacts .chat-item:last-child::after {
    content: none !important;
}

#app-wechat #tab-chats .chat-item:hover,
#app-wechat #tab-chats .chat-item:active,
#app-wechat #tab-contacts .chat-item:hover,
#app-wechat #tab-contacts .chat-item:active {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

#app-wechat #tab-chats .chat-item,
#app-wechat #tab-chats .chat-item:hover,
#app-wechat #tab-chats .chat-item:active,
#app-wechat #tab-chats .chat-item:focus,
#app-wechat #tab-chats .chat-item:focus-visible,
#app-wechat #tab-contacts .chat-item,
#app-wechat #tab-contacts .chat-item:hover,
#app-wechat #tab-contacts .chat-item:active,
#app-wechat #tab-contacts .chat-item:focus,
#app-wechat #tab-contacts .chat-item:focus-visible {
    background: #ffffff !important;
    background-color: #ffffff !important;
    outline: none !important;
}

#app-wechat #tab-chats .chat-item .avatar,
#app-wechat #tab-contacts .chat-item .avatar {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #8f8f8f !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

#app-wechat #tab-chats .chat-item .default-avatar,
#app-wechat #tab-contacts .chat-item .default-avatar {
    background: #eeeeee !important;
    color: #8f8f8f !important;
}

#app-wechat #tab-chats .chat-item .custom-avatar,
#app-wechat #tab-contacts .chat-item .custom-avatar {
    background-size: cover !important;
    background-position: center !important;
    color: #ffffff !important;
}

#app-wechat #tab-contacts .chat-item .avatar {
    color: #ffffff !important;
}

#app-wechat #tab-contacts .chat-item .default-avatar {
    color: #8f8f8f !important;
}

#app-wechat #tab-chats .chat-info,
#app-wechat #tab-contacts .chat-info {
    min-width: 0;
    align-self: stretch;
    justify-content: center;
    gap: 7px !important;
    padding: 0 !important;
}

#app-wechat #tab-chats .chat-main-row {
    align-items: flex-start;
    gap: 12px !important;
}

#app-wechat #tab-chats .chat-sub-row {
    align-items: center;
    gap: 8px !important;
    transform: none !important;
}

#app-wechat #tab-chats .chat-name {
    color: var(--wechat-ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

#app-wechat #tab-chats .chat-preview {
    color: var(--wechat-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

#app-wechat #tab-chats .chat-preview-text {
    color: inherit !important;
}

#app-wechat #tab-chats .chat-time {
    min-width: max-content;
    padding-top: 2px;
    color: var(--wechat-faint) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: right;
    letter-spacing: 0 !important;
}

#app-wechat #tab-chats .chat-preview-prefix {
    height: auto !important;
    padding: 0 !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--wechat-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

#app-wechat #tab-chats .chat-preview-prefix-voice,
#app-wechat #tab-chats .chat-preview-prefix-photo,
#app-wechat #tab-chats .chat-preview-prefix-sticker,
#app-wechat #tab-chats .chat-preview-prefix-gift,
#app-wechat #tab-chats .chat-preview-prefix-transfer {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

#app-wechat #tab-chats .chat-preview-prefix-icon svg {
    stroke-width: 1.45 !important;
}

#app-wechat #tab-chats .chat-unread-dot {
    background: #111111 !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

#app-wechat #tab-chats .wechat-empty-state {
    margin: 58px 28px 0;
    background: transparent;
    color: var(--wechat-muted);
}

#app-wechat .wechat-tabbar {
    height: calc(66px + var(--safe-bottom, 0px)) !important;
    min-height: calc(66px + var(--safe-bottom, 0px)) !important;
    padding: 6px 10px calc(8px + var(--safe-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 0.5px solid var(--wechat-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#app-wechat .tab-item {
    gap: 3px !important;
    color: #cccccc !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

#app-wechat .tab-item.active {
    color: #111111 !important;
}

#app-wechat .tab-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#app-wechat .tab-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.35 !important;
}

#app-wechat .tab-icon svg path,
#app-wechat .tab-icon svg rect,
#app-wechat .tab-icon svg circle {
    stroke-width: 1.35 !important;
}

#app-wechat .tab-label {
    color: currentColor !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Chat bubble restore */
#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    display: flex;
    align-items: flex-end;
    gap: 10px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
}

#app-chat .msg-bubble-user.same-author-next,
#app-chat .msg-bubble-ai.same-author-next {
    margin-bottom: 4px !important;
}

#app-chat .msg-bubble-user {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

#app-chat .msg-bubble-ai {
    justify-content: flex-start;
    flex-direction: row;
}

#app-chat .msg-content-stack {
    min-width: 0 !important;
    max-width: 240px !important;
    width: auto !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 240px !important;
    white-space: pre-wrap !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: #ebebeb !important;
    color: #111111 !important;
    border-top-left-radius: 4px !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: #111111 !important;
    color: #ffffff !important;
    border-top-right-radius: 4px !important;
}

#app-chat .msg-bubble-user .msg-text::after,
#app-chat .msg-bubble-ai .msg-text::after {
    content: none !important;
}

#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar {
    visibility: hidden !important;
}

#app-chat .msg-bubble-user.no-avatar,
#app-chat .msg-bubble-ai.no-avatar {
    gap: 10px !important;
}

#app-chat .msg-bubble-user.same-author-next,
#app-chat .msg-bubble-ai.same-author-next {
    margin-bottom: 4px !important;
}

/* Chat avatar alignment refinement */
#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    align-items: flex-end !important;
}

#app-chat .msg-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    align-self: flex-end !important;
    font-size: 14px !important;
}

#app-chat .msg-bubble-user {
    gap: 0 !important;
    flex-direction: row !important;
}

#app-chat .msg-bubble-user .msg-avatar {
    display: none !important;
}

#app-chat .msg-bubble-ai {
    gap: 10px !important;
}

#app-chat .msg-bubble-ai.no-avatar .msg-avatar {
    display: flex !important;
    visibility: hidden !important;
}

#app-chat .msg-bubble-ai.group-tail .msg-avatar {
    display: flex !important;
    visibility: visible !important;
}

/* Final left/right chat row contract */
#app-chat .msg-bubble-user {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    flex-direction: row !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#app-chat .msg-bubble-user .msg-avatar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
}

#app-chat .msg-bubble-user .msg-content-stack {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#app-chat .msg-bubble-ai {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    flex-direction: row !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 10px !important;
}

#app-chat .msg-bubble-ai .msg-avatar {
    display: flex !important;
    width: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
}

#app-chat .msg-bubble-ai.no-avatar .msg-avatar {
    visibility: hidden !important;
}

#app-chat .msg-bubble-ai.group-tail .msg-avatar {
    visibility: visible !important;
}

/* Show avatars on every chat message */
#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    display: flex !important;
    align-items: flex-end !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 10px !important;
}

#app-chat .msg-bubble-user {
    justify-content: flex-end !important;
    flex-direction: row-reverse !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#app-chat .msg-bubble-ai {
    justify-content: flex-start !important;
    flex-direction: row !important;
}

#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar {
    display: flex !important;
    visibility: visible !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
}

/* Final explicit avatar order */
#app-chat .msg-bubble-user {
    justify-content: flex-end !important;
    flex-direction: row !important;
    gap: 10px !important;
}

#app-chat .msg-bubble-user .msg-content-stack {
    order: 1 !important;
}

#app-chat .msg-bubble-user .msg-avatar {
    order: 2 !important;
}

#app-chat .msg-bubble-ai {
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 10px !important;
}

#app-chat .msg-bubble-ai .msg-avatar {
    order: 1 !important;
}

#app-chat .msg-bubble-ai .msg-content-stack {
    order: 2 !important;
}

#app-chat .msg-bubble-user .self-avatar {
    background: #111111 !important;
    color: transparent !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    text-shadow: none !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211";
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* Chat composer premium minimal refresh */
#app-chat .chat-input-bar {
    min-height: 64px !important;
    height: auto !important;
    padding: 12px 16px calc(12px + var(--safe-bottom, 0px)) !important;
    gap: 10px !important;
    align-items: center !important;
    background: #ffffff !important;
    border-top: 0.5px solid #eeeeee !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#app-chat .chat-input {
    height: 40px !important;
    min-height: 40px !important;
    flex: 1 1 auto;
    padding: 0 12px !important;
    background: #f5f5f5 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #999999 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
}

#app-chat .chat-input::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

#app-chat .chat-input:focus {
    background: #f5f5f5 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

#app-chat .input-btn.voice,
#app-chat .plus-btn {
    width: 28px !important;
    height: 40px !important;
    min-width: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #888888 !important;
}

#app-chat .input-btn.voice svg,
#app-chat .plus-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 1.45 !important;
}

#app-chat .input-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

#app-chat .emoji-btn {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: #888888 !important;
    opacity: 1 !important;
}

#app-chat .emoji-btn svg {
    width: 21px !important;
    height: 21px !important;
    display: block;
}

#app-chat .emoji-btn svg path {
    fill: #888888 !important;
    opacity: 0.88 !important;
}

#app-chat .emoji-btn svg circle {
    fill: #ffffff !important;
    opacity: 0.95 !important;
}

#app-chat .emoji-btn:hover,
#app-chat .emoji-btn:active {
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
}

#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send {
    position: relative;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #111111 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden;
}

#app-chat .input-btn.send::before,
#app-chat.offline-mode .input-btn.send::before {
    content: "↑";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transform: translateY(-1px);
}

#app-chat .input-btn.send:hover,
#app-chat .input-btn.send:active,
#app-chat .input-btn.send:disabled,
#app-chat .input-btn.send[disabled],
#app-chat.offline-mode .input-btn.send:hover,
#app-chat.offline-mode .input-btn.send:active,
#app-chat.offline-mode .input-btn.send:disabled,
#app-chat.offline-mode .input-btn.send[disabled] {
    background: #111111 !important;
    color: transparent !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Monochrome avatar system */
#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    background: #111111 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    background: #e8e8e8 !important;
    color: #111111 !important;
    text-shadow: none !important;
}

#app-wechat #tab-chats .chat-item .default-avatar,
#app-wechat #tab-contacts .chat-item .default-avatar,
#app-wechat #tab-chats .chat-item .custom-avatar:not([style*="background-image"]),
#app-wechat #tab-contacts .chat-item .custom-avatar:not([style*="background-image"]) {
    background: #e8e8e8 !important;
    color: #111111 !important;
    text-shadow: none !important;
}

/* Final lightweight chat bubble visual refresh */
#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    align-items: flex-end !important;
    gap: 8px !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    align-self: flex-end !important;
    font-size: 13px !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    padding: 9px 13px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    border-bottom-right-radius: 4px !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: #f0f0f0 !important;
    color: #1a1a1a !important;
    border-radius: 16px !important;
    border-bottom-left-radius: 4px !important;
}

#app-chat .msg-bubble-user .self-avatar {
    background: #1a1a1a !important;
    color: transparent !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    overflow: hidden !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211" !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Chat polish refresh */
#app-chat {
    --chat-bg: #f7f7f8;
    --chat-ink: #101418;
    --chat-muted: #9aa3af;
    --chat-peer: #ffffff;
    --chat-self: #111111;
    --chat-toolbar: rgba(255, 255, 255, 0.92);
    background:
        linear-gradient(180deg, #fbfbfc 0%, var(--chat-bg) 38%, #f1f2f4 100%) !important;
}

#app-chat::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 138px),
        linear-gradient(90deg, rgba(239, 242, 247, 0.62), rgba(255, 255, 255, 0.24) 42%, rgba(234, 238, 243, 0.5)) !important;
}

#app-chat .app-status-bar,
#app-chat .chat-nav-bar {
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 0.5px solid rgba(18, 24, 32, 0.055) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

#app-chat .chat-nav-bar {
    height: 56px !important;
}

#app-chat .chat-nav-bar .nav-title {
    bottom: 13px !important;
    color: #05070a !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
}

#app-chat .chat-nav-bar .nav-back,
#app-chat .chat-nav-bar .nav-action,
#app-chat .chat-mode-toggle {
    color: #2b3440 !important;
}

#app-chat .chat-nav-actions {
    gap: 18px !important;
}

#app-chat .chat-mode-toggle.active {
    background: rgba(17, 17, 17, 0.055) !important;
    color: #111111 !important;
}

#app-chat .chat-nav-actions .chat-mode-toggle {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    background: transparent !important;
}

#app-chat .chat-nav-actions .chat-mode-toggle.active {
    background: rgba(7, 193, 96, 0.09) !important;
}

#app-chat .chat-nav-actions .chat-mode-toggle .chat-mode-icon {
    width: 24px !important;
    height: 24px !important;
}

#app-chat .chat-nav-actions .chat-mode-toggle .chat-mode-status-dot {
    right: 6px !important;
    bottom: 6px !important;
}

#app-chat .chat-mode-status-dot {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92) !important;
}

#app-chat .chat-messages {
    padding: 18px 16px calc(104px + var(--safe-bottom, 0px)) !important;
    gap: 4px !important;
    background: transparent !important;
    scroll-padding-top: 84px !important;
    scroll-padding-bottom: calc(112px + var(--safe-bottom, 0px)) !important;
}

#app-chat .time-divider,
#app-chat .msg-timestamp {
    align-self: center !important;
    width: auto !important;
    max-width: 82% !important;
    margin: 16px auto 18px !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--chat-muted) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    width: 100% !important;
    max-width: 100% !important;
    gap: 9px !important;
    margin-bottom: 10px !important;
    align-items: flex-end !important;
}

#app-chat .msg-bubble-user.same-author-next,
#app-chat .msg-bubble-ai.same-author-next {
    margin-bottom: 3px !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
    box-shadow:
        0 1px 1px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#app-chat .msg-bubble-user .msg-avatar {
    border-radius: 50% !important;
}

#app-chat .msg-content-stack {
    max-width: min(76%, 330px) !important;
}

#app-chat .msg-bubble-user .msg-content-stack {
    max-width: min(76%, 330px) !important;
}

#app-chat .msg-content-stack .msg-text {
    max-width: 100% !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.055),
        0 1px 1px rgba(15, 23, 42, 0.025) !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-self) !important;
    color: #ffffff !important;
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 6px !important;
    box-shadow:
        0 8px 18px rgba(17, 17, 17, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-peer) !important;
    color: var(--chat-ink) !important;
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 6px !important;
}

#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    background: linear-gradient(180deg, #f1f2f4, #e5e7eb) !important;
    color: #111111 !important;
}

#app-chat .msg-bubble-user .self-avatar {
    background: #111111 !important;
    color: transparent !important;
    border-radius: 50% !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211" !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#app-chat .msg-quote-block,
#app-chat .msg-translation-block {
    border-radius: 12px !important;
}

#app-chat .chat-input-bar {
    min-height: 70px !important;
    margin: 0 !important;
    padding: 10px 14px calc(12px + var(--safe-bottom, 0px)) !important;
    gap: 10px !important;
    background: var(--chat-toolbar) !important;
    border: 0 !important;
    border-top: 0.5px solid rgba(18, 24, 32, 0.07) !important;
    border-radius: 0 !important;
    box-shadow:
        0 -10px 28px rgba(15, 23, 42, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

#app-chat .chat-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 15px !important;
    background: rgba(244, 245, 247, 0.98) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    color: #15191f !important;
    font-size: 15px !important;
    line-height: 40px !important;
}

#app-chat .chat-input::placeholder {
    color: #a0a7b0 !important;
}

#app-chat .chat-input:focus {
    background: #ffffff !important;
    box-shadow:
        0 0 0 2px rgba(17, 17, 17, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#app-chat .input-actions {
    gap: 9px !important;
    padding-left: 10px !important;
    border-left: 0.5px solid rgba(18, 24, 32, 0.08) !important;
}

#app-chat .input-btn.voice,
#app-chat .plus-btn,
#app-chat .emoji-btn {
    color: #6f7782 !important;
    transition: transform 0.14s ease, background-color 0.14s ease, color 0.14s ease !important;
}

#app-chat .input-btn.voice:active,
#app-chat .plus-btn:active,
#app-chat .emoji-btn:active {
    transform: scale(0.94) !important;
    background: rgba(17, 17, 17, 0.055) !important;
}

#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: #111111 !important;
    box-shadow:
        0 8px 16px rgba(17, 17, 17, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#app-chat .input-btn.send::before,
#app-chat.offline-mode .input-btn.send::before {
    content: "\2191" !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    transform: translateY(-1px) !important;
}

#app-chat .input-btn.send:active,
#app-chat.offline-mode .input-btn.send:active {
    transform: scale(0.94) !important;
}

/* Softer chat palette */
#app-chat {
    --chat-bg: #f6f7f6;
    --chat-ink: #20262c;
    --chat-muted: #9aa4ad;
    --chat-peer: #ffffff;
    --chat-self: #e3eee4;
    --chat-self-ink: #223028;
    --chat-accent: #4f6358;
    background:
        linear-gradient(180deg, #fbfbfb 0%, var(--chat-bg) 42%, #f1f3f2 100%) !important;
}

#app-chat::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0) 148px),
        linear-gradient(90deg, rgba(246, 247, 246, 0.48), rgba(255, 255, 255, 0.18) 52%, rgba(241, 244, 242, 0.42)) !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-self) !important;
    color: var(--chat-self-ink) !important;
    box-shadow:
        0 7px 16px rgba(68, 88, 76, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.04),
        0 1px 1px rgba(15, 23, 42, 0.018) !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar {
    background: var(--chat-accent) !important;
    color: transparent !important;
    box-shadow:
        0 5px 12px rgba(79, 99, 88, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    color: #ffffff !important;
}

#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send {
    background: var(--chat-accent) !important;
    box-shadow:
        0 7px 15px rgba(79, 99, 88, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#app-chat .input-btn.send:hover,
#app-chat .input-btn.send:active,
#app-chat .input-btn.send:disabled,
#app-chat .input-btn.send[disabled],
#app-chat.offline-mode .input-btn.send:hover,
#app-chat.offline-mode .input-btn.send:active,
#app-chat.offline-mode .input-btn.send:disabled,
#app-chat.offline-mode .input-btn.send[disabled] {
    background: var(--chat-accent) !important;
}

#app-chat .chat-input:focus {
    box-shadow:
        0 0 0 2px rgba(79, 99, 88, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

/* Neutral chat palette, no green cast */
#app-chat {
    --chat-bg: #f6f7f9;
    --chat-ink: #1f2730;
    --chat-muted: #9aa3ae;
    --chat-peer: #ffffff;
    --chat-self: #eef1f5;
    --chat-self-ink: #1f2730;
    --chat-accent: #4c5664;
    background:
        linear-gradient(180deg, #fbfcfd 0%, var(--chat-bg) 42%, #f2f4f7 100%) !important;
}

#app-chat::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 148px),
        linear-gradient(90deg, rgba(247, 248, 250, 0.5), rgba(255, 255, 255, 0.18) 52%, rgba(239, 242, 246, 0.42)) !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-self) !important;
    color: var(--chat-self-ink) !important;
    box-shadow:
        0 7px 16px rgba(31, 39, 48, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar,
#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send,
#app-chat .input-btn.send:hover,
#app-chat .input-btn.send:active,
#app-chat .input-btn.send:disabled,
#app-chat .input-btn.send[disabled],
#app-chat.offline-mode .input-btn.send:hover,
#app-chat.offline-mode .input-btn.send:active,
#app-chat.offline-mode .input-btn.send:disabled,
#app-chat.offline-mode .input-btn.send[disabled] {
    background: var(--chat-accent) !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar {
    box-shadow:
        0 5px 12px rgba(76, 86, 100, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send {
    box-shadow:
        0 7px 15px rgba(76, 86, 100, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

#app-chat .chat-input:focus {
    box-shadow:
        0 0 0 2px rgba(76, 86, 100, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

/* Clean flat chat surface */
#app-chat {
    --chat-bg: #f7f7f7;
    --chat-ink: #111111;
    --chat-muted: #9aa3ad;
    --chat-peer: #ffffff;
    --chat-self: #f0f1f3;
    --chat-self-ink: #15191f;
    --chat-accent: #2f3742;
    background: var(--chat-bg) !important;
}

#app-chat::before {
    content: none !important;
    background: none !important;
}

#app-chat .app-status-bar,
#app-chat .chat-nav-bar {
    background: #ffffff !important;
    border-bottom: 0.5px solid #eeeeee !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#app-chat .chat-messages {
    background: var(--chat-bg) !important;
    padding: 18px 20px calc(104px + var(--safe-bottom, 0px)) !important;
}

#app-chat .time-divider,
#app-chat .msg-timestamp {
    color: #9aa3ad !important;
    margin: 16px auto 18px !important;
    font-weight: 400 !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    box-shadow: none !important;
    border: 0 !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-self) !important;
    color: var(--chat-self-ink) !important;
    box-shadow: none !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-peer) !important;
    color: var(--chat-ink) !important;
    box-shadow: none !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar,
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    box-shadow: none !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar,
#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send,
#app-chat .input-btn.send:hover,
#app-chat .input-btn.send:active,
#app-chat .input-btn.send:disabled,
#app-chat .input-btn.send[disabled],
#app-chat.offline-mode .input-btn.send:hover,
#app-chat.offline-mode .input-btn.send:active,
#app-chat.offline-mode .input-btn.send:disabled,
#app-chat.offline-mode .input-btn.send[disabled] {
    background: var(--chat-accent) !important;
}

#app-chat .chat-input-bar {
    background: #ffffff !important;
    border-top: 0.5px solid #eeeeee !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#app-chat .chat-input {
    background: #f3f4f6 !important;
    box-shadow: none !important;
}

#app-chat .chat-input:focus {
    background: #f3f4f6 !important;
    box-shadow: none !important;
}

#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send {
    box-shadow: none !important;
}

#app-chat .app-status-bar,
#app-chat .status-bar.app-status-bar {
    border-bottom: 0 !important;
}

/* Harmonized chat skin */
#app-chat {
    --chat-bg: #f2f2f2;
    --chat-ink: #111111;
    --chat-muted: #9ca3af;
    --chat-peer: #ffffff;
    --chat-self: #ffffff;
    --chat-self-ink: #111111;
    --chat-avatar-bg: #e9edf2;
    --chat-avatar-ink: #202733;
    --chat-accent: #2f3640;
    background: var(--chat-bg) !important;
}

#app-chat .app-status-bar,
#app-chat .chat-nav-bar {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}

#app-chat .chat-nav-bar {
    border-bottom: 0.5px solid #eeeeee !important;
}

#app-chat .chat-nav-bar .nav-title {
    color: #050505 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

#app-chat .chat-messages {
    background: var(--chat-bg) !important;
    padding: 18px 22px calc(104px + var(--safe-bottom, 0px)) !important;
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    gap: 10px !important;
    margin-bottom: 11px !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 9px !important;
    background: var(--chat-avatar-bg) !important;
    color: var(--chat-avatar-ink) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar {
    background: var(--chat-avatar-bg) !important;
    color: transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211" !important;
    color: var(--chat-avatar-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    background: var(--chat-avatar-bg) !important;
    color: var(--chat-avatar-ink) !important;
}

#app-chat .msg-content-stack,
#app-chat .msg-bubble-user .msg-content-stack {
    max-width: min(72%, 320px) !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    padding: 9px 13px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.035) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--chat-ink) !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-self) !important;
    color: var(--chat-self-ink) !important;
    border-radius: 13px !important;
    border-top-right-radius: 5px !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-peer) !important;
    color: var(--chat-ink) !important;
    border-radius: 13px !important;
    border-top-left-radius: 5px !important;
}

#app-chat .msg-image,
#app-chat .msg-sticker {
    border-radius: 12px !important;
    box-shadow: none !important;
}

#app-chat .msg-timestamp,
#app-chat .time-divider {
    color: #9aa3ad !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin: 14px auto 18px !important;
}

#app-chat .chat-input-bar {
    min-height: 68px !important;
    background: #ffffff !important;
    border-top: 0.5px solid #e8e8e8 !important;
    box-shadow: none !important;
    padding: 10px 14px calc(12px + var(--safe-bottom, 0px)) !important;
}

#app-chat .chat-input {
    height: 39px !important;
    min-height: 39px !important;
    border-radius: 14px !important;
    background: #f4f5f6 !important;
    color: #111111 !important;
    box-shadow: none !important;
}

#app-chat .input-actions {
    border-left: 0 !important;
    padding-left: 2px !important;
}

#app-chat .input-btn.send,
#app-chat.offline-mode .input-btn.send,
#app-chat .input-btn.send:hover,
#app-chat .input-btn.send:active,
#app-chat .input-btn.send:disabled,
#app-chat .input-btn.send[disabled],
#app-chat.offline-mode .input-btn.send:hover,
#app-chat.offline-mode .input-btn.send:active,
#app-chat.offline-mode .input-btn.send:disabled,
#app-chat.offline-mode .input-btn.send[disabled] {
    background: var(--chat-accent) !important;
    box-shadow: none !important;
}

/* Avatar and bubble cohesion */
#app-chat {
    --chat-avatar-bg: #ffffff;
    --chat-avatar-ink: #1a1f26;
    --chat-avatar-border: rgba(0, 0, 0, 0.045);
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    align-items: flex-start !important;
    gap: 8px !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar,
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    margin-top: 1px !important;
    border: 0.5px solid var(--chat-avatar-border) !important;
    border-radius: 12px !important;
    background: var(--chat-avatar-bg) !important;
    color: var(--chat-avatar-ink) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

#app-chat .msg-bubble-user .self-avatar {
    color: transparent !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    color: var(--chat-avatar-ink) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    border: 0.5px solid rgba(0, 0, 0, 0.045) !important;
    border-radius: 12px !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    border-top-right-radius: 5px !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    border-top-left-radius: 5px !important;
}

/* Subtle self-message accent */
#app-chat {
    --chat-self: #eef3fa;
    --chat-self-ink: #111827;
    --chat-self-border: rgba(79, 102, 135, 0.09);
    --chat-avatar-bg-self: #eef3fa;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--chat-self) !important;
    border-color: var(--chat-self-border) !important;
    color: var(--chat-self-ink) !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar {
    background: var(--chat-avatar-bg-self) !important;
    border-color: var(--chat-self-border) !important;
}

#app-chat .msg-bubble-user .self-avatar {
    font-size: 0 !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: var(--chat-avatar-ink) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

/* WeChat classic avatar and bubble treatment */
#app-chat {
    --wechat-chat-bg: #ededed;
    --wechat-bubble-user: #95ec69;
    --wechat-bubble-peer: #ffffff;
    --wechat-avatar-user: #2f3640;
    --wechat-avatar-peer: #dfe3e8;
    background: var(--wechat-chat-bg) !important;
}

#app-chat .chat-messages {
    background: var(--wechat-chat-bg) !important;
    padding: 18px 28px calc(104px + var(--safe-bottom, 0px)) !important;
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer),
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer) {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar {
    background: var(--wechat-avatar-user) !important;
    color: transparent !important;
    border-radius: 5px !important;
}

#app-chat .msg-bubble-user .self-avatar {
    font-size: 0 !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211" !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 650 !important;
}

#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    background: var(--wechat-avatar-peer) !important;
    color: #111111 !important;
    border-radius: 5px !important;
}

#app-chat .msg-content-stack,
#app-chat .msg-bubble-user .msg-content-stack {
    max-width: min(72%, 380px) !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    position: relative !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    color: #111111 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--wechat-bubble-peer) !important;
    color: #111111 !important;
    border-radius: 5px !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--wechat-bubble-user) !important;
    color: #111111 !important;
    border-radius: 5px !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    left: -6px !important;
    border-right: 7px solid var(--wechat-bubble-peer) !important;
    border-left: 0 !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    right: -6px !important;
    border-left: 7px solid var(--wechat-bubble-user) !important;
    border-right: 0 !important;
}

#app-chat .msg-image,
#app-chat .msg-sticker {
    border-radius: 5px !important;
    box-shadow: none !important;
}

#app-chat .time-divider,
#app-chat .msg-timestamp {
    color: #a3a3a3 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin: 10px auto 12px !important;
}

/* WeChat classic harmony pass */
#app-chat {
    --wechat-chat-bg: #ebebeb;
    --wechat-bubble-user: #98e86a;
    --wechat-bubble-peer: #ffffff;
    --wechat-letter-avatar: #ffffff;
    --wechat-letter-ink: #111111;
    background: var(--wechat-chat-bg) !important;
}

#app-chat .chat-messages {
    background: var(--wechat-chat-bg) !important;
    padding: 18px 30px calc(104px + var(--safe-bottom, 0px)) !important;
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    gap: 9px !important;
    margin-bottom: 13px !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer),
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer) {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 6px !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar,
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    background: var(--wechat-letter-avatar) !important;
    color: var(--wechat-letter-ink) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px !important;
}

#app-chat .msg-bubble-user .self-avatar {
    color: transparent !important;
    font-size: 0 !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    color: var(--wechat-letter-ink) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    padding: 9px 13px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    background: var(--wechat-bubble-user) !important;
}

#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    top: 10px !important;
    left: -5px !important;
    border-top-width: 5px !important;
    border-bottom-width: 5px !important;
    border-right-width: 6px !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    top: 10px !important;
    right: -5px !important;
    border-top-width: 5px !important;
    border-bottom-width: 5px !important;
    border-left-width: 6px !important;
    border-left-color: var(--wechat-bubble-user) !important;
}

#app-chat .msg-content-stack,
#app-chat .msg-bubble-user .msg-content-stack {
    max-width: min(74%, 360px) !important;
}

/* Keep the latest message visually closer to the composer */
#app-chat .chat-messages {
    padding-bottom: calc(78px + var(--safe-bottom, 0px)) !important;
    scroll-padding-bottom: calc(78px + var(--safe-bottom, 0px)) !important;
}

/* The composer is in normal layout, so the thread should not reserve a fake footer gap. */
#app-chat .chat-messages {
    padding-bottom: 16px !important;
    scroll-padding-bottom: 16px !important;
}

/* Match the reference: larger square avatars and text bubbles with the same height. */
#app-chat {
    --wechat-avatar-size: 44px;
    --wechat-corner: 4px;
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    gap: 10px !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer),
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer) {
    width: var(--wechat-avatar-size) !important;
    height: var(--wechat-avatar-size) !important;
    min-width: var(--wechat-avatar-size) !important;
    flex: 0 0 var(--wechat-avatar-size) !important;
    border-radius: var(--wechat-corner) !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar,
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    border-radius: var(--wechat-corner) !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    min-height: var(--wechat-avatar-size) !important;
    padding: 0 14px !important;
    border-radius: var(--wechat-corner) !important;
    display: inline-flex !important;
    align-items: center !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before,
#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    top: 13px !important;
}

/* Match the WeChat list header rhythm to the chat screen header. */
#app-wechat {
    --wechat-top-nav-height: 56px;
}

#app-wechat .nav-bar {
    height: var(--wechat-top-nav-height) !important;
    min-height: var(--wechat-top-nav-height) !important;
    padding: 0 18px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

#app-wechat .nav-title {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: auto !important;
    width: calc(100% - 176px) !important;
    max-width: 220px !important;
    height: var(--wechat-top-nav-height) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
    line-height: 1 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    pointer-events: none !important;
}

#app-wechat .nav-back,
#app-wechat .nav-action {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    width: 56px !important;
    min-width: 56px !important;
    height: var(--wechat-top-nav-height) !important;
    min-height: var(--wechat-top-nav-height) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

#app-wechat .nav-back {
    left: 10px !important;
}

#app-wechat .nav-action {
    right: 10px !important;
}

#app-chat .chat-nav-bar {
    height: 56px !important;
    min-height: 56px !important;
}

#app-chat .chat-nav-bar .nav-title,
#app-chat .chat-nav-bar .nav-back,
#app-chat .chat-nav-bar .nav-action,
#app-chat .chat-mode-toggle,
#app-chat .chat-nav-actions {
    top: 0 !important;
}

#app-chat .msg-bubble-user .self-avatar {
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211" !important;
    color: var(--wechat-letter-ink) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    text-indent: 0 !important;
}

/* Final avatar/text-bubble size lock */
#app-chat {
    --wechat-avatar-size: 52px;
    --wechat-corner: 4px;
}

#app-chat .msg-bubble-user,
#app-chat .msg-bubble-ai {
    gap: 10px !important;
    align-items: flex-start !important;
}

#app-chat .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar,
#app-chat .msg-bubble-ai .msg-avatar,
#app-chat .msg-bubble-user.no-avatar .msg-avatar,
#app-chat .msg-bubble-ai.no-avatar .msg-avatar,
#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer),
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer) {
    position: relative !important;
    width: var(--wechat-avatar-size) !important;
    height: var(--wechat-avatar-size) !important;
    min-width: var(--wechat-avatar-size) !important;
    flex: 0 0 var(--wechat-avatar-size) !important;
    border-radius: var(--wechat-corner) !important;
    overflow: hidden !important;
}

#app-chat .msg-bubble-user .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]),
#app-chat .msg-bubble-user .self-avatar,
#app-chat .msg-bubble-ai .msg-avatar:not(.msg-avatar-spacer):not([style*="background-image"]) {
    border-radius: var(--wechat-corner) !important;
}

#app-chat .msg-bubble-user .self-avatar {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
}

#app-chat .msg-bubble-user .self-avatar::before {
    content: "\6211" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--wechat-letter-ink) !important;
    font-size: 18px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    min-height: var(--wechat-avatar-size) !important;
    padding: 0 16px !important;
    border-radius: var(--wechat-corner) !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before,
#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    top: 17px !important;
}

/* Keep the avatar frame large, but let text bubbles use their natural height. */
#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    min-height: 0 !important;
    padding: 9px 14px !important;
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before,
#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    top: 11px !important;
}

/* Hard avatar override: JS writes inline avatar styles, so lock the chat avatar box explicitly. */
#app-chat {
    --wechat-avatar-size: 60px;
}

#app-chat .msg-bubble-user > .msg-avatar,
#app-chat .msg-bubble-ai > .msg-avatar {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--wechat-avatar-size) !important;
    height: var(--wechat-avatar-size) !important;
    min-width: var(--wechat-avatar-size) !important;
    min-height: var(--wechat-avatar-size) !important;
    max-width: var(--wechat-avatar-size) !important;
    max-height: var(--wechat-avatar-size) !important;
    flex: 0 0 var(--wechat-avatar-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    line-height: 1 !important;
}

#app-chat .msg-bubble-user > .self-avatar:not(.chat-image-avatar) {
    background: #ffffff !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
}

#app-chat .msg-bubble-user > .self-avatar:not(.chat-image-avatar)::before {
    content: "\6211" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111111 !important;
    font-size: 20px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

/* Correct avatar shape: larger, but square rather than stretched. */
#app-chat {
    --wechat-avatar-size: 48px;
}

#app-chat .msg-bubble-user > .msg-avatar,
#app-chat .msg-bubble-ai > .msg-avatar,
#app-chat .msg-bubble-user > .msg-avatar.msg-avatar-spacer,
#app-chat .msg-bubble-ai > .msg-avatar.msg-avatar-spacer {
    box-sizing: border-box !important;
    inline-size: var(--wechat-avatar-size) !important;
    block-size: var(--wechat-avatar-size) !important;
    width: var(--wechat-avatar-size) !important;
    height: var(--wechat-avatar-size) !important;
    min-inline-size: var(--wechat-avatar-size) !important;
    min-block-size: var(--wechat-avatar-size) !important;
    min-width: var(--wechat-avatar-size) !important;
    min-height: var(--wechat-avatar-size) !important;
    max-inline-size: var(--wechat-avatar-size) !important;
    max-block-size: var(--wechat-avatar-size) !important;
    max-width: var(--wechat-avatar-size) !important;
    max-height: var(--wechat-avatar-size) !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 var(--wechat-avatar-size) !important;
    align-self: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

#app-chat .msg-bubble-user > .self-avatar:not(.chat-image-avatar) {
    background: #ffffff !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: 0 !important;
}

#app-chat .msg-bubble-user > .self-avatar:not(.chat-image-avatar)::before {
    content: "\6211" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111111 !important;
    font-size: 18px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

/* Source-level chat avatars: no inline fallback styles, no stretching. */
#app-chat {
    --wechat-avatar-size: 52px;
}

#app-chat .msg-avatar.chat-letter-avatar,
#app-chat .msg-avatar.chat-image-avatar,
#app-chat .msg-avatar.msg-avatar-spacer {
    box-sizing: border-box !important;
    width: var(--wechat-avatar-size) !important;
    height: var(--wechat-avatar-size) !important;
    min-width: var(--wechat-avatar-size) !important;
    min-height: var(--wechat-avatar-size) !important;
    max-width: var(--wechat-avatar-size) !important;
    max-height: var(--wechat-avatar-size) !important;
    flex: 0 0 var(--wechat-avatar-size) !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

#app-chat .msg-avatar.chat-letter-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    color: #111111 !important;
    font-size: 18px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

#app-chat .msg-avatar.chat-image-avatar {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#app-chat .msg-avatar.chat-letter-avatar::before {
    content: none !important;
}

/* Final cleanup: one square text avatar implementation, no pseudo text or variable cascade. */
#app-chat .msg-bubble-user > .msg-avatar,
#app-chat .msg-bubble-ai > .msg-avatar {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    min-inline-size: 48px !important;
    min-block-size: 48px !important;
    max-inline-size: 48px !important;
    max-block-size: 48px !important;
    flex: 0 0 48px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

#app-chat .msg-bubble-user > .self-avatar:not(.chat-image-avatar),
#app-chat .msg-bubble-user > .chat-letter-avatar,
#app-chat .msg-bubble-ai > .chat-letter-avatar,
#app-chat .msg-bubble-ai > .msg-avatar:not(.chat-image-avatar) {
    background: #ffffff !important;
    border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
    color: #111111 !important;
    font-size: 18px !important;
    font-weight: 650 !important;
    text-shadow: none !important;
}

#app-chat .msg-bubble-user > .self-avatar:not(.chat-image-avatar)::before,
#app-chat .msg-bubble-user > .chat-letter-avatar::before,
#app-chat .msg-bubble-ai > .chat-letter-avatar::before {
    content: none !important;
}

#app-chat .msg-bubble-user > .self-avatar.chat-image-avatar,
#app-chat .msg-bubble-ai > .chat-image-avatar {
    background-color: transparent !important;
    border: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
}

#app-chat .msg-bubble-user > .self-avatar.chat-image-avatar::before,
#app-chat .msg-bubble-ai > .chat-image-avatar::before {
    content: none !important;
    display: none !important;
}

/* Bring avatars closer to the screen edges. */
#app-chat .chat-messages {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Shorter send arrow glyph */
#app-chat .input-btn.send::before,
#app-chat.offline-mode .input-btn.send::before {
    content: "" !important;
    width: 11px !important;
    height: 15px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -44%) !important;
    background:
        linear-gradient(#ffffff, #ffffff) center 4px / 2px 11px no-repeat !important;
}

#app-chat .input-btn.send::after,
#app-chat.offline-mode .input-btn.send::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    transform: translate(-50%, -64%) rotate(45deg) !important;
}

/* Refined send arrow proportions */
#app-chat .input-btn.send::before,
#app-chat.offline-mode .input-btn.send::before {
    width: 2px !important;
    height: 16px !important;
    left: 50% !important;
    top: 50% !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    transform: translate(-50%, -34%) !important;
}

#app-chat .input-btn.send::after,
#app-chat.offline-mode .input-btn.send::after {
    width: 10px !important;
    height: 10px !important;
    left: 50% !important;
    top: 50% !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-radius: 1px 0 0 0 !important;
    transform: translate(-50%, -64%) rotate(45deg) !important;
}

/* Smaller send arrow inside the circle */
#app-chat .input-btn.send::before,
#app-chat.offline-mode .input-btn.send::before {
    width: 2px !important;
    height: 13px !important;
    transform: translate(-50%, -30%) !important;
}

#app-chat .input-btn.send::after,
#app-chat.offline-mode .input-btn.send::after {
    width: 8px !important;
    height: 8px !important;
    border-top-width: 2px !important;
    border-left-width: 2px !important;
    transform: translate(-50%, -60%) rotate(45deg) !important;
}

/* Match single-line text bubble height to the 48px avatar frame. */
#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before,
#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    top: 15px !important;
}

/* Center the transient image generation hint. */
#app-chat .msg-bubble-ai.system.image-generation-status {
    width: 100% !important;
    margin: 10px 0 16px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: stretch !important;
    gap: 0 !important;
    color: #8f8f94 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

#app-chat .msg-bubble-ai.system.image-generation-status::before,
#app-chat .msg-bubble-ai.system.image-generation-status::after {
    content: none !important;
}

/* Keep all non-chat notices centered and out of the avatar/bubble layout. */
#app-chat .chat-system-notice,
#app-chat .msg-bubble-ai.system {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 6px auto 12px !important;
    padding: 0 26px !important;
    display: flex !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #8f8f94 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

#app-chat .chat-system-notice.chat-system-error {
    color: #c45252 !important;
}

#app-chat .chat-system-notice::before,
#app-chat .chat-system-notice::after,
#app-chat .msg-bubble-ai.system::before,
#app-chat .msg-bubble-ai.system::after {
    content: none !important;
}

#app-chat .msg-bubble-ai.system.cross-mode-summary {
    max-width: min(88%, 520px) !important;
    margin: 8px auto 14px !important;
    padding: 9px 14px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 14px !important;
    color: #6f7781 !important;
    line-height: 1.65 !important;
}

/* Preserve uploaded avatars outside the chat view. */
#app-wechat #tab-chats .chat-item .custom-avatar[style*="background-image"],
#app-wechat #tab-contacts .chat-item .custom-avatar[style*="background-image"],
#app-wechat #tab-me .profile-avatar.profile-avatar-large[style*="background-image"],
.profile-avatar[style*="background-image"],
.avatar-preview[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    text-shadow: none !important;
    overflow: hidden !important;
}

/* Keep unread badges red and outside the avatar crop. */
#app-wechat #tab-chats .chat-item .avatar {
    position: relative !important;
    overflow: visible !important;
}

#app-wechat #tab-chats .chat-item .custom-avatar[style*="background-image"] {
    overflow: visible !important;
}

#app-wechat #tab-chats .chat-unread-dot,
#app-wechat #tab-chats .chat-unread-dot.has-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    z-index: 10 !important;
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #fa5151 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(250, 81, 81, 0.28) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Chat row size lock: 42px avatar frame and matching single-line text bubbles. */
#app-chat {
    --wechat-avatar-size: 42px !important;
}

#app-chat .msg-bubble-user > .msg-avatar,
#app-chat .msg-bubble-ai > .msg-avatar,
#app-chat .msg-bubble-user > .msg-avatar.msg-avatar-spacer,
#app-chat .msg-bubble-ai > .msg-avatar.msg-avatar-spacer,
#app-chat .msg-avatar.chat-letter-avatar,
#app-chat .msg-avatar.chat-image-avatar,
#app-chat .msg-avatar.msg-avatar-spacer {
    inline-size: 42px !important;
    block-size: 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-inline-size: 42px !important;
    min-block-size: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-inline-size: 42px !important;
    max-block-size: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
}

#app-chat .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply) {
    min-height: 42px !important;
    box-sizing: border-box !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: pre-wrap !important;
    line-height: 1.42 !important;
}

#app-chat .msg-bubble-user .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before,
#app-chat .msg-bubble-ai .msg-text:not(.msg-image):not(.msg-sticker):not(.msg-transfer):not(.msg-gift):not(.msg-red-packet):not(.msg-forum-share):not(.msg-love-letter-reply)::before {
    top: 13px !important;
}
/* Bookstore */
#homeScreen .home-entry-bookstore {
    --entry-accent: #8f6f4f;
}

#homeScreen .bookstore-icon {
    color: #5d4634;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(249, 238, 217, .74)),
        linear-gradient(160deg, #d9b98c, #8f6f4f);
}

#homeScreen .bookstore-icon .glyph-accent {
    fill: #9b6a43;
}

.bookstore-app {
    background: #f7f5f0;
    color: #28303a;
}

.bookstore-nav {
    background: rgba(247, 245, 240, .94);
    border-bottom: 1px solid rgba(40, 48, 58, .08);
}

.bookstore-refresh-action {
    width: 52px !important;
    min-width: 52px !important;
    color: #2f7cc8 !important;
}

.bookstore-refresh-action svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bookstore-refresh-action.is-spinning svg {
    animation: bookstoreRefreshSpin .52s cubic-bezier(.2, .7, .2, 1);
}

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

.bookstore-shell {
    height: calc(100% - 88px);
    display: flex;
    flex-direction: column;
    padding: 10px 14px 18px;
    gap: 10px;
    overflow: hidden;
}

.bookstore-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    background: rgba(40, 48, 58, .07);
    border-radius: 8px;
}

.bookstore-tab {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5f6875;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 10px;
}

.bookstore-tab.active {
    background: #fff;
    color: #2f3a45;
    box-shadow: 0 1px 8px rgba(40, 48, 58, .08);
}

.bookstore-pane {
    display: none;
    min-height: 0;
    flex: 1;
}

.bookstore-pane.active {
    display: flex;
    flex-direction: column;
}

.bookstore-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.bookstore-search input {
    min-width: 0;
    border: 1px solid rgba(40, 48, 58, .12);
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: #28303a;
}

.bookstore-search button,
.book-btn {
    border: 1px solid rgba(40, 48, 58, .12);
    background: #fff;
    color: #34404c;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 12px;
}

.book-btn.primary,
.bookstore-search button {
    background: #2f6f5e;
    color: #fff;
    border-color: #2f6f5e;
}

.book-btn:disabled {
    opacity: .55;
}

.bookstore-status {
    min-height: 20px;
    color: #77808d;
    font-size: 12px;
    padding: 6px 2px 0;
}

.bookstore-home-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #24303b;
    font-size: 15px;
    font-weight: 850;
    padding: 8px 2px 4px;
}

.bookstore-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 210px;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.bookstore-category {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(40, 48, 58, .1);
    background: rgba(255, 255, 255, .82);
    color: #5f6875;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
}

.bookstore-category.active {
    background: #2f6f5e;
    border-color: #2f6f5e;
    color: #fff;
}

.bookstore-category b {
    min-width: 18px;
    border-radius: 999px;
    background: rgba(40, 48, 58, .08);
    color: inherit;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 700;
}

.bookstore-category small {
    color: inherit;
    opacity: .72;
    font-size: 10px;
    font-weight: 800;
}

.bookstore-category.active b {
    background: rgba(255, 255, 255, .18);
}

.bookstore-load-more {
    border: 1px solid rgba(40, 48, 58, .12);
    background: #fff;
    color: #2f6f5e;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 800;
}

.bookstore-results,
.bookstore-shelf {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0 22px;
}

.book-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(40, 48, 58, .08);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(40, 48, 58, .05);
}

.shelf-book-card {
    cursor: pointer;
}

.book-cover {
    width: 64px;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(145deg, #ead8bd, #8f6f4f);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .88);
    font-weight: 800;
    font-size: 12px;
}

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

.book-card-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.book-title {
    color: #24303b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.28;
}

.book-meta {
    color: #65707d;
    font-size: 12px;
    line-height: 1.35;
}

.book-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.book-tags span {
    color: #66717f;
    background: #f0f2f4;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 11px;
}

.book-tags .source-badge {
    background: #2f6f5e;
    color: #fff;
    font-size: 10px;
}

.book-summary {
    color: #7a8595;
    font-size: 12px;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.book-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.bookstore-empty {
    margin-top: 22px;
    padding: 22px 16px;
    border: 1px dashed rgba(40, 48, 58, .16);
    border-radius: 8px;
    color: #7a8491;
    text-align: center;
    font-size: 13px;
    background: rgba(255, 255, 255, .65);
}

.book-reader-app {
    background: #fbf8f0;
}

.book-reader {
    height: calc(100% - 88px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 20px 24px;
    box-sizing: border-box;
}

.book-reader-head {
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(40, 48, 58, .12);
    padding-bottom: 14px;
}

.book-reader-head h1 {
    margin: 0 0 6px;
    color: #202a33;
    font-size: 22px;
    line-height: 1.25;
}

.book-reader-head p {
    margin: 0;
    color: #6d7783;
    font-size: 13px;
}

.book-reader-remove-action {
    color: #2f7cc8 !important;
}

.book-reader-remove-action svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.book-reader-controls {
    flex: 0 0 auto;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px;
    border: 1px solid rgba(40, 48, 58, .1);
    border-radius: 10px;
    background: rgba(251, 248, 240, .94);
    backdrop-filter: blur(10px);
}

.book-reader-controls button {
    border: 1px solid rgba(40, 48, 58, .12);
    border-radius: 8px;
    background: #fff;
    color: #34404c;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 10px;
}

.book-reader-controls button:disabled {
    opacity: .45;
}

.book-reader-controls span,
.book-reader-page-jump {
    color: #65707d;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.book-reader-page-jump {
    min-width: 44px;
    border-color: transparent !important;
    background: transparent !important;
    padding: 8px 4px !important;
}

.book-reader-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    white-space: pre-wrap;
    color: #24303b;
    font-size: 16px;
    line-height: 1.82;
    letter-spacing: 0;
}

.book-reader-measure {
    flex: none;
    min-height: 0;
}

.book-reader-retry {
    border: 0;
    border-radius: 10px;
    background: #2f6f5e;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    padding: 10px 16px;
}

.bookstore-external-reader {
    overflow-y: auto;
    white-space: normal;
}

.bookstore-external-reader h2 {
    margin: 0 0 8px;
    color: #202a33;
    font-size: 22px;
    line-height: 1.25;
}

.bookstore-external-reader p {
    margin: 0 0 12px;
    color: #65707d;
    font-size: 14px;
    line-height: 1.6;
}

.bookstore-external-meta {
    color: #7b6044 !important;
    font-weight: 800;
}

.bookstore-external-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}