/* === 聊天室全屏容器 === */
.chat-room-layer,
#chat-room-layer {
    --chat-keyboard-offset: 0px;
    --chat-keyboard-padding: 0px;
    --chat-footer-height: 84px;
    --chat-footer-lift: 0px;
    --chat-panel-height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: transparent; /* 改为透明以适配各种背景 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 600; /* 保证它盖住列表 */
    display: flex;
    flex-direction: column; /* 上中下垂直排列 */
    overflow: hidden;
}

.msg-bubble.couple-invite-bubble {
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    max-width: 100%;
}

.msg-bubble.couple-invite-bubble::before,
.msg-bubble.couple-invite-bubble::after {
    display: none;
}

.msg-row[data-type="couple_invite"] .msg-content-wrapper,
.msg-row[data-type="couple_unlink"] .msg-content-wrapper {
    max-width: 92%;
}

.msg-row[data-type="couple_invite"],
.msg-row[data-type="couple_unlink"] {
    gap: calc(2px * var(--chat-font-scale, 1));
}

.msg-row[data-type="couple_invite"].msg-right .msg-content-wrapper,
.msg-row[data-type="couple_unlink"].msg-right .msg-content-wrapper {
    margin-right: 2px;
}

.msg-row[data-type="couple_invite"].msg-right .msg-bubble,
.msg-row[data-type="couple_unlink"].msg-right .msg-bubble {
    margin-right: 2px;
}

.couple-invite-card {
    width: 220px;
    max-width: 70vw;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 56px;
}

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

.couple-invite-icon {
    width: 32px;
    height: 32px;
    background: rgba(236, 72, 153, 0.08);
    border-radius: 50%;
    color: #ec4899;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.couple-invite-card.unlink .couple-invite-icon {
    background: rgba(153, 153, 153, 0.08);
    color: #999;
}

.couple-invite-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.couple-invite-text {
    color: #888;
    font-size: 12px;
    line-height: 1.4;
}

#chat-room-layer {
    --chat-font-scale: 1;
    --chat-safe-bottom-compact: var(--safe-bottom-compact, clamp(0px, env(safe-area-inset-bottom, 0px), 14px));
    --chat-safe-top: var(--content-safe-top, env(safe-area-inset-top, 0px));
    --chat-top-overlay-offset: 0px;
}

#chat-view {
    background: transparent; /* 恢复透明背景，方便自定义形状和美化 */
    overscroll-behavior: none;
}

/* === 顶部栏 === */
.chat-room-header {
    position: absolute; /* 悬浮在内容上方 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    min-height: calc(50px + var(--chat-safe-top) + var(--chat-top-overlay-offset, 0px));
    height: calc(50px + var(--chat-safe-top) + var(--chat-top-overlay-offset, 0px)) !important;
    padding-top: calc(max(14px, var(--chat-safe-top)) + var(--chat-top-overlay-offset, 0px)) !important;
    padding-bottom: 10px;
    background: rgba(245, 245, 245, 0.85); /* 半透明背景 */
    backdrop-filter: blur(20px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08); /* 改变边框颜色适配浅色 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
    flex-shrink: 0;
    box-sizing: border-box;
    color: var(--chat-text-color, #111); /* 使用变量以便日后切换深浅色 */
}
.chat-room-title { font-weight: 600; font-size: calc(17px * var(--chat-font-scale, 1)); color: var(--chat-text-color, #111); letter-spacing: -0.4px; }

.chat-room-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

#chat-room-layer .back-btn {
    font-size: calc(16px * var(--chat-font-scale, 1));
    gap: calc(5px * var(--chat-font-scale, 1));
    color: var(--chat-text-color, #000);
}

#chat-room-layer .back-btn * {
    color: inherit;
}

#chat-room-layer .chat-back-btn {
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    appearance: none;
    margin-bottom: 4px;
    margin-left: -8px; /* 补偿内边距，使其与边缘对齐 */
    transition: background-color 0.2s, opacity 0.2s;
}

#chat-room-layer .chat-back-btn i {
    font-size: calc(26px * var(--chat-font-scale, 1));
    line-height: 1;
}

#chat-room-layer .chat-back-btn:active {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 0.7;
}

#chat-room-layer .chat-room-menu {
    font-size: calc(18px * var(--chat-font-scale, 1));
}

.status-heart-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5c7b;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.2);
}

.status-heart-btn:active {
    transform: scale(0.9);
    opacity: 0.8;
}

.status-monitor-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 16px 24px 16px;
    background: transparent;
    backdrop-filter: none;
    z-index: 1300;
}

.status-monitor-card {
    width: 100%;
    max-width: 520px;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 18px;
    padding: 16px;
    color: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 75vh;
    position: relative;
    overflow: hidden;
}

.status-monitor-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-monitor-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #444;
}

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

.status-monitor-header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.status-monitor-time {
    font-size: 15px;
    font-weight: 500;
}

.status-monitor-divider {
    border-top: 1px dashed rgba(255, 255, 255, 0.25);
}

.status-monitor-location {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.status-monitor-section {
    background: rgba(40, 40, 40, 0.85);
    border-radius: 14px;
    padding: 12px 12px 12px 12px;
}

.status-monitor-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.status-monitor-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-monitor-text-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.status-monitor-text-label {
    width: 56px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.status-monitor-text-value {
    flex: 1;
    font-size: 13px;
}

.status-monitor-fantasy {
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
}

.status-progress-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.status-progress-label {
    width: 56px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.status-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(80, 80, 80, 0.9);
    overflow: hidden;
}

.status-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9a9e, #fecfef);
    transition: width 0.35s ease-out;
}

.status-progress-value {
    width: 60px;
    text-align: right;
    font-size: 12px;
}

.status-heart-bar .status-progress-fill {
    background: linear-gradient(90deg, #ff6b81, #ffb199);
}

.status-monitor-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.status-inner-title {
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
}

.status-inner-content {
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.status-history-toggle-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 2;
}

.status-history-toggle-btn i {
    font-size: 18px;
}

.status-history-view {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: none;
    flex-direction: column;
    padding: 14px 12px 12px 12px;
    backdrop-filter: blur(12px);
    z-index: 3;
}

.status-monitor-card.show-history .status-history-view {
    display: flex;
}

.status-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-history-back {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}

.status-history-back i {
    font-size: 18px;
}

.status-history-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.status-history-header-spacer {
    width: 32px;
}

.status-history-list {
    flex: 1;
    margin-top: 8px;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-history-item {
    background: rgba(40, 40, 40, 0.9);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-history-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.8);
}

.status-history-time {
    font-size: 12px;
}

.status-history-metrics {
    flex: 1;
    text-align: right;
    font-size: 12px;
}

.status-history-monologue {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
}

.status-history-empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 12px 0;
}

/* === 中间消息区 === */
.chat-room-body {
    flex: 1 1 auto; /* 占据剩余所有高度 */
    width: 100%;
    height: 100%;
    position: absolute; /* 绝对定位占满屏幕 */
    top: 0;
    left: 0;
    overflow-y: auto; /* 允许滚动 */
    box-sizing: border-box;
    /* 让内容能穿透到底部栏和顶部栏下方 */
    padding-top: calc(50px + var(--chat-safe-top) + 20px + var(--chat-top-overlay-offset, 0px));
    /* 由 JS 同步真实底部栏高度，避免更多面板收起后保留旧高度 */
    padding-bottom: calc(15px * var(--chat-font-scale, 1) + var(--chat-footer-height, 84px));
    padding-left: calc(15px * var(--chat-font-scale, 1));
    padding-right: calc(15px * var(--chat-font-scale, 1));
    scroll-padding-bottom: calc(15px * var(--chat-font-scale, 1) + var(--chat-footer-height, 84px));
    transition: padding-bottom 0.2s ease-out, scroll-padding-bottom 0.2s ease-out;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    background-color: transparent;
}

.chat-room-body .msg-row,
.chat-room-body .msg-bubble,
.chat-room-body .sys-msg-row,
.chat-room-body .sys-msg-text {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.chat-room-body .msg-bubble *,
.chat-room-body .sys-msg-text * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

body.chat-long-press-guard #chat-history,
body.chat-long-press-guard #chat-history * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

.chat-footer-shell {
    position: absolute; /* 改为绝对定位，悬浮在聊天列表上方 */
    bottom: 0;
    left: 0;
    width: 100%;
    background: transparent;
    border-top: none;
    /* 仅在键盘覆盖视口时抬起底栏；浏览器已压缩视口时保持 0 */
    padding-bottom: var(--chat-keyboard-offset, 0px);
    transform: translateY(0);
    transition: none;
    will-change: padding-bottom;
    z-index: 10;
    isolation: isolate;
}

body.ios-webkit-chat-input-mode .chat-room-body {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    min-height: 0;
    padding-bottom: calc(15px * var(--chat-font-scale, 1));
    scroll-padding-bottom: calc(15px * var(--chat-font-scale, 1));
}

body.ios-webkit-chat-input-mode .chat-footer-shell {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: auto;
    flex: 0 0 auto;
}

.chat-footer-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--chat-keyboard-offset, 0px);
    background: var(--chat-footer-keyboard-fill, #f5f5f5);
    pointer-events: none;
    z-index: 0;
}

.chat-footer-shell > * {
    position: relative;
    z-index: 1;
}

/* 键盘升降时只保留轻量纯色层，避免低性能 Android WebView 每帧重绘毛玻璃。 */
body.chat-keyboard-resizing #chat-room-layer .chat-room-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgb(233, 234, 236) !important;
}

body.chat-keyboard-resizing #chat-room-layer .custom-bottom-bar.new-layout,
body.chat-keyboard-resizing #chat-room-layer .chat-room-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgb(250, 251, 252) !important;
    box-shadow: none !important;
}

body.chat-keyboard-resizing #chat-room-layer .chat-room-body {
    transition: none !important;
}

/*
 * 手动键盘避让/强制抬升模式：配合 WebToApp 的“键盘覆盖页面”使用。
 * 底栏由合成层平移到 visualViewport 顶部，避免旧 Android WebView 在键盘动画中
 * 反复改变整页高度；输入框始终可见并跟随键盘，背景填充层单独向下补齐覆盖区域。
 */
body.chat-keyboard-anti-lag #chat-room-layer .chat-footer-shell {
    padding-bottom: 0;
    transform: translate3d(0, calc(0px - var(--chat-keyboard-offset, 0px)), 0);
    will-change: transform;
    transition: none;
}

body.chat-keyboard-anti-lag #chat-room-layer .chat-footer-shell::after {
    transform: translate3d(0, var(--chat-keyboard-offset, 0px), 0);
    will-change: transform;
}

.chat-footer-shell .chat-room-footer {
    border-top: none;
}

/* === 底部操作栏 (核心修改) === */
:where(.chat-room-footer) {
    min-height: calc(50px * var(--chat-font-scale, 1));
    background: #f5f5f5; /* 将背景色移到这里，方便用户自定义形状和颜色 */
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* 改变边框颜色适配浅色 */
    display: flex;
    align-items: center;
    padding: calc(8px * var(--chat-font-scale, 1)) calc(10px * var(--chat-font-scale, 1));
    padding-bottom: calc(8px * var(--chat-font-scale, 1) + var(--chat-safe-bottom-compact));
    gap: calc(10px * var(--chat-font-scale, 1)); /* 元素之间的间距 */
}

/* 输入框 */
:where(#msg-input) {
    flex: 1; /* 【重点】它会自动变宽，把按钮挤到右边 */
    height: calc(36px * var(--chat-font-scale, 1));
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: calc(18px * var(--chat-font-scale, 1));
    padding: 0 calc(12px * var(--chat-font-scale, 1));
    font-size: calc(16px * var(--chat-font-scale, 1));
    background: rgba(255, 255, 255, 0.5); /* 半透明白色，适应深浅色 */
    color: var(--chat-text-color, #000);
    outline: none;
}

/* 按钮组容器 */
.footer-btns {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--chat-font-scale, 1)); /* 两个按钮之间的间距 */
}

/* AI 魔法按钮样式 */
.icon-btn-round {
    width: calc(32px * var(--chat-font-scale, 1));
    height: calc(32px * var(--chat-font-scale, 1));
    border-radius: 0; /* 取消强制圆形 */
    background: transparent; /* 取消强制背景色 */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chat-text-color, #000); /* 恢复默认图标色 */
    font-size: calc(22px * var(--chat-font-scale, 1));
    cursor: pointer;
}
.icon-btn-round:active { opacity: 0.6; }

/* 新增：快速表情按钮样式 */
:where(#quick-emoji-btn) {
    font-size: calc(22px * var(--chat-font-scale, 1));      /* 图标大小 */
    color: var(--chat-text-color, #000);  /* 恢复默认颜色，不再强制微信蓝 */
    margin-left: calc(8px * var(--chat-font-scale, 1));     /* 离输入框的距离 */
    margin-right: calc(8px * var(--chat-font-scale, 1));    /* 离魔法棒的距离 */
}

:where(#quick-emoji-btn:active) {
    opacity: 0.6;         /* 点击时的反馈 */
}

/* 发送按钮样式 */
.send-btn-rect {
    height: calc(36px * var(--chat-font-scale, 1));
    padding: 0 calc(12px * var(--chat-font-scale, 1));
    background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色 */
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: calc(18px * var(--chat-font-scale, 1));
    font-size: calc(14px * var(--chat-font-scale, 1));
    font-weight: bold;
    cursor: pointer;
}
.send-btn-rect:active { background-color: rgba(0, 0, 0, 0.6); }

:where(.custom-bottom-bar.new-layout) {
    display: flex;
    align-items: center;
    padding: calc(8px * var(--chat-font-scale, 1)) calc(10px * var(--chat-font-scale, 1)) calc(8px * var(--chat-font-scale, 1) + var(--chat-safe-bottom-compact));
    background: #f5f5f5; /* 确保有默认背景色 */
    gap: calc(8px * var(--chat-font-scale, 1));
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* 改变边框颜色适配浅色 */
}

:where(.footer-icon-btn) {
    font-size: calc(22px * var(--chat-font-scale, 1));
    color: var(--chat-text-color, #000);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 解除死板的宽高限制，允许图片或者其他元素撑开 */
    width: auto;
    height: auto;
    min-width: calc(32px * var(--chat-font-scale, 1));
    min-height: calc(32px * var(--chat-font-scale, 1));
    flex-shrink: 0;
}

:where(.input-wrapper) {
    flex: 1;
    position: relative;
    height: calc(38px * var(--chat-font-scale, 1));
    display: flex;
    align-items: center;
}

.sticker-suggest-panel {
    position: fixed;
    right: 4px;
    top: 0;
    width: 212px;
    max-height: 232px;
    display: none;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 30;
    transform: translateY(-100%);
    transform-origin: top right;
}

.sticker-suggest-panel.show {
    display: block;
}

.sticker-suggest-title {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.48);
}

.sticker-suggest-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-height: 184px;
    overflow-y: auto;
}

.sticker-suggest-item {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    cursor: pointer;
}

.sticker-suggest-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticker-suggest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sticker-suggest-name {
    width: 100%;
    font-size: 11px;
    line-height: 1.25;
    color: var(--chat-text-color, #333);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticker-suggest-item:active .sticker-suggest-thumb {
    transform: scale(0.97);
}

:where(#msg-input.new-input-field) {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: calc(18px * var(--chat-font-scale, 1));
    background: rgba(255, 255, 255, 0.5); /* 半透明白色，适应深浅色 */
    padding: 0 calc(40px * var(--chat-font-scale, 1)) 0 calc(12px * var(--chat-font-scale, 1));
    font-size: calc(16px * var(--chat-font-scale, 1));
    color: var(--chat-text-color, #000);
    outline: none;
}

:where(.embedded-emoji-btn) {
    position: absolute;
    right: calc(10px * var(--chat-font-scale, 1));
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(20px * var(--chat-font-scale, 1));
    color: #555;
    cursor: pointer;
    z-index: 10;
}

:where(#quick-emoji-btn.embedded-emoji-btn) {
    margin-left: 0;
    margin-right: 0;
    color: var(--chat-text-color, #555); /* 解除颜色限制 */
}

:where(.circle-btn.ai-btn) {
    /* 解除强制宽高限制，允许内容自适应 */
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(.circle-btn.ai-btn i) {
    font-size: calc(22px * var(--chat-font-scale, 1)); /* 统一图标大小 */
    color: var(--chat-text-color, #000);
}

:where(.circle-btn.ai-btn.is-ai-busy) {
    opacity: 0.55;
    filter: saturate(0.7);
    cursor: pointer;
    pointer-events: auto;
}

:where(.send-arrow-btn) {
    width: calc(32px * var(--chat-font-scale, 1));
    height: calc(32px * var(--chat-font-scale, 1));
    /* 解除黑底白字的限制，使其变成普通图标按钮 */
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--chat-text-color, #000); /* 跟随主题颜色 */
    font-size: calc(22px * var(--chat-font-scale, 1)); /* 调大字体使其与其他图标一致 */
}
:where(.send-arrow-btn:active) { opacity: 0.6; }
/* 通用消息行 */
.msg-row {
    display: flex;
    margin-bottom: calc(16px * var(--chat-font-scale, 1));
    align-items: flex-end; /* 让头像在底部对齐 */
    gap: calc(6px * var(--chat-font-scale, 1));
}

.msg-bubble-tail-row {
    display: flex;
    align-items: flex-end;
    gap: calc(4px * var(--chat-font-scale, 1));
    max-width: 100%;
    position: relative;
}

.msg-bubble-tail-row .msg-bubble {
    flex: 0 1 auto;
}

.msg-blacklist-warning {
    width: calc(16px * var(--chat-font-scale, 1));
    height: calc(16px * var(--chat-font-scale, 1));
    border-radius: 999px;
    background: #ff3b30;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(11px * var(--chat-font-scale, 1));
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(255, 59, 48, 0.24);
    flex-shrink: 0;
    margin-bottom: calc(6px * var(--chat-font-scale, 1));
}

.msg-avatar {
    width: calc(var(--chat-avatar-size, 40px) * var(--chat-font-scale, 1));
    height: calc(var(--chat-avatar-size, 40px) * var(--chat-font-scale, 1));
    border-radius: var(--chat-avatar-radius, 4px);
    background: #ccc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.msg-bubble {
    position: relative;
    border-radius: calc(var(--chat-bubble-radius, 18px) * var(--chat-font-scale, 1));
    padding: calc(var(--chat-bubble-pad-y, 6px) * var(--chat-font-scale, 1)) calc(14px * var(--chat-font-scale, 1));
    font-size: calc(14px * var(--chat-font-scale, 1));
    line-height: var(--chat-bubble-line-height, 1.4);
    /* 正文和数字保持应用字体；emoji 会由 .msg-inline-emoji 单独切换字体。 */
    font-family: var(--app-font-family, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif);
    max-width: 75%;
    word-wrap: break-word;
    box-shadow: var(--chat-bubble-shadow, none);
}

.msg-bubble .msg-text,
.msg-bubble .translated-message-foreign,
.msg-bubble .translated-message-translation,
.msg-bubble .quote-preview {
    font-family: inherit;
}

.msg-bubble .msg-inline-emoji,
.sys-msg-row .msg-inline-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-style: normal;
    font-weight: 400;
}

.translated-message-shell .translated-message-bubble {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}

.translated-message-shell {
    cursor: pointer;
}

.translated-message-foreign,
.translated-message-translation {
    white-space: pre-wrap;
    word-break: break-word;
}

.translated-message-foreign {
    line-height: 1.55;
}

.translated-message-divider {
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
    opacity: 0.8;
}

.translated-message-translation {
    font-size: calc(12px * var(--chat-font-scale, 1));
    line-height: 1.45;
    opacity: 0.86;
}

.translated-message-bubble.is-collapsed .translated-message-divider,
.translated-message-bubble.is-collapsed .translated-message-translation {
    display: none;
}

.translated-message-shell.is-collapsed .translated-message-divider,
.translated-message-shell.is-collapsed .translated-message-translation {
    display: none;
}

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

.msg-left .msg-avatar {
    margin-right: 0;
}

.msg-left .msg-bubble {
    background: var(--chat-ai-bubble-bg, rgba(255, 255, 255, 0.15));
    border: var(--chat-ai-bubble-border, 1px solid rgba(255, 255, 255, 0.18));
    color: var(--chat-ai-bubble-color, #000);
    box-shadow: var(--chat-ai-bubble-shadow, 0 4px 12px rgba(0,0,0,0.05));
    backdrop-filter: var(--chat-ai-bubble-backdrop, blur(30px));
    -webkit-backdrop-filter: var(--chat-ai-bubble-backdrop, blur(30px));
    border-top-left-radius: calc(var(--chat-ai-radius-tl, 18px) * var(--chat-font-scale, 1));
    border-top-right-radius: calc(var(--chat-ai-radius-tr, 18px) * var(--chat-font-scale, 1));
    border-bottom-left-radius: calc(var(--chat-ai-radius-bl, 18px) * var(--chat-font-scale, 1));
    border-bottom-right-radius: calc(var(--chat-ai-radius-br, 18px) * var(--chat-font-scale, 1));
    margin-left: 0;
    transition: all 0.3s ease;
}

.msg-row.msg-left:has(+ .msg-row.msg-left) .msg-bubble {
    border-bottom-left-radius: calc(6px * var(--chat-font-scale, 1));
}

.msg-row.msg-left + .msg-row.msg-left .msg-bubble {
    border-top-left-radius: calc(6px * var(--chat-font-scale, 1));
}

.msg-left .msg-bubble::before {
    display: none;
}

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

.msg-right .msg-avatar {
    margin-left: 0;
}

.msg-right .msg-bubble {
    background: var(--chat-user-bubble-bg, rgba(255, 255, 255, 0.35));
    color: var(--chat-user-bubble-color, #000);
    border: var(--chat-user-bubble-border, 1px solid rgba(255, 255, 255, 0.45));
    box-shadow: var(--chat-user-bubble-shadow, 0 4px 12px rgba(0,0,0,0.05));
    backdrop-filter: var(--chat-user-bubble-backdrop, blur(30px));
    -webkit-backdrop-filter: var(--chat-user-bubble-backdrop, blur(30px));
    border-top-left-radius: calc(var(--chat-user-radius-tl, 18px) * var(--chat-font-scale, 1));
    border-top-right-radius: calc(var(--chat-user-radius-tr, 18px) * var(--chat-font-scale, 1));
    border-bottom-left-radius: calc(var(--chat-user-radius-bl, 18px) * var(--chat-font-scale, 1));
    border-bottom-right-radius: calc(var(--chat-user-radius-br, 18px) * var(--chat-font-scale, 1));
    margin-right: 0;
    transition: all 0.3s ease;
}

.msg-row.msg-right:has(+ .msg-row.msg-right) .msg-bubble {
    border-bottom-right-radius: calc(6px * var(--chat-font-scale, 1));
}

.msg-row.msg-right + .msg-row.msg-right .msg-bubble {
    border-top-right-radius: calc(6px * var(--chat-font-scale, 1));
}

.msg-right .msg-bubble::after {
    display: none;
}

#chat-room-layer .msg-bubble {
    padding: calc(var(--chat-bubble-pad-y, 9px) * var(--chat-font-scale, 1)) calc(12px * var(--chat-font-scale, 1));
    line-height: var(--chat-bubble-line-height, 1.5);
}

:where(#chat-room-layer) .msg-left .msg-bubble::before {
    display: none;
}

:where(#chat-room-layer) .msg-right .msg-bubble::after {
    display: none;
}

#chat-room-layer[data-chat-avatar="0"] .msg-avatar,
#chat-room-layer[data-chat-avatar="0"] .msg-avatar-wrap {
    display: none;
}

#chat-room-layer[data-chat-avatar="0"] .msg-left .msg-bubble {
    margin-left: 0;
}

#chat-room-layer[data-chat-avatar="0"] .msg-right .msg-bubble {
    margin-right: 0;
}

#chat-room-layer[data-chat-tail="0"] .msg-left .msg-bubble::before,
#chat-room-layer[data-chat-tail="0"] .msg-right .msg-bubble::after {
    display: none;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="avatar"] .msg-row {
    padding-bottom: calc(14px * var(--chat-font-scale, 1));
}

#chat-room-layer[data-chat-kkt="first"][data-chat-ts="1"][data-chat-tspos="avatar"] .msg-row,
#chat-room-layer[data-chat-kkt="last"][data-chat-ts="1"][data-chat-tspos="avatar"] .msg-row {
    padding-bottom: 0;
}

#chat-room-layer[data-chat-kkt="first"][data-chat-ts="1"][data-chat-tspos="avatar"] .msg-row[data-kkt-head="1"][data-kkt-not-last="0"],
#chat-room-layer[data-chat-kkt="last"][data-chat-ts="1"][data-chat-tspos="avatar"] .msg-row[data-kkt-head="1"][data-kkt-not-last="0"] {
    padding-bottom: calc(14px * var(--chat-font-scale, 1));
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="avatar"] .msg-avatar-time {
    display: block;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-bubble-time,
#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-bubble-time {
    display: block;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-bubble-time {
    bottom: calc(-14px * var(--chat-font-scale, 1));
    right: 0;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-right .msg-bubble-time {
    right: auto;
    left: 0;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-bubble-time {
    bottom: calc(2px * var(--chat-font-scale, 1));
    right: calc(-60px * var(--chat-font-scale, 1));
    font-size: calc(10px * var(--chat-font-scale, 1));
    color: rgba(153, 153, 153, 1);
    white-space: nowrap;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-left .msg-bubble-time {
    right: auto;
    left: calc(-60px * var(--chat-font-scale, 1));
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-row {
    padding-bottom: calc(18px * var(--chat-font-scale, 1));
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-right .msg-bubble-time {
    color: rgba(255, 255, 255, 0.82);
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-left .msg-bubble-time {
    color: rgba(0, 0, 0, 0.42);
}

#chat-room-layer[data-chat-read="0"] .msg-status-text {
    display: none !important;
}

/* 已读状态样式：只有最后一条消息显示已读 */
.msg-row.msg-right:has(+ .msg-row.msg-right) .msg-status-text {
    display: none !important;
}

.msg-row.msg-right:has(+ .msg-row.msg-right) .msg-bubble-time {
    display: none !important;
}

.msg-avatar-wrap {
    position: relative;
    width: calc(var(--chat-avatar-size, 40px) * var(--chat-font-scale, 1));
    flex: 0 0 auto;
}

.msg-avatar-time {
    display: none;
    position: absolute;
    top: calc(100% + (3px * var(--chat-font-scale, 1)));
    left: 0;
    right: 0;
    transform: scale(0.9);
    transform-origin: top center;
    font-size: calc(10px * var(--chat-font-scale, 1));
    color: #b2b2b2;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.msg-bubble-time {
    display: none;
    position: absolute;
    bottom: calc(4px * var(--chat-font-scale, 1));
    right: calc(6px * var(--chat-font-scale, 1));
    font-size: calc(10px * var(--chat-font-scale, 1));
    color: rgba(0, 0, 0, 0.42);
    line-height: 1;
    transform: scale(0.9);
    transform-origin: bottom right;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.msg-right .msg-bubble-time {
    right: auto;
    left: calc(6px * var(--chat-font-scale, 1));
    transform-origin: bottom left;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left + .msg-row.msg-left,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left + .msg-row.msg-left {
    margin-top: 0;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right + .msg-row.msg-right,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right + .msg-row.msg-right {
    margin-top: 0;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left + .msg-row.msg-left .msg-avatar-wrap,
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right + .msg-row.msg-right .msg-avatar-wrap {
    opacity: 0;
    visibility: hidden;
}

#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left:has(+ .msg-row.msg-left) .msg-avatar-wrap,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right:has(+ .msg-row.msg-right) .msg-avatar-wrap {
    opacity: 0;
    visibility: hidden;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left:has(+ .msg-row.msg-left),
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right:has(+ .msg-row.msg-right),
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left:has(+ .msg-row.msg-left),
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right:has(+ .msg-row.msg-right) {
    margin-bottom: calc(4px * var(--chat-font-scale, 1));
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left + .msg-row.msg-left .msg-bubble::before,
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right + .msg-row.msg-right .msg-bubble::after,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left + .msg-row.msg-left .msg-bubble::before,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right + .msg-row.msg-right .msg-bubble::after {
    display: none;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left + .msg-row.msg-left .msg-avatar-time,
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right + .msg-row.msg-right .msg-avatar-time,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left + .msg-row.msg-left .msg-avatar-time,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right + .msg-row.msg-right .msg-avatar-time {
    display: none;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left + .msg-row.msg-left .msg-bubble-time,
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right + .msg-row.msg-right .msg-bubble-time,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left + .msg-row.msg-left .msg-bubble-time,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right + .msg-row.msg-right .msg-bubble-time {
    display: none;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right[data-kkt-not-last="1"] .msg-status-text,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right[data-kkt-not-last="1"] .msg-status-text {
    display: none;
}

.msg-bubble.location-bubble {
    padding: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent !important;
    border: none;
    box-shadow: none;
}

.msg-right .msg-bubble.location-bubble {
    background: transparent !important;
}

.msg-bubble.location-bubble::before,
.msg-bubble.location-bubble::after {
    display: none;
}

.msg-bubble.transfer-bubble::before,
.msg-bubble.transfer-bubble::after,
.msg-bubble.call-end-bubble::before,
.msg-bubble.call-end-bubble::after,
.msg-bubble.voice-bubble::before,
.msg-bubble.voice-bubble::after {
    display: none;
}

.msg-bubble-image {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.msg-left .msg-bubble-image,
.msg-right .msg-bubble-image {
    margin-left: 0;
    margin-right: 0;
}

.msg-bubble-image img {
    display: block;
    max-width: 96px;
    max-height: 96px;
    border-radius: 6px;
}

.msg-bubble-image.custom-image-message:not(.custom-sticker) img {
    max-width: 168px;
    max-height: 168px;
    border-radius: 10px;
}

.ai-photo-bubble {
    width: 168px;
    height: 168px;
    overflow: hidden;
    border-radius: 10px !important;
    background: #f2f4f7 !important;
}

.ai-photo-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-photo-fallback {
    display: none;
    width: 168px;
    height: 168px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: #6b7280;
    background: #f2f4f7;
    font-size: 13px;
}

.ai-photo-fallback i {
    font-size: 28px;
}

.ai-image-status-bubble {
    width: 168px;
    min-height: 116px;
    box-sizing: border-box;
    border-radius: 12px !important;
}

.ai-photo-bubble.is-photo-fallback .ai-photo-fallback {
    display: flex;
}

.msg-bubble-image::before,
.msg-bubble-image::after {
    display: none !important;
}

.location-card {
    width: 240px;
    max-width: 70vw;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden; /* 保证顶部的浅蓝色区域能够被圆角裁切 */
}

.location-map-area {
    width: 100%;
    height: 100px;
    background: #e0f2fe; /* 浅蓝色底纹 */
    background-image: radial-gradient(#bae6fd 1px, transparent 1px);
    background-size: 10px 10px; /* 模拟地图的小点点网格 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.location-pin-icon {
    font-size: 36px;
    color: #ef4444; /* 经典的红色定位针 */
    filter: drop-shadow(0 4px 4px rgba(239, 68, 68, 0.3));
    margin-bottom: 6px; /* 微调让其看起来更在中心 */
}

.location-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #ffffff;
}

.location-name {
    font-size: 15px;
    font-weight: 500;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-address {
    font-size: 12px;
    color: #999999;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-sheet-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 1200;
}

.location-sheet {
    width: calc(100% - 24px);
    max-width: 460px;
    margin: 0 12px 12px 12px;
    background: #f2f2f7;
    border-radius: 14px;
    overflow: hidden;
    transform: translateY(30px);
    animation: panelUp 0.18s ease-out;
}

.location-sheet-title {
    padding: 12px 0;
    font-size: 13px;
    color: #8e8e93;
    text-align: center;
    background: #f2f2f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.location-sheet-btn {
    width: 100%;
    height: 52px;
    background: #ffffff;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 17px;
    color: #000;
}

.location-sheet-btn-primary:active,
.location-sheet-btn-cancel:active {
    background: #f5f5f5;
}

.location-sheet-btn-disabled {
    color: #b2b2b2;
}

.location-sheet-btn-cancel {
    margin-top: 10px;
    border-bottom: none;
    border-radius: 14px;
}

.map-creator-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    display: none;
    align-items: stretch;
    justify-content: center;
    z-index: 1300;
}

.map-creator-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.map-creator-map-panel {
    width: 100%;
}

.map-creator-stage {
    position: relative;
    width: 100%;
}

.map-creator-map {
    width: 100%;
    height: auto;
    display: block;
}

.map-creator-markers {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-creator-dot {
    position: absolute;
    pointer-events: auto;
    user-select: none;
    width: 12px;
    height: 12px;
    background: #ff3b30;
    border: 2px solid #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.map-creator-info-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.map-creator-hint {
    padding: 14px 12px;
    font-size: 14px;
    color: #8e8e93;
    text-align: center;
}

.map-creator-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 10px 12px;
    box-sizing: border-box;
}

.map-creator-list-item {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.map-creator-list-text {
    font-size: 15px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.map-creator-list-delete {
    height: 32px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: #ff3b30;
    font-size: 14px;
}

.map-creator-footer {
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.map-creator-btn {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: #07c160;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.map-creator-btn:active {
    opacity: 0.9;
}

#location-share-layer.is-floating-window {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 180px; /* Increased from 140px */
    height: 280px; /* Increased from 240px */
    left: auto;
    bottom: auto;
    background: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 20000;
    border: 1px solid rgba(0,0,0,0.05);
}

#location-share-layer.is-floating-window .location-share-bg {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #e9ecef;
    background-image: 
        linear-gradient(#dee2e6 1px, transparent 1px),
        linear-gradient(90deg, #dee2e6 1px, transparent 1px);
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#location-share-layer.is-floating-window .location-share-map-stage {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#location-share-layer.is-floating-window .location-share-map {
    display: none; /* Hide original image */
}

#location-share-layer.is-floating-window .location-share-header-float,
#location-share-layer.is-floating-window .location-share-footer-float {
    display: none; /* Hide old UI */
}

#location-share-layer.is-floating-window .ls-drag-header {
    background: #ffffff;
    height: 48px; /* Increased height to accommodate two lines */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    cursor: move;
    border-bottom: 1px solid #eee;
    user-select: none;
    touch-action: none;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

#location-share-layer.is-floating-window .ls-drag-header .ls-avatars {
    display: flex;
    align-items: center;
    gap: 4px;
}

#location-share-layer.is-floating-window .ls-drag-header img {
    width: 20px; /* Reduced avatar size */
    height: 20px; /* Reduced avatar size */
    border-radius: 4px;
    object-fit: cover;
}

#location-share-layer.is-floating-window .ls-drag-header .ls-distance {
    font-size: 10px;
    color: #666;
    flex: 1;
    text-align: center;
    margin: 0 4px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: color 0.18s ease;
}

#location-share-layer.is-floating-window .ls-drag-header .ls-close {
    font-size: 18px;
    color: #999;
    cursor: pointer;
}

#location-share-layer.is-fast-forwarding .ls-drag-header {
    background: #e8f2ff;
    box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.18);
}

#location-share-layer.is-fast-forwarding .ls-drag-header .ls-distance {
    color: #005fcb;
}

#location-share-layer.is-floating-window .location-share-marker {
    width: 4px; /* Reduced landmark size */
    height: 4px; /* Reduced landmark size */
    margin-left: -2px;
    margin-top: -2px;
    background: #007aff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

#location-share-layer.is-floating-window .location-share-marker .marker-name {
    font-size: 7px; /* Further reduced location name font size */
    bottom: -10px;
    color: #333;
    text-shadow: none; /* Removed text shadow / black background */
    background: rgba(255, 255, 255, 0.6); /* Added a subtle semi-transparent white background to ensure readability without being ugly */
    padding: 1px 3px;
    border-radius: 3px;
    transform: scale(0.85); /* Further reduce visual size */
    white-space: nowrap;
}

#location-share-layer.is-floating-window .location-share-avatar-wrap {
    width: 20px; /* Reduced avatar wrap size on map */
    height: 20px; /* Reduced avatar wrap size on map */
    margin-left: -10px;
    margin-top: -10px;
}

#location-share-layer.is-floating-window .location-share-avatar-wrap img {
    width: 16px; /* Reduced avatar image size on map */
    height: 16px; /* Reduced avatar image size on map */
}

/* =========================================================
   === 优化版：实时位置共享 (Location Share) ===
   ========================================================= */

#location-share-layer {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f7; /* 底色 */
    display: none;
    flex-direction: column;
    z-index: 20000;
}

.location-share-loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(0,0,0,0.55);
    z-index: 30;
}

/* 1. 顶部栏：改为绝对定位悬浮在地图上方，头像居中 */
.location-share-header {
    position: absolute;  /* 悬浮在地图上 */
    top: 0; 
    left: 0; 
    width: 100%;
    z-index: 10;         /* 保证在地图上面 */
    
    padding: 50px 0 20px 0; /* 避开刘海，留出空间 */
    display: flex;
    align-items: center;
    justify-content: center; /* 🔥 核心：让内容居中！ */
    box-sizing: border-box;
    
    /* 增加一个淡淡的白色渐变背景，防止文字看不清 */
    background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
    gap: 15px; /* 头像和中间文字的间距 */
}

/* 头像：增加白色描边，更精致 */
.location-share-header-avatar {
    width: 46px;         /*稍微大一点点*/
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #ccc;
    border: 2px solid #fff; /* 白色描边 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 加点阴影 */
}

.location-share-header-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 中间文字区域：不再占满剩余空间，而是自适应宽度 */
.location-share-distance {
    flex: 0 0 auto;  /* 🔥 核心：不要拉伸！ */
    display: flex;
    flex-direction: column; /* 上下排列 */
    align-items: center;
    justify-content: center;
    color: #1c1c1e;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.8); /* 半透明胶囊背景 */
    padding: 4px 12px;
    border-radius: 20px;
}

/* 虚线装饰（如果是文字形式就不需要虚线了，这里稍微简化） */
.location-share-distance-line {
    display: none; /* 既然挨得很近，就不需要长虚线了 */
}

/* 2. 中间地图区：强制铺满，无留白 */
.location-share-body {
    flex: 1; /* 占满所有空间 */
    padding: 0; /* 🔥 核心：去掉原来的边距！ */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.location-share-map-panel {
    width: 100%;
    height: 100%;
    background: #e5e5e5;
    border-radius: 0; /* 去掉圆角，全屏显示 */
}

.location-share-map-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 🔥 核心修复：强制图片填满容器，裁剪多余部分 */
.location-share-map {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键属性！ */
    display: block;
    pointer-events: none;
}

/* 地图上的遮罩层（保持不变） */
.location-share-map-overlay {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    pointer-events: auto;
}

.map-creator-tip {
    font-size: 12px;
    color: #666;
    padding: 10px 14px 4px 14px;
}

/* 地图上的小圆点标记 */
.location-share-marker {
    position: absolute;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0, 122, 255, 0.3); /* 蓝色光晕 */
    border: 3px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 5;
    pointer-events: auto;
}

#location-share-layer.is-user-location-locked .location-share-marker {
    cursor: default;
}

/* 3. 底部对话框区：改为悬浮卡片 */
.location-share-footer {
    position: absolute; /* 悬浮在底部 */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    
    padding: 0 15px 30px 15px; /* 底部留出安全距离 */
    box-sizing: border-box;
    /* 给底部加一个深色渐变，让卡片更清晰 */
    background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 对话框本体 */
.location-share-chat-box {
    width: 100%;
    height: 140px; /* 稍微高一点 */
    background: rgba(255, 255, 255, 0.92); /* 毛玻璃效果 */
    backdrop-filter: blur(10px);
    border-radius: 20px; /* 大圆角 */
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* 漂亮的阴影 */
    margin-bottom: 10px;
    position: relative;
}

.location-share-reroll-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    border: none;
    background: #000000;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    cursor: pointer;
}

.location-share-reroll-btn i {
    font-size: 16px;
}

/* 对话气泡样式微调 */
.location-share-chat-row { display: flex; margin: 8px 0; }
.location-share-chat-row.me { justify-content: flex-end; }
.location-share-chat-row.ai { justify-content: flex-start; }

.location-share-chat-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.location-share-chat-row.me .location-share-chat-bubble {
    background: #07c160; color: #fff;
}

/* 底部圆形大按钮组 */
.location-share-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* 居中显示 */
    gap: 40px; /* 两个大按钮之间的距离 */
    padding-bottom: 10px;
}

.location-share-btn-round {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    color: #333;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.1s;
    text-decoration: none; /* 防止变成链接样式 */
}
/* 话筒按钮给个特殊色 */
#ls-mic-btn {
    color: #000;
    font-weight: bold;
}
/* 关闭按钮给个红色 */
#ls-close-btn {
    color: #ff3b30;
    background: rgba(255,255,255,0.95);
}

.location-share-btn-round:active {
    transform: scale(0.92);
}

/* 下方文字 */
.location-share-controls span {
    display: none; /* 隐藏按钮旁边的文字，只留图标更简洁 */
}

/* AI 头像在地图上的特殊动画（保持不变） */
.location-share-avatar-wrap-ai::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 54px; height: 54px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(7, 193, 96, 0.3);
    animation: locationSharePulse 1.4s ease-in-out infinite;
    z-index: -1;
}
/* === 修复：补全缺失的悬浮样式 === */

/* 1. 底层地图容器（全屏背景） */
.location-share-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #e5e5e5;
    pointer-events: auto;
}

/* 2. 顶部悬浮栏（新版：头像+距离） */
.location-share-header-float {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    z-index: 10;
    padding: 50px 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none; /* 让点击穿透到地图 */
}

/* 头像胶囊 */
.ls-avatar-pill {
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: auto; /* 恢复点击 */
}
.ls-avatar-pill img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 距离信息胶囊 */
.ls-info-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.85);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    color: #333;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    pointer-events: auto;
}
.location-share-minimize {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    color: #333;
    pointer-events: auto;
}
.ls-info-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}
#location-share-status-text {
    font-size: 11px;
    color: #666;
}
.ls-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #07c160;
    animation: pulse 1.5s ease-in-out infinite;
}

/* 3. 底部悬浮对话框 */
.location-share-footer-float {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 20;
    padding: 0 15px 30px 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* 让背景渐变穿透 */
}
.location-share-footer-float > * {
    pointer-events: auto; /* 恢复内部元素点击 */
}

/* 控制按钮组容器 */
.ls-control-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ls-btn-label {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.location-share-btn-round.close-mode {
    background: rgba(255,59,48,0.9);
    color: #fff;
}

/* 地图上的头像标记 */
.location-share-avatar-wrap {
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    z-index: 101;
    overflow: hidden;
    pointer-events: none;
    transition: left 20s ease-in-out, top 20s ease-in-out;
    will-change: left, top;
}
.location-share-avatar-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* AI 头像特殊脉冲动画 */
.location-share-avatar-wrap-ai::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 54px; height: 54px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(7,193,96,0.3);
    animation: pulse 1.4s ease-in-out infinite;
    z-index: -1;
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
}


/* =========================================================
   === 新版弹窗通用样式 (Layer 2 & Layer 3) ===
   ========================================================= */
.modal-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* 强制拉伸四角 */
    width: 100%; height: 100%;
    background-color: #f2f2f7; 
    z-index: 999; /* 提高层级，防止被遮挡 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 顶部导航条 */
.modal-header-bar {
    height: 50px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
    flex-shrink: 0; /* 防止被压缩 */
    box-sizing: content-box;
}
.modal-close-icon {
    font-size: 28px;
    color: #333;
    cursor: pointer;
    width: 40px; /* 增加点击区域 */
    line-height: 1;
}
.modal-title { font-weight: bold; font-size: 17px; color: #000; }
.modal-placeholder { width: 40px; } /* 右侧占位，保证标题居中 */

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 28px;
    flex: 0 0 auto;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e5ea;
    transition: 0.2s;
    border-radius: 999px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    transition: 0.2s;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.switch input:checked + .slider {
    background-color: #34c759;
}
.switch input:checked + .slider:before {
    transform: translateX(18px);
}

/* 内容滚动容器 */
.modal-content, .creator-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 40px; /* 底部留白 */
}

/* =========================================================
   === 设置菜单列表样式 (仿 iOS) ===
   ========================================================= */
/* 聊天设置（底部弹出）顶部栏：固定不随列表滚动 */
.settings-list-layout {
    max-height: min(92vh, 760px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f2f2f7;
}
.settings-list-layout .modal-header-bar {
    position: sticky;
    top: 0;
    z-index: 20;
}
/* 分组块 */
.settings-group {
    background: #fff;
    margin-top: 20px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

/* 列表项 */
.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-left: 15px; /* 左侧留空，分割线不通栏 */
    padding-left: 0;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.settings-item:last-child { border-bottom: none; } /* 最后一项不要分割线 */
.settings-item:active { background-color: #f9f9f9; }

.item-label { font-size: 16px; color: #000; }
.chevron { color: #c7c7cc; font-size: 18px; font-weight: bold; margin-right: 15px;}
.settings-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.item-value {
    font-size: 13px;
    color: #8e8e93;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-check {
    color: #007aff;
    font-size: 18px;
    font-weight: 900;
    width: 24px;
    text-align: right;
}

/* 危险操作 */
.text-danger .item-label { color: #ff3b30; }

/* =========================================================
   === 作息解析器与忙时回复设置 ===
   ========================================================= */
.schedule-parse-note {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: #8e8e93;
}

.schedule-parse-panel {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.schedule-parse-panel[hidden] {
    display: none !important;
}

.schedule-parse-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.schedule-parse-panel-copy {
    min-width: 0;
    flex: 1;
}

.schedule-parse-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.schedule-parse-panel-subtitle {
    font-size: 11px;
    line-height: 1.5;
    color: #8e8e93;
    margin-top: 4px;
}

.schedule-parse-panel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
}

.schedule-parse-action-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1 1 170px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #111;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.schedule-parse-action-btn.primary {
    background: #111;
    color: #fff;
    border-color: #111;
}

.schedule-parse-action-btn-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.schedule-parse-action-btn-sub {
    font-size: 11px;
    line-height: 1.4;
    color: inherit;
    opacity: 0.72;
}

.schedule-parse-action-btn:disabled {
    opacity: 0.64;
    cursor: wait;
}

.schedule-parse-status {
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #f4f4f5;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #52525b;
    font-size: 12px;
    line-height: 1.5;
}

.schedule-parse-empty-hint {
    padding: 0 2px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: #8e8e93;
}

.schedule-parse-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.schedule-parse-summary-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
}

.schedule-parse-summary-score {
    font-size: 11px;
    color: #8e8e93;
    white-space: nowrap;
}

.schedule-parse-summary {
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
}

.schedule-parse-summary-text {
    font-size: 12px;
    line-height: 1.5;
    color: #1d1d1f;
}

.schedule-parse-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.schedule-parse-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.schedule-parse-field label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 700;
}

.schedule-parse-field input,
.schedule-parse-field textarea {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    color: #111;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.schedule-parse-field textarea {
    min-height: 72px;
    resize: vertical;
}

.schedule-parse-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    margin: 10px 0 8px;
}

.schedule-parse-busy-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-parse-busy-item {
    display: grid;
    grid-template-columns: minmax(96px, 108px) minmax(96px, 108px) minmax(160px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.schedule-parse-busy-item input,
.schedule-parse-busy-item textarea {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    color: #111;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.schedule-parse-busy-item input[type="time"] {
    padding-right: 8px;
}

.schedule-parse-busy-remove {
    border: none;
    background: #111;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.schedule-parse-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #111;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
}

.creator-sticky-footer {
    pointer-events: none;
    z-index: 12;
}

.creator-sticky-footer > * {
    pointer-events: auto;
}

@media (max-width: 520px) {
    .schedule-parse-panel-header {
        flex-direction: column;
    }

    .schedule-parse-panel-actions {
        width: 100%;
        justify-content: stretch;
    }

    .schedule-parse-action-btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .schedule-parse-busy-item {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-parse-busy-item input[data-schedule-field="busy-reason"] {
        grid-column: 1 / -1;
    }

    .schedule-parse-busy-remove {
        justify-self: end;
    }
}

.schedule-parse-footnote {
    margin-top: 10px;
    font-size: 11px;
    color: #8e8e93;
    line-height: 1.5;
}

.busy-reply-box {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f7f7f8;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.busy-reply-box[hidden] {
    display: none !important;
}

.busy-reply-hint {
    font-size: 11px;
    line-height: 1.5;
    color: #8e8e93;
    margin-bottom: 10px;
}

.busy-reply-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.busy-reply-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.busy-reply-option input {
    margin: 0;
    accent-color: #111;
}

.busy-auto-reply-box {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.busy-auto-reply-box[hidden] {
    display: none !important;
}

.busy-auto-reply-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.busy-auto-reply-btn,
.busy-auto-event-btn,
.busy-auto-entry-remove {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #fff;
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.busy-auto-reply-btn.primary {
    background: #111;
    color: #fff;
    border-color: #111;
}

.busy-auto-reply-btn:disabled {
    opacity: 0.58;
    cursor: wait;
}

.busy-auto-reply-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.busy-auto-event-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 12px;
}

.busy-auto-event-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.busy-auto-event-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
}

.busy-auto-event-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #8e8e93;
    line-height: 1.4;
}

.busy-auto-event-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.busy-auto-entry-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.busy-auto-entry-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.busy-auto-entry-row textarea {
    flex: 1;
    min-height: 54px;
    resize: vertical;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #111;
    background: #fff;
}

.busy-auto-empty-hint {
    font-size: 12px;
    line-height: 1.6;
    color: #8e8e93;
    padding: 8px 2px 2px;
}

.busy-auto-reply-loading {
    opacity: 0.72;
}

.busy-settings-page {
    min-height: calc(100vh - 50px - env(safe-area-inset-top, 0px));
    margin: -16px;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    background: #F7F4EE;
    color: #171717;
}

.busy-settings-hero {
    padding: 20px 18px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1F1F1D 0%, #34322E 64%, #4B453B 100%);
    color: #FAFAF7;
    box-shadow: 0 12px 28px rgba(31, 31, 29, 0.16);
}

.busy-settings-kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    letter-spacing: 1.8px;
    color: rgba(250, 250, 247, 0.62);
    text-transform: uppercase;
}

.busy-settings-title {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
}

.busy-settings-desc {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(250, 250, 247, 0.78);
}

.busy-settings-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.busy-settings-stats div {
    min-width: 0;
    padding: 10px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.busy-settings-stats span,
.busy-settings-stats small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.busy-settings-stats span {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
}

.busy-settings-stats small {
    margin-top: 4px;
    font-size: 10px;
    color: rgba(250, 250, 247, 0.58);
}

.busy-settings-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(47, 43, 37, 0.08);
    box-shadow: 0 8px 22px rgba(47, 43, 37, 0.06);
}

.busy-settings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.busy-settings-switch-head {
    align-items: center;
}

.busy-settings-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #171717;
    line-height: 1.25;
}

.busy-settings-card-sub {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: #80786B;
}

.busy-settings-mini-btn,
.busy-settings-save-btn,
.role-profile-generate-schedule-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #171717;
    background: #171717;
    color: #FAFAF7;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.busy-settings-mini-btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 18px;
}

.busy-settings-mini-btn i,
.role-profile-generate-schedule-btn i {
    font-size: 15px;
    line-height: 1;
}

.busy-settings-textarea {
    width: 100%;
    min-height: 150px;
    border: none;
    border-radius: 6px;
    background: #F3F1EC;
    color: #171717;
    padding: 14px 15px;
    font-size: 14px;
    line-height: 1.65;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.busy-settings-textarea:focus {
    box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.22);
    background: #F6F4EF;
}

.busy-settings-parse-panel.schedule-parse-panel {
    margin-top: 12px;
    border-radius: 8px;
    background: #FBFAF7;
    border: 1px solid rgba(47, 43, 37, 0.08);
    box-shadow: none;
}

.busy-settings-parse-panel .schedule-parse-panel-actions {
    width: 100%;
}

.busy-settings-parse-panel .schedule-parse-action-btn {
    border-radius: 6px;
    background: #FFFFFF;
}

.busy-settings-parse-panel .schedule-parse-action-btn.primary {
    background: #171717;
}

.busy-settings-save-btn {
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border-radius: 6px;
}

.busy-settings-mode-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.busy-settings-mode-box[hidden] {
    display: none !important;
}

.busy-settings-mode-option {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 12px;
    border-radius: 8px;
    border: 1px solid rgba(47, 43, 37, 0.1);
    background: #F7F5F1;
    cursor: pointer;
}

.busy-settings-mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.busy-settings-mode-option.is-active {
    background: #ECF5EF;
    border-color: rgba(26, 115, 70, 0.28);
    box-shadow: inset 0 0 0 1px rgba(26, 115, 70, 0.1);
}

.busy-settings-mode-main {
    font-size: 14px;
    font-weight: 800;
    color: #171717;
}

.busy-settings-mode-sub {
    font-size: 11px;
    line-height: 1.5;
    color: #80786B;
}

.busy-settings-auto-box.busy-auto-reply-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(47, 43, 37, 0.08);
}

.busy-settings-auto-box .busy-auto-reply-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.role-profile-generate-schedule-btn {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    border-radius: 4px;
}

@media (max-width: 380px) {
    .busy-settings-stats,
    .busy-settings-mode-box,
    .busy-settings-auto-box .busy-auto-reply-toolbar {
        grid-template-columns: 1fr;
    }

    .busy-settings-card-head {
        flex-direction: column;
    }

    .busy-settings-mini-btn {
        width: 100%;
    }
}

.busy-settings-page {
    min-height: calc(100vh - 50px - env(safe-area-inset-top, 0px));
    margin: -16px;
    padding: 0 24px calc(64px + env(safe-area-inset-bottom, 0px));
    background: #F9F9F6;
    color: #1A1A1A;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}

.busy-settings-page button,
.busy-settings-page textarea,
.busy-settings-page input {
    font-family: inherit;
}

.busy-settings-hero {
    padding: 32px 0 8px;
    border-radius: 0;
    background: transparent;
    color: #1A1A1A;
    box-shadow: none;
}

.busy-settings-kicker {
    margin-bottom: 12px;
    color: #8C8C85;
    font-size: 10px;
    letter-spacing: 0.2em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    text-transform: uppercase;
}

.busy-settings-title {
    margin-top: 0;
    color: #1A1A1A;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

.busy-settings-desc {
    max-width: 40ch;
    margin-top: 14px;
    color: #555555;
    font-size: 13px;
    line-height: 1.72;
}

.busy-settings-role-name {
    color: #000000;
    font-weight: 600;
}

.busy-settings-stats {
    display: flex;
    gap: 40px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #EBEBE6;
}

.busy-settings-stats div {
    padding: 0;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.busy-settings-stats span,
.busy-settings-stats small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.busy-settings-stats span {
    color: #1A1A1A;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

.busy-settings-stats small {
    margin-top: 6px;
    color: #8C8C85;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 0.16em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    text-transform: uppercase;
}

.busy-settings-section {
    margin-top: 34px;
}

.busy-settings-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.busy-settings-section-kicker {
    display: block;
    color: #8C8C85;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.15em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.busy-settings-schedule-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.busy-settings-mini-btn {
    min-height: 32px;
    padding: 6px 14px;
    border: 1px solid #1A1A1A;
    border-radius: 20px;
    background: transparent;
    color: #1A1A1A;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.busy-settings-mini-btn:active,
.busy-settings-mini-btn:hover {
    background: #1A1A1A;
    color: #F9F9F6;
}

.busy-settings-mini-btn:active {
    transform: scale(0.96);
}

.busy-settings-mini-btn.is-loading,
.busy-settings-inline-btn.is-loading {
    opacity: 0.56;
}

.busy-settings-inline-btn {
    border: none;
    background: transparent;
    color: #8C8C85;
    padding: 0;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.busy-settings-inline-btn:hover {
    color: #1A1A1A;
}

.busy-settings-inline-btn:disabled,
.busy-settings-mini-btn:disabled {
    cursor: wait;
    opacity: 0.56;
}

.busy-settings-inline-btn-mono {
    font-size: 11px;
    letter-spacing: 0.08em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.busy-settings-inline-btn-strong {
    color: #1A1A1A;
    font-size: 12px;
    font-weight: 600;
}

.busy-settings-textarea {
    width: 100%;
    min-height: 120px;
    border: none;
    border-radius: 12px;
    background: #F4F4F0;
    color: #1A1A1A;
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
    resize: none;
    outline: none;
    box-sizing: border-box;
    transition: background 0.2s ease;
}

.busy-settings-textarea:focus {
    background: #EBEBE6;
    box-shadow: none;
}

.busy-settings-textarea[readonly] {
    resize: none;
    cursor: default;
}

.busy-settings-parse-panel.schedule-parse-panel {
    margin-top: 12px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.busy-settings-parse-shell {
    margin-top: 0;
}

.busy-settings-parse-status {
    margin-bottom: 10px;
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.5;
}

.busy-settings-parse-card {
    padding: 16px;
    border: 1px solid #EBEBE6;
    border-radius: 12px;
    background: #FFFFFF;
}

.busy-settings-parse-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.busy-settings-parse-card-title {
    color: #1A1A1A;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

.busy-settings-parse-card-score {
    padding: 3px 8px;
    border-radius: 999px;
    background: #F4F4F0;
    color: #8C8C85;
    font-size: 11px;
    line-height: 1.3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.busy-settings-parse-card-summary {
    margin-bottom: 14px;
    color: #6A6A65;
    font-size: 12px;
    line-height: 1.6;
}

.busy-settings-parse-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.busy-settings-parse-mini-card {
    padding: 10px 12px;
    border-radius: 10px;
    background: #F9F9F6;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.busy-settings-parse-mini-card:focus-within,
.busy-settings-busy-row:focus-within,
.busy-settings-parse-notes:focus-within textarea {
    border-color: #1A1A1A;
    background: #FFFFFF;
}

.busy-settings-parse-mini-label {
    margin-bottom: 6px;
    color: #8C8C85;
    font-size: 10px;
    line-height: 1.3;
}

.busy-settings-parse-mini-input {
    width: 100%;
    border: none;
    background: transparent;
    color: #1A1A1A;
    font-size: 14px;
    line-height: 1.35;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    outline: none;
}

.busy-settings-parse-list-title {
    margin-bottom: 8px;
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.4;
}

.busy-settings-parse-busy-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.busy-settings-busy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #F9F9F6;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.busy-settings-busy-time-group {
    width: 132px;
    flex: 0 0 132px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.busy-settings-busy-time {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    color: #1A1A1A;
    font-size: 13px;
    line-height: 1.3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    outline: none;
}

.busy-settings-busy-time::-webkit-calendar-picker-indicator,
.busy-settings-parse-mini-input::-webkit-calendar-picker-indicator {
    opacity: 0.42;
}

.busy-settings-busy-sep {
    color: #8C8C85;
    font-size: 13px;
    line-height: 1;
}

.busy-settings-busy-reason {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: #1A1A1A;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
}

.busy-settings-busy-remove {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #B5B5AF;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.busy-settings-busy-remove:hover {
    background: #F0F0EC;
    color: #6F6F6A;
}

.busy-settings-parse-add-btn {
    margin-top: 10px;
    border: none;
    background: transparent;
    color: #8C8C85;
    padding: 0;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.busy-settings-parse-add-btn:hover {
    color: #1A1A1A;
}

.busy-settings-parse-add-btn:active {
    transform: scale(0.98);
}

.busy-settings-parse-notes {
    margin-top: 14px;
}

.busy-settings-parse-notes label {
    display: block;
    margin-bottom: 8px;
    color: #8C8C85;
    font-size: 11px;
    line-height: 1.4;
}

.busy-settings-parse-notes textarea {
    width: 100%;
    min-height: 72px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #F9F9F6;
    color: #1A1A1A;
    padding: 12px;
    font-size: 13px;
    line-height: 1.6;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
}

.busy-settings-parse-notes textarea[readonly],
.busy-settings-parse-mini-input[readonly],
.busy-settings-busy-time[readonly],
.busy-settings-busy-reason[readonly] {
    cursor: default;
}

.busy-settings-parse-help {
    margin-top: 14px;
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.6;
}

.busy-settings-save-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    border: none;
    border-radius: 12px;
    background: #1A1A1A;
    color: #F9F9F6;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.12em;
    box-shadow: 0 12px 24px rgba(26, 26, 26, 0.12);
}

.busy-settings-switch-head {
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #EBEBE6;
}

.busy-settings-mode-title {
    margin-top: 6px;
    color: #1A1A1A;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

.busy-settings-switch label {
    display: inline-flex;
    align-items: center;
}

.busy-settings-switch input + div {
    width: 44px;
    height: 24px;
    background: #EBEBE6 !important;
    border-radius: 999px;
}

.busy-settings-switch input + div::after {
    top: 2px !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.busy-settings-switch input:checked + div {
    background: #1A1A1A !important;
}

.busy-settings-switch input:checked + div::after {
    transform: translateX(20px) !important;
}

.busy-settings-mode-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.busy-settings-mode-option {
    gap: 8px;
    padding: 16px 14px;
    border: 1px solid #EBEBE6;
    border-radius: 12px;
    background: #FFFFFF;
}

.busy-settings-mode-option.is-active {
    background: #FFFFFF;
    border-color: #1A1A1A;
    box-shadow: inset 0 0 0 1px #1A1A1A;
}

.busy-settings-mode-main {
    color: #1A1A1A;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

.busy-settings-mode-sub {
    color: #8C8C85;
    font-size: 11px;
    line-height: 1.6;
}

.busy-settings-auto-section {
    margin-top: 38px;
    min-height: 320px;
}

.busy-settings-auto-head {
    align-items: center;
}

.busy-settings-auto-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.busy-settings-auto-divider {
    color: #D4D4D0;
    font-size: 12px;
    line-height: 1;
}

.busy-settings-page .busy-auto-reply-box {
    margin-top: 38px;
    padding-top: 0;
    border-top: none;
}

.busy-settings-page .busy-auto-reply-box.is-system-mode .busy-settings-auto-tools {
    visibility: hidden;
    pointer-events: none;
}

.busy-settings-page .busy-auto-reply-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 220px;
}

.busy-settings-page .busy-auto-event-card {
    padding: 16px;
    border: 1px solid #EBEBE6;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

.busy-settings-page .busy-auto-event-head {
    gap: 12px;
    margin-bottom: 14px;
}

.busy-settings-page .busy-auto-event-title {
    color: #1A1A1A;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

.busy-settings-page .busy-auto-event-meta {
    margin-top: 6px;
    color: #8C8C85;
    font-size: 11px;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.busy-settings-page .busy-auto-event-actions {
    gap: 12px;
}

.busy-settings-page .busy-auto-event-btn {
    border: none;
    background: transparent;
    color: #8C8C85;
    padding: 0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    border-radius: 0;
}

.busy-settings-page .busy-auto-event-btn:hover {
    color: #1A1A1A;
}

.busy-settings-page .busy-auto-event-btn.is-danger:hover {
    color: #B42318;
}

.busy-settings-page .busy-auto-entry-list {
    gap: 8px;
}

.busy-settings-page .busy-auto-entry-row {
    gap: 8px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #F9F9F6;
    transition: border-color 0.2s ease;
}

.busy-settings-page .busy-auto-entry-row:focus-within {
    border-color: #1A1A1A;
}

.busy-settings-page .busy-auto-entry-row textarea {
    min-height: 40px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #1A1A1A;
    box-shadow: none;
    resize: none;
}

.busy-settings-page .busy-auto-entry-remove {
    color: #C6C6C1;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.busy-settings-page .busy-auto-entry-row:hover .busy-auto-entry-remove,
.busy-settings-page .busy-auto-entry-row:focus-within .busy-auto-entry-remove {
    opacity: 1;
}

.busy-settings-page .busy-auto-entry-remove:hover {
    color: #B42318;
}

.busy-settings-page .busy-auto-empty-hint {
    padding: 6px 0 0;
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.6;
}

.busy-settings-system-panel {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #EBEBE6;
    border-radius: 12px;
    background: #FFFFFF;
    padding: 18px;
    box-sizing: border-box;
}

.busy-settings-system-title {
    color: #1A1A1A;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
}

.busy-settings-system-text {
    margin-top: 8px;
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.7;
}

body.chat-settings-busy-open #desktop-view {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.chat-settings-busy-open #chat-view,
body.chat-settings-busy-open {
    background: #F9F9F6 !important;
}

#settings-menu-modal.chat-settings-busy-page,
#settings-menu-modal.chat-settings-busy-page .absolute.inset-0,
#chat-settings-body.chat-settings-body-busy {
    background: #F9F9F6 !important;
}

#chat-settings-body.chat-settings-body-busy {
    padding: 0 !important;
    padding-bottom: 0 !important;
}

#chat-settings-body.chat-settings-body-busy .busy-settings-page {
    min-height: 100%;
    margin: 0 !important;
    box-sizing: border-box;
}

#chat-settings-body.chat-settings-body-busy .busy-auto-reply-list {
    min-height: 260px;
}

#chat-settings-body.chat-settings-body-busy .busy-settings-system-panel,
#chat-settings-body.chat-settings-body-busy .busy-auto-empty-hint {
    flex: 1 1 auto;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EBEBE6;
    border-radius: 12px;
    background: #FFFFFF;
    color: #8C8C85;
    padding: 18px;
    box-sizing: border-box;
    text-align: center;
}

@media (max-height: 900px) {
    #chat-settings-body.chat-settings-body-busy .busy-settings-page {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-hero {
        padding-top: 18px;
        padding-bottom: 0;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-kicker {
        margin-bottom: 8px;
        font-size: 9px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-title {
        font-size: 24px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-desc {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.55;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-stats {
        gap: 24px;
        margin-top: 16px;
        padding-top: 14px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-stats span {
        font-size: 16px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-stats small {
        margin-top: 4px;
        font-size: 8px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-section {
        margin-top: 22px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-section-head {
        gap: 10px;
        margin-bottom: 10px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-textarea {
        min-height: 98px;
        padding: 13px 14px;
        font-size: 13px;
        line-height: 1.55;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-switch-head {
        padding-bottom: 12px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-mode-title {
        margin-top: 4px;
        font-size: 15px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-mode-box {
        gap: 8px;
        margin-top: 12px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-mode-option {
        gap: 5px;
        padding: 12px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-mode-main {
        font-size: 14px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-mode-sub {
        font-size: 10px;
        line-height: 1.45;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-auto-section,
    #chat-settings-body.chat-settings-body-busy .busy-auto-reply-box {
        margin-top: 22px;
    }

    #chat-settings-body.chat-settings-body-busy .busy-settings-auto-section {
        min-height: 280px;
    }
}

@media (max-width: 380px) {
    .busy-settings-page {
        padding-left: 20px;
        padding-right: 20px;
    }

    .busy-settings-stats {
        gap: 22px;
    }

    .busy-settings-section-head,
    .busy-settings-schedule-actions,
    .busy-settings-auto-tools,
    .busy-settings-page .busy-auto-event-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .busy-settings-mode-box,
    .busy-settings-parse-grid {
        grid-template-columns: 1fr;
    }

    .busy-settings-busy-row {
        flex-wrap: wrap;
    }

    .busy-settings-busy-time-group {
        width: 100%;
        flex: 1 1 100%;
    }

    .busy-settings-busy-reason {
        flex-basis: calc(100% - 28px);
    }

    .busy-settings-page .busy-auto-event-actions {
        justify-content: flex-start;
    }
}

/* 顶部名片卡片 */
.profile-card {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
}
.profile-card:active { background-color: #f9f9f9; }

.profile-avatar {
    width: 60px; height: 60px;
    border-radius: 8px; /* 方形圆角更像微信 */
    margin-right: 15px;
    object-fit: cover;
    background: #eee;
}
.profile-info { flex: 1; overflow: hidden;}
.profile-name { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 4px; }
.profile-desc {
    font-size: 13px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========================================================
   === 编辑器 & 表单样式 (复用) ===
   ========================================================= */
.creator-header {
    height: 50px; padding-top: 40px;
    background: #fff; border-bottom: 1px solid #e5e5e5;
    display: flex; align-items: center; justify-content: center;
}

/* 头像上传区 */
.avatar-upload-zone {
    width: 100px; height: 100px;
    margin: 20px auto;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
}
.avatar-upload-zone img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-zone p {
    position: absolute; bottom: 0; width: 100%;
    background: rgba(0,0,0,0.5); color: #fff;
    font-size: 10px; margin: 0; padding: 2px 0; text-align: center;
}

/* 输入框组 */
.input-group {
    background: #fff;
    padding: 0 15px;
    margin-top: 15px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.input-group label {
    display: block;
    font-size: 12px; color: #666;
    margin-top: 10px; margin-bottom: 5px;
}
/* === 修复：强制输入框白底黑字 === */
.input-group input, 
.input-group textarea, 
.input-group select {
    width: 100%; 
    border: none; 
    outline: none;
    font-size: 16px; 
    padding: 10px 0;
    font-family: inherit;
    /* 核心修改：强制白色背景和黑色文字 */
    background-color: #ffffff !important; 
    color: #000000 !important;
}

/* 加上输入时的光标颜色 */
.input-group input:focus,
.input-group textarea:focus {
    background-color: #ffffff !important; 
    color: #000000 !important;
}

.input-group textarea { height: 60px; resize: none; }

/* 底部按钮区 */
.creator-footer-btns {
    display: flex; gap: 15px;
    padding: 20px; margin-top: 10px;
}
.save-btn-large {
    flex: 1; height: 44px;
    background: #07c160; color: #fff;
    border: none; border-radius: 8px;
    font-size: 16px; font-weight: bold; cursor: pointer;
}
.cancel-btn-large {
    flex: 1; height: 44px;
    background: #f2f2f7; color: #000;
    border: 1px solid #dcdcdc; border-radius: 8px;
    font-size: 16px; font-weight: bold; cursor: pointer;
}
#bg-preview-box {
    background-size: cover;     /* 关键：让图片铺满 */
    background-position: center;
    background-repeat: no-repeat;
    width: 80%; 
    height: 200px;                /* 给个宽度 */
    margin: 0 auto;             /* 居中 */
    border: 2px dashed #ccc;    /* 给个边框提示 */
}
/* =========================================================
   === 终极修复：强制“聊天设置”、“我的身份”、“背景设置”全屏 ===
   === (这里把所有需要全屏的 ID 都列出来了，用逗号隔开) ===
   ========================================================= */
#settings-menu-modal .modal-content,
#bg-setting-modal .modal-content {
    /* 1. 暴力撑满全屏 */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    
    /* 2. 去掉“小方块”特有的圆角和边距 */
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* 3. 样式修正：左对齐，背景色改回列表灰 */
    text-align: left !important;
    background-color: #f2f2f7 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    
    /* 4. 布局修正：让它能正常显示列表 */
    display: flex !important;
    flex-direction: column !important;
    
    /* 5. 确保位置绝对对齐 */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    
    /* 6. 允许内部滚动（聊天设置需要可滚动） */
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* === 特殊豁免：让韩系黑白风弹窗使用 Tailwind 样式，不受上述强制覆盖影响 === */
#user-persona-modal .modal-content {
    /* 恢复默认，交给 Tailwind 控制 */
    all: unset;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* 额外修复：让里面的 body 部分可以滚动 */
#user-persona-modal .creator-body,
#bg-setting-modal .creator-body {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    padding-bottom: 50px;
}
/* === 追加修复：清除按钮居中 === */
#btn-reset-role {
    display: block !important;     /* 变成块级元素 */
    margin: 20px auto !important;  /* 上下20px，左右自动(居中) */
    width: 80%;                    /* 宽度80% */
    max-width: 300px;              /* 限制最大宽度 */
    text-align: center;            /* 文字居中 */
    padding: 10px 0;               /* 增加一点点击面积 */
}
/* === 追加修复：弹窗高度自适应，去掉多余留白 === */
/* 针对 角色设定(创建) 弹窗 */
/* ⚠️ 注意：这里只针对 #creator-modal，不影响其他全屏页面 */
#creator-modal > div,
#creator-modal .creator-body {
    /* 1. 不再强制撑满全屏，改为自适应 */
    height: auto !important;       
    min-height: 0 !important;      /* 防止被锁死 */
    
    /* 2. 限制最大高度，超过屏幕 85% 就滚动 */
    max-height: 85vh !important;   
    
    /* 3. 确保垂直居中 */
    margin: auto !important;       
    position: relative !important; 
    top: auto !important; 
    left: auto !important;
    
    /* 4. 修复滚动条逻辑 */
    overflow-y: auto !important;
    
    /* 5. 稍微美化一下圆角，让它像个手机弹窗 */
    border-radius: 12px !important;
    width: 90% !important;         /* 宽度占屏幕 90% */
}

#creator-modal .creator-body {
    padding-bottom: 150px !important;
}

/* 确保创建弹窗背景是居中显示的 flex 布局 */
#creator-modal {
    display: none; /* 默认隐藏 */
    /* 开启 flex 居中，这一步很关键 */
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 0 !important;
}
/* =========================================================
   1. 修复：聊天设置菜单 (一级菜单) 介绍文字溢出问题
   ========================================================= */
/* 强制限制 ID 为 menu-role-desc 的元素 (就是那个挡路的介绍) */
#menu-role-desc {
    display: -webkit-box;       /* 启用弹性盒模型 */
    -webkit-line-clamp: 2;      /* 🔥 核心：限制最多显示 2 行 */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* 超出部分砍掉 */
    text-overflow: ellipsis;    /* 显示省略号 ... */
    white-space: normal !important; /* 允许换行 */
    line-height: 1.5;           /* 行间距 */
    max-height: 3em;            /* 双重保险：限制最大高度 */
    width: 100%;                /* 限制宽度，防止撑破 */
    color: #888;
}

/* =========================================================
   2. 新增：微信列表 (显示最后一条消息) 专用样式
   ========================================================= */
/* 列表里的文字容器 */
.wechat-text-col {
    flex: 1; 
    overflow: hidden; 
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 角色名 */
.wechat-name-row {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-bottom: 2px;
}

/* 最后一条消息 (单行 + 省略号) */
.wechat-msg-row {
    font-size: 13px;
    color: #999;
    /* 强制单行，多余变省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   🔥 最终修正补丁 V2：解决二级页面留白 & 顶部按钮 & 弹窗关不掉问题
   说明：这段代码必须放在文件的最最最底部！
   ========================================================= */

/* 1. 修复：顶部状态栏太矮，导致按钮按不动 */
#settings-menu-modal .modal-header-bar {
    padding-top: 14px !important;
    height: 50px !important;
    min-height: 50px !important;
    align-items: center !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}

#editor-modal .modal-header-bar {
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    height: 50px !important;
    min-height: 50px !important;
    align-items: center !important;
    padding-bottom: 0 !important;
    box-sizing: content-box !important;
}

/* 2. 修复：二级编辑页面 (editor-modal) 的布局问题 */
/* ⚠️ 核心修改：删除了 display: flex !important，防止它自动弹出且关不掉 */
#editor-modal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* 这里不写 display !important，交给 JS 控制 */
    
    /* 强制布局为纵向，保证全屏拉伸 */
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    
    /* 样式重置 */
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* 核心修改：允许 Tailwind 控制背景色 (bg-gray-50) */
    /* background-color: #f2f2f7 !important; */
    z-index: 10000 !important; /* 保证在最上层 */
}

/* 3. 修复：二级页面里的滚动区域 (移除 85vh 限制) */
#editor-modal .creator-body {
    max-height: none !important; 
    height: auto !important;
    flex: 1 !important; 
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-bottom: 150px !important; 
}

/* 4. 微调：让编辑页面的输入框好看一点 */
#editor-modal .input-group {
    border-radius: 0 !important;
    margin-top: 15px !important;
}
/* === 长按菜单 (Context Menu) === */

/* 1. 遮罩层：全屏透明，点击它可以关闭菜单 */
#context-menu-mask {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9998;
    background: transparent;
}

/* 2. 菜单主体 */
#msg-context-menu {
    display: none;
    position: fixed;
    z-index: 10001;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-sizing: border-box;
    padding: 9px 8px;
    width: min(330px, calc(100vw - 20px));
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* 3. 小箭头 */
#msg-context-menu::after {
    display: none;
}

/* 如果菜单在气泡下方显示 */
#msg-context-menu.arrow-up::after {
    display: none;
}

/* 4. 菜单项网格布局 */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px 4px;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 11px;
    cursor: pointer;
    border-radius: 12px;
    min-width: 0;
    min-height: 56px;
    padding: 8px 4px;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.menu-item.is-disabled {
    opacity: 0.38;
    pointer-events: none;
}

.chat-message-reaction-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    position: absolute;
    left: -10px;
    bottom: -12px;
    z-index: 4;
    pointer-events: none;
}

.msg-left .chat-message-reaction-strip {
    justify-content: flex-start;
    left: auto;
    right: -10px;
}

.msg-right .chat-message-reaction-strip {
    justify-content: flex-start;
    left: -10px;
    right: auto;
}

.chat-message-reaction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    font-size: 16px;
    line-height: 1;
}

.chat-message-reaction-badge[data-actor="me"] {
    background: rgba(255, 255, 255, 0.98);
}

#msg-reaction-picker-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10018;
    background: transparent;
}

#msg-reaction-picker {
    display: none;
    position: fixed;
    z-index: 10019;
    width: min(320px, calc(100vw - 24px));
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}

#msg-reaction-picker.is-inline-bar {
    width: min(360px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

#msg-reaction-picker.is-inline-bar.is-inline-editing {
    width: min(420px, calc(100vw - 24px));
    border-radius: 22px;
    padding: 10px 12px;
}

.reaction-picker-title {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}

.reaction-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.reaction-picker-btn {
    appearance: none;
    border: none;
    background: rgba(247, 247, 247, 0.96);
    border-radius: 14px;
    min-height: 48px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.reaction-picker-btn.is-active {
    background: rgba(7, 193, 96, 0.14);
    box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.24);
}

.reaction-picker-clear {
    margin-top: 10px;
    width: 100%;
    appearance: none;
    border: none;
    background: rgba(17, 17, 17, 0.06);
    color: #444;
    border-radius: 12px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.reaction-picker-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reaction-picker-inline-row::-webkit-scrollbar {
    display: none;
}

.reaction-picker-chip {
    flex: 0 0 auto;
    appearance: none;
    width: 36px;
    min-width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(247, 247, 247, 0.96);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.reaction-picker-chip.is-active {
    background: rgba(7, 193, 96, 0.14);
    box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.24);
}

.reaction-picker-chip.is-clear {
    font-size: 18px;
    font-weight: 700;
    color: #666;
}

.reaction-picker-chip.is-edit {
    font-size: 18px;
    font-weight: 700;
    color: #555;
}

.reaction-picker-chip.is-edit.is-active {
    background: rgba(17, 17, 17, 0.1);
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.14);
}

.reaction-picker-chip.is-save {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    background: rgba(7, 193, 96, 0.12);
    box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.2);
}

.reaction-picker-inline-editor {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reaction-picker-custom-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(247, 247, 247, 0.96);
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06);
}

.reaction-picker-custom-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: #222;
    font-size: 20px;
    line-height: 1;
    outline: none;
}

.reaction-picker-custom-input::placeholder {
    font-size: 13px;
    color: #999;
}

.reaction-picker-inline-hint {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: #888;
    padding: 0 4px;
}

.chat-message-editor-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10030;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: flex-end;
    justify-content: center;
    padding: 16px 12px calc(16px + var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px)));
    box-sizing: border-box;
}

.chat-message-editor-mask.show {
    display: flex;
}

.chat-message-editor-sheet {
    width: min(100%, 720px);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    padding: 12px 14px 14px;
    box-sizing: border-box;
}

.chat-message-editor-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
    margin: 2px auto 12px;
}

.chat-message-editor-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

.chat-message-editor-subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    text-align: center;
}

.chat-message-editor-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.chat-message-editor-chip {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    background: #eef2ff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.chat-message-editor-chip:active {
    transform: scale(0.98);
    background: #e0e7ff;
}

.chat-message-editor-input {
    width: 100%;
    min-height: 240px;
    margin-top: 14px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 18px;
    padding: 14px;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    font-size: 14px;
    line-height: 1.6;
    color: #111827;
    background: #f8fafc;
}

.chat-message-editor-input:focus {
    border-color: rgba(34, 197, 94, 0.65);
    background: #ffffff;
}

.chat-message-editor-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
}

.chat-message-editor-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.chat-message-editor-btn {
    flex: 1;
    height: 44px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    font-weight: 700;
}

.chat-message-editor-btn-cancel {
    background: #e5e7eb;
    color: #374151;
}

.chat-message-editor-btn-save {
    background: #22c55e;
    color: #ffffff;
}

.menu-item:active {
    background: #f2f2f2;
    transform: scale(0.98);
}

/* 预留图标位置，暂时用文字代替或者简单的CSS圆圈 */
.menu-icon {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    color: #111;
    line-height: 1;
}

.menu-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    stroke: currentColor;
}

/* =================================
   === 新增：引用 & 多选 功能样式 ===
   ================================= */

/* 1. 引用消息预览条 (放在输入框上方) */
#quote-bar {
    display: none; /* 默认隐藏 */
    width: 100%;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 15px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
    color: #111;
    align-items: center;
    justify-content: space-between;
}
.quote-text {
    flex: 1;
    overflow: hidden;
    border-left: 3px solid rgba(0,0,0,0.55);
    padding-left: 10px;
    line-height: 1.25;
    max-height: 2.5em;
}
.quote-close {
    padding: 5px;
    font-size: 16px;
    color: #999;
    cursor: pointer;
}

/* 2. 多选模式样式 */
/* 当聊天列表进入多选模式时 */
.chat-room-body.select-mode .msg-row,
.chat-room-body.select-mode .sys-msg-row,
.chat-room-body.select-mode .chat-time-label:not(.chat-time-label-loadmore) {
    cursor: pointer;
}

.chat-room-body.select-mode {
    padding-bottom: calc(15px * var(--chat-font-scale, 1) + 112px + var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px)));
    scroll-padding-bottom: calc(180px + var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px)));
}

.chat-time-label {
    display: block; /* 改为 block 配合 margin auto 居中 */
    width: fit-content;
    padding: calc(4px * var(--chat-font-scale, 1)) calc(8px * var(--chat-font-scale, 1));
    margin: calc(15px * var(--chat-font-scale, 1)) auto;
    clear: both;
    font-size: calc(12px * var(--chat-font-scale, 1));
    color: #fff; /* 微信时间戳字色为白 */
    line-height: 1.2;
    text-align: center;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    font-weight: normal;
    border-radius: calc(4px * var(--chat-font-scale, 1)); /* 微信是小圆角 */
    background: rgba(0, 0, 0, 0.15); /* 微信是半透明灰底 */
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
}

.chat-time-label.chat-time-label-loadmore {
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto;
}
/* 给每条消息左边预留一个放勾选框的位置 */
.chat-room-body.select-mode .msg-row::before,
.chat-room-body.select-mode .sys-msg-row::before,
.chat-room-body.select-mode .chat-time-label:not(.chat-time-label-loadmore)::before {
    content: ""; /* 默认是个空圆圈 */
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #c1c1c1;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
    align-self: center; /* 垂直居中 */
}

/* 选中状态 (JS会添加 .selected 类) */
.chat-room-body.select-mode .msg-row.selected::before,
.chat-room-body.select-mode .sys-msg-row.selected::before,
.chat-room-body.select-mode .chat-time-label.selected::before {
    background-color: #07c160;
    border-color: #07c160;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='14px' height='14px'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.chat-room-body.select-mode .sys-msg-row,
.chat-room-body.select-mode .chat-time-label:not(.chat-time-label-loadmore) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.chat-room-body.select-mode .sys-msg-row .sys-msg-text,
.chat-room-body.select-mode .chat-time-label:not(.chat-time-label-loadmore) {
    max-width: calc(80% - 30px);
}
/* --- B. 新增：多选底部工具栏 --- */
#multi-select-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 60px; /* 和原来输入框一样高 */
    background: #f7f7f7;
    border-top: 1px solid #dcdcdc;
    z-index: 200; /* 比聊天气泡高 */
    display: flex; /* 弹性布局 */
    justify-content: space-around; /* 平均分布 */
    align-items: center;
    display: none; /* 默认隐藏 */
    padding-bottom: var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.multi-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    font-size: 10px;
    cursor: pointer;
    width: 60px;
}

.multi-btn i {
    font-size: 20px;
    margin-bottom: 4px;
    color: #333;
}
.multi-btn.repair-btn i {
    color: #07c160;
}
.multi-btn span {
    text-align: center;
    line-height: 1.15;
}
.multi-btn.delete-btn i {
    color: #ff3b30; /* 删除按钮红色 */
}

/* =================================
   === 8. 转发弹窗样式 ===
   ================================= */

/* 弹窗背景遮罩 */
#forward-modal {
    display: none; /* 默认隐藏 */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999 !important; /* 保证在所有内容之上，包括朋友圈发布弹窗 */
    align-items: center;
    justify-content: center;
}

/* 弹窗主体 */
.forward-box {
    width: 80%;
    max-width: 320px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70%; /* 防止太长超出屏幕 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    animation: popIn 0.2s ease-out;
}

/* 头部 */
.forward-header {
    padding: 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.forward-header .close-btn {
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 20px;
}

/* 列表区域 */
.forward-list {
    overflow-y: auto;
    flex: 1;
    padding: 5px 0;
}

/* 单个联系人项 */
.forward-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    transition: background 0.1s;
}
.forward-item:active {
    background: #e5e5e5;
}
.forward-item:last-child {
    border-bottom: none;
}
.forward-item.selected {
    background: #e5f2ff;
}
.forward-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin-right: 12px;
    object-fit: cover;
}
.forward-name {
    font-size: 15px;
    color: #333;
}
.forward-check {
    margin-left: auto;
    font-size: 16px;
    color: #07c160;
}

.forward-footer {
    border-top: 1px solid #f0f0f0;
    padding: 8px 15px 12px;
}

/* 简单的弹窗动画 */
@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* =================================
   === 9. 合并转发(聊天记录)样式 ===
   ================================= */

/* 历史记录气泡容器 */
.history-bubble-container {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px; /* 比较方一点的圆角 */
    padding: 10px 12px;
    width: 220px; /* 固定宽度，像微信那样 */
    cursor: pointer;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.history-bubble-container:active {
    transform: scale(0.98);
}

/* 标题 "聊天记录" */
.history-title {
    font-size: 15px;
    color: #000;
    margin-bottom: 5px;
    font-weight: 500;
}

/* 分割线 */
.history-divider {
    height: 1px;
    background: #eee;
    margin-bottom: 6px;
}

/* 内容列表 */
.history-content {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

.history-meta {
    margin-top: 8px;
    font-size: 11px;
    color: #b0b0b0;
}

/* 单行文本 (超出省略) */
.history-row {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forward-history-viewer-mask {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.36);
    padding: 22px;
}

.forward-history-viewer-card {
    width: min(520px, 100%);
    max-height: min(78vh, 720px);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.forward-history-viewer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.forward-history-viewer-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.forward-history-viewer-count {
    margin-top: 4px;
    font-size: 12px;
    color: #9ca3af;
}

.forward-history-viewer-close {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.forward-history-viewer-scroll {
    max-height: min(64vh, 620px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 18px 18px;
}

.forward-history-viewer-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.forward-history-viewer-item:last-child {
    border-bottom: none;
}

.forward-history-viewer-item-index {
    width: 28px;
    flex: 0 0 28px;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.7;
}

.forward-history-viewer-item-main {
    min-width: 0;
    flex: 1;
}

.forward-history-viewer-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.forward-history-viewer-item-text {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
}

.forward-history-viewer-message-row {
    margin: 2px 0 0;
    padding: 0;
}

.forward-history-viewer-message-row.msg-row {
    width: 100%;
}

.forward-history-viewer-message-row .msg-avatar-wrap {
    display: none;
}

.forward-history-viewer-message-row.msg-left,
.forward-history-viewer-message-row.msg-right {
    justify-content: flex-start;
}

.forward-history-viewer-message-row .msg-content-wrapper {
    max-width: 100%;
    min-width: 0;
}

.forward-history-viewer-message-row .msg-bubble,
.forward-history-viewer-message-row .couple-invite-card,
.forward-history-viewer-message-row .listen-invite-card {
    max-width: 100%;
}

.forward-history-viewer-message-row .msg-bubble-time {
    display: none;
}

.forward-history-viewer-message-row.offline-action-row {
    justify-content: flex-start;
    margin-top: 4px;
}

.forward-history-viewer-empty {
    padding: 30px 8px 16px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}

.redbook-note-share-bubble {
    position: relative;
    width: 250px;
    border-radius: 8px;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 14px 16px 12px;
    cursor: pointer;
    overflow: visible;
}

.redbook-note-share-bubble::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 18px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
}

.redbook-note-share-main,
.redbook-note-share-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.redbook-note-share-textarea {
    flex: 1;
    min-width: 0;
}

.redbook-note-share-thumb {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

.redbook-note-share-thumb.is-text,
.redbook-note-share-thumb.is-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
}

.redbook-note-share-title {
    font-size: 15px;
    line-height: 1.4;
    color: #000;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.redbook-note-share-author {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.3;
    color: #7b7b7b;
}

.redbook-note-share-divider,
.redbook-note-share-footer {
    margin-top: 14px;
}

.redbook-note-share-divider {
    height: 1px;
    background: #efefef;
}

.redbook-note-share-footer {
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.redbook-note-share-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #ff2442;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: -0.5px;
    padding-right: 1px;
    flex-shrink: 0;
}

.redbook-note-share-source {
    color: #999;
    font-size: 11px;
}

.redbook-share-viewer-mask {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(17, 24, 39, 0.42);
    z-index: 9999;
}

.redbook-share-sheet {
    width: min(100%, 430px);
    max-height: min(88vh, 760px);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.redbook-share-sheet-inner {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 760px);
}

.redbook-share-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.redbook-share-sheet-brand {
    font-size: 15px;
    font-weight: 800;
    color: #ff2442;
}

.redbook-share-sheet-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #f4f4f5;
    color: #4b5563;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.redbook-share-sheet-scroll {
    overflow-y: auto;
    padding: 16px 16px 18px;
    background: linear-gradient(180deg, #fff7f8 0%, #ffffff 32%);
}

.redbook-share-sheet-card,
.redbook-share-comment-section {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.redbook-share-sheet-card {
    padding: 16px;
}

.redbook-share-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.redbook-share-author-avatar,
.redbook-share-comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
    flex-shrink: 0;
}

.redbook-share-author-avatar.is-fallback,
.redbook-share-comment-avatar.is-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffe1e8;
    color: #ff2442;
    font-weight: 800;
}

.redbook-share-author-main {
    min-width: 0;
}

.redbook-share-author-name {
    font-size: 15px;
    color: #1f2329;
    font-weight: 700;
}

.redbook-share-author-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #8e8e93;
}

.redbook-share-media,
.redbook-share-cover {
    margin-top: 14px;
    border-radius: 18px;
    overflow: hidden;
}

.redbook-share-media img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 300px;
}

.redbook-share-media img + img {
    margin-top: 6px;
}

.redbook-share-source-link {
    display: block;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #fff1f3;
    color: #ff2442;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.redbook-share-cover {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    font-size: 24px;
    line-height: 1.55;
    font-weight: 800;
    text-align: center;
    word-break: break-word;
}

.redbook-share-post-title {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.5;
    color: #111827;
    font-weight: 800;
}

.redbook-share-post-content {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
}

.redbook-share-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.redbook-share-tag {
    padding: 5px 10px;
    border-radius: 999px;
    background: #f5f6fa;
    color: #315c9a;
    font-size: 12px;
    font-weight: 600;
}

.redbook-share-stats-row {
    margin-top: 16px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #8e8e93;
}

.redbook-share-comment-section {
    margin-top: 14px;
    padding: 16px;
}

.redbook-share-comment-title {
    font-size: 16px;
    color: #111827;
    font-weight: 800;
}

.redbook-share-comment-item {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.redbook-share-comment-body {
    min-width: 0;
    flex: 1;
}

.redbook-share-comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.redbook-share-comment-name {
    font-size: 13px;
    color: #111827;
    font-weight: 700;
}

.redbook-share-comment-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 36, 66, 0.08);
    color: #ff2442;
    font-size: 11px;
    font-weight: 700;
}

.redbook-share-comment-content {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
    white-space: pre-wrap;
    word-break: break-word;
}

.redbook-share-comment-target {
    color: #ff2442;
    font-weight: 600;
}

.redbook-share-comment-replies {
    margin-top: 12px;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 36, 66, 0.08);
}

.redbook-share-empty {
    margin-top: 14px;
    padding: 14px 12px;
    border-radius: 14px;
    background: #f8fafc;
    color: #8e8e93;
    font-size: 13px;
    line-height: 1.6;
}

/* =================================
   === 10. 记忆档案（左文右导航）===
   ================================= */

/* 外层：让“文件夹面板”居中并留边距 */
.memory-archive-outer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 面板整体：像打开的档案袋/文件夹 */
.memory-archive-folder {
    width: 100%;
    height: 100%;
    max-width: 980px;
    max-height: calc(100vh - 140px); /* 顶部栏+安全区 */
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0,0,0,0.06);
    background: #e9e9e9;
}

/* 左侧内容：纸张效果 */
.memory-archive-content {
    flex: 3; /* 约 75% */
    background: #fffaf0; /* 淡米色纸张感 */
    padding: 18px 18px 20px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0; /* 防止溢出 */
}

.memory-archive-content-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* 文字区：支持多行与内部滚动条 */
.memory-archive-content-text {
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 14px;
    color: #2b2b2b;
    padding-right: 6px; /* 给滚动条留一点空间 */
}

/* 右侧导航：更深、低饱和灰 */
.memory-archive-nav {
    flex: 1; /* 约 25% */
    background: #3a3d42;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.memory-archive-tab {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px 10px;
    text-align: left;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.memory-archive-tab:active {
    transform: scale(0.99);
}

/* 激活态：更明显的高亮与边缘强调 */
.memory-archive-tab.is-active {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #07c160, 0 6px 14px rgba(0,0,0,0.18);
}

/* 小屏适配：仍保持左右结构，但缩小 padding */
@media (max-width: 420px) {
    .memory-archive-outer { padding: 10px; }
    .memory-archive-content { padding: 14px; }
    .memory-archive-nav { padding: 10px; }
    .memory-archive-tab { padding: 11px 10px; font-size: 13px; }
}
/* === ⬇️ 请粘贴到 chat-page.css 的最底部 ⬇️ === */

/* 修复：给气泡和状态加一个垂直容器，防止布局错乱 */
.msg-content-wrapper {
    display: flex;
    flex-direction: column; /* 垂直排列：上气泡，下状态 */
    max-width: 70%;         /* 宽度限制移到这里 */
    position: relative;
}

/* 既然外层限制了宽度，里面的气泡就填满容器 */
.msg-content-wrapper .msg-bubble {
    max-width: 100%; 
}

/* 右边（我）的消息：气泡和状态都要靠右对齐 */
.msg-right .msg-content-wrapper {
    align-items: flex-end;
    margin-right: 6px; /* 和头像的间距 */
}

/* 左边（对方）的消息：靠左对齐 */
.msg-left .msg-content-wrapper {
    align-items: flex-start;
    margin-left: 6px;
}

#chat-room-layer[data-chat-avatar="0"] .msg-right .msg-content-wrapper {
    margin-right: 0;
}

#chat-room-layer[data-chat-avatar="0"] .msg-left .msg-content-wrapper {
    margin-left: 0;
}

/* 状态文字样式 (已读/已送达) */
.msg-status-text {
    font-size: 12px;
    color: #b2b2b2;
    margin-top: 6px;
    margin-right: 4px; /* 右侧稍微留点空 */
    height: 15px;      /* 占个位置，防止文字出现时跳动 */
}
/* =================================
   === 11. 系统提示灰色小条样式 ===
   ================================= */

/* 系统消息行：居中 */
.sys-msg-row {
    text-align: center;
    margin: 15px 0;
    clear: both;
}

/* 系统消息文字：灰底白字圆角小条 */
.sys-msg-text {
    display: inline-block;
    background: rgba(0, 0, 0, 0.15);  /* 半透明灰 */
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px;
    max-width: 80%;
    word-break: break-word;
}

.sys-msg-text.location-share-invite-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
}

.sys-msg-text.location-share-invite-text i {
    font-size: 14px;
    line-height: 1;
}

.sys-msg-row-debug-hidden .sys-msg-text {
    background: rgba(0, 0, 0, 0.32);
    border: 1px dashed rgba(255, 255, 255, 0.28);
}

.sys-msg-row-debug-hidden .sys-msg-debug-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.4;
    color: #111;
    background: #ffe7a3;
    vertical-align: middle;
}

.sys-msg-row-debug-hidden .sys-msg-body {
    vertical-align: middle;
}
/* =================================
   === 12. 微信风格引用块样式 ===
   ================================= */

/* 引用块：在气泡内部，正文上方 */
.quote-block {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 2px solid rgba(0, 0, 0, 0.45);
    padding: 6px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

/* 引用人名字 */
.quote-name {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
    margin-right: 2px;
}

/* 引用内容预览 */
.quote-preview {
    color: rgba(0, 0, 0, 0.55);
}

.icon-btn-plus {
    color: #333;
    background: #fff;
}

.chat-more-panel {
    /* 不写死固定的 250px 高度，而是改用 JS 控制显示隐藏或者高度 */
    height: 0;
    opacity: 0;
    background: #f5f5f5;
    display: block; /* 放弃 display:none 动画不平滑，改为 height 控制 */
    padding: 0 18px;
    box-sizing: border-box;
    border-top: none;
    position: relative;
    overflow: hidden;
    transition: height 0.2s ease-out, padding 0.2s ease-out, opacity 0.2s ease-out;
}

.chat-more-panel.show {
    height: 250px;
    opacity: 1;
    padding: 20px 18px 24px;
    border-top: 1px solid #e5e5e5;
}

.chat-more-pages {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

.more-page {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
}

.more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 12px;
    width: 100%;
    align-content: start;
}

.more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    border-radius: 14px;
    touch-action: manipulation;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.more-icon {
    width: 54px;
    height: 54px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #4a4a4a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    margin-bottom: 6px;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.chat-more-panel i {
    font-weight: normal;
}

.chat-more-panel.more-reorder-active .more-item {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.chat-more-panel.more-reorder-active .chat-more-pages {
    height: calc(100% - 48px);
    padding-bottom: 10px;
    overflow-y: auto;
}

.chat-more-panel.more-reorder-active .more-grid {
    padding-bottom: 6px;
}

.chat-more-panel.more-reorder-active .more-item {
    touch-action: pan-y;
}

.chat-more-panel.more-reorder-active .more-item:not(.more-item-dragging) {
    opacity: 0.82;
}

.chat-more-panel.more-reorder-active .more-icon {
    animation: moreIconWiggle 1.6s ease-in-out infinite;
}

.more-item.more-item-dragging {
    position: relative;
    z-index: 3;
    transform: scale(1.06);
    opacity: 1;
}

.more-item.more-item-dragging .more-icon {
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    transform: translateY(-2px);
}

body.chat-more-reorder-active {
    user-select: none;
    -webkit-user-select: none;
}

.chat-more-reorder-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 40px;
    margin-top: 8px;
    padding: 6px 10px 0;
    box-sizing: border-box;
}

.chat-more-reorder-hint {
    font-size: 12px;
    color: #7b7b7b;
}

.chat-more-reorder-done {
    border: 0;
    background: #1f1f1f;
    color: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(31, 31, 31, 0.16);
}

.chat-more-reorder-done:active {
    transform: scale(0.96);
}

@keyframes moreIconWiggle {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-1.4deg); }
    40% { transform: rotate(1.4deg); }
    60% { transform: rotate(-1deg); }
    80% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

.chat-sticker-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 16px 18px 20px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: none;
    flex-direction: column;
}

.chat-sticker-panel.show {
    display: flex;
}

.chat-sticker-panel.manage-mode .sticker-grid {
    padding-bottom: 4px;
}

.sticker-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sticker-tab {
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    color: #666;
    background: #e6e6e6;
    cursor: pointer;
}

.sticker-tab.active {
    background: #07c160;
    color: #fff;
}

.sticker-tab-add {
    margin-left: auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #07c160;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.sticker-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    grid-auto-rows: auto;
}

.sticker-item {
    width: 100%;
    min-height: 128px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 6px 6px 7px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    border: 2px solid transparent;
    box-sizing: border-box;
}

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

.sticker-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sticker-name {
    width: 100%;
    min-height: 48px;
    max-height: 48px;
    font-size: 10px;
    line-height: 1.3;
    color: #666;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.sticker-item.no-name .sticker-name {
    color: #999;
}

@media (max-width: 380px) {
    .sticker-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sticker-item::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.16);
    background: rgba(255, 255, 255, 0.94);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.chat-sticker-panel.manage-mode .sticker-item::after {
    opacity: 1;
}

.chat-sticker-panel.manage-mode .sticker-item.selected {
    border-color: #07c160;
    box-shadow: 0 6px 18px rgba(7, 193, 96, 0.16);
}

.chat-sticker-panel.manage-mode .sticker-item.selected::after {
    background-color: #07c160;
    border-color: #07c160;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transform: scale(1);
}

.sticker-empty {
    grid-column: 1 / -1;
    padding: 28px 12px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.sticker-manage-bar {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.chat-sticker-panel.manage-mode .sticker-manage-bar {
    display: flex;
}

.sticker-manage-btn {
    flex: 1;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sticker-manage-btn.danger {
    color: #ff3b30;
}

.sticker-category-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding: 2px 0 2px;
    scrollbar-width: none;
}

.sticker-category-bar::-webkit-scrollbar {
    display: none;
}

.sticker-category-chip {
    flex: 0 0 auto;
    max-width: 160px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e8e8e8;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.sticker-category-chip.active {
    background: rgba(7, 193, 96, 0.14);
    color: #07c160;
    border-color: rgba(7, 193, 96, 0.25);
}

.sticker-category-chip.add {
    background: #ffffff;
    color: #333;
    border-color: #e0e0e0;
}

.msg-bubble-image {
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.msg-bubble-image img {
    display: block;
    max-width: 96px;
    max-height: 96px;
    border-radius: 6px;
}

.msg-bubble-image.custom-image-message:not(.custom-sticker) img {
    max-width: 168px;
    max-height: 168px;
    border-radius: 10px;
}

.msg-bubble-image.custom-ai-image {
    position: relative;
    display: inline-block;
}

.ai-image-regenerate-shell {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: top;
}

.ai-image-regenerate-shell img {
    display: block;
}

.ai-image-regenerate-btn {
    border: 0;
    outline: none;
    height: 30px;
    min-width: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 9px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.82);
    color: #111827;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.msg-bubble-image.custom-ai-image .ai-image-regenerate-btn,
.ai-image-regenerate-shell .ai-image-regenerate-btn {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.msg-bubble-image.custom-ai-image:hover .ai-image-regenerate-btn,
.ai-image-regenerate-shell:hover .ai-image-regenerate-btn,
.msg-bubble-image.custom-ai-image .ai-image-regenerate-btn:focus-visible,
.ai-image-regenerate-shell .ai-image-regenerate-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-image-regenerate-btn i {
    font-size: 15px;
    line-height: 1;
}

.ai-image-regenerate-btn:disabled,
.ai-image-regenerate-btn.is-loading {
    opacity: 0.62;
    cursor: wait;
}

.ai-image-status-actions {
    margin-top: 10px;
}

.ai-image-status-actions .ai-image-regenerate-btn {
    position: static;
    opacity: 1;
    transform: none;
    background: #111827;
    color: #ffffff;
    box-shadow: none;
}

@media (hover: none) {
    .msg-bubble-image.custom-ai-image .ai-image-regenerate-btn,
    .ai-image-regenerate-shell .ai-image-regenerate-btn {
        opacity: 0.92;
        transform: none;
    }
}

.msg-bubble.listen-invite-bubble {
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    max-width: 100%;
}

.msg-bubble.listen-invite-bubble::before,
.msg-bubble.listen-invite-bubble::after {
    display: none;
}

.listen-invite-card {
    width: 100%;
    max-width: 240px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.msg-row[data-type="listen_invite"] .msg-content-wrapper,
.msg-row[data-type="listen_invite_accepted"] .msg-content-wrapper {
    max-width: 92%;
}

.listen-invite-card.is-disabled {
    opacity: 0.62;
    filter: grayscale(0.15);
}

.listen-invite-body {
    padding: 14px 14px 10px;
}

.listen-invite-avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.listen-invite-avatar {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 auto;
    background: #ededed;
    border: none;
}

.listen-invite-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listen-invite-line {
    flex: 1;
    height: 24px;
    max-width: 96px;
    color: #0f0f0f;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listen-invite-line svg {
    width: 100%;
    height: 22px;
    opacity: 0.35;
}

.invite-card-sent .listen-invite-line svg {
    opacity: 0.18;
}

.invite-card-accepted .listen-invite-line svg {
    opacity: 0.42;
}

.listen-invite-line i {
    position: absolute;
    font-size: 14px;
    color: #0f0f0f;
}

.listen-invite-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #bfbfbf;
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.2px;
}

.listen-invite-subtext {
    margin-top: 6px;
    font-size: 13px;
    color: #cfcfcf;
    line-height: 1.35;
    text-align: center;
}

.listen-invite-state {
    margin-top: 8px;
    font-size: 12px;
    color: #b3b3b3;
    text-align: center;
    min-height: 16px;
}

.listen-invite-actions {
    display: flex;
    justify-content: center;
    gap: 22px;
    padding: 12px 14px 14px;
}

.listen-invite-btn {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
}

.listen-invite-btn i {
    font-size: 28px;
    color: #ffffff;
}

.listen-invite-btn:active {
    transform: scale(0.98);
}

.listen-invite-btn--accept {
    background: #ff4d4f;
}

.listen-invite-btn--decline {
    background: #d9d9d9;
}

.msg-bubble.transfer-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 80%;
    min-width: 220px;
}

.msg-bubble.transfer-bubble.transfer-bubble-accepted {
    background: transparent;
}

.chat-transfer-card-surface {
    background-color: #f79e4d;
    color: #fff;
    border-radius: 8px;
    padding: 12px 14px;
}

.msg-bubble.transfer-bubble.transfer-bubble-accepted .chat-transfer-card-surface {
    background-color: #f2f2f2;
    color: #999;
}

.msg-bubble.money-receive-anim .chat-transfer-card-surface,
.msg-bubble.money-receive-anim .chat-redpacket-card-surface {
    animation: moneyReceiveFlash 0.75s ease-out;
}

@keyframes moneyReceiveFlash {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(247, 158, 77, 0);
    }
    36% {
        transform: scale(1.035);
        box-shadow: 0 8px 22px rgba(247, 158, 77, 0.28);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(247, 158, 77, 0);
    }
}

.msg-bubble.redpacket-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 80%;
    min-width: 220px;
}

.chat-redpacket-card-surface {
    background-color: #f76c4b;
    color: #fff;
    border-radius: 8px;
    padding: 12px 14px;
}

.msg-bubble.redpacket-bubble[data-status="opened"] .chat-redpacket-card-surface {
    background-color: #f2f2f2;
    color: #999;
}

.msg-bubble.family-card-bubble {
    background: linear-gradient(90deg, #F8A031, #F38118);
    color: #fff;
    border-radius: 4px;
    max-width: 250px;
    min-width: 220px;
    padding: 0;
    border: none;
}

.msg-bubble.family-card-bubble[data-status="pending"] {
    cursor: pointer;
}

.msg-bubble.family-card-bubble[data-status="accepted"] {
    opacity: 0.6;
}

.msg-left .msg-bubble.family-card-bubble {
    margin-left: 4px;
    border: none;
}

.msg-right .msg-bubble.family-card-bubble {
    margin-right: 4px;
}

.msg-left .msg-bubble.family-card-bubble::before {
    border-right-color: #F8A031;
}

.msg-right .msg-bubble.family-card-bubble::after {
    border-left-color: #F38118;
}

.family-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.family-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
}

.family-card-icon::before,
.family-card-icon::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #F8A031;
    transform: rotate(45deg);
}

.family-card-icon::before {
    opacity: 0.95;
    left: 10px;
    top: 8px;
}

.family-card-icon::after {
    opacity: 0.75;
    left: 13px;
    top: 5px;
}

.family-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.family-card-title {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}

.family-card-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.2;
}

.family-card-divider {
    border-top: 0.5px solid rgba(255,255,255,0.3);
}

.family-card-footer {
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    padding: 4px 16px;
    line-height: 1.2;
}

.msg-bubble.redpacket-bubble::before,
.msg-bubble.redpacket-bubble::after {
    display: none;
}

.redpacket-main {
    display: flex;
    align-items: center;
}

.redpacket-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9a3c, #ff4b2b);
    margin-right: 10px;
    position: relative;
}

.redpacket-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f9d27d;
    transform: translate(-50%, -50%);
}

.redpacket-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.redpacket-note {
    font-size: 14px;
    margin-bottom: 4px;
}

.redpacket-status-text {
    font-size: 12px;
    opacity: 0.9;
}

.redpacket-amount {
    font-size: 18px;
    font-weight: 600;
    margin-left: 8px;
}

.transfer-main {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.transfer-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.transfer-icon-circle i {
    color: #fff;
    font-size: 18px;
}

.transfer-info {
    display: flex;
    flex-direction: column;
}

.transfer-amount {
    font-size: 18px;
    font-weight: 600;
}

.transfer-note {
    font-size: 13px;
    margin-top: 2px;
    opacity: 0.9;
}

.transfer-split {
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    margin: 4px 0 3px 0;
}

.transfer-footer {
    font-size: 12px;
    opacity: 0.9;
}

.transfer-status-text {
    margin-top: 6px;
    font-size: 12px;
    color: #f0f0f0;
    opacity: 0.9;
}

.msg-row.msg-left .transfer-status-text {
    color: #999;
}

.transfer-action-row {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.transfer-btn {
    flex: 1;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
}

.transfer-btn-accept {
    background-color: #07c160;
    color: #fff;
}

.transfer-btn-return {
    background-color: #f5f5f5;
    color: #666;
}

.msg-row.msg-left .msg-bubble.transfer-bubble.transfer-bubble-accepted {
    background-color: #f2f2f2;
    color: #333;
}

.msg-bubble.voice-bubble {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 92px;
    max-width: 75vw;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #111;
    overflow: visible;
}

.msg-bubble.call-end-bubble {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #ededed;
}

.msg-row.msg-right .msg-bubble.call-end-bubble {
    background-color: #ffffff;
}

.call-end-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.call-end-icon {
    font-size: 16px;
    color: #07c160;
}

.call-end-text {
    font-size: 14px;
}

.msg-row.msg-right .msg-bubble.voice-bubble {
    align-items: flex-end;
}

.voice-pill,
.voice-main {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 96px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

.msg-bubble.voice-bubble:active .voice-pill,
.msg-bubble.voice-bubble:active .voice-main {
    background: #f7f7f7;
    transform: scale(0.98);
}

.voice-bubble-loading .voice-pill,
.voice-bubble-loading .voice-main {
    opacity: 0.78;
}

.voice-bubble-playing .voice-pill,
.voice-bubble-playing .voice-main {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.voice-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.voice-icon {
    width: 20px;
    height: 18px;
    flex: 0 0 auto;
    color: #333;
}

.modern-wave-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-right: 12px;
}

.voice-wave {
    display: block;
    width: 3px;
    background-color: currentColor;
    border-radius: 2px;
    transform-origin: center;
    transition: height 0.3s ease;
}

.bar-1 {
    height: 8px;
}

.bar-2 {
    height: 14px;
}

.bar-3 {
    height: 18px;
}

.bar-4 {
    height: 10px;
}

.wave1 {
    height: 8px;
}

.wave2 {
    height: 14px;
}

.wave3 {
    height: 18px;
}

.wave4 {
    height: 10px;
}

.voice-duration {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 1;
    letter-spacing: 0.5px;
}

.voice-text {
    margin-top: 8px;
    display: block;
    width: 75vw;
    max-width: 260px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    word-break: break-word;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

.voice-text-foreign {
    color: inherit;
}

.voice-text-divider {
    height: 1px;
    margin: 6px 0;
    background: rgba(15, 23, 42, 0.12);
}

.voice-text-translation {
    color: #6b7280;
}

.voice-bubble-open .voice-text {
    /* Legacy Android WebViews reject a declaration containing dvh entirely. */
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    border-width: 1px;
}

/* Preserve the viewport-height cap without relying on min() or dynamic units. */
@media (max-height: 807px) {
    .voice-bubble-open .voice-text {
        max-height: 52vh;
    }
}

/* Modern WebViews get the dynamic viewport behavior after the safe fallback. */
@supports (height: 1dvh) {
    .voice-bubble-open .voice-text {
        max-height: min(52dvh, 420px);
    }
}

.voice-bubble-playing .bar-1,
.voice-bubble-playing .wave1 {
    animation: soundWave 1.2s infinite ease-in-out 0s;
}

.voice-bubble-playing .bar-2,
.voice-bubble-playing .wave2 {
    animation: soundWave 1.2s infinite ease-in-out 0.2s;
}

.voice-bubble-playing .bar-3,
.voice-bubble-playing .wave3 {
    animation: soundWave 1.2s infinite ease-in-out 0.4s;
}

.voice-bubble-playing .bar-4,
.voice-bubble-playing .wave4 {
    animation: soundWave 1.2s infinite ease-in-out 0.6s;
}

@keyframes soundWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.4); }
}

.transfer-modal-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.transfer-modal-container {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
}

.transfer-modal-header {
    height: 90px;
    padding-top: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    background: #ededed;
    border-bottom: 1px solid #dcdcdc;
}

.transfer-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.transfer-modal-amount {
    font-size: 30px;
    font-weight: bold;
}

.transfer-modal-note {
    font-size: 14px;
    color: #666;
}

.transfer-modal-footer {
    padding: 20px 15px 40px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transfer-modal-btn {
    height: 42px;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.transfer-modal-btn-accept {
    background-color: #07c160;
    color: #fff;
}

.transfer-modal-btn-return {
    background-color: #f5f5f5;
    color: #333;
}

.transfer-modal-btn-cancel {
    background-color: #ffffff;
    color: #333;
}

.redpacket-modal-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: stretch;
    justify-content: center;
    z-index: 1000;
}

.redpacket-modal-panel {
    width: 100%;
    height: 100%;
    display: none;
}

.redpacket-modal-panel.active {
    display: flex;
}

.redpacket-closed-panel {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.redpacket-card {
    width: 78%;
    max-width: 320px;
    background: #d95940;
    border-radius: 18px;
    padding: 32px 24px 56px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    color: #fff;
    box-sizing: border-box;
}

.redpacket-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.redpacket-card-avatar-wrap {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    overflow: hidden;
    margin-bottom: 10px;
}

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

.redpacket-card-title {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 6px;
}

.redpacket-card-bless {
    font-size: 18px;
    font-weight: 600;
}

.redpacket-card-bottom {
    margin-top: 40px;
}

.redpacket-open-btn-wrap {
    display: flex;
    justify-content: center;
    perspective: 800px;
}

.redpacket-open-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: none;
    background: #ebcd99;
    color: #b26c32;
    font-size: 32px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.redpacket-open-btn:active {
    transform: scale(0.96);
}

@keyframes redpacketCoinFlip {
    from {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

.redpacket-open-btn-spin {
    animation: redpacketCoinFlip 0.6s ease-in-out;
}

.redpacket-close-area {
    margin-top: 26px;
    display: flex;
    justify-content: center;
}

.redpacket-close-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #ebcd99;
    color: #ebcd99;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    font-size: 20px;
}

.redpacket-open-panel {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #f7f7f7;
}

.redpacket-open-header {
    width: 100%;
    height: 180px;
    background: #d95940;
    border-bottom-left-radius: 100% 40%;
    border-bottom-right-radius: 100% 40%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 28px;
    box-sizing: border-box;
    position: relative;
}

.redpacket-open-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.redpacket-open-back {
    position: absolute;
    left: 16px;
    top: 40px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.1);
}

.redpacket-open-avatar-wrap {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    overflow: hidden;
    margin-bottom: 8px;
}

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

.redpacket-open-sender-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.redpacket-open-note {
    font-size: 13px;
    opacity: 0.9;
}

.redpacket-open-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 36px 26px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.redpacket-open-amount-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}

.redpacket-open-amount {
    font-size: 40px;
    font-weight: 600;
    color: #c99f56;
}

.redpacket-open-unit {
    font-size: 14px;
    color: #c99f56;
}

.redpacket-open-tip {
    font-size: 13px;
    color: #999;
    margin-bottom: 30px;
}

.redpacket-open-list {
    width: 100%;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.redpacket-open-list-title {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.redpacket-open-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.redpacket-open-list-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.redpacket-open-list-avatar-wrap {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    overflow: hidden;
}

.redpacket-open-list-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.redpacket-open-list-name {
    font-size: 14px;
    color: #333;
}

.redpacket-open-list-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.redpacket-open-list-amount {
    font-size: 14px;
    color: #333;
}

.redpacket-open-list-time {
    font-size: 12px;
    color: #aaa;
}

.chat-more-dots {
    display: none;
}

.chat-more-panel.more-reorder-active .chat-more-dots {
    display: block;
}

.chat-more-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d0d0d0;
}

.chat-more-dot.active {
    background: #07c160;
}

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


/* === 适配绿色气泡（我发的消息）=== */
.msg-right .quote-block {
    background: rgba(255, 255, 255, 0.55);
    border-left-color: rgba(0, 0, 0, 0.45);
}
.msg-right .quote-name {
    color: rgba(0, 0, 0, 0.8);
}
.msg-right .quote-preview {
    color: rgba(0, 0, 0, 0.55);
}

.msg-jump-highlight .msg-bubble,
.msg-jump-highlight .sys-msg-text {
    animation: msgJumpFlash 0.9s ease-out;
}

@keyframes msgJumpFlash {
    0% { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
    30% { box-shadow: 0 12px 30px rgba(0,0,0,0.14); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
}

.msg-recall-leave {
    animation: msgRecallOut 0.17s ease-out forwards;
    transform-origin: center;
}

@keyframes msgRecallOut {
    to { transform: scale(0.8); opacity: 0; }
}

.voice-call-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: #111;
    color: #fff;
    display: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    overflow: hidden;
}

.voice-call-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 16px 0;
    flex-shrink: 0;
}

.voice-call-minimize {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.voice-call-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px 10px;
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

.voice-call-avatar-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.voice-call-avatar {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    object-fit: cover;
}

.voice-call-chat-wrapper {
    flex: 1 1 auto;
    width: 100%;
    max-width: 420px;
    overflow-y: auto;
    padding: 8px 4px;
    min-height: 0;
}

.call-chat-container {
    width: 100%;
    min-height: 40px;
}

.call-chat-row {
    display: flex;
    margin-bottom: 8px;
}

.call-chat-row-me {
    justify-content: flex-end;
}

.call-chat-row-ai {
    justify-content: flex-start;
}

.call-chat-row-direction {
    justify-content: center;
    margin: 10px 0 12px;
}

.call-chat-direction {
    max-width: 86%;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    letter-spacing: 0.02em;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 8px rgba(0, 0, 0, 0.72),
        0 0 18px rgba(0, 0, 0, 0.45);
}

.call-chat-bubble {
    max-width: 80%;
    padding: 6px 10px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.08);
}

.call-chat-bubble-translated {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.call-chat-foreign,
.call-chat-translation {
    white-space: pre-wrap;
    word-break: break-word;
}

.call-chat-foreign {
    line-height: 1.45;
}

.call-chat-divider {
    border-top: 1px dashed rgba(255, 255, 255, 0.34);
    opacity: 0.8;
}

.call-chat-translation {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.88;
}

.call-chat-bubble-translated.is-collapsed .call-chat-divider,
.call-chat-bubble-translated.is-collapsed .call-chat-translation {
    display: none;
}

.call-chat-row-me .call-chat-bubble {
    background: #07c160;
    color: #fff;
}

.voice-call-footer {
    position: relative;
    z-index: 1;
    padding: 12px 24px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.voice-call-status-text {
    font-size: 14px;
    color: #fff;
}

.voice-call-input-row {
    display: flex;
    width: 100%;
    max-width: 420px;
    gap: 8px;
}

.voice-call-input {
    flex: 1;
    height: 34px;
    border-radius: 18px;
    border: none;
    padding: 0 12px;
    font-size: 14px;
}

.voice-call-send-btn {
    width: 70px;
    height: 34px;
    border-radius: 18px;
    border: none;
    background: #000000;
    color: #fff;
    font-size: 14px;
}

.voice-call-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin-top: 4px;
}

.call-btn {
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.call-btn-small {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: #fff;
    color: #666;
    font-size: 24px;
}

.call-btn-small.off {
    background: rgba(255, 255, 255, 0.12);
    color: #bbb;
}

.call-btn-hangup {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: #ff3b30;
    color: #fff;
    font-size: 26px;
}

.call-float-window,
.k-float-call {
    position: fixed;
    right: 16px;
    top: 60px;
    display: none;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 100px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    cursor: grab;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    white-space: nowrap;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.call-float-window:active,
.k-float-call:active {
    transform: scale(0.95);
    background: rgba(245, 245, 245, 0.9);
}

.call-float-window.is-dragging,
.k-float-call.is-dragging {
    cursor: grabbing;
    transition: none;
}

.k-status-dot {
    width: 6px;
    height: 6px;
    background-color: #6BCB77;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    flex: 0 0 auto;
}

.k-status-dot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #6BCB77;
    border-radius: 50%;
    animation: k-pulse 2s infinite ease-out;
}

.k-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    opacity: 0.7;
    flex: 0 0 auto;
}

.k-timer {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

@keyframes k-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .call-float-window,
    .k-float-call {
        right: 12px;
        padding: 10px 20px;
    }

    .k-timer {
        font-size: 14px;
    }
}

.location-share-float-window {
    position: fixed;
    right: 12px;
    top: 110px;
    max-width: 60%;
    padding: 8px 14px;
    border-radius: 999px;
    background: #007aff;
    color: #fff;
    font-size: 13px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.location-share-float-window.is-fast-forwarding {
    background: #0b66d4;
    box-shadow: 0 8px 18px rgba(11, 102, 212, 0.34);
    transform: scale(1.03);
}

#map-creator-layer {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f7;
    display: none;
    flex-direction: column;
    z-index: 20000;
}

.map-generation-loading {
    position: fixed;
    inset: 0;
    z-index: 20050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 17, 20, 0.22);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.map-loading-box {
    width: min(300px, calc(100vw - 48px));
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(17, 17, 17, 0.065);
    border-radius: 22px;
    background: #ffffff;
    color: #151515;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
    animation: mapLoadingEnter 220ms ease both;
}

.map-loading-orbit {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    border: 1px solid rgba(17, 17, 17, 0.1);
}

.map-loading-orbit::before,
.map-loading-orbit::after {
    content: '';
    position: absolute;
    background: rgba(17, 17, 17, 0.08);
}

.map-loading-orbit::before {
    left: 7px;
    right: 7px;
    top: 50%;
    height: 1px;
}

.map-loading-orbit::after {
    top: 7px;
    bottom: 7px;
    left: 50%;
    width: 1px;
}

.map-loading-orbit span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #151515;
    transform-origin: 3.5px 3.5px;
    animation: mapLoadingOrbit 1.45s linear infinite;
}

.map-loading-copy {
    min-width: 0;
}

.map-loading-label {
    margin-bottom: 5px;
    color: #a1a8b2;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 1.5px;
}

.map-loading-title {
    color: #151515;
    font-size: 15px;
    font-weight: 620;
    line-height: 1.45;
}

.map-loading-note {
    margin-top: 4px;
    color: #69707a;
    font-size: 11px;
    line-height: 1.45;
}

@keyframes mapLoadingEnter {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mapLoadingOrbit {
    from { transform: rotate(0deg) translateX(17px); }
    to { transform: rotate(360deg) translateX(17px); }
}

@media (prefers-reduced-motion: reduce) {
    .map-loading-box,
    .map-loading-orbit span {
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
    }
}

/* ========================================
   🎨 韩系沉浸式通话页面样式 (Glassmorphism)
   ======================================== */

.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

.call-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: callSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.call-overlay.closing {
    animation: callSlideOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* 动态模糊背景 */
.call-bg-blur {
    position: absolute;
    inset: -50px;
    background-size: cover;
    background-position: center;
    filter: blur(100px);
    transform: scale(1.2);
    transition: background-image 0.8s ease;
    z-index: 0;
}

.call-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(80px) brightness(0.7);
    -webkit-backdrop-filter: blur(80px) brightness(0.7);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(0, 0, 0, 0.15) 100%
    );
    z-index: 1;
}

/* 内容容器 */
.call-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 44px) + 20px) 24px calc(var(--safe-bottom-compact, env(safe-area-inset-bottom, 34px)) + 20px);
    box-sizing: border-box;
    min-height: 0;
}

/* ====== 顶部状态栏 ====== */
.call-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
}

.call-minimize {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.call-minimize:hover,
.call-minimize:active {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(0.95);
}

.call-status {
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 2px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

#callStatusText {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 2px;
}

.call-timer {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

/* ====== 中间头像区域 ====== */
.call-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.call-overlay:not(.is-connected) .voice-call-chat-wrapper {
    display: none !important;
}

.call-incoming-prompt {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.call-overlay.is-incoming .call-hint {
    display: none;
}

.call-overlay.is-incoming .call-actions {
    justify-content: center;
    gap: 70px;
}

.call-overlay.is-incoming .call-accept {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34d399 0%, #22c55e 55%, #16a34a 100%);
    color: #fff;
    border: none;
    box-shadow:
        0 8px 24px rgba(34, 197, 94, 0.42),
        0 0 48px rgba(34, 197, 94, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.call-overlay.is-incoming .call-reject {
    width: 72px;
    height: 72px;
}

.call-overlay.is-incoming .call-btn span {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.92);
}

.call-overlay.is-connected .call-main {
    justify-content: flex-start;
    gap: 10px;
    padding-top: 14px;
}

.call-overlay.is-connected .avatar-ripple-wrapper {
    width: 132px;
    height: 132px;
    flex: 0 0 auto;
}

.call-overlay.is-connected .call-avatar {
    width: 102px;
    height: 102px;
}

.call-overlay.is-connected .call-user-name {
    flex: 0 0 auto;
    font-size: 20px;
    letter-spacing: 2px;
}

.call-overlay.is-connected .call-hint {
    display: none;
}

.call-overlay.is-connected .voice-call-chat-wrapper {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 4px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.call-overlay.is-connected #call-input-row {
    flex: 0 0 auto;
}

.call-overlay.is-connected .btn-mute.input-open {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.34);
}

.avatar-ripple-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 呼吸光圈 */
.ripple {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    animation: rippleExpand 3s ease-out infinite;
}

.ripple:nth-child(2) {
    animation-delay: 1.5s;
}

@keyframes rippleExpand {
    0% {
        transform: scale(1);
        opacity: 0.45;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* 头像 */
.call-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 0 0 3px rgba(255, 255, 255, 0.15),
        0 0 60px rgba(255, 255, 255, 0.08);
    animation: avatarFloat 4s ease-in-out infinite;
}

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

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

/* 用户名 */
.call-user-name {
    font-size: 26px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.call-hint {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 2px;
    margin: 0;
    animation: hintFade 3s ease-in-out infinite;
}

@keyframes hintFade {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.35; }
}

/* ====== 底部控制栏 ====== */
.call-footer {
    width: 100%;
    padding-bottom: 20px;
}

.call-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

/* 控制按钮基础 */
.call-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    color: inherit;
    font-family: inherit;
}

.call-btn i {
    font-size: 26px;
    transition: transform 0.25s ease;
}

.call-btn span {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
}

/* 静音按钮 */
.btn-mute {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

.btn-mute:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.08);
}

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

.btn-mute.muted {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.btn-mute.muted i::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    transform: rotate(-45deg) translate(-8px, 14px);
}

/* 挂断按钮 */
.btn-hangup {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4757 0%, #ff2d42 50%, #dc2626 100%);
    box-shadow:
        0 8px 24px rgba(255, 71, 87, 0.45),
        0 0 48px rgba(255, 71, 87, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
}

.btn-hangup i {
    font-size: 30px;
}

.btn-hangup:hover {
    transform: scale(1.1);
    box-shadow:
        0 12px 32px rgba(255, 71, 87, 0.55),
        0 0 64px rgba(255, 71, 87, 0.25);
}

.btn-hangup:active {
    transform: scale(0.92);
}

/* 免提按钮 */
.btn-speaker {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

.btn-speaker:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.08);
}

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

.btn-speaker.speaker-on {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

/* 响应式适配 */
@media (max-width: 380px) {
    .avatar-ripple-wrapper {
        width: 150px;
        height: 150px;
    }
    
    .call-avatar {
        width: 116px;
        height: 116px;
    }
    
    .call-user-name {
        font-size: 22px;
    }
    
    .btn-mute,
    .btn-speaker {
        width: 58px;
        height: 58px;
    }
    
    .btn-hangup {
        width: 64px;
        height: 64px;
    }
    
    .call-actions {
        gap: 20px;
    }
}

#map-creator-layer .location-share-bg {
    background: #eef1f4;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 30% 30%, rgba(0, 122, 255, 0.08), transparent 35%),
        radial-gradient(circle at 70% 65%, rgba(7, 193, 96, 0.08), transparent 38%);
    background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0;
}

#map-creator-layer .location-share-map {
    opacity: 0;
}

.location-share-marker {
    overflow: visible;
}

.location-share-marker .marker-name {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: none;
}

.location-share-chat-box {
    transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin-bottom 0.3s ease;
    transform-origin: bottom center;
    max-height: 220px;
}

.location-share-chat-box.hidden {
    max-height: 0;
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    transform: scale(0.9);
    opacity: 0;
    pointer-events: none;
}

#ls-mic-btn.active {
    background: rgba(7, 193, 96, 0.92);
    color: #fff;
}

.map-creator-footer-float {
    padding: 0 15px 26px 15px;
}

.map-creator-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.map-creator-action-btn {
    height: 44px;
    border-radius: 12px;
    border: none;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
}

.map-creator-save-btn {
    background: #07c160;
    color: #fff;
}

.map-creator-exit-btn {
    background: rgba(255, 255, 255, 0.92);
    color: #333;
}

/* 到达通知 Toast */
.top-toast-notification {
    position: fixed; top: -100px; left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 99999;
    display: flex; align-items: center; gap: 10px;
    transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.top-toast-notification.show { top: 40px; }
.top-toast-icon { color: #07c160; font-size: 20px; }
.top-toast-text { font-size: 14px; font-weight: 600; color: #333; }

.center-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 99999;
    max-width: min(80vw, 360px);
    text-align: center;
}

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

.family-card-accept-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.family-card-accept-panel {
    width: min(80vw, 320px);
    background: #FFFFFF;
    border-radius: 24px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}

.family-card-accept-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #F59A23;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.family-card-accept-icon::before,
.family-card-accept-icon::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    transform: rotate(45deg);
}

.family-card-accept-icon::before {
    opacity: 0.95;
    left: 25px;
    top: 22px;
}

.family-card-accept-icon::after {
    opacity: 0.75;
    left: 30px;
    top: 17px;
}

.family-card-accept-sender {
    color: #888;
    font-size: 14px;
    margin-top: 16px;
}

.family-card-accept-amount {
    color: #333;
    font-size: 36px;
    font-weight: bold;
    margin: 12px 0 32px;
}

.family-card-accept-actions {
    display: flex;
    gap: 12px;
}

.family-card-accept-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.family-card-accept-btn:active {
    transform: scale(0.99);
}

.family-card-accept-btn--decline {
    background: #F5F6F8;
    color: #666;
}

.family-card-accept-btn--accept {
    background: #F59A23;
    color: #FFF;
    font-weight: bold;
}

#user-persona-modal #user-settings-name,
#user-persona-modal #user-settings-birthday-solar,
#user-persona-modal #user-settings-birthday-lunar,
#creator-modal #ai-name,
#editor-modal #edit-ai-name {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#user-persona-modal #user-settings-name:focus,
#user-persona-modal #user-settings-birthday-solar:focus,
#user-persona-modal #user-settings-birthday-lunar:focus,
#creator-modal #ai-name:focus,
#editor-modal #edit-ai-name:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

#user-persona-modal #user-settings-name:-webkit-autofill,
#creator-modal #ai-name:-webkit-autofill,
#editor-modal #edit-ai-name:-webkit-autofill {
    -webkit-text-fill-color: #1f2937 !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 999999s ease-out 0s;
}

#user-persona-modal #user-settings-birthday-solar::-webkit-datetime-edit,
#user-persona-modal #user-settings-birthday-solar::-webkit-datetime-edit-fields-wrapper,
#user-persona-modal #user-settings-birthday-solar::-webkit-date-and-time-value {
    background: transparent !important;
}

#user-persona-modal #user-settings-birthday-solar::-webkit-calendar-picker-indicator {
    opacity: 0.7;
}

#creator-modal {
    align-items: stretch !important;
    justify-content: flex-start !important;
}

#creator-modal > div:not(.absolute) {
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

#creator-modal .modal-fixed-row,
#editor-modal .modal-fixed-row,
#user-persona-modal .modal-fixed-row {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center !important;
    column-gap: 12px;
    min-height: 68px;
}

#user-persona-modal .modal-fixed-row.modal-fixed-row-birthday {
    grid-template-columns: 56px minmax(0, 1fr);
}

#creator-modal .modal-fixed-row > label,
#editor-modal .modal-fixed-row > label,
#user-persona-modal .modal-fixed-row > label {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#creator-modal .modal-fixed-input,
#editor-modal .modal-fixed-input,
#user-persona-modal .modal-fixed-input,
#user-persona-modal .modal-fixed-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 14px !important;
    background: rgba(249, 250, 251, 0.96) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    box-sizing: border-box !important;
    line-height: 44px !important;
}

#creator-modal .modal-fixed-input,
#editor-modal .modal-fixed-input {
    text-align: left !important;
}

#user-persona-modal .modal-fixed-input,
#user-persona-modal .modal-fixed-select {
    text-align: right !important;
}

#user-persona-modal .modal-fixed-select {
    padding-right: 32px !important;
}

#user-persona-modal .modal-fixed-date-input {
    width: 136px !important;
    flex: 0 0 136px !important;
}

#creator-modal .modal-fixed-input:focus,
#editor-modal .modal-fixed-input:focus,
#user-persona-modal .modal-fixed-input:focus,
#user-persona-modal .modal-fixed-select:focus {
    border-color: rgba(17, 24, 39, 0.35) !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important;
    background: #ffffff !important;
}

#creator-modal .modal-fixed-text-card,
#editor-modal .modal-fixed-text-card,
#user-persona-modal .modal-fixed-text-card {
    height: auto !important;
    min-height: 0 !important;
}

#creator-modal .modal-fixed-textarea,
#editor-modal .modal-fixed-textarea,
#user-persona-modal .modal-fixed-textarea {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 16px !important;
    background: rgba(249, 250, 251, 0.96) !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    resize: none !important;
    flex: none !important;
}

#creator-modal .modal-fixed-textarea-short,
#editor-modal .modal-fixed-textarea-short {
    height: 128px !important;
    min-height: 128px !important;
}

#creator-modal .modal-fixed-textarea-medium,
#editor-modal .modal-fixed-textarea-medium,
#user-persona-modal .modal-fixed-textarea-medium {
    height: 148px !important;
    min-height: 148px !important;
}

#creator-modal .modal-fixed-textarea-schedule,
#editor-modal .modal-fixed-textarea-schedule {
    height: 168px !important;
    min-height: 168px !important;
}

#creator-modal .modal-fixed-textarea:focus,
#editor-modal .modal-fixed-textarea:focus,
#user-persona-modal .modal-fixed-textarea:focus {
    border-color: rgba(17, 24, 39, 0.35) !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important;
    background: #ffffff !important;
}

/* =========================================================
   === Role Profile Modal: literary archive style ===
   ========================================================= */
#creator-modal.role-profile-modal,
#editor-modal.role-profile-modal {
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    background: #F9F9F6 !important;
    color: #1A1A1A;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

#creator-modal.role-profile-modal .role-profile-shell,
#editor-modal.role-profile-modal .role-profile-shell {
    width: 100%;
    max-width: 480px;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: #F9F9F6;
    position: relative;
    overflow: hidden;
}

.role-profile-topbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    min-height: 50px;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 16px 6px;
    background: #F9F9F6;
}

.role-profile-back {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border: none;
    background: transparent;
    color: #1A1A1A;
    cursor: pointer;
    padding: 0;
}

.role-profile-back i {
    font-size: 34px;
    line-height: 1;
}

.role-profile-title {
    min-width: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-profile-spacer {
    width: 44px;
    height: 40px;
}

.role-profile-save {
    width: 64px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 0 6px 12px;
    border: none;
    background: transparent;
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.role-profile-save:active {
    opacity: 0.58;
}

.role-profile-header-section {
    flex: 0 0 auto;
    padding: 20px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.role-profile-avatar {
    width: 96px;
    height: 96px;
    border: none;
    border-radius: 50%;
    background: #EBEBE6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    padding: 0;
    cursor: pointer;
}

.role-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(15%);
}

.role-profile-avatar-camera {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.92);
    color: #F9F9F6;
    border: 2px solid #F9F9F6;
    font-size: 14px;
}

.role-profile-avatar-hint {
    margin-top: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    line-height: 1;
    color: #8C8C85;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.role-profile-file-input {
    display: none !important;
}

.role-profile-tab-nav {
    flex: 0 0 auto;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 0 24px;
    border-bottom: 1px solid #EBEBE6;
    background: rgba(249, 249, 246, 0.95);
    backdrop-filter: blur(4px);
    -webkit-overflow-scrolling: touch;
}

.role-profile-tab-nav::-webkit-scrollbar {
    display: none;
}

.role-profile-tab {
    flex: 0 0 auto;
    position: relative;
    border: none;
    background: transparent;
    padding: 12px 0;
    color: #8C8C85;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.role-profile-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #1A1A1A;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.role-profile-tab.is-active {
    color: #1A1A1A;
    font-weight: 600;
}

.role-profile-tab.is-active::after {
    transform: scaleX(1);
}

.role-profile-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.role-profile-pane {
    display: none;
}

.role-profile-pane.is-active {
    display: block;
    animation: roleProfileFadeIn 0.35s ease both;
}

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

.role-profile-field {
    margin-bottom: 24px;
}

.role-profile-select {
    appearance: none;
    -webkit-appearance: none;
    background: #f6f5f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    padding-right: 42px !important;
}

.role-profile-field-hint {
    margin-top: 7px;
    color: #8b8984;
    font-size: 11px;
    line-height: 1.5;
}

.role-profile-field:last-child {
    margin-bottom: 0;
}

.role-profile-two-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.role-profile-two-grid .role-profile-field {
    margin-bottom: 24px;
}

.role-profile-choice-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.role-profile-choice {
    height: 34px;
    border: 1px solid #EBEBE6;
    border-radius: 20px;
    background: transparent;
    color: #8C8C85;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.role-profile-choice.is-active {
    border-color: #1A1A1A;
    background: #1A1A1A;
    color: #F9F9F6;
}

.role-profile-choice:active {
    transform: scale(0.96);
}

.role-profile-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.role-profile-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #8C8C85;
    font-weight: 400;
}

.role-profile-label-row .role-profile-label {
    margin-bottom: 0;
}

#creator-modal.role-profile-modal .role-profile-input,
#editor-modal.role-profile-modal .role-profile-input {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid #EBEBE6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1A1A1A !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#creator-modal.role-profile-modal .role-profile-input:focus,
#editor-modal.role-profile-modal .role-profile-input:focus {
    border-bottom-color: #1A1A1A !important;
    background: transparent !important;
    box-shadow: none !important;
}

.role-profile-input-with-btn {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.role-profile-input-with-btn .role-profile-input {
    flex: 1 1 auto;
}

#creator-modal.role-profile-modal .role-profile-input::placeholder,
#editor-modal.role-profile-modal .role-profile-input::placeholder,
#creator-modal.role-profile-modal .role-profile-textarea::placeholder,
#editor-modal.role-profile-modal .role-profile-textarea::placeholder {
    color: #C4C4C0;
    font-weight: 300;
}

#creator-modal.role-profile-modal .role-profile-textarea,
#editor-modal.role-profile-modal .role-profile-textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 120px !important;
    height: 120px !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 4px !important;
    background: #F4F4F0 !important;
    box-shadow: none !important;
    color: #1A1A1A !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    resize: none !important;
    outline: none !important;
}

#creator-modal.role-profile-modal .role-profile-textarea:focus,
#editor-modal.role-profile-modal .role-profile-textarea:focus {
    background: #F1F1EC !important;
    box-shadow: inset 0 0 0 1px #D8D8D0 !important;
}

#creator-modal.role-profile-modal .role-profile-textarea-tall,
#editor-modal.role-profile-modal .role-profile-textarea-tall {
    min-height: 220px !important;
    height: 220px !important;
}

#creator-modal.role-profile-modal .role-profile-textarea-schedule,
#editor-modal.role-profile-modal .role-profile-textarea-schedule {
    min-height: 160px !important;
    height: 160px !important;
}

.role-profile-schedule-head {
    margin-bottom: 20px;
}

.role-profile-star-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1A1A1A;
    border-radius: 50%;
    background: transparent;
    color: #1A1A1A;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.role-profile-star-btn.is-loading {
    background: #1A1A1A;
    color: #F9F9F6;
    cursor: wait;
    animation: roleProfileStarLoading 0.86s ease-in-out infinite;
}

.role-profile-star-btn.is-loading[disabled] {
    opacity: 1;
}

.role-profile-star-btn:active {
    background: #1A1A1A;
    color: #F9F9F6;
    transform: scale(0.94);
}

@keyframes roleProfileStarLoading {
    0%, 100% {
        transform: scale(0.94) rotate(0deg);
        box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.22);
    }

    50% {
        transform: scale(1.08) rotate(18deg);
        box-shadow: 0 0 0 7px rgba(26, 26, 26, 0);
    }
}

.role-profile-timeline {
    margin-top: 2px;
    padding-left: 8px;
}

.role-profile-timeline-item {
    position: relative;
    padding-left: 20px;
    padding-bottom: 24px;
    border-left: 1px solid #EBEBE6;
}

.role-profile-timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 4px;
}

.role-profile-timeline-item::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1A1A1A;
}

.role-profile-time-label {
    margin-bottom: 5px;
    color: #8C8C85;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1;
}

.role-profile-time-content {
    color: #1A1A1A;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}

.role-profile-timeline-empty {
    padding: 22px 0 18px 20px;
    border-left: 1px solid #EBEBE6;
    color: #B0B0AA;
    font-size: 13px;
    line-height: 1.6;
}

#creator-modal.role-profile-modal .role-profile-schedule-source,
#editor-modal.role-profile-modal .role-profile-schedule-source {
    min-height: 120px !important;
    height: 120px !important;
    margin-top: 22px;
}

.role-profile-magic-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid #1A1A1A;
    border-radius: 20px;
    background: transparent;
    color: #1A1A1A;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.role-profile-magic-btn i {
    font-size: 14px;
    line-height: 1;
}

.role-profile-magic-btn:active {
    background: #1A1A1A;
    color: #F9F9F6;
    transform: scale(0.96);
}

.role-profile-worldbook-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #1A1A1A;
    font-size: 13px;
    line-height: 1.5;
}

.role-profile-worldbook-list label,
.role-profile-worldbook-list div,
.role-profile-worldbook-list span {
    max-width: 100%;
}

.role-profile-worldbook-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-profile-worldbook-summary {
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.5;
}

.role-profile-worldbook-list-inner {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.role-profile-worldbook-list-inner.is-open {
    display: flex;
}

.role-profile-worldbook-note {
    padding: 12px 14px;
    border: 1px solid #EBEBE6;
    border-radius: 4px;
    background: #F4F4F0;
    color: #555555;
    font-size: 12px;
    line-height: 1.6;
}

.role-profile-worldbook-cat {
    border: 1px solid #EBEBE6;
    border-radius: 4px;
    background: #FFFFFF;
    overflow: hidden;
}

.role-profile-worldbook-cat-head {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #EBEBE6;
}

.role-profile-worldbook-cat-title {
    min-width: 0;
    overflow: hidden;
    color: #1A1A1A;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-profile-worldbook-cat-toggle {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8C8C85;
    cursor: pointer;
}

.role-profile-worldbook-cat-body {
    padding: 8px 12px;
}

.role-profile-worldbook-card {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
}

.role-profile-worldbook-card + .role-profile-worldbook-card {
    border-top: 1px solid #F1F1EC;
}

.role-profile-worldbook-card-title {
    display: block;
    overflow: hidden;
    color: #1A1A1A;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-profile-worldbook-card-meta {
    display: block;
    margin-top: 3px;
    color: #8C8C85;
    font-size: 12px;
}

.role-profile-worldbook-auto-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #EBEBE6;
    border-radius: 4px;
    background: #FFFFFF;
}

.role-profile-worldbook-auto-title {
    overflow: hidden;
    color: #1A1A1A;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-profile-worldbook-status {
    color: #8C8C85;
    font-size: 12px;
    white-space: nowrap;
}

.role-profile-worldbook-list input[type="checkbox"] {
    accent-color: #1A1A1A;
}

.role-profile-worldbook-cat-head label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.role-profile-worldbook-cat-head input,
.role-profile-worldbook-card input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.worldbook-archive-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #F9F9F6;
    color: #1A1A1A;
}

.worldbook-archive-loading {
    align-items: center;
    justify-content: center;
    color: #8C8C85;
    font-size: 14px;
}

.worldbook-archive-tabs {
    flex: 0 0 auto;
    padding: 8px 20px 0;
    border-bottom: 1px solid #EBEBE6;
    background: rgba(249, 249, 246, 0.96);
}

.worldbook-archive-tabs-row {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 8px 0 0;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.worldbook-archive-tabs-row::-webkit-scrollbar {
    display: none;
}

.worldbook-archive-tab {
    flex: 0 0 auto;
    position: relative;
    border: none;
    background: transparent;
    padding: 12px 0;
    color: #8C8C85;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

.worldbook-archive-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #1A1A1A;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.worldbook-archive-tab.is-active {
    color: #1A1A1A;
    font-weight: 600;
}

.worldbook-archive-tab.is-active::after {
    transform: scaleX(1);
}

.worldbook-archive-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.worldbook-archive-empty {
    min-height: 58%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8C8C85;
}

.worldbook-archive-empty-title {
    color: #1A1A1A;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 18px;
    font-weight: 600;
}

.worldbook-archive-empty-note {
    margin-top: 8px;
    font-size: 12px;
}

.worldbook-archive-category-title {
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBEBE6;
    color: #8C8C85;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.worldbook-archive-category-title:first-child {
    margin-top: 0;
}

.worldbook-archive-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #EBEBE6;
    border-radius: 4px;
    background: #FFFFFF;
    color: #1A1A1A;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.worldbook-archive-card:active {
    border-color: #1A1A1A;
    transform: scale(0.992);
}

.worldbook-archive-card-main {
    min-width: 0;
}

.worldbook-archive-card-title {
    overflow: hidden;
    color: #1A1A1A;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worldbook-archive-card-meta {
    margin-top: 4px;
    overflow: hidden;
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worldbook-archive-card-preview {
    margin-top: 6px;
    overflow: hidden;
    color: #555555;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worldbook-archive-card-status {
    color: #8C8C85;
    font-size: 12px;
    white-space: nowrap;
}

.worldbook-editor-shell {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: #F9F9F6;
    color: #1A1A1A;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.worldbook-editor-field {
    margin-bottom: 22px;
}

.worldbook-editor-field-fill {
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.worldbook-editor-label {
    display: block;
    margin-bottom: 8px;
    color: #8C8C85;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.4;
}

.worldbook-global-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #1A1A1A;
    font-size: 15px;
    cursor: pointer;
}

.worldbook-global-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #1A1A1A;
}

.worldbook-editor-input,
.worldbook-editor-select {
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #EBEBE6;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #1A1A1A;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.worldbook-editor-input:focus,
.worldbook-editor-select:focus {
    border-bottom-color: #1A1A1A;
}

.worldbook-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.worldbook-editor-note {
    margin-bottom: 22px;
    padding: 12px 14px;
    border: 1px solid #EBEBE6;
    border-radius: 4px;
    background: #F4F4F0;
    color: #555555;
    font-size: 12px;
    line-height: 1.6;
}

.worldbook-editor-textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 220px;
    padding: 16px;
    border: none;
    border-radius: 4px;
    outline: none;
    background: #F4F4F0;
    color: #1A1A1A;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.worldbook-editor-textarea:focus {
    background: #F1F1EC;
    box-shadow: inset 0 0 0 1px #D8D8D0;
}

.worldbook-editor-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 2px;
}

.worldbook-editor-btn {
    min-height: 42px;
    border-radius: 4px;
    border: 1px solid #1A1A1A;
    background: transparent;
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.worldbook-editor-btn.primary {
    background: #1A1A1A;
    color: #F9F9F6;
}

.worldbook-editor-btn.danger {
    border-color: #D8D8D0;
    color: #8C8C85;
}

@media (max-width: 520px) {
    .worldbook-editor-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.role-profile-schedule-panel.schedule-parse-panel {
    margin-top: 16px;
    padding: 16px;
    border: none;
    border-radius: 4px;
    background: #F4F4F0;
    box-shadow: none;
}

.role-profile-modal .schedule-parse-note {
    margin-top: 10px;
    color: #8C8C85;
    font-size: 11px;
    letter-spacing: 0;
}

.role-profile-modal .schedule-parse-panel-title,
.role-profile-modal .schedule-parse-summary-label,
.role-profile-modal .schedule-parse-section-title {
    color: #1A1A1A;
}

.role-profile-modal .schedule-parse-action-btn,
.role-profile-modal .schedule-parse-add-btn {
    border-radius: 4px;
    border-color: #E2E2DC;
    background: #FFFFFF;
    box-shadow: none;
}

.role-profile-modal .schedule-parse-action-btn.primary {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #F9F9F6;
}

.role-profile-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-height: 0;
    margin-top: 16px;
}

#creator-modal.role-profile-modal .role-profile-photo-grid > div,
#editor-modal.role-profile-modal .role-profile-photo-grid > div {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 2px !important;
    background: #EBEBE6 !important;
}

.role-profile-contact-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.role-profile-npc-pane {
    position: relative;
    min-height: 360px;
    padding-bottom: 72px;
}

.role-profile-npc-hint {
    margin-top: -2px;
    color: #8C8C85;
    font-size: 12px;
    line-height: 1.6;
}

.role-profile-npc-contact-picker-open {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    background: #F0F3F7;
    color: #151515;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.role-profile-npc-contact-picker-open i {
    font-size: 17px;
}

.role-profile-npc-contact-picker-open:active {
    transform: scale(0.98);
    background: #E6EAF0;
}

.role-profile-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid #EBEBE6;
    border-radius: 8px;
    background: #FFFFFF;
    transition: border-color 0.2s ease;
}

.role-profile-contact-card:focus-within {
    border-color: #1A1A1A;
}

.role-profile-contact-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: #F4F4F0;
    color: #1A1A1A;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.role-profile-contact-avatar:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.11);
}

.role-profile-contact-avatar:active {
    transform: scale(0.96);
}

.role-profile-contact-avatar:focus-visible {
    outline: 2px solid #1A1A1A;
    outline-offset: 2px;
}

.role-profile-contact-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.role-profile-contact-avatar-text {
    display: block;
}

.role-profile-contact-avatar-camera {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background: #1A1A1A;
    color: #FFFFFF;
    font-family: sans-serif;
    font-size: 9px;
    line-height: 1;
}

.role-profile-contact-avatar-camera i {
    font-size: 9px;
}

.role-profile-contact-info {
    min-width: 0;
    flex: 1 1 auto;
}

.role-profile-contact-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.role-profile-contact-meta-row {
    display: grid;
    grid-template-columns: minmax(58px, 72px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.role-profile-contact-name,
.role-profile-contact-gender,
.role-profile-contact-relation,
.role-profile-contact-desc {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #1A1A1A;
    box-shadow: none;
}

.role-profile-contact-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.role-profile-contact-gender,
.role-profile-contact-relation {
    color: #8C8C85;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    line-height: 1.35;
    text-transform: uppercase;
}

.role-profile-contact-desc {
    min-height: 40px;
    resize: vertical;
    color: #555555;
    font-size: 13px;
    line-height: 1.5;
}

.role-profile-contact-name::placeholder,
.role-profile-contact-gender::placeholder,
.role-profile-contact-relation::placeholder,
.role-profile-contact-desc::placeholder {
    color: #C4C4C0;
}

.role-profile-contact-remove {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8C8C85;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.role-profile-contact-remove:active {
    background: #F4F4F0;
    color: #1A1A1A;
}

.role-profile-contact-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(17, 17, 17, 0.065);
}

.role-profile-contact-promote {
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 999px;
    background: #F0F3F7;
    color: #151515;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.role-profile-contact-promote.is-linked,
.role-profile-contact-promote:disabled {
    border-color: transparent;
    background: transparent;
    color: #A1A8B2;
    cursor: default;
}

.role-profile-contact-empty {
    padding: 20px 0;
    color: #B0B0AA;
    font-size: 13px;
    line-height: 1.6;
}

.role-profile-npc-fab {
    position: sticky;
    left: 100%;
    bottom: 18px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 0 auto;
    border: 1px solid #1A1A1A;
    border-radius: 50%;
    background: #1A1A1A;
    color: #F9F9F6;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.12);
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.role-profile-npc-fab:active {
    transform: scale(0.94);
}

.role-profile-npc-generator-modal {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 26, 26, 0.24);
}

.role-profile-npc-contact-picker-modal {
    align-items: flex-end;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(17, 17, 17, 0.28);
}

.role-profile-npc-generator-sheet.role-profile-npc-contact-picker-sheet {
    max-width: 410px;
    max-height: min(78vh, 680px);
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: #F7F9FC;
}

.role-profile-npc-contact-picker-list {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    margin: 2px -4px 16px;
    padding: 4px;
}

.role-profile-npc-contact-picker-empty {
    padding: 34px 12px;
    color: #A1A8B2;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.role-profile-npc-contact-option {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid rgba(17, 17, 17, 0.065);
    border-radius: 18px;
    background: #FFFFFF;
    color: #151515;
    text-align: left;
    cursor: pointer;
}

.role-profile-npc-contact-option:disabled {
    opacity: 0.5;
    cursor: default;
}

.role-profile-npc-contact-option.is-selected {
    border-color: #111111;
}

.role-profile-npc-contact-option-avatar {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #E6EAF0;
    color: #151515;
    font-size: 15px;
    font-weight: 650;
}

.role-profile-npc-contact-option-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.role-profile-npc-contact-option-copy {
    min-width: 0;
}

.role-profile-npc-contact-option-name,
.role-profile-npc-contact-option-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-profile-npc-contact-option-name {
    font-size: 14px;
    font-weight: 620;
}

.role-profile-npc-contact-option-meta {
    margin-top: 3px;
    color: #69707A;
    font-size: 11px;
}

.role-profile-npc-contact-option-check {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D7DBE1;
    border-radius: 50%;
    color: transparent;
    font-size: 14px;
}

.role-profile-npc-contact-option.is-selected .role-profile-npc-contact-option-check {
    border-color: #111111;
    background: #111111;
    color: #FFFFFF;
}

.role-profile-npc-generator-sheet {
    width: 100%;
    max-width: 360px;
    padding: 22px 20px 20px;
    border: 1px solid #EBEBE6;
    border-radius: 8px;
    background: #F9F9F6;
    color: #1A1A1A;
    box-shadow: 0 18px 42px rgba(26, 26, 26, 0.16);
    animation: roleProfileNpcSheetIn 0.22s ease both;
}

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

.role-profile-npc-generator-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.role-profile-npc-generator-kicker {
    color: #8C8C85;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 1;
}

.role-profile-npc-generator-title {
    margin-top: 8px;
    color: #1A1A1A;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.role-profile-npc-generator-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8C8C85;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.role-profile-npc-generator-field {
    margin-bottom: 20px;
}

.role-profile-npc-count-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
}

.role-profile-npc-count-row button,
.role-profile-npc-count-row input {
    height: 38px;
    border: 1px solid #EBEBE6;
    border-radius: 20px;
    background: transparent;
    color: #1A1A1A;
    text-align: center;
    font-size: 15px;
    outline: none;
}

.role-profile-npc-count-row button {
    cursor: pointer;
}

.role-profile-npc-count-row input:focus {
    border-color: #1A1A1A;
}

.role-profile-npc-relation-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-profile-npc-relation-chip,
.role-profile-npc-relation-plus {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1px solid #EBEBE6;
    border-radius: 20px;
    background: transparent;
    color: #8C8C85;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.role-profile-npc-relation-chip.is-active {
    border-color: #1A1A1A;
    background: #1A1A1A;
    color: #F9F9F6;
}

.role-profile-npc-relation-plus {
    width: 34px;
    padding: 0;
    color: #1A1A1A;
    font-size: 20px;
}

.role-profile-npc-custom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 12px;
}

.role-profile-npc-custom-row[hidden] {
    display: none !important;
}

.role-profile-npc-generator-note {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #EBEBE6;
    border-radius: 4px;
    background: #F4F4F0;
    color: #555555;
    font-size: 12px;
    line-height: 1.6;
}

.role-profile-npc-generator-submit {
    width: 100%;
    min-height: 42px;
    border: 1px solid #1A1A1A;
    border-radius: 4px;
    background: #1A1A1A;
    color: #F9F9F6;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.role-profile-npc-generator-submit:disabled,
.role-profile-npc-generator-modal.is-loading button,
.role-profile-npc-generator-modal.is-loading input {
    cursor: wait;
    opacity: 0.64;
}

.role-profile-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 18px 24px calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(249, 249, 246, 0) 0%, #F9F9F6 28%, #F9F9F6 100%);
}

.role-profile-footer-btn {
    height: 46px;
    border-radius: 4px;
    border: 1px solid #1A1A1A;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.role-profile-footer-btn-secondary {
    background: transparent;
    color: #1A1A1A;
}

.role-profile-footer-btn-primary {
    background: #1A1A1A;
    color: #F9F9F6;
}

.role-profile-footer-btn:active {
    transform: translateY(1px);
}

@media (max-width: 360px) {
    .role-profile-tab-nav {
        gap: 18px;
        padding: 0 20px;
    }

    .role-profile-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .role-profile-contact-card {
        padding: 12px;
        gap: 12px;
    }

    .role-profile-contact-name-row {
        grid-template-columns: minmax(0, 1fr) 28px;
    }

    .role-profile-contact-relation {
        grid-column: 1 / -1;
    }

    .role-profile-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* === Memory Archive Redesign (Social Profile Style) === */
.memory-tab-item.active {
    color: #000 !important;
    font-weight: 500 !important;
    border-bottom: 2px solid #000 !important;
}

#memory-archive-modal {
    background: #fff !important;
    padding: 0 !important;
    align-items: flex-start !important;
    /* Reset existing modal styles if necessary */
    border-radius: 0 !important;
}

#memory-archive-text ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#memory-archive-text ul li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
}

#memory-archive-text ul li.memory-archive-entry {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* 聊天设置分组标题：仅用于分隔编辑页的设置类型，不改动设置项本身。 */
.chat-settings-section-heading {
    padding: 9px 16px 7px;
    background: rgba(247, 247, 249, 0.92);
    color: #8e8e93;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
}

/* 用户身份编辑页沿用角色资料的编辑节奏，仅作用于 iOS/全局用户资料弹层 */
#user-persona-modal.user-profile-modal {
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    background: #F9F9F6 !important;
    color: #1A1A1A;
}

#user-persona-modal.user-profile-portal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh;
    z-index: 20000 !important;
}

#user-persona-modal.user-profile-modal .user-profile-topbar {
    background: #F9F9F6;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
}

#user-persona-modal.user-profile-modal .role-profile-add {
    width: 44px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: transparent;
    color: #151515;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#user-persona-modal.user-profile-modal .role-profile-add:active {
    transform: scale(.9);
    opacity: .5;
}

#user-persona-modal.user-profile-modal .user-profile-content {
    padding: 20px 24px calc(132px + env(safe-area-inset-bottom, 0px));
    background: #F9F9F6;
}

#user-persona-modal.user-profile-modal .user-profile-content > div {
    border: 1px solid #EBEBE6 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.035) !important;
}

#user-persona-modal.user-profile-modal .user-profile-content > div:first-child {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#user-persona-modal.user-profile-modal .modal-fixed-row {
    border-color: #EBEBE6 !important;
}

#user-persona-modal.user-profile-modal .modal-fixed-input,
#user-persona-modal.user-profile-modal .modal-fixed-textarea {
    color: #1A1A1A !important;
}

#user-persona-modal.user-profile-modal .modal-fixed-textarea:focus,
#user-persona-modal.user-profile-modal .modal-fixed-input:focus {
    outline: none;
}

#user-persona-modal.user-profile-modal > .absolute.bottom-0 {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 30 !important;
    box-sizing: border-box;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, #F9F9F6 72%, rgba(249,249,246,0));
}

/* 用户资料：Soft Monochrome Editorial UI */
#user-persona-modal.user-profile-modal {
    --user-profile-bg: #F6F6F3;
    --user-profile-surface: #FFFFFF;
    --user-profile-soft: #EFEFED;
    --user-profile-text: #151515;
    --user-profile-muted: #747470;
    --user-profile-border: rgba(17, 17, 17, 0.065);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background: var(--user-profile-bg) !important;
}

#user-persona-modal.user-profile-modal .user-profile-topbar {
    background: rgba(246, 246, 243, 0.96);
    border-bottom: 1px solid var(--user-profile-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#user-persona-modal.user-profile-modal .user-profile-content {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

#user-persona-modal.user-profile-modal .user-profile-content > div:first-child > .relative > div:first-child {
    border: 0 !important;
    background: #E7E7E4 !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.055);
}

#user-persona-modal.user-profile-modal .user-profile-content > div:first-child > p {
    color: var(--user-profile-muted) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em;
}

#user-persona-modal.user-profile-modal .user-profile-content > div:not(:first-child),
#user-persona-modal.user-profile-modal .user-profile-binding-card {
    background: var(--user-profile-surface) !important;
    border: 1px solid var(--user-profile-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03) !important;
}

#user-persona-modal.user-profile-modal .user-profile-binding-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(124px, 42%);
    gap: 14px;
    align-items: center;
    padding: 18px;
    margin: 0 0 18px;
}

.user-profile-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #AAA9A5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.user-profile-binding-title {
    color: #151515;
    font-size: 16px;
    font-weight: 620;
}

.user-profile-binding-desc {
    margin: 5px 0 0;
    color: #747470;
    font-size: 11px;
    line-height: 1.5;
}

.user-profile-binding-control {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: 16px;
    background: #EFEFED;
    color: #151515;
    font-size: 13px;
    font-weight: 560;
    text-align: left;
}

.user-profile-binding-control span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-profile-binding-control i {
    flex: 0 0 auto;
    color: #747470;
    font-size: 18px;
    transition: transform 160ms ease;
}

.user-profile-binding-control[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.user-profile-binding-options {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 210px;
    padding: 5px 2px 1px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.user-profile-binding-options::-webkit-scrollbar {
    display: none;
}

.user-profile-binding-option {
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 12px;
    background: #F7F7F4;
    color: #5f5f5b;
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.user-profile-binding-option.is-selected {
    border-color: rgba(17, 17, 17, 0.34);
    background: #FFFFFF;
    color: #171717;
}

.user-profile-binding-option:active {
    transform: scale(.98);
}

.user-profile-binding-option img {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 50%;
    object-fit: cover;
    background: #e7e7e3;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.055);
}

.user-profile-binding-option span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10.5px;
    font-weight: 560;
}

.user-profile-binding-option i {
    flex: 0 0 auto;
    font-size: 14px;
    color: #171717;
    opacity: 0;
}

.user-profile-binding-option.is-selected i {
    opacity: 1;
}

#user-persona-modal.user-profile-modal .modal-fixed-row {
    min-height: 58px;
    padding: 10px 16px !important;
}

#user-persona-modal.user-profile-modal .modal-fixed-row > label {
    color: var(--user-profile-text) !important;
    font-size: 13px !important;
    font-weight: 580 !important;
}

#user-persona-modal.user-profile-modal .modal-fixed-input,
#user-persona-modal.user-profile-modal .modal-fixed-select {
    font-size: 13px !important;
}

#user-persona-modal.user-profile-modal button.rounded-full.bg-black,
#user-persona-modal.user-profile-modal > .absolute.bottom-0 > button {
    border-radius: 999px !important;
    box-shadow: none !important;
}

#user-persona-modal.user-profile-modal #user-persona-preset-list button {
    border: 1px solid rgba(17, 17, 17, 0.065) !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.035) !important;
}

#user-persona-modal.user-profile-modal #user-persona-preset-sheet > div:last-child {
    background: #F6F6F3 !important;
}

@media (max-width: 370px) {
    #user-persona-modal.user-profile-modal .user-profile-binding-card {
        grid-template-columns: 1fr;
    }

    .user-profile-binding-options {
        grid-template-columns: 1fr;
    }
}


#memory-archive-text ul li.memory-archive-entry.is-newly-added {
    margin: 2px 0 6px;
    padding: 12px 14px;
    border: 1px solid rgba(214, 158, 46, 0.36);
    border-radius: 8px;
    background: #fff8df;
    box-shadow: 0 8px 24px rgba(214, 158, 46, 0.14);
    animation: memoryArchiveNewEntryPulse 1.4s ease-out 1;
}

@keyframes memoryArchiveNewEntryPulse {
    0% {
        background: #ffe8a8;
        box-shadow: 0 0 0 0 rgba(214, 158, 46, 0.32);
    }
    100% {
        background: #fff8df;
        box-shadow: 0 8px 24px rgba(214, 158, 46, 0.14);
    }
}

.memory-archive-entry-content {
    width: 100%;
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
}

.memory-archive-entry-date {
    width: 100%;
    text-align: right;
    font-size: 12px;
    color: #9ca3af;
}

.memory-archive-reorder-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 14px;
    border-bottom: 1px solid #eceff3;
    margin-bottom: 8px;
}

.memory-archive-reorder-hint {
    flex: 1;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

.memory-archive-reorder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.memory-archive-reorder-btn {
    border: 1px solid rgba(17, 24, 39, 0.14);
    background: #fff;
    color: #111827;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.memory-archive-reorder-btn.primary {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

#memory-archive-text ul li.memory-archive-entry.memory-archive-entry-reorder {
    border: 1px solid #edf0f4;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.04);
}

#memory-archive-text ul li.memory-archive-entry.memory-archive-entry-reorder.is-drop-target {
    border-color: rgba(17, 24, 39, 0.28);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.1);
}

#memory-archive-text ul li.memory-archive-entry.memory-archive-entry-reorder.is-dragging {
    opacity: 0.5;
}

#memory-archive-text ul li.memory-archive-entry.memory-archive-entry-reorder .memory-archive-entry-content {
    max-height: min(32dvh, 220px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
}

.memory-archive-entry-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    flex: 0 0 auto;
}

.memory-archive-entry-handle {
    margin-right: auto;
    font-size: 16px;
    line-height: 1;
    color: #9ca3af;
    cursor: grab;
    user-select: none;
}

.memory-archive-entry-action {
    border: none;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.memory-archive-entry-action.danger {
    background: #fff1f2;
    color: #be123c;
}
/* Ensure the list takes full width */
#memory-archive-text {
    width: 100%;
}

.offline-modal-card {
    width: 86%;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.offline-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}
.offline-modal-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}
.offline-modal-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
}
.offline-btn {
    border: none;
    border-radius: 12px;
    padding: 10px 0;
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.offline-btn.secondary {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}
.offline-btn.primary {
    background: #000;
    color: #fff;
}
.offline-btn.primary.full {
    width: 100%;
    margin-top: 10px;
}

.offline-archive-card {
    width: 92%;
    max-width: 520px;
    max-height: 72vh;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}
.offline-archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.offline-archive-title {
    font-size: 16px;
    font-weight: 800;
    color: #111;
}
.offline-archive-close {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.offline-archive-list {
    overflow-y: auto;
    padding: 8px 10px 12px 10px;
}
.offline-archive-item {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 14px;
    padding: 12px;
    margin: 8px 0;
    cursor: pointer;
}
.offline-archive-item:active {
    transform: scale(0.99);
}
.offline-archive-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}
.offline-archive-summary {
    font-size: 14px;
    color: #111;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.offline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10050;
    background: #fbfbfc;
    display: flex;
    flex-direction: column;
    --offline-reader-font-size: 18px;
    --offline-reader-text-color: #141414;
    --offline-reader-muted-color: #666;
    --offline-reader-surface: rgba(255, 255, 255, 0.78);
    --offline-reader-border: rgba(0, 0, 0, 0.08);
    --offline-reader-shadow: 0 12px 34px rgba(16, 18, 27, 0.08);
    --offline-reader-bg: linear-gradient(180deg, #f8f8fb 0%, #f3f4f6 100%);
}
.offline-topbar {
    height: 56px;
    padding-top: max(20px, env(safe-area-inset-top));
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: content-box;
    flex-shrink: 0;
    z-index: 30;
}
.offline-topbar-title {
    font-size: 16px;
    font-weight: 900;
    color: #111;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    align-self: center;
}
.offline-topbar-btn {
    border: none;
    background: rgba(0, 0, 0, 0.055);
    color: #111;
    border-radius: 14px;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.offline-topbar-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.offline-topbar-btn:active {
    transform: scale(0.96);
    background: rgba(0, 0, 0, 0.1);
}
.offline-topbar-btn.secondary {
    justify-self: start;
}
.offline-topbar-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.offline-topbar-actions .offline-topbar-btn {
    justify-self: end;
}
.offline-body {
    flex: 1;
    background: var(--offline-reader-bg);
    overflow-y: auto;
    padding: 18px 16px 0 16px;
    box-sizing: border-box;
}
.offline-overlay[data-offline-bg="custom"] .offline-body {
    background: transparent;
}
.offline-novel-stream {
    max-width: 820px;
    margin: 0 auto;
}
.offline-novel-entry {
    margin: 14px 0 22px 0;
    padding: 18px 18px 14px;
    border-radius: 20px;
    background: var(--offline-reader-surface);
    border: 1px solid var(--offline-reader-border);
    box-shadow: var(--offline-reader-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.offline-novel-entry:last-child {
    margin-bottom: 0;
}
.offline-ai-card {
    position: relative;
}
.offline-user-card {
    max-width: 820px;
    margin-left: auto;
}
.offline-user-card-head {
    justify-content: flex-end;
    text-align: right;
}
.offline-user-card-head-text {
    text-align: right;
}
.offline-user-card .offline-novel-paragraphs p {
    font-family: inherit;
    font-size: 15px;
    line-height: 1.72;
}
.offline-user-card .offline-novel-head {
    margin-bottom: 8px;
}
.offline-para-comment-trigger {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0.92;
    transition: opacity 0.2s;
}
.offline-para-comment-trigger:hover {
    opacity: 1;
}
.offline-para-comment-line {
    flex: 1 1 auto;
    border-bottom: 1px dashed var(--offline-reader-border);
    height: 1px;
}
.offline-para-comment-badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--offline-reader-muted-color);
    border: 1px solid var(--offline-reader-border);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.offline-overlay[data-offline-color="dark-night"] .offline-para-comment-badge,
.offline-overlay[data-offline-color="dark-ink"] .offline-para-comment-badge {
    background: rgba(0, 0, 0, 0.28);
}
.offline-novel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--offline-reader-muted-color);
    letter-spacing: 0.2px;
    margin-bottom: 10px;
}
.offline-novel-head-text {
    flex: 1 1 auto;
    min-width: 0;
}
.offline-novel-edit-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #4f678f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.offline-novel-edit-btn:hover {
    transform: translateY(-1px);
    background: rgba(238, 245, 255, 0.98);
    border-color: rgba(79, 103, 143, 0.22);
}
.offline-novel-edit-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.offline-novel-paragraphs p {
    margin: 0 0 22px 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
    font-size: var(--offline-reader-font-size);
    line-height: 1.92;
    color: var(--offline-reader-text-color);
    letter-spacing: 0.01em;
}
.offline-novel-paragraphs p:last-child {
    margin-bottom: 0;
}
.offline-novel-paragraph-block {
    margin-bottom: 24px;
    position: relative;
}
.offline-novel-paragraph-block:last-child {
    margin-bottom: 0;
}
.offline-novel-thought {
    font-style: italic;
    font-weight: 800;
}
.offline-novel-dialogue {
    border-bottom: 1px dashed currentColor;
    padding-bottom: 0.08em;
}
.offline-user-entry {
    margin: 10px 0 18px 0;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    line-height: 1.6;
    color: #222;
    padding: 0 4px;
}
.offline-user-entry .offline-user-label {
    font-weight: 900;
    margin-right: 6px;
}

.offline-typing {
    max-width: 820px;
    margin: 12px auto 22px auto;
    display: flex;
    justify-content: flex-start;
}

.offline-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #444;
}

.offline-typing-text {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
    font-size: 14px;
    letter-spacing: 0.2px;
}

.offline-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transform: translateY(1px);
}

.offline-typing-dots i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    display: inline-block;
    animation: offlineTypingPulse 1.15s ease-in-out infinite;
}

.offline-typing-dots i:nth-child(2) {
    animation-delay: 0.16s;
}

.offline-typing-dots i:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes offlineTypingPulse {
    0% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-3px); opacity: 0.85; }
    80% { transform: translateY(0); opacity: 0.35; }
    100% { transform: translateY(0); opacity: 0.35; }
}

.offline-inputbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 12px 12px calc(18px + var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px))) 12px;
    box-sizing: border-box;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 40;
}
.offline-memory-preview {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.offline-memory-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.offline-memory-preview-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}
.offline-memory-preview-count {
    font-size: 11px;
    color: #666;
}
.offline-memory-preview-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.offline-memory-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #333;
}
.offline-memory-preview-item-label {
    flex: 0 0 auto;
    min-width: 38px;
    color: #666;
    font-weight: 700;
}
.offline-memory-preview-item-text {
    flex: 1 1 auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.offline-comment-sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.16);
    align-items: flex-end;
    justify-content: center;
    z-index: 90 !important;
}
.offline-comment-sheet {
    width: 100%;
    max-height: 36%;
    min-height: 30%;
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.offline-comment-sheet-handle-wrap {
    padding: 10px 18px 0;
    display: flex;
    justify-content: center;
}
.offline-comment-sheet-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
}
.offline-comment-sheet-header {
    padding: 12px 18px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.offline-comment-sheet-heading {
    min-width: 0;
    flex: 1 1 auto;
}
.offline-comment-sheet-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}
.offline-comment-sheet-quote {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.offline-comment-sheet-close {
    border: none;
    background: transparent;
    color: #777;
    font-size: 22px;
    line-height: 1;
    padding: 2px 0 0;
    cursor: pointer;
}
.offline-comment-sheet-content {
    padding: 0 18px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.offline-input {
    flex: 1;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    background: rgba(0, 0, 0, 0.02);
}
.offline-send {
    border: none;
    background: #000;
    color: #fff;
    border-radius: 18px;
    min-width: 76px;
    min-height: 46px;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
}
.offline-rewind {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.98);
    color: #111;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.offline-rewind-icon {
    width: 22px;
    height: 22px;
    display: block;
}
.offline-send:disabled {
    opacity: 0.5;
    cursor: default;
}
.offline-rewind:disabled {
    opacity: 0.42;
    cursor: default;
}
.offline-hydrate-warning {
    max-width: 820px;
    margin: 28px auto;
    padding: 16px 18px;
    border: 1px solid rgba(180, 120, 40, 0.24);
    background: rgba(255, 244, 224, 0.92);
    color: #7a4b12;
    border-radius: 14px;
    line-height: 1.75;
    font-size: 14px;
}
.offline-error-card {
    border: 1px solid rgba(255, 120, 120, 0.22);
    background: linear-gradient(180deg, rgba(255, 247, 247, 0.98), rgba(255, 241, 241, 0.98));
}
.offline-error-card-content {
    padding: 2px 0 0;
}
.offline-error-card-title {
    margin-bottom: 8px;
    color: #8f1f1f;
    font-size: 15px;
    font-weight: 800;
}
.offline-error-card-desc {
    color: #7d5c5c;
    font-size: 13px;
    line-height: 1.8;
}
.offline-error-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.offline-error-card-btn {
    height: 38px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.offline-error-card-btn-primary {
    min-width: 112px;
    border: none;
    background: #111;
    color: #fff;
}
.offline-error-card-btn-secondary {
    min-width: 88px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #444;
}

.offline-dialog-mask {
    position: absolute;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 12, 18, 0.26);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.offline-dialog-card {
    width: min(100%, 360px);
    padding: 22px 18px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.18);
}

.offline-dialog-title {
    font-size: 18px;
    font-weight: 900;
    color: #111;
    line-height: 1.3;
}

.offline-dialog-desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: #5b6270;
}

.offline-dialog-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

.offline-dialog-btn {
    flex: 1;
    min-height: 42px;
    border: none;
    border-radius: 14px;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.offline-dialog-btn-secondary {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}

.offline-setup-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    padding-bottom: calc(14px + var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px)));
    box-sizing: border-box;
    z-index: 80;
}
.offline-setup-sheet {
    width: 100%;
    max-width: 520px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-sizing: border-box;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
    max-height: min(78vh, 760px);
    display: flex;
    flex-direction: column;
}
.offline-setup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.offline-setup-title {
    font-size: 16px;
    font-weight: 900;
    color: #111;
}
.offline-setup-subtitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #6a6a72;
}
.offline-setup-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #111;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.offline-setup-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.offline-form-row {
    margin: 10px 0;
}
.offline-form-label {
    font-size: 13px;
    color: #444;
    font-weight: 800;
    margin-bottom: 8px;
}
.offline-select, .offline-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.02);
    outline: none;
}
.offline-textarea {
    resize: none;
    line-height: 1.6;
}
.offline-range-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.offline-range-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #666;
}
.offline-radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.offline-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.04);
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: #111;
}
.offline-radio input {
    transform: translateY(1px);
}
.offline-reader-section {
    margin-top: 16px;
}
.offline-reader-label {
    font-size: 13px;
    color: #222;
    font-weight: 900;
    margin-bottom: 10px;
}
.offline-style-preset-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 -2px;
    padding: 7px 2px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.offline-style-preset-row::-webkit-scrollbar {
    display: none;
}
.offline-style-preset {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border: 1.5px solid rgba(17, 24, 39, 0.11);
    border-radius: 50%;
    padding: 0;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), rgba(244, 245, 247, 0.96) 58%, rgba(232, 234, 238, 0.94));
    color: #202124;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 20px rgba(24, 28, 36, 0.07);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.offline-style-preset:active {
    transform: scale(0.96);
}
.offline-style-preset:focus-visible {
    outline: 3px solid rgba(17, 24, 39, 0.2);
    outline-offset: 3px;
}
.offline-style-preset-label {
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
}
.offline-style-preset-water {
    color: #536f82;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(216, 235, 247, 0.18)),
        url('../assets/changxushi.jpg') center 56% / cover no-repeat;
    border-color: rgba(93, 126, 148, 0.24);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.96);
}
.offline-style-preset-note {
    color: #625953;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(224, 224, 224, 0.18)),
        url('../assets/changxushi1.jpg') center / cover no-repeat;
    border-color: rgba(113, 99, 89, 0.32);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
}
.offline-style-preset-comic {
    color: #555555;
    background:
        linear-gradient(152deg, transparent 0 20%, rgba(255, 255, 255, 0.86) 21% 75%, transparent 76%),
        linear-gradient(140deg, #eeeeee, #bdbdbd);
    border-color: rgba(70, 70, 70, 0.28);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}
.offline-style-preset.is-selected {
    border-color: #111;
    background:
        radial-gradient(circle at 35% 28%, #fff, #f2f3f5 58%, #e0e3e7);
    box-shadow:
        0 0 0 4px rgba(17, 24, 39, 0.08),
        0 12px 25px rgba(17, 24, 39, 0.13);
    transform: translateY(-2px);
}
.offline-style-preset-water.is-selected {
    color: #3d6178;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(202, 229, 246, 0.12)),
        url('../assets/changxushi.jpg') center 56% / cover no-repeat;
    border-color: #64869d;
}
.offline-style-preset-note.is-selected {
    color: #514943;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(215, 215, 215, 0.1)),
        url('../assets/changxushi1.jpg') center / cover no-repeat;
    border-color: #8e7d72;
}
.offline-style-preset-comic.is-selected {
    color: #3f3f3f;
    background:
        linear-gradient(152deg, transparent 0 20%, rgba(255, 255, 255, 0.9) 21% 75%, transparent 76%),
        linear-gradient(140deg, #f2f2f2, #b8b8b8);
    border-color: #626262;
}
.offline-fontsize-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}
.offline-step-btn {
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 18px;
    padding: 14px 0;
    font-size: 24px;
    font-weight: 500;
    color: #111;
    cursor: pointer;
}
.offline-fontsize-value {
    min-width: 44px;
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    color: #111;
}
.offline-swatch-row,
.offline-background-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.offline-swatch {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}
.offline-swatch.soft-sepia { background: #ece4c7; }
.offline-swatch.soft-mint { background: #dce8c6; }
.offline-swatch.soft-blue { background: #d7e2ef; }
.offline-swatch.dark-night { background: #121212; }
.offline-swatch.dark-ink { background: #202020; }
.offline-swatch.is-selected {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    border-color: #111;
}
.offline-bg-card {
    min-width: 82px;
    height: 50px;
    border-radius: 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    cursor: pointer;
    color: #111;
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
}
.offline-bg-card.bg-paper {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(245,242,234,0.95)),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 1px, transparent 1px, transparent 9px);
}
.offline-bg-card.bg-mist {
    background: linear-gradient(135deg, #f8fafc, #eef2f7);
}
.offline-bg-card.bg-moon {
    background: linear-gradient(135deg, #f4ede0, #efe6d5 55%, #ddd7cb);
}
.offline-bg-card.bg-night {
    background: linear-gradient(135deg, #20242e, #12151b);
    color: #fff;
}
.offline-bg-card.is-selected {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.offline-segment-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.045);
    border-radius: 999px;
    padding: 4px;
}
.offline-segment-btn {
    border: none;
    background: transparent;
    color: #111;
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.offline-segment-btn.is-selected {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.offline-comment-persona-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.65;
    color: #6d6d74;
}
.offline-comment-persona-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.offline-comment-persona-list.is-disabled {
    opacity: 0.52;
}
.offline-comment-persona-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
}
.offline-comment-persona-title,
.offline-comment-persona-prompt {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    color: #1c1c1f;
    outline: none;
}
.offline-comment-persona-title {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 800;
}
.offline-comment-persona-prompt {
    margin-top: 8px;
    min-height: 82px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
}
.offline-summary-switch-wrap {
    margin-top: 2px;
}
.chat-summary-config-box {
    flex-direction: column;
    gap: 10px;
}
.chat-summary-frequency-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.chat-summary-frequency-input {
    width: 72px;
    min-width: 72px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: 0;
    padding: 5px 2px 6px;
    background: transparent;
    color: #111;
    font-size: 15px;
    text-align: right;
    outline: none;
}
.chat-summary-frequency-input:focus {
    border-bottom-color: rgba(0, 0, 0, 0.72);
}
.manual-memory-summary-mask {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.42);
}
.manual-memory-summary-card {
    width: min(360px, 100%);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
    padding: 18px;
}
.manual-memory-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.manual-memory-summary-title {
    font-size: 18px;
    font-weight: 900;
    color: #111;
}
.manual-memory-summary-subtitle {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
}
.manual-memory-summary-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    color: #333;
    font-size: 22px;
    line-height: 30px;
    cursor: pointer;
}
.manual-memory-summary-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.manual-memory-summary-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
}
.manual-memory-summary-field input {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    padding: 10px 11px;
    background: #fff;
    color: #111;
    font-size: 15px;
    outline: none;
}
.manual-memory-summary-field input:focus {
    border-color: rgba(0, 0, 0, 0.54);
}
.manual-memory-summary-status {
    min-height: 20px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
}
.manual-memory-summary-status.is-error {
    color: #c2410c;
}
.manual-memory-summary-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
.manual-memory-summary-btn {
    min-width: 86px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.manual-memory-summary-btn.primary {
    border-color: #111;
    background: #111;
    color: #fff;
}
.manual-memory-summary-btn.secondary {
    background: #fff;
    color: #333;
}
.manual-memory-summary-btn:disabled {
    opacity: 0.58;
    cursor: default;
}
.offline-summary-panel {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.8);
}
.offline-summary-setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.offline-summary-setting-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.offline-summary-setting-title {
    font-size: 14px;
    font-weight: 900;
    color: #111;
}
.offline-summary-setting-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
}
.offline-summary-frequency-row {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #444;
}
.offline-summary-frequency-row.is-disabled {
    opacity: 0.48;
}
.offline-summary-frequency-input {
    width: 72px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.03);
    outline: none;
}
.offline-summary-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#offline-memory-inject-modal {
    z-index: 10150 !important;
}
.offline-summary-range-hint,
.offline-summary-status {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
}
.offline-summary-range-hint {
    color: #6a6a72;
}
.offline-summary-status {
    color: #965d10;
    background: rgba(255, 241, 214, 0.9);
    border: 1px solid rgba(210, 161, 73, 0.24);
    border-radius: 12px;
    padding: 8px 10px;
}
.offline-summary-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.offline-summary-empty {
    padding: 14px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.03);
    font-size: 12px;
    line-height: 1.7;
    color: #767676;
}
.offline-summary-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
}
.offline-summary-card.is-injected {
    border-color: rgba(63, 138, 83, 0.28);
    box-shadow: inset 0 0 0 1px rgba(63, 138, 83, 0.12);
}
.offline-summary-card-header {
    width: 100%;
    border: none;
    background: transparent;
    padding: 14px 14px 12px;
    text-align: left;
    cursor: pointer;
}
.offline-summary-card-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.offline-summary-card-title {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
    color: #111;
}
.offline-summary-card-meta {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: #7a7a82;
}
.offline-summary-card-toggle {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    color: #666;
}
.offline-summary-card-preview {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.7;
    color: #555;
}
.offline-summary-card-body {
    padding: 0 14px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.offline-summary-items {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #222;
}
.offline-paragraph-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.42);
}
.offline-paragraph-editor-card {
    width: min(760px, calc(100vw - 36px));
    max-height: min(82vh, 900px);
    overflow: auto;
    border-radius: 24px;
    background: #fffdf9;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
    padding: 22px 20px 18px;
}
.offline-paragraph-editor-title {
    font-size: 20px;
    font-weight: 900;
    color: #222;
}
.offline-paragraph-editor-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.65;
    color: #6c6c73;
}
.offline-paragraph-editor-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.offline-paragraph-editor-item {
    border: 1px solid rgba(79, 103, 143, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(251, 249, 243, 0.96), rgba(246, 243, 236, 0.96));
    padding: 14px 14px 12px;
}
.offline-paragraph-editor-item-meta {
    font-size: 12px;
    font-weight: 800;
    color: #6a7282;
    margin-bottom: 8px;
}
.offline-paragraph-editor-item-text {
    font-size: 14px;
    line-height: 1.8;
    color: #26262b;
    white-space: pre-wrap;
    word-break: break-word;
}
.offline-paragraph-editor-item-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.offline-paragraph-editor-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.offline-paragraph-editor-btn.primary {
    background: #2f6fed;
    color: #fff;
}
.offline-paragraph-editor-btn.secondary {
    background: #eef1f5;
    color: #3b4350;
}
.offline-paragraph-editor-btn.danger {
    background: rgba(255, 59, 48, 0.12);
    color: #d93025;
}
.offline-paragraph-editor-footer {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.offline-user-message-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px 14px calc(18px + var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px)));
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.offline-user-message-editor-card {
    width: min(100%, 860px);
    height: min(82vh, 780px);
    max-height: calc(100vh - 36px - var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px)));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 72px rgba(15, 23, 42, 0.22);
    padding: 14px 16px 16px;
}
.offline-user-message-editor-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
    margin: 2px auto 12px;
}
.offline-user-message-editor-title {
    font-size: 18px;
    font-weight: 900;
    color: #111827;
    text-align: center;
}
.offline-user-message-editor-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
    text-align: center;
}
.offline-user-message-editor-input {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 14px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 18px;
    padding: 14px;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    font-size: 14px;
    line-height: 1.7;
    color: #111827;
    background: #f8fafc;
}
.offline-user-message-editor-input:focus {
    border-color: rgba(47, 111, 237, 0.55);
    background: #fff;
}
.offline-user-message-editor-tip {
    flex: 0 0 auto;
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
}
.offline-user-message-editor-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.offline-user-message-editor-btn {
    flex: 1;
    height: 44px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    font-weight: 700;
}
.offline-user-message-editor-btn-cancel {
    background: #e5e7eb;
    color: #374151;
}
.offline-user-message-editor-btn-save {
    background: #2f6fed;
    color: #fff;
}
.offline-summary-items li {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.7;
}
.offline-summary-memory {
    margin-top: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    padding: 10px 12px;
}
.offline-summary-memory-title {
    font-size: 12px;
    font-weight: 800;
    color: #444;
}
.offline-summary-memory-lines {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #555;
}

/* ---- Global Model Switcher ---- */
.model-switcher-root {
    position: fixed;
    top: calc(86px + env(safe-area-inset-top, 0px));
    right: 14px;
    width: 56px;
    height: 56px;
    z-index: 100120;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111827;
}
.model-switcher-ball {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 58% 42% 54% 46% / 48% 56% 44% 52%;
    background:
        radial-gradient(circle at 29% 23%, rgba(255, 255, 255, 0.72) 0 10%, rgba(255, 255, 255, 0.2) 12% 23%, transparent 25%),
        radial-gradient(circle at 69% 75%, rgba(147, 197, 253, 0.18), transparent 44%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(230, 244, 255, 0.2) 48%, rgba(255, 255, 255, 0.36));
    color: rgba(37, 99, 235, 0.68);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 9px 11px 18px rgba(255, 255, 255, 0.52),
        inset -9px -12px 18px rgba(148, 163, 184, 0.12),
        0 12px 26px rgba(15, 23, 42, 0.14),
        0 2px 8px rgba(255, 255, 255, 0.42);
    cursor: grab;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(14px) saturate(1.45);
    -webkit-backdrop-filter: blur(14px) saturate(1.45);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-radius 0.22s ease;
}
.model-switcher-ball::before {
    content: "";
    position: absolute;
    inset: 5px 8px 13px 7px;
    border-radius: 62% 38% 58% 42% / 52% 58% 42% 48%;
    background: linear-gradient(138deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.02) 58%);
    opacity: 0.72;
    pointer-events: none;
}
.model-switcher-ball::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 11px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(147, 197, 253, 0.22);
    box-shadow: -20px -21px 0 -7px rgba(255, 255, 255, 0.58);
    pointer-events: none;
}
.model-switcher-liquid-core {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 62%);
    filter: blur(0.2px);
    pointer-events: none;
}
.model-switcher-liquid-spark {
    position: absolute;
    top: 12px;
    left: 15px;
    width: 10px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.56);
    transform: rotate(38deg);
    filter: blur(0.1px);
    pointer-events: none;
}
.model-switcher-ball:active {
    cursor: grabbing;
    transform: scale(0.96);
    border-radius: 48% 52% 44% 56% / 56% 43% 57% 44%;
}
.model-switcher-star-icon {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    color: rgba(37, 99, 235, 0.64);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.68));
    transform: rotate(-3deg);
    pointer-events: none;
}
.model-switcher-star-icon path:nth-child(2) {
    stroke-width: 1.45;
    opacity: 0.78;
}
.model-switcher-root.is-open .model-switcher-ball {
    box-shadow:
        inset 9px 11px 18px rgba(255, 255, 255, 0.56),
        inset -9px -12px 18px rgba(96, 165, 250, 0.14),
        0 0 0 7px rgba(219, 234, 254, 0.28),
        0 16px 34px rgba(37, 99, 235, 0.18);
}
.model-switcher-panel {
    display: none;
    position: absolute;
    top: 62px;
    right: 0;
    width: min(326px, calc(100vw - 28px));
    max-height: calc(100vh - 170px);
    overflow: auto;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px;
}
.model-switcher-root[data-panel-x="left"] .model-switcher-panel {
    left: var(--model-switcher-panel-offset-x, 0px);
    right: auto;
}
.model-switcher-root[data-panel-x="right"] .model-switcher-panel {
    left: auto;
    right: 0;
}
.model-switcher-root[data-panel-y="up"] .model-switcher-panel {
    top: auto;
    bottom: 66px;
}
.model-switcher-root.is-open .model-switcher-panel {
    display: block;
}
.model-switcher-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 8px;
    background: #eef2f7;
}
.model-switcher-tab {
    height: 34px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.model-switcher-tab.is-active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.1);
}
.model-switcher-body {
    padding-top: 10px;
}
.model-switcher-current {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 8px;
    background: #f8fafc;
}
.model-switcher-current span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}
.model-switcher-current strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.model-switcher-current em {
    overflow: hidden;
    color: #2563eb;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.model-switcher-current-role {
    margin-top: 10px;
}
.model-switcher-label {
    display: block;
    margin: 12px 2px 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.model-switcher-select-wrap {
    position: relative;
    min-width: 0;
}
.model-switcher-select-wrap i {
    position: absolute;
    top: 50%;
    right: 10px;
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
    transform: translateY(-50%);
}
.model-switcher-select {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    font-weight: 650;
    outline: none;
    padding: 0 34px 0 11px;
    appearance: none;
    -webkit-appearance: none;
}
.model-switcher-select:focus {
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.model-switcher-model-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
}
.model-switcher-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
}
.model-switcher-icon-btn i {
    font-size: 20px;
    line-height: 1;
}
.model-switcher-status {
    margin-top: 10px;
    border-radius: 8px;
    padding: 8px 9px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}
.model-switcher-status-success {
    background: #ecfdf5;
    color: #047857;
}
.model-switcher-status-danger {
    background: #fef2f2;
    color: #b91c1c;
}
.model-switcher-status-warning {
    background: #fffbeb;
    color: #b45309;
}
.model-switcher-status-loading {
    background: #eff6ff;
    color: #1d4ed8;
}
.model-switcher-empty {
    min-height: 116px;
    display: grid;
    place-items: center;
    gap: 8px;
    color: #64748b;
    text-align: center;
    font-size: 13px;
}
.model-switcher-empty i {
    font-size: 28px;
    color: #94a3b8;
}

@media (max-width: 560px) {
    .model-switcher-root {
        top: calc(74px + env(safe-area-inset-top, 0px));
        right: 12px;
        width: 52px;
        height: 52px;
    }
    .model-switcher-ball {
        width: 52px;
        height: 52px;
    }
    .model-switcher-panel {
        top: 58px;
        width: min(318px, calc(100vw - 24px));
        max-height: calc(100vh - 146px);
    }
    .model-switcher-root[data-panel-y="up"] .model-switcher-panel {
        bottom: 62px;
    }
}
.offline-summary-card-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.offline-summary-action-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.offline-summary-action-btn.primary {
    background: #111;
    color: #fff;
}
.offline-summary-action-btn.secondary {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}
.offline-summary-action-btn:disabled {
    opacity: 0.48;
    cursor: default;
}
.offline-overlay[data-offline-color="soft-paper"] {
    --offline-reader-text-color: #171717;
    --offline-reader-muted-color: #666;
    --offline-reader-surface: rgba(255, 255, 255, var(--offline-card-opacity, 0.76));
    --offline-reader-border: rgba(0, 0, 0, 0.08);
}
.offline-overlay[data-offline-color="soft-sepia"] {
    --offline-reader-text-color: #3e3328;
    --offline-reader-muted-color: #756557;
    --offline-reader-surface: rgba(255, 248, 235, var(--offline-card-opacity, 0.82));
    --offline-reader-border: rgba(107, 84, 61, 0.12);
}
.offline-overlay[data-offline-color="soft-mint"] {
    --offline-reader-text-color: #223126;
    --offline-reader-muted-color: #596a5d;
    --offline-reader-surface: rgba(241, 247, 236, var(--offline-card-opacity, 0.84));
    --offline-reader-border: rgba(94, 120, 96, 0.12);
}
.offline-overlay[data-offline-color="soft-blue"] {
    --offline-reader-text-color: #23313e;
    --offline-reader-muted-color: #5a6a79;
    --offline-reader-surface: rgba(238, 244, 251, var(--offline-card-opacity, 0.84));
    --offline-reader-border: rgba(91, 116, 141, 0.12);
}
.offline-overlay[data-offline-color="dark-night"] {
    --offline-reader-text-color: #f2f2f2;
    --offline-reader-muted-color: rgba(255,255,255,0.62);
    --offline-reader-surface: rgba(18, 18, 18, var(--offline-card-opacity, 0.82));
    --offline-reader-border: rgba(255, 255, 255, 0.08);
    --offline-reader-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}
.offline-overlay[data-offline-color="dark-ink"] {
    --offline-reader-text-color: #f4f4f4;
    --offline-reader-muted-color: rgba(255,255,255,0.6);
    --offline-reader-surface: rgba(30, 30, 30, var(--offline-card-opacity, 0.84));
    --offline-reader-border: rgba(255, 255, 255, 0.07);
    --offline-reader-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.offline-overlay[data-offline-bg="plain"] {
    --offline-reader-bg: linear-gradient(180deg, #f8f8fb 0%, #f3f4f6 100%);
}
.offline-overlay[data-offline-bg="paper"] {
    --offline-reader-bg:
        linear-gradient(180deg, #faf7f1 0%, #f0ece3 100%),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.018), rgba(0,0,0,0.018) 1px, transparent 1px, transparent 12px);
}
.offline-overlay[data-offline-bg="mist"] {
    --offline-reader-bg: linear-gradient(180deg, #f7fafc 0%, #edf2f7 100%);
}
.offline-overlay[data-offline-bg="moon"] {
    --offline-reader-bg: linear-gradient(180deg, #f7f1e8 0%, #ebe2d1 100%);
}
.offline-overlay[data-offline-bg="night"] {
    --offline-reader-bg: linear-gradient(180deg, #16181f 0%, #0f1217 100%);
}
.offline-overlay[data-offline-bg="custom"] {
    background: var(--offline-custom-bg, #f8f8fb);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.offline-overlay[data-offline-bg="custom"]:not([data-offline-color="dark-night"]):not([data-offline-color="dark-ink"]):not([data-offline-color="soft-mint"]):not([data-offline-color="soft-blue"]):not([data-offline-color="soft-sepia"]) {
    --offline-reader-surface: rgba(255, 255, 255, var(--offline-card-opacity, 0.8));
    --offline-reader-text-color: #171717;
}
.offline-overlay[data-offline-bg="custom"][data-offline-color="soft-mint"] {
    --offline-reader-surface: rgba(241, 247, 236, var(--offline-card-opacity, 0.84));
    --offline-reader-text-color: #223126;
}
.offline-overlay[data-offline-bg="custom"][data-offline-color="soft-blue"] {
    --offline-reader-surface: rgba(238, 244, 251, var(--offline-card-opacity, 0.84));
    --offline-reader-text-color: #23313e;
}
.offline-overlay[data-offline-bg="custom"][data-offline-color="soft-sepia"] {
    --offline-reader-surface: rgba(255, 248, 235, var(--offline-card-opacity, 0.82));
    --offline-reader-text-color: #3e3328;
}
.offline-overlay[data-offline-bg="custom"][data-offline-color="dark-night"] {
    --offline-reader-surface: rgba(18, 18, 18, var(--offline-card-opacity, 0.82));
}
.offline-overlay[data-offline-bg="custom"][data-offline-color="dark-ink"] {
    --offline-reader-surface: rgba(30, 30, 30, var(--offline-card-opacity, 0.84));
}

.offline-overlay[data-offline-bg="custom"]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(var(--offline-custom-blur, 0px));
    -webkit-backdrop-filter: blur(var(--offline-custom-blur, 0px));
    z-index: 0;
    pointer-events: none;
}

.offline-overlay[data-offline-bg="custom"] .offline-novel-entry {
    background: var(--offline-reader-surface) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}
.offline-overlay[data-offline-page-turn="realistic"] .offline-novel-entry {
    box-shadow: 0 18px 38px rgba(10, 12, 18, 0.12);
    transform-origin: top center;
}
.offline-overlay[data-offline-page-turn="cover"] .offline-novel-entry {
    animation: offlineCoverIn 0.34s ease both;
}
.offline-overlay[data-offline-page-turn="slide"] .offline-novel-entry {
    animation: offlineSlideIn 0.28s ease both;
}
.offline-overlay[data-offline-page-turn="vertical"] .offline-novel-entry {
    animation: offlineVerticalIn 0.28s ease both;
}
.offline-overlay[data-offline-page-turn="none"] .offline-novel-entry {
    animation: none;
}
@keyframes offlineCoverIn {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes offlineSlideIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes offlineVerticalIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
    .offline-topbar {
        grid-template-columns: 44px 1fr auto;
    }
    .offline-body {
        padding: 14px 12px 0 12px;
    }
    .offline-range-grid {
        grid-template-columns: 1fr;
    }
    .offline-style-preset-row {
        gap: 16px;
    }
    .offline-setup-sheet {
        max-height: min(82vh, 760px);
    }
    .offline-novel-entry {
        padding: 16px 14px 12px;
        border-radius: 18px;
    }
    .offline-inputbar {
        gap: 10px;
        align-items: center;
    }
    .offline-send,
    .offline-rewind {
        min-width: 46px;
    }
}

/* =================================
   === Takeout Receipt Card ===
   ================================= */

.msg-bubble.takeout-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 230px; /* Reduced from 280px */
    min-width: 200px; /* Reduced from 240px */
}

.takeout-receipt-card {
    background-color: #fff;
    border-radius: 6px; /* Slightly smaller radius */
    padding: 12px; /* Reduced from 16px */
    color: #333;
    font-family: "Courier New", Courier, monospace;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Slightly smaller shadow */
    position: relative;
    overflow: hidden;
}

/* 顶部锯齿效果 */
.takeout-receipt-card::before,
.takeout-receipt-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px; /* Reduced from 6px */
    background-size: 8px 100%; /* Reduced from 12px */
}

.takeout-receipt-card::before {
    top: -2px; /* Adjusted */
    background-image: radial-gradient(circle at 4px 0, transparent 4px, #fff 5px); /* Adjusted */
}

.takeout-receipt-card::after {
    bottom: -2px; /* Adjusted */
    background-image: radial-gradient(circle at 4px 4px, transparent 4px, #fff 5px); /* Adjusted */
}

.takeout-receipt-header {
    text-align: center;
    margin-bottom: 8px; /* Reduced from 12px */
}

.takeout-receipt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* Reduced from 16px */
}

.takeout-order-number {
    font-size: 22px; /* Reduced from 28px */
    font-weight: bold;
    color: #000;
}

.takeout-platform {
    font-size: 10px; /* Reduced from 12px */
    color: #666;
}

.takeout-receipt-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6px; /* Reduced from 8px */
}

.takeout-receipt-logo i {
    font-size: 36px; /* Reduced from 48px */
    color: #000;
    margin-bottom: 2px; /* Reduced from 4px */
}

.takeout-shop-name {
    font-size: 13px; /* Reduced from 14px */
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.takeout-slogan {
    font-size: 11px; /* Reduced from 12px */
    color: #666;
    margin-bottom: 6px; /* Reduced from 8px */
}

.takeout-receipt-divider {
    border-top: 1px dashed #ccc;
    margin: 8px 0; /* Reduced from 12px 0 */
}

.takeout-items-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px; /* Reduced from 13px */
    color: #666;
    margin-bottom: 6px; /* Reduced from 8px */
    font-weight: bold;
    background-color: #f0f0f0;
    padding: 3px; /* Reduced from 4px */
}

.takeout-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px; /* Reduced from 13px */
    margin-bottom: 4px; /* Reduced from 6px */
    color: #333;
}

.takeout-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px; /* Reduced from 13px */
    color: #333;
}

.takeout-pay-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px; /* Reduced from 14px */
    font-weight: bold;
    color: #000;
}

.takeout-receipt-remark {
    font-size: 11px; /* Reduced from 12px */
    color: #666;
    margin-top: 6px; /* Reduced from 8px */
    word-break: break-word;
}

.takeout-pay-row.is-pending {
    color: #c46a00;
}

.composer-preview-card {
    margin-bottom: 14px;
}

.chat-commerce-composer {
    position: fixed;
    inset: 0;
    z-index: 18000;
    display: none;
}

.chat-commerce-composer.show {
    display: block;
}

.chat-commerce-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
}

.chat-commerce-sheet {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(100%, 430px);
    max-height: min(84vh, 760px);
    transform: translateX(-50%);
    background: #f5f5f5;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.chat-commerce-sheet-body {
    padding: 20px 18px 24px;
    overflow-y: auto;
    max-height: min(84vh, 760px);
}

.chat-commerce-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: #666;
    font-size: 16px;
    z-index: 2;
}

.chat-commerce-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}

.chat-commerce-subtitle {
    margin-top: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #7a7a7a;
}

.chat-commerce-preview {
    margin-bottom: 14px;
}

.chat-commerce-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.chat-commerce-label {
    font-size: 13px;
    color: #666;
}

.chat-commerce-input {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    padding: 14px 16px;
    font-size: 15px;
    color: #222;
    box-sizing: border-box;
}

.chat-commerce-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: #444;
    font-size: 14px;
    margin-bottom: 14px;
}

.chat-commerce-switch input {
    width: 18px;
    height: 18px;
    accent-color: #6c7278;
}

.chat-commerce-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.chat-commerce-btn {
    border: none;
    border-radius: 16px;
    padding: 14px 12px;
    font-size: 15px;
    font-weight: 600;
}

.chat-commerce-btn.primary {
    background: #07c160;
    color: #fff;
}

.chat-commerce-btn.secondary {
    background: #fff;
    color: #444;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.starry-bg {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.4) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 75% 85%, rgba(255,255,255,0.3) 1px, transparent 1px),
        radial-gradient(circle at 25% 90%, rgba(255,255,255,0.7) 1px, transparent 1px),
        linear-gradient(135deg, #6a6f75, #474b50);
}

.msg-bubble.gift-message-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 250px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.msg-bubble.gift-message-bubble:focus-visible {
    outline: 2px solid #151515;
    outline-offset: 3px;
}

.gift-bubble {
    width: 240px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.14);
}

.bubble-main {
    padding: 18px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.bubble-copy {
    min-width: 0;
}

.bubble-title {
    color: #e6d5b8;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.8px;
}

.gift-bubble-hint {
    margin-top: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
}

.bubble-footer {
    padding: 7px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gift-preview-bow {
    width: 54px;
    height: 38px;
    flex: 0 0 54px;
    margin-right: 4px;
    position: relative;
    display: block;
    background: transparent;
    color: #c9a15b;
    opacity: 0.98;
    filter: none;
    transform: translateY(-1px);
}

.gift-preview-bow::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 2px;
    width: 2px;
    height: 34px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.34;
}

.gift-preview-bow span {
    position: absolute;
    display: block;
    background: transparent;
    box-shadow: none;
    border: 2px solid currentColor;
    z-index: 1;
}

.gift-preview-bow span:nth-child(1) {
    left: 5px;
    top: 8px;
    width: 18px;
    height: 12px;
    border-radius: 999px 12px 12px 999px;
    transform: rotate(-14deg);
}

.gift-preview-bow span:nth-child(2) {
    right: 5px;
    top: 8px;
    width: 18px;
    height: 12px;
    border-radius: 12px 999px 999px 12px;
    transform: rotate(14deg);
}

.gift-preview-bow span:nth-child(3) {
    left: 23px;
    top: 13px;
    width: 8px;
    height: 11px;
    border: none;
    background: currentColor;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34);
}

.gift-preview-bow span:nth-child(4) {
    left: 16px;
    top: 18px;
    width: 2px;
    height: 14px;
    border: none;
    background: currentColor;
    border-radius: 999px;
    transform: rotate(24deg);
    transform-origin: top center;
}

.gift-preview-bow span:nth-child(5) {
    right: 16px;
    top: 18px;
    width: 2px;
    height: 14px;
    border: none;
    background: currentColor;
    border-radius: 999px;
    transform: rotate(-24deg);
    transform-origin: top center;
}

.gift-composer-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gift-composer-note {
    font-size: 12px;
    line-height: 1.5;
    color: #6f6f6f;
}

.gift-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 19000;
    background: rgba(0, 0, 0, 0.62);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.gift-modal-overlay.show {
    display: flex;
}

.gift-card-full {
    width: min(320px, 100%);
    height: 470px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 40px rgba(0,0,0,0.32);
}

.gift-modal-overlay.show .gift-card-full {
    transform: scale(1) translateY(0);
}

.card-header {
    position: absolute;
    top: 44px;
    width: 100%;
    text-align: center;
    color: #e6d5b8;
    font-size: 18px;
    letter-spacing: 1px;
    z-index: 10;
    padding: 0 18px;
    box-sizing: border-box;
}

.diagonal-ribbon {
    position: absolute;
    top: 64%;
    left: -20%;
    width: 140%;
    height: 8px;
    background-color: #e6d5b8;
    transform: translateY(-50%) rotate(-25deg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.open-btn-wrapper {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82px;
    height: 82px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.open-bg-layer1,
.open-bg-layer2 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.5s ease;
}

.open-bg-layer1 {
    transform: rotate(15deg);
    background: linear-gradient(135deg, #e6d5b8, #c4b59d);
}

.open-bg-layer2 {
    transform: rotate(60deg);
    background: linear-gradient(135deg, #f0dfbf, #d0c0a5);
}

.open-circle {
    position: absolute;
    width: 64px;
    height: 64px;
    background-color: #e6d5b8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3a3d42;
    font-size: 32px;
    font-family: "STKaiti", "KaiTi", serif;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 2px 5px rgba(0,0,0,0.1);
}

.gift-modal-overlay.is-opened .open-bg-layer1 {
    transform: rotate(195deg);
}

.gift-modal-overlay.is-opened .open-bg-layer2 {
    transform: rotate(240deg);
}

.gift-modal-overlay.is-opened .open-circle {
    transform: scale(0.92);
}

.gift-modal-overlay.is-opened .open-btn-wrapper {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    pointer-events: none;
}

.gift-modal-overlay.is-opened .gift-card-full {
    background: linear-gradient(180deg, #fffdf8 0%, #fff8ee 100%);
    border: 1px solid #e0d5c1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transform: scale(1.02) translateY(0);
}

.gift-reveal-content {
    position: absolute;
    inset: 15px;
    padding: 24px 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,248,240,0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    backdrop-filter: none;
    color: #3d3528;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 0.28s ease, transform 0.28s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.gift-modal-overlay.is-opened .gift-reveal-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.gift-reveal-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #e6d5b8;
    background: rgba(0, 0, 0, 0.18);
}

.gift-reveal-name {
    order: 2;
    margin-top: 14px;
    font-size: 24px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    text-align: center;
    padding-top: 15px;
    border-top: 1px dashed rgba(0,0,0,0.1);
}

.gift-reveal-price {
    order: 3;
    margin-top: 8px;
    font-size: 18px;
    color: #c43e1c;
    font-weight: 700;
    text-align: center;
}

.gift-reveal-note {
    order: 1;
    margin-top: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #4a4a4a;
    flex: 1;
    text-align: left;
    font-family: 'LXGW WenKai Lite', 'KaiTi', serif;
    background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(0,0,0,0.045) 28px);
    background-position: 0 6px;
    background-attachment: local;
    overflow-y: auto;
    padding-right: 4px;
}

.gift-pay-on-behalf-card {
    width: min(300px, 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 40px rgba(0,0,0,0.32);
    padding: 44px 24px 32px;
    text-align: center;
}

.gift-modal-overlay.show .gift-pay-on-behalf-card {
    transform: scale(1) translateY(0);
}

.gift-pay-header {
    color: #e6d5b8;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.gift-pay-name {
    font-size: 24px;
    font-weight: 700;
    color: #fffaf3;
    line-height: 1.3;
    margin-bottom: 8px;
}

.gift-pay-price {
    font-size: 18px;
    color: #f5e6cb;
    font-weight: 600;
    margin-bottom: 32px;
}

.gift-pay-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.gift-pay-btn {
    padding: 12px 24px;
    border-radius: 999px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.gift-pay-btn:hover {
    transform: scale(1.04);
}

.gift-pay-btn.accept {
    background: #e6d5b8;
    color: #3a3d42;
}

.gift-pay-btn.decline {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* =================================
   === 极简黑白消息流重构 ===
   ================================= */

#chat-room-layer {
    --chat-avatar-size: 38px;
    --chat-avatar-radius: 4px;
    --chat-bubble-radius: 4px;
    --chat-bubble-pad-y: 6px;
    --chat-bubble-line-height: 1.4;
}

#chat-room-layer .msg-row {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: calc(8px * var(--chat-font-scale, 1));
}

#chat-room-layer .msg-avatar-wrap {
    width: calc(var(--chat-avatar-size) * var(--chat-font-scale, 1));
    flex: 0 0 calc(var(--chat-avatar-size) * var(--chat-font-scale, 1));
    align-self: flex-start;
}

#chat-room-layer .msg-avatar {
    width: calc(var(--chat-avatar-size) * var(--chat-font-scale, 1));
    height: calc(var(--chat-avatar-size) * var(--chat-font-scale, 1));
    border-radius: var(--chat-avatar-radius);
    background: #d9d9d9;
    border: none;
    overflow: hidden;
    box-shadow: none;
}

#chat-room-layer .msg-avatar img {
    border-radius: var(--chat-avatar-radius);
}

#chat-room-layer .msg-row.msg-plain-bubble .msg-content-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: min(64%, calc(100% - 47px));
    overflow: visible;
}

#chat-room-layer .msg-row.msg-plain-bubble.msg-left .msg-content-wrapper {
    align-items: flex-start;
}

#chat-room-layer .msg-row.msg-plain-bubble.msg-right .msg-content-wrapper {
    align-items: flex-end;
}

#chat-room-layer .msg-row.msg-plain-bubble .msg-content-wrapper .msg-bubble {
    max-width: 100%;
    border-radius: calc(var(--chat-bubble-radius) * var(--chat-font-scale, 1));
    padding: calc(var(--chat-bubble-pad-y) * var(--chat-font-scale, 1)) calc(11px * var(--chat-font-scale, 1));
    line-height: var(--chat-bubble-line-height);
    font-size: calc(13px * var(--chat-font-scale, 1));
    min-height: calc((var(--chat-avatar-size) - 4px) * var(--chat-font-scale, 1));
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: visible;
}

:where(#chat-room-layer .msg-row.msg-plain-bubble).msg-left .msg-bubble {
    background: var(--chat-ai-bubble-bg, #ffffff);
    color: var(--chat-ai-bubble-color, #1a1a1a);
    border: var(--chat-ai-bubble-border, none);
    box-shadow: var(--chat-ai-bubble-shadow, none);
    backdrop-filter: var(--chat-ai-bubble-backdrop, none);
    -webkit-backdrop-filter: var(--chat-ai-bubble-backdrop, none);
}

:where(#chat-room-layer .msg-row.msg-plain-bubble).msg-right .msg-bubble {
    background: var(--chat-user-bubble-bg, #333333);
    color: var(--chat-user-bubble-color, #ffffff);
    border: var(--chat-user-bubble-border, none);
    box-shadow: var(--chat-user-bubble-shadow, none);
    backdrop-filter: var(--chat-user-bubble-backdrop, none);
    -webkit-backdrop-filter: var(--chat-user-bubble-backdrop, none);
}

:where(#chat-room-layer .msg-row.msg-plain-bubble).msg-left .msg-bubble::before,
:where(#chat-room-layer .msg-row.msg-plain-bubble).msg-right .msg-bubble::after {
    display: none;
    content: none;
}

:where(#chat-room-layer[data-chat-tail="1"] .msg-row.msg-plain-bubble).msg-left .msg-bubble::before,
:where(#chat-room-layer[data-chat-tail="1"] .msg-row.msg-plain-bubble).msg-right .msg-bubble::after {
    content: "";
    display: block;
    position: absolute;
    top: var(--chat-tail-top, calc(14px * var(--chat-font-scale, 1)));
    width: var(--chat-tail-width, calc(6px * var(--chat-font-scale, 1)));
    height: var(--chat-tail-width, calc(6px * var(--chat-font-scale, 1)));
    transform: rotate(45deg);
    z-index: 1;
}

:where(#chat-room-layer[data-chat-tail="1"] .msg-row.msg-plain-bubble).msg-left .msg-bubble::before {
    left: calc(var(--chat-tail-width, calc(6px * var(--chat-font-scale, 1))) / -2);
    background: var(--chat-ai-tail-fill, var(--chat-ai-bubble-bg, #ffffff));
    border-left: var(--chat-ai-bubble-border, none);
    border-bottom: var(--chat-ai-bubble-border, none);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

:where(#chat-room-layer[data-chat-tail="1"] .msg-row.msg-plain-bubble).msg-right .msg-bubble::after {
    right: calc(var(--chat-tail-width, calc(6px * var(--chat-font-scale, 1))) / -2);
    background: var(--chat-user-tail-fill, var(--chat-user-bubble-bg, #333333));
    border-right: var(--chat-user-bubble-border, none);
    border-top: var(--chat-user-bubble-border, none);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

#chat-room-layer[data-chat-avatar="0"] .msg-avatar,
#chat-room-layer[data-chat-avatar="0"] .msg-avatar-wrap {
    display: none;
}

#chat-room-layer[data-chat-avatar="0"] .msg-row.msg-plain-bubble .msg-content-wrapper {
    max-width: min(72%, 100%);
}

#chat-room-layer[data-chat-avatar="0"] .msg-row.msg-plain-bubble.msg-left .msg-content-wrapper {
    margin-left: 0;
}

#chat-room-layer .msg-row.msg-plain-bubble .msg-bubble-time {
    color: rgba(255, 255, 255, 0.4) !important;
}

#chat-room-layer .msg-row.msg-plain-bubble.msg-left .msg-bubble-time {
    color: rgba(0, 0, 0, 0.3) !important;
}

#chat-room-layer .msg-row.msg-plain-bubble .msg-status-text {
    font-size: calc(10px * var(--chat-font-scale, 1));
    color: rgba(0, 0, 0, 0.25);
    margin-top: calc(2px * var(--chat-font-scale, 1));
}

#chat-room-layer .msg-row.msg-plain-bubble .msg-avatar-time {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    font-size: calc(9px * var(--chat-font-scale, 1));
    color: rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 1;
    pointer-events: none;
}

/* 覆盖之前强制隐藏连续消息的已读/时间戳，现在我们需要它们显示 */
#chat-room-layer .msg-row.msg-plain-bubble.msg-right:has(+ .msg-row.msg-right) .msg-status-text {
    display: block !important;
}

#chat-room-layer .msg-row.msg-plain-bubble.msg-right:has(+ .msg-row.msg-right) .msg-bubble-time {
    display: block !important;
}

#chat-room-layer[data-chat-read="0"] .msg-row.msg-plain-bubble .msg-status-text,
#chat-room-layer[data-chat-read="0"] .msg-row.msg-plain-bubble.msg-right:has(+ .msg-row.msg-right) .msg-status-text {
    display: none !important;
}

#chat-room-layer .msg-row.msg-left + .msg-row.msg-left,
#chat-room-layer .msg-row.msg-right + .msg-row.msg-right {
    margin-top: 0;
}

#chat-room-layer .msg-row.msg-left:has(+ .msg-row.msg-left) .msg-avatar-wrap,
#chat-room-layer .msg-row.msg-right:has(+ .msg-row.msg-right) .msg-avatar-wrap {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 聊天流细节修复：时间戳、引用块和特殊卡片不套普通文字气泡 */
#chat-room-layer[data-chat-ts="1"][data-chat-tspos="avatar"] .msg-avatar-time {
    display: block !important;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="avatar"] .msg-bubble-time,
#chat-room-layer[data-chat-ts="0"] .msg-avatar-time,
#chat-room-layer[data-chat-ts="0"] .msg-bubble-time {
    display: none !important;
}

#chat-room-layer .msg-row.msg-plain-bubble.msg-right:has(+ .msg-row.msg-right) .msg-bubble-time {
    display: none !important;
}

#chat-room-layer .msg-row.msg-plain-bubble .msg-content-wrapper .msg-bubble {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    height: auto !important;
    min-height: calc((var(--chat-avatar-size) - 4px) * var(--chat-font-scale, 1)) !important;
    box-sizing: border-box;
    padding-top: calc(var(--chat-bubble-pad-y, 6px) * var(--chat-font-scale, 1));
    padding-bottom: calc(var(--chat-bubble-pad-y, 6px) * var(--chat-font-scale, 1));
    line-height: 1.32;
}

/* Explicit class is applied by both live and history renderers, including on
   older Android WebViews that do not support :has(). */
#chat-room-layer .msg-row.msg-plain-bubble .msg-bubble.msg-bubble-has-quote {
    display: block !important;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100%;
    padding: calc(5px * var(--chat-font-scale, 1)) calc(7px * var(--chat-font-scale, 1));
    white-space: normal;
}

#chat-room-layer .msg-bubble-has-quote,
#chat-room-layer .quote-block {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#chat-room-layer .msg-row.msg-plain-bubble .quote-block {
    display: block;
    min-width: 0;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: calc(4px * var(--chat-font-scale, 1)) calc(6px * var(--chat-font-scale, 1));
    margin: 0 0 calc(5px * var(--chat-font-scale, 1)) 0;
    border-radius: calc(4px * var(--chat-font-scale, 1));
    font-size: calc(12px * var(--chat-font-scale, 1));
    line-height: 1.32;
    overflow-wrap: break-word;
    word-break: break-word;
}

#chat-room-layer .quote-block .quote-name,
#chat-room-layer .quote-block .quote-preview {
    font-size: inherit;
    line-height: inherit;
}

#chat-room-layer .msg-row.msg-plain-bubble .quote-block + .msg-text,
#chat-room-layer .msg-row.msg-plain-bubble .quote-block ~ .msg-text {
    display: block;
    white-space: pre-wrap;
}

#chat-room-layer .chat-html-bubble {
    white-space: normal;
    overflow-wrap: anywhere;
}

#chat-room-layer .chat-html-bubble :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table) {
    margin: 0 0 8px;
}

#chat-room-layer .chat-html-bubble :where(h1, h2, h3) {
    font-size: 1.08em;
    line-height: 1.35;
}

#chat-room-layer .chat-html-bubble :where(h4, h5, h6) {
    font-size: 1em;
    line-height: 1.35;
}

#chat-room-layer .chat-html-bubble :where(img, table) {
    max-width: 100%;
}

#chat-room-layer .chat-html-bubble a {
    color: inherit;
    text-decoration: underline;
}

#chat-room-layer .msg-row[data-type="transfer"] .msg-content-wrapper,
#chat-room-layer .msg-row[data-type="redpacket"] .msg-content-wrapper,
#chat-room-layer .msg-row[data-type="location"] .msg-content-wrapper,
#chat-room-layer .msg-row[data-type="couple_invite"] .msg-content-wrapper,
#chat-room-layer .msg-row[data-type="couple_unlink"] .msg-content-wrapper,
#chat-room-layer .msg-row[data-type="listen_invite"] .msg-content-wrapper,
#chat-room-layer .msg-row[data-type="listen_invite_accepted"] .msg-content-wrapper,
#chat-room-layer .msg-row[data-type="listen_invite_declined"] .msg-content-wrapper {
    width: auto;
    max-width: min(78%, 260px);
}

#chat-room-layer .msg-bubble.transfer-bubble,
#chat-room-layer .msg-bubble.redpacket-bubble,
#chat-room-layer .msg-bubble.location-bubble,
#chat-room-layer .msg-bubble.couple-invite-bubble,
#chat-room-layer .msg-bubble.listen-invite-bubble {
    display: block !important;
    width: auto;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible;
}

#chat-room-layer .msg-bubble.transfer-bubble::before,
#chat-room-layer .msg-bubble.transfer-bubble::after,
#chat-room-layer .msg-bubble.redpacket-bubble::before,
#chat-room-layer .msg-bubble.redpacket-bubble::after,
#chat-room-layer .msg-bubble.location-bubble::before,
#chat-room-layer .msg-bubble.location-bubble::after,
#chat-room-layer .msg-bubble.couple-invite-bubble::before,
#chat-room-layer .msg-bubble.couple-invite-bubble::after,
#chat-room-layer .msg-bubble.listen-invite-bubble::before,
#chat-room-layer .msg-bubble.listen-invite-bubble::after {
    display: none !important;
    content: none !important;
}

#chat-room-layer .chat-transfer-card-surface,
#chat-room-layer .chat-redpacket-card-surface,
#chat-room-layer .location-card,
#chat-room-layer .couple-invite-card,
#chat-room-layer .listen-invite-card {
    width: min(236px, 70vw);
    max-width: 100%;
    box-sizing: border-box;
}

#chat-room-layer .chat-redpacket-card-surface {
    min-height: calc(72px * var(--chat-font-scale, 1));
    display: flex;
    align-items: center;
    padding: calc(13px * var(--chat-font-scale, 1)) calc(14px * var(--chat-font-scale, 1));
}

#chat-room-layer .redpacket-main {
    width: 100%;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="avatar"] .msg-row {
    padding-bottom: calc(10px * var(--chat-font-scale, 1));
}

#chat-room-layer .msg-row[data-type="transfer"] .msg-bubble-time,
#chat-room-layer .msg-row[data-type="redpacket"] .msg-bubble-time,
#chat-room-layer .msg-row[data-type="location"] .msg-bubble-time,
#chat-room-layer .msg-row[data-type="couple_invite"] .msg-bubble-time,
#chat-room-layer .msg-row[data-type="couple_unlink"] .msg-bubble-time,
#chat-room-layer .msg-row[data-type="listen_invite"] .msg-bubble-time,
#chat-room-layer .msg-row[data-type="listen_invite_accepted"] .msg-bubble-time,
#chat-room-layer .msg-row[data-type="listen_invite_declined"] .msg-bubble-time {
    display: none !important;
}

#chat-room-layer .transfer-main,
#chat-room-layer .redpacket-main {
    min-width: 0;
}

#chat-room-layer .transfer-info,
#chat-room-layer .redpacket-info,
#chat-room-layer .location-info {
    min-width: 0;
}

#chat-room-layer .transfer-note,
#chat-room-layer .redpacket-note,
#chat-room-layer .location-name,
#chat-room-layer .location-address {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Theme Studio final overrides: keep exported/previewed bubble settings from being eaten by late defaults. */
@keyframes chatThemeTimestampSlide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left + .msg-row.msg-left .msg-avatar-wrap,
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right + .msg-row.msg-right .msg-avatar-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
}

#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left:has(+ .msg-row.msg-left) .msg-avatar-wrap,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right:has(+ .msg-row.msg-right) .msg-avatar-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
}

#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left:not(:has(+ .msg-row.msg-left)) .msg-avatar-wrap,
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right:not(:has(+ .msg-row.msg-right)) .msg-avatar-wrap,
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left[data-kkt-head="1"] .msg-avatar-wrap,
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right[data-kkt-head="1"] .msg-avatar-wrap {
    opacity: 1 !important;
    visibility: visible !important;
}

#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-left:has(+ .msg-row.msg-left),
#chat-room-layer[data-chat-kkt="first"] .msg-row.msg-right:has(+ .msg-row.msg-right),
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-left:has(+ .msg-row.msg-left),
#chat-room-layer[data-chat-kkt="last"] .msg-row.msg-right:has(+ .msg-row.msg-right) {
    margin-bottom: calc(4px * var(--chat-font-scale, 1)) !important;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-avatar-time,
#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-avatar-time {
    display: none !important;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-row.msg-plain-bubble .msg-bubble-time {
    display: block !important;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row {
    padding-bottom: 0 !important;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row.msg-plain-bubble .msg-bubble-time {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: calc(-46px * var(--chat-font-scale, 1)) !important;
    bottom: calc(2px * var(--chat-font-scale, 1)) !important;
    font-size: calc(10px * var(--chat-font-scale, 1)) !important;
    line-height: 1 !important;
    color: rgba(153, 153, 153, 0.96) !important;
    white-space: nowrap !important;
    text-align: left !important;
    animation: chatThemeTimestampSlide 0.6s ease-out both;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row.msg-plain-bubble.msg-right .msg-bubble-time {
    right: auto !important;
    left: calc(-46px * var(--chat-font-scale, 1)) !important;
    text-align: right !important;
}

#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row.msg-plain-bubble.msg-right:has(+ .msg-row.msg-right) .msg-bubble-time,
#chat-room-layer[data-chat-ts="1"][data-chat-tspos="bubble"] .msg-row.msg-plain-bubble.msg-right:has(+ .msg-row.msg-right) .msg-bubble-time {
    display: block !important;
}

#chat-room-layer[data-chat-kkt="first"][data-chat-ts="1"] .msg-row[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="last"][data-chat-ts="1"] .msg-row[data-kkt-not-last="1"] .msg-bubble-time {
    display: none !important;
}

#chat-room-layer[data-chat-kkt="first"][data-chat-ts="1"][data-chat-tspos="bubble"] .msg-row.msg-left.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="first"][data-chat-ts="1"][data-chat-tspos="bubble"] .msg-row.msg-right.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="first"][data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row.msg-left.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="first"][data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row.msg-right.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="last"][data-chat-ts="1"][data-chat-tspos="bubble"] .msg-row.msg-left.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="last"][data-chat-ts="1"][data-chat-tspos="bubble"] .msg-row.msg-right.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="last"][data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row.msg-left.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time,
#chat-room-layer[data-chat-kkt="last"][data-chat-ts="1"][data-chat-tspos="bubbleRight"] .msg-row.msg-right.msg-plain-bubble[data-kkt-not-last="1"] .msg-bubble-time {
    display: none !important;
}
/* =========================================================
   === 📖 长叙事模式 / 阅读器 UI 精准美化补丁 V3 ===
   === (请粘贴到文件最底部，它会自动覆盖原有样式) ===
   ========================================================= */

/* 1. 全局阅读区基础设定 (更柔和的背景) */
.offline-overlay {
    --offline-reader-surface: rgba(255, 255, 255, 0.85);
    --offline-reader-border: rgba(0, 0, 0, 0.03);
    --offline-reader-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    --offline-reader-bg: linear-gradient(180deg, #fbfbfc 0%, #f0f2f5 100%);
}

/* 顶部栏毛玻璃 */
.offline-topbar {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.offline-topbar-title {
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* 2. 阅读卡片与排版优化 */
.offline-novel-entry {
    border-radius: 24px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 24px 22px !important;
}

/* 🌟 核心排版：进一步拉开行距，提升呼吸感 */
.offline-novel-paragraphs p {
    line-height: 2.3 !important;      /* 拉大行距 */
    letter-spacing: 0.05em !important;
    text-align: justify !important;
    margin-bottom: 18px !important;
}

.offline-novel-head {
    border-bottom: 1px solid var(--offline-reader-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}

/* 🌟 角色对话“涂鸦笔”高亮效果 */
.offline-novel-dialogue {
    border-bottom: none !important;            /* 取消原本的虚线下划线 */
    background: rgba(0, 0, 0, 0.055) !important; /* 浅灰色马克笔背景 */
    padding: 2px 6px !important;               /* 文字与背景留一点空隙 */
    border-radius: 6px !important;             /* 边缘圆角 */
    font-weight: 500 !important;               /* 字重稍微加粗一点 */
    /* 保证跨行时也能保持两端的背景内边距 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* 适配深色/护眼模式的涂鸦背景色 */
.offline-overlay[data-offline-color="dark-night"] .offline-novel-dialogue,
.offline-overlay[data-offline-color="dark-ink"] .offline-novel-dialogue {
    background: rgba(255, 255, 255, 0.12) !important;
}
.offline-overlay[data-offline-color="soft-sepia"] .offline-novel-dialogue {
    background: rgba(140, 123, 108, 0.15) !important;
}

/* 3. 底部输入栏结构重构 */
.offline-inputbar {
    position: relative !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-top: 1px solid rgba(0,0,0,0.03) !important;
    padding: 12px 16px calc(10px + var(--safe-bottom-compact, env(safe-area-inset-bottom, 0px))) 16px !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
}

.offline-input {
    min-height: 46px !important;
    height: 46px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 22px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    line-height: 22px !important;
    transition: background 0.2s !important;
}
.offline-input:focus { background: rgba(0, 0, 0, 0.08) !important; }

.offline-send {
    background: #111 !important;
    border-radius: 18px !important;
    height: 46px !important;
    min-height: 46px !important;
    min-width: 76px !important;
    padding: 0 18px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.offline-rewind {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 999px !important;
    padding: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
    order: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}
.offline-rewind:active {
    transform: scale(0.95) !important;
    background: #f5f5f5 !important;
}
.offline-rewind-icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

/* 底部防遮挡高度略微增加 */
.offline-body {
    padding-bottom: 0 !important;
}

.offline-overlay[data-offline-reading-style="novel"] .offline-novel-stream {
    max-width: 820px;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-body {
    background: #F7F7F7;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-stream {
    max-width: 760px;
    margin: 0 auto;
    background-color: #F7F7F7;
    padding: 20px 24px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, Tahoma, Simsun, sans-serif;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-entry {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-entry:last-child {
    margin-bottom: 0 !important;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    color: rgba(88, 88, 88, 0.72) !important;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-user-card {
    margin-bottom: 18px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-paragraphs {
    padding: 0;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-paragraph-block {
    margin-bottom: 24px;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-paragraph-block:last-child {
    margin-bottom: 0;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-line {
    margin: 0 0 24px 0;
    font-size: 16px !important;
    color: #333333 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.5px !important;
    font-family: inherit !important;
    text-align: left;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-line:last-child {
    margin-bottom: 0;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-line-dialogue {
    margin: 0 0 24px 0;
    font-weight: inherit;
    letter-spacing: inherit;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-line-thought {
    margin: 0 0 24px 0;
    color: #888888;
    font-style: italic;
    font-weight: 300;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-user-card .offline-novel-line {
    color: #333333 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.5px !important;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-dialogue {
    border-bottom: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: inherit !important;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-thought {
    color: #888888 !important;
    font-style: italic !important;
    font-weight: 300 !important;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-stream strong.offline-novel-thought,
.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-stream em,
.offline-overlay[data-offline-reading-style="paragraph"] .offline-novel-stream .inner-thought {
    font-style: italic;
    color: #888888;
    font-weight: 300;
}

.offline-overlay[data-offline-reading-style="paragraph"] .offline-para-comment-trigger {
    margin-top: 14px;
}

/* 深色模式下的悬浮按钮适配 */
.offline-overlay[data-offline-color="dark-night"] .offline-rewind,
.offline-overlay[data-offline-color="dark-ink"] .offline-rewind {
    background: #2a2a2a !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ccc !important;
}

/* 卡片头部人物名片：角色居左，当前聊天中的“我”镜像居右 */
.offline-card-profile-head {
    min-height: 52px;
    padding-bottom: 13px !important;
    margin-bottom: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
}

.offline-card-identity {
    min-width: 0;
    max-width: calc(100% - 38px);
    padding: 6px 12px 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 6px 18px rgba(43, 54, 64, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
}

.offline-card-identity-user {
    margin-left: auto;
    padding: 6px 6px 6px 12px;
    flex-direction: row-reverse;
}

.offline-card-avatar-stack {
    flex: 0 0 auto;
    min-width: 40px;
    display: flex;
    align-items: center;
}

.offline-card-avatar {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(225, 230, 234, 0.9);
    box-shadow: 0 4px 12px rgba(37, 52, 63, 0.13);
    object-fit: cover;
    display: block;
}

.offline-card-avatar-stack.is-multiple .offline-card-avatar {
    width: 34px;
    height: 34px;
    margin-left: -10px;
}

.offline-card-avatar-stack.is-multiple .offline-card-avatar:first-child {
    z-index: 3;
    margin-left: 0;
}

.offline-card-avatar-stack.is-multiple .offline-card-avatar:nth-child(2) {
    z-index: 2;
}

.offline-card-avatar-more {
    position: relative;
    z-index: 4;
    width: 28px;
    height: 28px;
    margin-left: -9px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: #dce8ef;
    color: #536b79;
    font-size: 10px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
}

.offline-card-identity-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.offline-card-identity-user .offline-card-identity-copy {
    align-items: flex-end;
    text-align: right;
}

.offline-card-name-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.offline-card-identity-user .offline-card-name-row {
    flex-direction: row-reverse;
}

.offline-card-name {
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    color: var(--offline-reader-text-color);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-card-meta {
    display: block;
    max-width: 210px;
    overflow: hidden;
    color: var(--offline-reader-muted-color);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-card-meta.is-multiline {
    max-width: 220px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
}

.offline-card-meta-line {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-card-meta-comic-detail {
    display: none;
}

.offline-overlay[data-offline-color="dark-night"] .offline-card-identity,
.offline-overlay[data-offline-color="dark-ink"] .offline-card-identity {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.offline-overlay[data-offline-color="dark-night"] .offline-card-avatar,
.offline-overlay[data-offline-color="dark-ink"] .offline-card-avatar {
    border-color: rgba(255, 255, 255, 0.2);
}

/* 水色预设：冰蓝背景 + 用户/角色双磨砂卡片 */
.offline-overlay[data-offline-reading-style="preset-2"] {
    --offline-reader-bg: transparent;
    --offline-reader-text-color: #263b47;
    --offline-reader-muted-color: #647b89;
    --offline-reader-border: rgba(105, 137, 156, 0.18);
    --offline-reader-shadow: 0 14px 36px rgba(74, 102, 119, 0.12);
    background:
        linear-gradient(rgba(247, 252, 255, 0.06), rgba(240, 248, 253, 0.1)),
        url('../assets/changxushi.jpg') center center / cover no-repeat !important;
}

.offline-overlay[data-offline-reading-style="preset-2"]::before {
    content: none !important;
    display: none !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-body {
    background: transparent !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-topbar,
.offline-overlay[data-offline-reading-style="preset-2"] .offline-inputbar {
    background: rgba(241, 249, 253, 0.48) !important;
    border-color: rgba(92, 127, 148, 0.12) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-card-identity {
    border-color: rgba(255, 255, 255, 0.68);
    background: rgba(244, 251, 255, 0.42);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 7px 20px rgba(62, 95, 115, 0.08);
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-card-identity-user {
    background: rgba(222, 241, 252, 0.44);
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-ai-card,
.offline-overlay[data-offline-reading-style="preset-2"] .offline-user-card {
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 14px 38px rgba(70, 101, 120, 0.12) !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-ai-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(239, 248, 253, 0.38)) !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-user-card {
    background: linear-gradient(145deg, rgba(225, 242, 252, 0.6), rgba(244, 250, 253, 0.38)) !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-novel-dialogue {
    background: rgba(194, 220, 235, 0.3) !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-input {
    background: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(91, 126, 148, 0.18) !important;
}

.offline-overlay[data-offline-reading-style="preset-2"] .offline-rewind {
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(91, 126, 148, 0.16) !important;
    color: #4c6879 !important;
}

/* 便签预设：背景图上的白色平铺卡片 */
.offline-overlay[data-offline-reading-style="preset-3"] {
    --offline-reader-bg: transparent;
    --offline-reader-text-color: #333333;
    --offline-reader-muted-color: #888888;
    --offline-reader-border: rgba(0, 0, 0, 0.09);
    --offline-reader-shadow: none;
    background:
        linear-gradient(rgba(246, 246, 246, 0.06), rgba(246, 246, 246, 0.06)),
        url('../assets/changxushi1.jpg') center center / cover no-repeat !important;
}

.offline-overlay[data-offline-reading-style="preset-3"]::before {
    content: none !important;
    display: none !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-body {
    background: transparent !important;
    padding: 12px 12px 0 !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-stream {
    width: 100%;
    max-width: 820px;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar,
.offline-overlay[data-offline-reading-style="preset-3"] .offline-inputbar {
    border-color: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(14px) saturate(90%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(90%) !important;
    box-shadow: none !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar {
    background: rgba(226, 226, 226, 0.94) !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-inputbar {
    background: rgba(250, 250, 250, 0.94) !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar-title,
.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar-btn {
    color: #333333 !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar-btn {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-entry {
    position: relative;
    overflow: hidden !important;
    margin: 0 0 12px !important;
    padding: 18px 18px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-ai-card {
    transform: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-user-card {
    background: #ffffff !important;
    transform: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-entry::before {
    content: none;
    display: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-entry::after {
    content: none;
    display: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-entry > * {
    position: relative;
    z-index: 1;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-card-identity {
    padding: 2px 0;
    border-color: transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-card-identity-user {
    padding: 2px 0;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-card-profile-head {
    min-height: 48px;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    border-bottom: none !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-card-avatar {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    filter: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-card-name {
    font-size: 15px;
    font-weight: 600;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-card-meta {
    color: #8a8a8a;
    font-size: 11px;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-edit-btn {
    display: inline-flex !important;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #858585;
    box-shadow: none !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-edit-btn:hover,
.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-edit-btn:active {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-card-avatar {
    border-color: rgba(255, 255, 255, 0.86);
    box-shadow: 0 3px 10px rgba(72, 61, 53, 0.14);
    filter: saturate(0.88);
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-head {
    border-color: transparent !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-novel-dialogue {
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-ai-card .offline-novel-dialogue {
    background: rgba(0, 0, 0, 0.055) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-input {
    color: #49423d !important;
    background: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(111, 97, 87, 0.18) !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-input::placeholder {
    color: rgba(95, 84, 77, 0.55) !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-rewind {
    color: #5b524c !important;
    background: rgba(255, 255, 255, 0.46) !important;
    border-color: rgba(111, 97, 87, 0.18) !important;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-send {
    color: #f8f4f0 !important;
    background: #665a52 !important;
    box-shadow: 0 7px 16px rgba(72, 60, 52, 0.18) !important;
}

.offline-note-card-footer {
    display: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-note-card-footer {
    height: 50px;
    margin: 18px -18px 0;
    border-top: 1px solid #ededed;
    background: #ffffff;
    display: flex;
    align-items: stretch;
    pointer-events: none;
    user-select: none;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-note-card-action {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    color: #8b8b8b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-note-card-action + .offline-note-card-action::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 1px;
    background: #eeeeee;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-note-card-action svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-overlay[data-offline-reading-style="preset-3"] .offline-note-card-action-more svg {
    width: 30px;
    fill: currentColor;
    stroke: none;
}

/* 漫画预设：灰色手帐卡片 + 大方形头像 + 立体装饰 */
.offline-overlay[data-offline-reading-style="preset-4"] {
    --offline-reader-bg: #ffffff;
    --offline-reader-text-color: #3f3f3f;
    --offline-reader-muted-color: #858585;
    --offline-reader-border: rgba(75, 75, 75, 0.14);
    --offline-reader-shadow: none;
    background: #ffffff !important;
}

.offline-overlay[data-offline-reading-style="preset-4"]::before {
    content: none !important;
    display: none !important;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-body {
    padding: 26px 16px 0 !important;
    background: #ffffff !important;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-stream {
    width: 100%;
    max-width: 820px;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-topbar,
.offline-overlay[data-offline-reading-style="preset-4"] .offline-inputbar {
    background: rgba(250, 250, 250, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    backdrop-filter: blur(14px) saturate(75%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(75%) !important;
    box-shadow: none !important;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-entry {
    position: relative;
    overflow: visible !important;
    margin: 30px 0 38px !important;
    padding: 28px 22px 24px !important;
    border: 1px solid rgba(78, 78, 78, 0.08) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, #e4e4e4 0%, #d7d7d7 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.035) !important;
    transform: none !important;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-entry::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: -15px;
    left: -12px;
    width: 78px;
    height: 30px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 22% 78%, rgba(70, 70, 70, 0.12)),
        #a9a9a9;
    box-shadow: 1px 5px 6px rgba(0, 0, 0, 0.18);
    opacity: 0.92;
    transform: rotate(-28deg);
    pointer-events: none;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-entry::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: -11px;
    bottom: 18px;
    width: 50px;
    height: 15px;
    border: 2px solid #878787;
    border-radius: 999px;
    background: transparent;
    box-shadow:
        inset 0 0 0 2px #d9d9d9,
        inset 0 0 0 4px #969696,
        2px 4px 4px rgba(0, 0, 0, 0.13);
    transform: rotate(-36deg);
    pointer-events: none;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-entry > * {
    position: relative;
    z-index: 1;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-profile-head {
    position: relative;
    min-height: 108px;
    padding: 0 !important;
    margin: 0 0 18px !important;
    border-bottom: none !important;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-profile-head::before {
    content: "♥";
    position: absolute;
    z-index: 5;
    top: -52px;
    left: 56px;
    color: #e9e9e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 39px;
    line-height: 1;
    text-shadow:
        -1px -1px 0 #ffffff,
        1px 1px 0 #a2a2a2,
        3px 5px 5px rgba(0, 0, 0, 0.22);
    transform: rotate(-11deg);
    pointer-events: none;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-identity {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 18px;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-identity-user {
    padding: 0;
    flex-direction: row-reverse;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-avatar-stack {
    min-width: 104px;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-avatar {
    width: 104px;
    height: 104px;
    border: 5px solid #ffffff;
    border-radius: 17px;
    background: #cfcfcf;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    filter: grayscale(0.16) saturate(0.84) contrast(1.03);
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-avatar-stack.is-multiple .offline-card-avatar {
    width: 76px;
    height: 76px;
    margin-left: -48px;
    border-radius: 14px;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-avatar-stack.is-multiple .offline-card-avatar:first-child {
    margin-left: 0;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-identity-copy {
    flex: 1 1 auto;
    width: 0;
    gap: 0;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-name-row {
    display: none;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-meta,
.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-meta.is-multiline {
    width: 100%;
    max-width: none;
    overflow: visible;
    gap: 11px;
    color: #7e7e7e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-meta-line {
    width: 100%;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-meta-line:nth-child(2),
.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-meta-comic-detail {
    display: block;
    box-sizing: border-box;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #777777;
    font-weight: 500;
    line-height: 1.55;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-card-identity-user .offline-card-meta {
    align-items: flex-end;
    text-align: right;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-edit-btn {
    position: absolute;
    z-index: 6;
    top: 2px;
    right: 0;
    display: inline-flex !important;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #777777;
    box-shadow: none !important;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-user-card .offline-novel-edit-btn {
    right: auto;
    left: 0;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-edit-btn:hover,
.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-edit-btn:active {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-paragraphs {
    padding: 16px 18px 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
}

.offline-overlay[data-offline-reading-style="preset-4"] .offline-novel-dialogue {
    color: #383838 !important;
    background: rgba(112, 112, 112, 0.1) !important;
}
/* =========================================================
   === 🎨 表情包页面 UI 精准美化补丁 V2 (修复被挤扁问题) ===
   === (请粘贴到文件最底部) ===
   ========================================================= */

/* 1. 面板背景毛玻璃化，取消死板纯色 */
.chat-sticker-panel {
    background: rgba(245, 245, 245, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.chat-sticker-panel .sticker-grid {
    grid-auto-rows: minmax(112px, auto) !important;
    align-items: start !important;
}

/* 2. 重塑单个表情容器 */
.sticker-item {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-height: 112px !important;
    height: auto !important;    /* 让高度自然撑开 */
    padding: 4px !important; 
    gap: 4px !important;
    border-radius: 12px !important;
    transition: background 0.2s, transform 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.sticker-item:active {
    background: rgba(0, 0, 0, 0.05) !important;
    transform: scale(0.92) !important;
}

/* 🌟 3. 核心修复：强制锁定 1:1 正方形，绝对不允许被挤扁！ */
.sticker-thumb {
    background: transparent !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    aspect-ratio: 1 / 1 !important;    /* 强制正方形 */
    flex: 0 0 auto !important;         /* 关键：0 缩小 0 放大，禁止弹性压缩！ */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.sticker-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;    /* 保证图片按原比例放在正方形内 */
}

/* 4. 🌟 表情包名称：保持当前排版，但允许长名称自动换行完整显示 */
.sticker-name {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    font-size: 11px !important;
    color: #999 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    line-height: 1.2 !important;
}

/* 5. 顶部标签栏 */
.sticker-tab {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #555 !important;
    font-weight: 500 !important;
    border-radius: 16px !important;
    transition: all 0.2s !important;
}
.sticker-tab.active {
    background: #fff !important;
    color: #111 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.sticker-tab-add {
    border: none !important;
    background: rgba(0,0,0,0.05) !important;
    color: #333 !important;
}

/* 6. 管理模式选中态优化 */
.chat-sticker-panel.manage-mode .sticker-item.selected {
    background: rgba(7, 193, 96, 0.1) !important;
    box-shadow: none !important;
}
.chat-sticker-panel.manage-mode .sticker-item::after {
    top: 2px !important;
    right: 2px !important;
}

/* =========================================================
   Default chat refresh · soft monochrome editorial
   Custom wallpapers and Theme Studio inline variables still win.
   ========================================================= */
#chat-room-layer {
    --chat-default-bg: #e9eaec;
    --chat-default-surface: #fafbfc;
    --chat-default-surface-soft: #e4e6e9;
    --chat-default-ink: #171716;
    --chat-default-muted: #81848a;
    --chat-default-border: rgba(17, 17, 17, 0.065);
    --chat-footer-keyboard-fill: #e9eaec;
    background-color: var(--chat-default-bg);
    background-image:
        radial-gradient(circle at 16% 15%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
        radial-gradient(circle at 82% 36%, rgba(17, 17, 17, 0.035) 0 1px, transparent 1.5px);
    background-size: 27px 27px, 31px 31px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

#chat-room-layer .chat-room-header {
    background: rgba(233, 234, 236, 0.9);
    border-bottom: 1px solid rgba(17, 17, 17, 0.055);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(22px) saturate(115%);
    -webkit-backdrop-filter: blur(22px) saturate(115%);
}

#chat-room-layer .chat-room-title {
    color: var(--chat-text-color, var(--chat-default-ink));
    font-weight: 650;
    letter-spacing: -0.45px;
}

#chat-room-layer .chat-room-body {
    padding-left: calc(16px * var(--chat-font-scale, 1));
    padding-right: calc(16px * var(--chat-font-scale, 1));
}

/*
 * 底栏美化兼容层
 * :where() 会把外层 #chat-room-layer 的选择器权重降为 0。
 * 这样下面这些只是新版默认外观，后加载的用户自定义 CSS 仍可继续用
 * 原有的 .custom-bottom-bar / .footer-icon-btn 等选择器直接覆盖。
 */
:where(#chat-room-layer .chat-footer-shell::after) {
    background: var(--chat-footer-keyboard-fill, var(--chat-default-bg));
}

:where(#chat-room-layer .custom-bottom-bar.new-layout) {
    width: 100%;
    min-height: calc(58px * var(--chat-font-scale, 1));
    margin: 0;
    padding: calc(8px * var(--chat-font-scale, 1));
    padding-bottom: calc(8px * var(--chat-font-scale, 1) + var(--chat-safe-bottom-compact));
    gap: calc(7px * var(--chat-font-scale, 1));
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid rgba(17, 17, 17, 0.055);
    border-radius: 0;
    background: rgba(250, 251, 252, 0.96);
    box-shadow: none;
    backdrop-filter: blur(22px) saturate(118%);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
}

:where(#chat-room-layer .input-wrapper) {
    height: calc(42px * var(--chat-font-scale, 1));
    min-width: 0;
}

:where(#chat-room-layer #msg-input.new-input-field) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: calc(18px * var(--chat-font-scale, 1));
    background: #eceef1;
    color: var(--chat-text-color, var(--chat-default-ink));
    /* 给右侧表情按钮保留独立文本禁入区，长文本横向滚动时也不会压到图标下面。 */
    padding-right: calc(52px * var(--chat-font-scale, 1));
    padding-left: calc(17px * var(--chat-font-scale, 1));
    font-size: calc(14px * var(--chat-font-scale, 1));
    caret-color: #111;
    box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.025);
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

:where(#chat-room-layer #msg-input.new-input-field::placeholder) {
    color: #aaa9a4;
}

:where(#chat-room-layer #msg-input.new-input-field:focus) {
    border-color: rgba(17, 17, 17, 0.12);
    background: #f3f4f6;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.035);
}

:where(#chat-room-layer #quick-emoji-btn.embedded-emoji-btn) {
    right: calc(8px * var(--chat-font-scale, 1));
    width: calc(29px * var(--chat-font-scale, 1));
    height: calc(29px * var(--chat-font-scale, 1));
    color: #787873;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 160ms ease, transform 160ms ease;
}

/*
 * 输入功能保护层：全局美化 CSS 会在运行时后加载，并可能使用 !important。
 * 这里只锁定文本安全区与盒模型，保留用户主题对颜色、圆角、位置和图标的控制。
 */
#chat-room-layer .chat-footer-shell .chat-room-footer.custom-bottom-bar.new-layout .input-wrapper {
    min-width: 0 !important;
}

#chat-room-layer .chat-footer-shell .chat-room-footer.custom-bottom-bar.new-layout .input-wrapper > #msg-input.new-input-field {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: calc(20px * var(--chat-font-scale, 1)) !important;
    padding-right: calc(60px * var(--chat-font-scale, 1)) !important;
}

:where(#chat-room-layer .footer-icon-btn) {
    width: calc(40px * var(--chat-font-scale, 1));
    height: calc(40px * var(--chat-font-scale, 1));
    /* 尺寸由 width/height 提供；不再用最小尺寸卡住用户的旧美化 CSS。 */
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--chat-default-border);
    border-radius: 50%;
    background: #e8eaed;
    color: var(--chat-default-ink);
    box-sizing: border-box;
    transition: transform 170ms ease, background-color 170ms ease, color 170ms ease, box-shadow 170ms ease;
    -webkit-tap-highlight-color: transparent;
}

:where(#chat-room-layer .footer-icon-btn i) {
    font-size: calc(20px * var(--chat-font-scale, 1));
    line-height: 1;
    color: inherit;
}

:where(#chat-room-layer #more-btn) {
    background: #e2e5e9;
}

:where(#chat-room-layer .circle-btn.ai-btn) {
    width: calc(40px * var(--chat-font-scale, 1));
    height: calc(40px * var(--chat-font-scale, 1));
    background: #f7f8fa;
    color: #3b3b38;
}

:where(#chat-room-layer .circle-btn.ai-btn i) {
    color: inherit;
    font-size: calc(19px * var(--chat-font-scale, 1));
}

:where(#chat-room-layer .send-arrow-btn) {
    width: calc(40px * var(--chat-font-scale, 1));
    height: calc(40px * var(--chat-font-scale, 1));
    border-color: #171716;
    border-radius: 50%;
    background: #171716;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(17, 17, 17, 0.16);
}

:where(#chat-room-layer .send-arrow-btn i) {
    margin-left: -1px;
    font-size: calc(18px * var(--chat-font-scale, 1));
}

:where(#chat-room-layer .footer-icon-btn:active),
:where(#chat-room-layer #quick-emoji-btn.embedded-emoji-btn:active) {
    transform: scale(0.94);
    opacity: 1;
}

:where(#chat-room-layer .footer-icon-btn:focus-visible) {
    outline: 2px solid rgba(17, 17, 17, 0.38);
    outline-offset: 2px;
}

:where(#chat-room-layer .chat-footer-shell:has(.chat-more-panel.show) #more-btn) {
    background: #171716;
    color: #ffffff;
    transform: rotate(45deg);
}

:where(#chat-room-layer .circle-btn.ai-btn.is-ai-busy) {
    background: #dfe2e6;
    color: #6f6f69;
    opacity: 1;
}

:where(#chat-room-layer .chat-more-panel) {
    background: rgba(235, 237, 240, 0.97);
    border-radius: 24px 24px 0 0;
}

:where(#chat-room-layer .chat-more-panel.show) {
    padding-top: 22px;
    border-top: 1px solid rgba(17, 17, 17, 0.055);
}

:where(#chat-room-layer .more-grid) {
    gap: 20px 12px;
}

:where(#chat-room-layer .more-item) {
    color: #64645f;
    font-size: calc(11px * var(--chat-font-scale, 1));
}

:where(#chat-room-layer .more-icon) {
    width: calc(52px * var(--chat-font-scale, 1));
    height: calc(52px * var(--chat-font-scale, 1));
    border: 1px solid rgba(17, 17, 17, 0.055);
    border-radius: calc(18px * var(--chat-font-scale, 1));
    background: #fafbfc;
    color: #292927;
    font-size: calc(23px * var(--chat-font-scale, 1));
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.035);
}

:where(#chat-room-layer .more-item:active .more-icon) {
    background: #e0e3e7;
    transform: scale(0.95);
}

@media (max-width: 370px) {
    :where(#chat-room-layer .custom-bottom-bar.new-layout) {
        width: 100%;
        margin: 0;
        gap: calc(5px * var(--chat-font-scale, 1));
    }

    :where(#chat-room-layer .footer-icon-btn),
    :where(#chat-room-layer .circle-btn.ai-btn),
    :where(#chat-room-layer .send-arrow-btn) {
        width: calc(38px * var(--chat-font-scale, 1));
        height: calc(38px * var(--chat-font-scale, 1));
        min-width: 0;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(#chat-room-layer .footer-icon-btn),
    :where(#chat-room-layer #quick-emoji-btn.embedded-emoji-btn),
    :where(#chat-room-layer #msg-input.new-input-field) {
        transition: none;
    }
}

/* MCP 调用痕迹：贴近气泡的轻量“黑点 · 工具 · 时间”元信息。 */
#chat-room-layer .chat-mcp-live-row {
    width: calc(100% - (var(--chat-avatar-size, 38px) * var(--chat-font-scale, 1)) - 16px);
    min-height: calc(12px * var(--chat-font-scale, 1));
    display: flex;
    align-items: center;
    margin: 0 0 calc(5px * var(--chat-font-scale, 1)) calc((var(--chat-avatar-size, 38px) * var(--chat-font-scale, 1)) + 16px);
    animation: chat-mcp-live-enter 180ms ease-out both;
}

#chat-room-layer[data-chat-avatar="0"] .chat-mcp-live-row {
    width: calc(100% - 2px);
    margin-left: 2px;
}

#chat-room-layer .chat-mcp-live-row .chat-mcp-inline-meta {
    margin: 0;
}

#chat-room-layer .chat-mcp-inline-meta {
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(2px * var(--chat-font-scale, 1));
    margin: 0 0 calc(3px * var(--chat-font-scale, 1)) calc(2px * var(--chat-font-scale, 1));
    font-family: var(--app-font-family, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif);
}

#chat-room-layer .chat-mcp-inline-meta-item {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: calc(5px * var(--chat-font-scale, 1));
    color: #69707a;
    font-size: calc(9px * var(--chat-font-scale, 1));
    line-height: 1.25;
    white-space: nowrap;
}

#chat-room-layer .chat-mcp-inline-meta-dot {
    width: calc(5px * var(--chat-font-scale, 1));
    height: calc(5px * var(--chat-font-scale, 1));
    flex: 0 0 calc(5px * var(--chat-font-scale, 1));
    border-radius: 999px;
    background: #17191d;
}

#chat-room-layer .chat-mcp-inline-meta-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #4f5660;
    font-weight: 560;
    text-overflow: ellipsis;
}

#chat-room-layer .chat-mcp-inline-meta-time {
    flex: 0 0 auto;
    color: #a1a8b2;
    font-variant-numeric: tabular-nums;
}

@keyframes chat-mcp-live-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #chat-room-layer .chat-mcp-live-row {
        animation: none;
    }
}

/* Narrative settings V4 · cool editorial white */
.offline-overlay[data-offline-color="soft-paper"] {
    --offline-bg: #f6f8fb;
    --offline-surface: rgba(255, 255, 255, .9);
    --offline-border: rgba(49, 62, 78, .09);
    --offline-text: #18202a;
    --offline-muted: #7c8796;
    background: #f6f8fb;
}

.offline-overlay[data-offline-color="soft-paper"] .offline-topbar,
.offline-overlay[data-offline-color="soft-paper"] .offline-inputbar {
    background: rgba(248, 250, 253, .88);
    border-color: rgba(49, 62, 78, .07);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.offline-overlay .offline-topbar-btn,
.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar-btn {
    width: 36px;
    height: 36px;
    padding: 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: currentColor;
    opacity: .78;
}

.offline-overlay .offline-topbar-btn:hover,
.offline-overlay .offline-topbar-btn:active,
.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar-btn:hover,
.offline-overlay[data-offline-reading-style="preset-3"] .offline-topbar-btn:active {
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: scale(.94);
}

.offline-overlay .offline-topbar-btn svg,
.offline-setup-close svg,
.offline-inline-icon svg,
.offline-summary-back svg,
.offline-upload-actions svg,
.offline-settings-details summary svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-topbar-actions {
    gap: 2px;
}

.offline-setup-mask {
    position: absolute;
    inset: 0;
    z-index: 120;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: rgba(26, 34, 44, 0);
    opacity: 0;
    transition: background .28s ease, opacity .28s ease;
}

.offline-setup-mask.is-open {
    background: rgba(26, 34, 44, .16);
    opacity: 1;
}

.offline-setup-mask .offline-settings-drawer {
    width: min(91vw, 430px);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-left: 1px solid rgba(62, 75, 92, .08);
    border-radius: 28px 0 0 28px;
    background: #f8fafc;
    color: #17202b;
    box-shadow: -24px 0 70px rgba(48, 61, 78, .12);
    transform: translate3d(104%, 0, 0);
    transition: transform .32s cubic-bezier(.22, .74, .24, 1);
}

.offline-setup-mask.is-open .offline-settings-drawer {
    transform: translate3d(0, 0, 0);
}

.offline-settings-drawer .offline-setup-header {
    flex: 0 0 auto;
    min-height: 112px;
    padding: max(23px, env(safe-area-inset-top)) 24px 17px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(56, 70, 88, .07);
    background: rgba(248, 250, 252, .94);
}

.offline-setup-heading {
    min-width: 0;
}

.offline-setup-kicker,
.offline-summary-page-kicker,
.offline-summary-intro > span,
.offline-section-index {
    color: #9aa5b3;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .2em;
}

.offline-settings-drawer .offline-setup-title {
    margin-top: 9px;
    color: #18212c;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .04em;
}

.offline-settings-drawer .offline-setup-subtitle {
    margin-top: 6px;
    color: #909aa8;
    font-size: 11px;
    line-height: 1.5;
}

.offline-settings-drawer .offline-setup-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #5d6877;
    box-shadow: none;
}

.offline-settings-drawer .offline-setup-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 20px 26px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.offline-settings-drawer .offline-setup-scroll::-webkit-scrollbar {
    display: none;
}

.offline-settings-section {
    position: relative;
    padding: 25px 2px 24px;
    border-bottom: 1px solid rgba(58, 72, 90, .07);
}

.offline-settings-section:last-child {
    border-bottom: 0;
}

.offline-section-index {
    position: absolute;
    top: 27px;
    right: 3px;
}

.offline-settings-drawer .offline-form-label {
    margin: 0 42px 13px 0;
    color: #202a36;
    font-size: 14px;
    font-weight: 680;
    line-height: 1.35;
    letter-spacing: .02em;
}

.offline-section-note {
    margin: -6px 0 13px;
    color: #929daa;
    font-size: 10px;
    line-height: 1.65;
}

.offline-session-name-input {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    box-sizing: border-box;
    border: 1px solid rgba(61, 76, 95, .1);
    border-radius: 13px;
    outline: none;
    background: rgba(248, 250, 252, .86);
    color: #26313e;
    font-size: 13px;
    transition: border-color .18s ease, background .18s ease;
}

.offline-session-name-input:focus {
    border-color: rgba(32, 43, 56, .35);
    background: #fff;
}

.offline-collapsible-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offline-inline-icon {
    width: 26px;
    height: 26px;
    padding: 5px;
    border: 0;
    background: transparent;
    color: #7b8795;
}

.offline-inline-icon[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.offline-settings-drawer .offline-select,
.offline-settings-drawer .offline-textarea {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    border: 1px solid rgba(61, 76, 95, .1);
    border-radius: 13px;
    outline: 0;
    background: #fff;
    color: #25303d;
    box-shadow: 0 5px 18px rgba(67, 82, 102, .035);
    font-size: 12px;
}

.offline-settings-drawer .offline-textarea {
    padding-top: 12px;
    padding-bottom: 12px;
}

.offline-check-list {
    max-height: 170px;
    overflow-y: auto;
    padding: 11px !important;
}

.offline-word-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.offline-word-range-box {
    min-width: 0;
    height: 64px;
    padding: 9px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(59, 74, 94, .09);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(68, 82, 101, .035);
}

.offline-word-range-box span {
    color: #a0a9b5;
    font-size: 9px;
    letter-spacing: .08em;
}

.offline-word-range-box input {
    width: 100%;
    margin-top: 3px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1f2935;
    font-size: 18px;
    font-weight: 600;
    appearance: textfield;
}

.offline-word-range-box input::-webkit-inner-spin-button,
.offline-word-range-box input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.offline-word-range-separator {
    color: #a5aeba;
    text-align: center;
    font-size: 11px;
}

.offline-visible-floor-box {
    width: min(168px, 100%);
    box-sizing: border-box;
}

.offline-visible-floor-note {
    margin: 9px 0 0;
}

.offline-perspective-list {
    display: grid;
    gap: 8px;
}

.offline-perspective-list > button {
    width: 100%;
    min-height: 68px;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(59, 74, 94, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .78);
    color: #27313e;
    text-align: left;
    box-shadow: none;
}

.offline-perspective-list > button.is-selected {
    border-color: #202b38;
    background: #fff;
    box-shadow: 0 8px 24px rgba(44, 57, 74, .07);
}

.offline-perspective-mark {
    color: #a2acb9;
    font-family: Georgia, serif;
    font-size: 15px;
}

.offline-perspective-list button.is-selected .offline-perspective-mark {
    color: #202b38;
}

.offline-perspective-list strong,
.offline-perspective-list small,
.offline-setting-switch-row strong,
.offline-setting-switch-row small,
.offline-settings-details summary strong,
.offline-settings-details summary small {
    display: block;
}

.offline-perspective-list strong,
.offline-setting-switch-row strong,
.offline-settings-details summary strong {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
}

.offline-perspective-list small,
.offline-setting-switch-row small,
.offline-settings-details summary small {
    margin-top: 4px;
    color: #909aa7;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.5;
}

.offline-setting-switch-row {
    min-height: 58px;
    margin-top: 10px;
    padding: 10px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #27313e;
}

.offline-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    display: inline-block;
}

.offline-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.offline-toggle > span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(63, 77, 94, .1);
    border-radius: 999px;
    background: #e7ebf0;
    transition: background .2s ease;
}

.offline-toggle > span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(42, 54, 69, .16);
    transition: transform .22s ease;
}

.offline-toggle input:checked + span {
    border-color: #26313e;
    background: #26313e;
}

.offline-toggle input:checked + span::after {
    transform: translateX(18px);
}

.offline-settings-details {
    margin-top: 4px;
    border-top: 1px solid rgba(58, 72, 90, .06);
}

.offline-settings-details > summary {
    min-height: 62px;
    padding: 12px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #27313e;
    cursor: pointer;
    list-style: none;
}

.offline-settings-details > summary::-webkit-details-marker,
.offline-comment-persona-card > summary::-webkit-details-marker {
    display: none;
}

.offline-settings-details > summary svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #8e99a7;
    transition: transform .2s ease;
}

.offline-settings-details[open] > summary svg {
    transform: rotate(180deg);
}

.offline-comment-persona-list {
    display: grid;
    gap: 7px;
    padding: 1px 0 12px;
}

.offline-comment-persona-list.is-disabled {
    opacity: .42;
    pointer-events: none;
}

.offline-comment-persona-card {
    overflow: hidden;
    border: 1px solid rgba(60, 75, 94, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .8);
}

.offline-comment-persona-card > summary {
    min-height: 45px;
    padding: 0 12px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    list-style: none;
    cursor: pointer;
}

.offline-comment-persona-index,
.offline-comment-persona-summary-hint {
    color: #9ca6b3;
    font-size: 8px;
    letter-spacing: .08em;
}

.offline-comment-persona-summary-title {
    overflow: hidden;
    color: #33404d;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-comment-persona-body {
    padding: 0 10px 10px;
    display: grid;
    gap: 7px;
}

.offline-comment-persona-title,
.offline-comment-persona-prompt {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(61, 76, 95, .08);
    border-radius: 10px;
    outline: 0;
    background: #f8fafc;
    color: #2b3744;
    font-size: 11px;
}

.offline-comment-persona-prompt {
    resize: vertical;
    line-height: 1.6;
}

.offline-beautify-section .offline-reader-section {
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid rgba(58, 72, 90, .06);
}

.offline-beautify-section .offline-style-preset-section {
    padding-top: 3px;
    border-top: 0;
}

.offline-settings-drawer .offline-reader-label {
    margin-bottom: 10px;
    color: #475362;
    font-size: 11px;
    font-weight: 630;
}

.offline-settings-drawer .offline-style-preset-row {
    gap: 7px;
    padding-bottom: 1px;
}

.offline-settings-drawer .offline-style-preset {
    min-width: 72px;
    height: 68px;
    border-color: rgba(60, 75, 94, .08);
    border-radius: 13px;
    background-color: #fff;
    box-shadow: none;
    color: #5e6977;
}

.offline-settings-drawer .offline-style-preset.is-selected {
    border-color: #283442;
    box-shadow: 0 7px 20px rgba(50, 64, 82, .07);
    color: #202b38;
}

.offline-upload-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.offline-outline-action {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(52, 67, 85, .13);
    border-radius: 12px;
    background: #fff;
    color: #354150;
    font-size: 11px;
    font-weight: 600;
}

.offline-outline-action svg {
    width: 17px;
    height: 17px;
}

.offline-text-action {
    padding: 8px;
    border: 0;
    background: transparent;
    color: #99a3b0;
    font-size: 10px;
}

.offline-custom-sliders {
    margin-top: 16px;
}

.offline-custom-sliders label {
    display: block;
    margin-top: 13px;
}

.offline-custom-sliders label > span {
    display: flex;
    justify-content: space-between;
    color: #7e8997;
    font-size: 9px;
}

.offline-custom-sliders b {
    color: #4c5866;
    font-weight: 600;
}

.offline-custom-sliders input[type="range"] {
    width: 100%;
    margin-top: 9px;
    accent-color: #2c3744;
}

.offline-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.offline-display-row .offline-reader-label,
.offline-display-row .offline-section-note {
    margin-bottom: 0;
}

.offline-settings-drawer .offline-fontsize-row {
    width: auto;
    display: grid;
    grid-template-columns: 34px 42px 34px;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(61, 76, 95, .09);
    border-radius: 12px;
    background: #fff;
}

.offline-settings-drawer .offline-step-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #657180;
    font-size: 16px;
}

.offline-settings-drawer .offline-fontsize-value {
    color: #293441;
    text-align: center;
    font-size: 12px;
    font-weight: 650;
}

.offline-dark-mode-row {
    margin: 0;
    border-top: 1px solid rgba(58, 72, 90, .06);
}

.offline-code-input {
    min-height: 130px !important;
    resize: vertical;
    font-family: Consolas, Menlo, monospace;
    line-height: 1.55;
}

.offline-settings-footer {
    flex: 0 0 auto;
    padding: 12px 20px max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(56, 70, 88, .07);
    background: rgba(248, 250, 252, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.offline-settings-footer .offline-btn.primary {
    min-height: 48px;
    border: 0;
    border-radius: 15px;
    background: #202b38;
    color: #fff;
    box-shadow: 0 10px 24px rgba(33, 45, 59, .14);
    font-size: 12px;
    letter-spacing: .08em;
}

.offline-summary-page {
    position: absolute;
    inset: 0;
    z-index: 130;
    flex-direction: column;
    overflow: hidden;
    background: #f7f9fc;
    color: #1c2632;
    opacity: 0;
    transform: translate3d(3%, 0, 0);
    transition: opacity .22s ease, transform .26s cubic-bezier(.22, .74, .24, 1);
}

.offline-summary-page.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.offline-summary-page-header {
    min-height: 78px;
    padding: max(15px, env(safe-area-inset-top)) 18px 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    border-bottom: 1px solid rgba(56, 70, 88, .07);
    background: rgba(248, 250, 253, .9);
    text-align: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.offline-summary-back {
    width: 36px;
    height: 36px;
    padding: 7px;
    border: 0;
    background: transparent;
    color: #53606f;
}

.offline-summary-page-title {
    margin-top: 6px;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .08em;
}

.offline-summary-page-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px 20px max(38px, env(safe-area-inset-bottom));
    overflow-y: auto;
}

.offline-summary-intro {
    max-width: 680px;
    margin: 0 auto 18px;
    padding: 0 3px;
}

.offline-summary-intro p {
    margin: 9px 0 0;
    color: #8994a2;
    font-size: 11px;
    line-height: 1.7;
}

.offline-summary-page .offline-summary-panel {
    max-width: 680px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(59, 74, 94, .08);
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 42px rgba(57, 71, 90, .055);
}

.offline-summary-page .offline-summary-setting-row {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(58, 72, 90, .07);
}

.offline-summary-page .offline-summary-frequency-row {
    min-height: 52px;
    margin: 12px 0 0;
    padding: 0 2px;
    justify-content: flex-start;
    color: #74808e;
    font-size: 11px;
}

.offline-summary-page .offline-summary-frequency-input {
    width: 58px;
    height: 38px;
    margin: 0 7px;
    border: 1px solid rgba(59, 74, 94, .1);
    border-radius: 11px;
    background: #f8fafc;
    color: #24303c;
    text-align: center;
}

.offline-summary-page .offline-summary-actions {
    margin-top: 6px;
    justify-content: flex-start;
}

.offline-summary-page .offline-summary-range-hint,
.offline-summary-page .offline-summary-status {
    margin-top: 12px;
    color: #929ca9;
    font-size: 9px;
    line-height: 1.6;
}

.offline-summary-page .offline-summary-list {
    margin-top: 17px;
    display: grid;
    gap: 10px;
}

.offline-summary-page .offline-summary-card,
.offline-summary-page .offline-summary-empty {
    border-color: rgba(59, 74, 94, .08);
    border-radius: 14px;
    background: #f8fafc;
}

.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer,
.offline-overlay[data-offline-color="dark-night"] .offline-summary-page,
.offline-overlay[data-offline-color="dark-ink"] .offline-summary-page {
    filter: none;
    background: #151a21;
    color: #edf1f5;
}

@media (max-width: 520px) {
    .offline-setup-mask .offline-settings-drawer {
        width: 94vw;
        border-radius: 24px 0 0 24px;
    }

    .offline-summary-page-scroll {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .offline-setup-mask,
    .offline-settings-drawer,
    .offline-summary-page {
        transition-duration: .01ms !important;
    }
}
.moments-comment-role-sheet {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.moments-comment-role-sheet-mask {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 15, 15, .28);
    opacity: 0;
    transition: opacity 220ms ease;
}

.moments-comment-role-sheet-panel {
    position: relative;
    width: min(100%, 460px);
    max-height: min(78dvh, 720px);
    display: flex;
    flex-direction: column;
    background: #f6f6f3;
    border: 1px solid rgba(17, 17, 17, .055);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 38px rgba(0, 0, 0, .08);
    transform: translateY(102%);
    transition: transform 260ms cubic-bezier(.22, .8, .25, 1);
    overflow: hidden;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.moments-comment-role-sheet.is-open {
    pointer-events: auto;
}

.moments-comment-role-sheet.is-open .moments-comment-role-sheet-mask {
    opacity: 1;
}

.moments-comment-role-sheet.is-open .moments-comment-role-sheet-panel {
    transform: translateY(0);
}

.moments-comment-role-sheet-handle {
    width: 38px;
    height: 4px;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: rgba(17, 17, 17, .14);
}

.moments-comment-role-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 10px;
}

.moments-comment-role-sheet-eyebrow {
    color: #aaa9a5;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 1.8px;
}

.moments-comment-role-sheet-header h3 {
    margin: 6px 0 0;
    color: #151515;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.35px;
}

.moments-comment-role-sheet-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: #efefed;
    color: #151515;
    font-size: 21px;
}

.moments-comment-role-sheet-note {
    margin: 0;
    padding: 0 18px 14px;
    color: #747470;
    font-size: 12px;
    line-height: 1.65;
}

.moments-comment-role-sheet-list {
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 14px 10px;
}

.moments-comment-role-option {
    width: 100%;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(17, 17, 17, .055);
    border-radius: 20px;
    background: #fff;
    color: #151515;
    text-align: left;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.moments-comment-role-option:active {
    transform: scale(.985);
}

.moments-comment-role-option.is-selected {
    border-color: rgba(17, 17, 17, .2);
    background: #fff;
}

.moments-comment-role-option img {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 15px;
    object-fit: cover;
    background: #efefed;
}

.moments-comment-role-option-copy {
    min-width: 0;
    flex: 1;
}

.moments-comment-role-option-copy strong,
.moments-comment-role-option-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moments-comment-role-option-copy strong {
    font-size: 14px;
    font-weight: 600;
}

.moments-comment-role-option-copy small {
    margin-top: 4px;
    color: #aaa9a5;
    font-size: 11px;
}

.moments-comment-role-option-check {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 50%;
    background: #efefed;
    color: transparent;
    font-size: 17px;
}

.moments-comment-role-option.is-selected .moments-comment-role-option-check {
    border-color: #111;
    background: #111;
    color: #fff;
}

.moments-comment-role-sheet-empty {
    padding: 34px 16px;
    border-radius: 20px;
    background: #fff;
    color: #aaa9a5;
    font-size: 13px;
    text-align: center;
}

.moments-comment-role-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px 4px;
    border-top: 1px solid rgba(17, 17, 17, .065);
    background: rgba(246, 246, 243, .96);
}

.moments-comment-role-sheet-footer span {
    color: #747470;
    font-size: 12px;
}

.moments-comment-role-sheet-save {
    min-width: 92px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* 聊天背景：独立的全屏滚动设置页，避免底部操作被旧弹窗高度裁切。 */
#bg-setting-modal.chat-background-modal {
    background: #f6f6f3 !important;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

#bg-setting-modal .chat-background-header {
    height: 56px;
    min-height: 56px;
    padding: max(8px, env(safe-area-inset-top, 0px)) 16px 0;
    box-sizing: content-box;
    background: rgba(246, 246, 243, .96);
    border-bottom: 1px solid rgba(17, 17, 17, .07);
}

#bg-setting-modal .chat-background-header .modal-title {
    color: #151515;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.2px;
}

#bg-setting-modal .chat-background-back,
#bg-setting-modal .modal-placeholder {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}

#bg-setting-modal .chat-background-back {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #151515;
    font-size: 24px;
    cursor: pointer;
}

#bg-setting-modal .chat-background-back:active {
    background: #e7e7e4;
    transform: scale(.96);
}

#bg-setting-modal .chat-background-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    width: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 24px 20px calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    text-align: left !important;
}

#bg-setting-modal .chat-background-copy {
    margin: 0 2px 18px;
}

#bg-setting-modal .chat-background-eyebrow {
    color: #aaa9a5;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 1.5px;
}

#bg-setting-modal .chat-background-copy p {
    margin: 7px 0 0;
    color: #747470;
    font-size: 13px;
    line-height: 1.6;
}

#bg-setting-modal .chat-background-preview-card {
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, .065);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .035);
}

#bg-setting-modal #bg-preview-box {
    width: auto;
    height: min(52vw, 260px);
    min-height: 190px;
    margin: 0;
    border-radius: 0;
    background-color: #efefed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #8d8d88;
    font-size: 13px;
}

#bg-setting-modal .chat-background-preview-caption {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    color: #747470;
    font-size: 11px;
    line-height: 1.4;
}

#bg-setting-modal .chat-background-preview-caption i {
    color: #151515;
    font-size: 16px;
}

#bg-setting-modal .chat-background-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

#bg-setting-modal .chat-background-btn,
#bg-setting-modal .chat-background-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    border-radius: 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease;
}

#bg-setting-modal .chat-background-btn i,
#bg-setting-modal .chat-background-reset i {
    font-size: 18px;
    font-weight: 400;
}

#bg-setting-modal .chat-background-btn.secondary {
    border: 1px solid rgba(17, 17, 17, .1);
    background: #fff;
    color: #151515;
}

#bg-setting-modal .chat-background-btn.primary {
    border: 1px solid #111;
    background: #111;
    color: #fff;
}

#bg-setting-modal .chat-background-btn:active,
#bg-setting-modal .chat-background-reset:active {
    transform: scale(.98);
}

#bg-setting-modal .chat-background-reset {
    width: 100%;
    margin: 12px 0 0;
    border: 0;
    background: transparent;
    color: #747470;
}

#bg-setting-modal .chat-background-reset:hover {
    background: #efefed;
    color: #151515;
}

/* V3 模型原始返回日志：移动端本地诊断页 */
.v3-response-log-page {
    --v3-log-ink: #171715;
    --v3-log-muted: #777772;
    --v3-log-line: rgba(24, 24, 22, .09);
    padding: 2px 0 calc(22px + env(safe-area-inset-bottom, 0px));
    color: var(--v3-log-ink);
}

.v3-response-log-overview {
    padding: 20px 18px 17px;
    border: 1px solid var(--v3-log-line);
    border-radius: 22px;
    background: linear-gradient(145deg, #fff 0%, #f4f4f1 100%);
    box-shadow: 0 12px 30px rgba(22, 22, 20, .055);
}

.v3-response-log-kicker {
    margin-bottom: 8px;
    color: #8b8b85;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

.v3-response-log-overview h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.v3-response-log-overview p {
    margin: 8px 0 0;
    color: var(--v3-log-muted);
    font-size: 12px;
    line-height: 1.65;
}

.v3-response-log-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 17px;
    overflow: hidden;
    border: 1px solid var(--v3-log-line);
    border-radius: 15px;
    background: var(--v3-log-line);
}

.v3-response-log-metrics div {
    display: flex;
    min-width: 0;
    padding: 10px 8px;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, .8);
}

.v3-response-log-metrics strong {
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
}

.v3-response-log-metrics span {
    margin-top: 5px;
    color: #92928d;
    font-size: 10px;
}

.v3-response-log-privacy {
    display: flex;
    gap: 9px;
    margin: 12px 2px 0;
    padding: 11px 12px;
    border-radius: 14px;
    background: #efefec;
    color: #6f6f6a;
    font-size: 11px;
    line-height: 1.55;
}

.v3-response-log-privacy i {
    margin-top: 1px;
    color: #242422;
    font-size: 15px;
    flex: 0 0 auto;
}

.v3-response-log-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 13px;
}

.v3-response-log-actions button,
.v3-response-log-copy {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--v3-log-line);
    border-radius: 14px;
    background: #fff;
    color: var(--v3-log-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.v3-response-log-actions button.is-primary {
    border-color: #171715;
    background: #171715;
    color: #fff;
}

.v3-response-log-actions button:disabled {
    opacity: .32;
}

.v3-response-log-notice {
    position: sticky;
    z-index: 2;
    top: 6px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 12px auto 0;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(23, 23, 21, .92);
    color: #fff;
    font-size: 11px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.v3-response-log-list {
    display: grid;
    gap: 12px;
    margin-top: 15px;
}

.v3-response-log-card {
    padding: 15px;
    border: 1px solid var(--v3-log-line);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(25, 25, 22, .04);
}

.v3-response-log-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.v3-response-log-index {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: #eeeeeb;
    color: #5f5f5a;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.v3-response-log-card-meta {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.v3-response-log-card-meta strong {
    font-size: 13px;
    font-weight: 650;
}

.v3-response-log-card-meta span {
    margin-top: 2px;
    color: #999994;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.v3-response-log-status {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eeeeeb;
    color: #666660;
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

.v3-response-log-card[data-tone="ok"] .v3-response-log-status {
    background: #e8eee7;
    color: #4d6550;
}

.v3-response-log-card[data-tone="warn"] .v3-response-log-status {
    background: #f1ede3;
    color: #766846;
}

.v3-response-log-card[data-tone="error"] .v3-response-log-status {
    background: #f1e7e5;
    color: #7b504b;
}

.v3-response-log-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.v3-response-log-facts span {
    padding: 4px 7px;
    border-radius: 7px;
    background: #f4f4f1;
    color: #7d7d77;
    font-size: 9px;
}

.v3-response-log-reason-title {
    margin-top: 14px;
    color: #8b8b85;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

.v3-response-log-reasons {
    display: grid;
    gap: 8px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.v3-response-log-reasons li {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding-left: 10px;
    border-left: 2px solid #9e7d77;
    color: #474743;
    font-size: 11px;
    line-height: 1.45;
}

.v3-response-log-reasons li.is-ok {
    border-left-color: #879787;
}

.v3-response-log-reasons code {
    overflow-wrap: anywhere;
    color: #a0a09a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
}

.v3-response-log-raw {
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid var(--v3-log-line);
    border-radius: 13px;
    background: #f6f6f3;
}

.v3-response-log-raw summary {
    display: flex;
    min-height: 42px;
    padding: 0 12px;
    align-items: center;
    justify-content: space-between;
    color: #4d4d49;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.v3-response-log-raw summary::-webkit-details-marker {
    display: none;
}

.v3-response-log-raw summary i {
    font-size: 17px;
    transition: transform .18s ease;
}

.v3-response-log-raw[open] summary i {
    transform: rotate(180deg);
}

.v3-response-log-raw pre {
    max-height: 330px;
    margin: 0;
    padding: 12px;
    overflow: auto;
    border-top: 1px solid var(--v3-log-line);
    color: #343431;
    font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
}

.v3-response-log-no-raw {
    margin-top: 13px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f4f4f1;
    color: #8b8b85;
    font-size: 10px;
}

.v3-response-log-copy {
    width: 100%;
    min-height: 40px;
    margin-top: 9px;
    background: transparent;
}

.v3-response-log-empty,
.v3-response-log-loading {
    display: flex;
    min-height: 210px;
    margin-top: 15px;
    padding: 25px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    border: 1px dashed rgba(24, 24, 22, .13);
    border-radius: 20px;
    color: #8c8c86;
    text-align: center;
}

.v3-response-log-empty i {
    margin-bottom: 3px;
    color: #777772;
    font-size: 27px;
}

.v3-response-log-empty strong {
    color: #454541;
    font-size: 13px;
}

.v3-response-log-empty span,
.v3-response-log-loading {
    font-size: 11px;
    line-height: 1.55;
}

.v3-response-log-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b3b38;
    box-shadow: 14px 0 0 #9b9b95, -14px 0 0 #d2d2ce;
    animation: v3-response-log-pulse 1s ease-in-out infinite alternate;
}

@keyframes v3-response-log-pulse {
    from { opacity: .42; transform: scale(.88); }
    to { opacity: 1; transform: scale(1); }
}

/* =========================================================
   叙事入口 · 双身份选择
   ========================================================= */
body.offline-entry-open {
    overflow: hidden;
}

/* 默认隐藏线上承接记录；多人模式的“承接线上”会按需展示。 */
#offline-memory-preview {
    display: none;
}

.offline-entry-mask {
    z-index: 12020;
    overflow: hidden;
    background: #f7f7f4;
    color: #171715;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

.offline-entry-page {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 4%, rgba(0, 0, 0, .035), transparent 28%),
        linear-gradient(180deg, #fbfbf8 0%, #f5f5f1 100%);
    isolation: isolate;
}

.offline-entry-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .38;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent 31px, rgba(24, 24, 22, .025) 32px);
}

.offline-entry-topbar {
    min-height: 46px;
    padding: max(10px, env(safe-area-inset-top, 0px)) 18px 4px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: content-box;
}

.offline-entry-topbar-title {
    color: #4a4a46;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .18em;
    text-align: center;
}

.offline-entry-back,
.offline-entry-picker-head button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(22, 22, 20, .07);
    border-radius: 50%;
    background: rgba(255, 255, 252, .76);
    color: #222220;
    box-shadow: 0 5px 18px rgba(28, 28, 25, .035);
    -webkit-tap-highlight-color: transparent;
}

.offline-entry-back svg,
.offline-entry-picker-head button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-entry-topbar-space {
    width: 40px;
    height: 40px;
}

.offline-entry-stage {
    min-height: 0;
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
}

.offline-entry-stage.is-active {
    display: flex;
    animation: offline-entry-stage-in .24s ease both;
}

@keyframes offline-entry-stage-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.offline-entry-main {
    min-height: 0;
    padding: clamp(14px, 4vh, 38px) 22px 10px;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.offline-entry-copy {
    width: 100%;
    max-width: 430px;
    text-align: center;
}

.offline-entry-eyebrow {
    color: #85857e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .28em;
}

.offline-entry-copy h1 {
    margin: 12px 0 9px;
    color: #171715;
    font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.035em;
}

.offline-entry-copy p {
    margin: 0;
    color: #84847e;
    font-size: 12px;
    line-height: 1.75;
    letter-spacing: .025em;
}

.offline-entry-cast-tabs {
    width: max-content;
    min-height: 32px;
    margin: 18px auto 0;
    padding: 3px;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(54px, 1fr));
    gap: 2px;
    border: 1px solid rgba(22, 22, 20, .08);
    border-radius: 12px;
    background: rgba(255, 255, 252, .56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 7px 20px rgba(28, 28, 25, .035);
}

.offline-entry-cast-tabs button {
    min-width: 58px;
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #91918a;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.offline-entry-cast-tabs button.is-selected {
    background: #242422;
    color: #fff;
    box-shadow: 0 3px 8px rgba(24, 24, 22, .16);
}

.offline-entry-cast-tabs button:disabled {
    opacity: .55;
}

.offline-entry-pair {
    position: relative;
    width: min(100%, 390px);
    height: clamp(238px, 38vh, 318px);
    margin: clamp(24px, 4vh, 40px) auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offline-entry-pair.is-hidden {
    display: none;
}

.offline-entry-multi-cast {
    width: min(100%, 390px);
    margin: 19px auto 8px;
    display: none;
}

.offline-entry-multi-cast.is-visible {
    display: block;
    animation: offline-entry-stage-in .2s ease both;
}

.offline-entry-multi-cast-head {
    margin: 0 2px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #4f4f4a;
    font-size: 12px;
    font-weight: 650;
}

.offline-entry-multi-cast-head small {
    color: #a0a09a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.offline-entry-multi-role-list {
    max-height: min(34vh, 270px);
    padding: 2px 2px 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.offline-entry-multi-role {
    position: relative;
    min-width: 0;
    aspect-ratio: .78;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 18px;
    background: #e3e3df;
    box-shadow: 0 9px 20px rgba(27, 27, 24, .09);
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.offline-entry-multi-role > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.68) contrast(.96);
}

.offline-entry-multi-role::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 9, .02) 36%, rgba(10, 10, 9, .72) 100%);
}

.offline-entry-multi-role > span {
    position: absolute;
    right: 9px;
    bottom: 9px;
    left: 9px;
    z-index: 1;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .22);
    white-space: nowrap;
}

.offline-entry-multi-role > i {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(22, 22, 20, .26);
    opacity: 0;
    transform: scale(.75);
    transition: opacity .18s ease, transform .18s ease;
}

.offline-entry-multi-role > i svg,
.offline-entry-multi-user-card svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-entry-multi-role.is-selected {
    border-color: #242422;
    box-shadow: 0 0 0 2px #242422, 0 11px 23px rgba(27, 27, 24, .15);
    transform: translateY(-2px);
}

.offline-entry-multi-role.is-selected > i {
    background: #242422;
    opacity: 1;
    transform: scale(1);
}

.offline-entry-multi-role:active:not(:disabled) {
    transform: scale(.975);
}

.offline-entry-multi-role:focus-visible,
.offline-entry-multi-user-card:focus-visible {
    outline: 2px solid #1d1d1b;
    outline-offset: 3px;
}

.offline-entry-multi-user-card {
    width: 100%;
    min-height: 60px;
    margin-top: 7px;
    padding: 7px 12px 7px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(24, 24, 22, .075);
    border-radius: 16px;
    background: rgba(255, 255, 252, .72);
    box-shadow: 0 7px 20px rgba(28, 28, 25, .04);
    color: #282826;
    text-align: left;
}

.offline-entry-multi-user-card > img {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 13px;
    object-fit: cover;
    filter: saturate(.55) contrast(.96) brightness(1.02);
}

.offline-entry-multi-user-card > span {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.offline-entry-multi-user-card small {
    color: #92928c;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}

.offline-entry-multi-user-card strong {
    overflow: hidden;
    color: #363633;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-entry-multi-user-card > svg {
    flex: 0 0 auto;
    color: #8d8d86;
}

.offline-entry-photo-card {
    position: relative;
    width: clamp(142px, 43vw, 184px);
    height: clamp(214px, 34vh, 276px);
    padding: 0;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 27px;
    background: #e5e5e0;
    box-shadow: 0 22px 48px rgba(27, 27, 24, .13), 0 4px 12px rgba(27, 27, 24, .08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s ease;
}

.offline-entry-photo-card.is-role {
    z-index: 1;
    margin-right: -22px;
    transform: rotate(-7deg) translateY(7px);
}

.offline-entry-photo-card.is-user {
    z-index: 2;
    margin-left: -22px;
    transform: rotate(7deg) translateY(-2px);
}

.offline-entry-photo-card:active {
    box-shadow: 0 13px 28px rgba(27, 27, 24, .12);
}

.offline-entry-photo-card.is-role:active {
    transform: rotate(-5deg) translateY(9px) scale(.985);
}

.offline-entry-photo-card.is-user:active {
    transform: rotate(5deg) translateY(0) scale(.985);
}

.offline-entry-photo-card:focus-visible {
    outline: 2px solid #1d1d1b;
    outline-offset: 4px;
}

.offline-entry-photo-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.72) contrast(.96);
}

.offline-entry-photo-card.is-user > img {
    filter: saturate(.55) contrast(.96) brightness(1.02);
}

.offline-entry-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 9, .03) 34%, rgba(10, 10, 9, .78) 100%);
}

.offline-entry-photo-meta {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 17px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    color: #fff;
    text-align: left;
}

.offline-entry-photo-meta small {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .69);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .2em;
}

.offline-entry-photo-meta strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-entry-photo-meta em {
    margin-top: 5px;
    color: rgba(255, 255, 255, .74);
    font-size: 9px;
    font-style: normal;
    letter-spacing: .06em;
}

.offline-entry-pair-mark {
    position: absolute;
    left: 50%;
    bottom: 7px;
    z-index: 4;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 5px solid #f7f7f4;
    border-radius: 50%;
    background: #1d1d1b;
    color: #fff;
    box-shadow: 0 8px 24px rgba(20, 20, 18, .2);
    transform: translateX(-50%);
}

.offline-entry-pair-mark svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-entry-status {
    min-height: 18px;
    color: #8a8a84;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
}

.offline-entry-status.is-warning {
    color: #77776f;
}

.offline-entry-footer {
    padding: 12px 22px max(18px, env(safe-area-inset-bottom, 0px));
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(247, 247, 244, 0), #f7f7f4 22%);
    text-align: center;
}

.offline-entry-start {
    width: min(100%, 430px);
    min-height: 54px;
    margin: 0 auto;
    padding: 0 19px 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 18px;
    background: #1c1c1a;
    color: #fff;
    box-shadow: 0 12px 28px rgba(25, 25, 23, .15);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.offline-entry-start svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-entry-start:active:not(:disabled) {
    transform: scale(.985);
}

.offline-entry-start:disabled {
    background: #d8d8d3;
    color: #969690;
    box-shadow: none;
    cursor: default;
}

.offline-entry-footer > small {
    display: block;
    margin-top: 9px;
    color: #9a9a94;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .03em;
}

.offline-entry-picker {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    visibility: hidden;
    pointer-events: none;
}

.offline-entry-picker.is-open {
    visibility: visible;
    pointer-events: auto;
}

.offline-entry-picker-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(24, 24, 22, .28);
    opacity: 0;
    transition: opacity .25s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.offline-entry-picker.is-open .offline-entry-picker-backdrop {
    opacity: 1;
}

.offline-entry-picker-sheet {
    position: relative;
    width: 100%;
    max-height: min(72%, 620px);
    padding: 9px 18px max(18px, env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(28, 28, 25, .06);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    background: rgba(252, 252, 249, .97);
    box-shadow: 0 -18px 50px rgba(22, 22, 20, .12);
    transform: translateY(105%);
    transition: transform .32s cubic-bezier(.2, .82, .2, 1);
}

.offline-entry-picker.is-open .offline-entry-picker-sheet {
    transform: translateY(0);
}

.offline-entry-picker-handle {
    width: 34px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 99px;
    background: #d7d7d1;
}

.offline-entry-picker-head {
    padding: 8px 2px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(26, 26, 23, .065);
}

.offline-entry-picker-head small {
    display: block;
    margin-bottom: 4px;
    color: #989891;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .22em;
}

.offline-entry-picker-head h2 {
    margin: 0;
    color: #1d1d1a;
    font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
    font-size: 21px;
    font-weight: 650;
}

.offline-entry-picker-head button {
    width: 36px;
    height: 36px;
    border-color: rgba(22, 22, 20, .055);
    background: #f2f2ee;
    box-shadow: none;
}

.offline-entry-picker-head button svg {
    width: 18px;
    height: 18px;
}

.offline-entry-picker-list {
    min-height: 90px;
    padding: 10px 0 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.offline-entry-picker-option {
    width: 100%;
    min-height: 66px;
    padding: 8px 4px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(26, 26, 23, .055);
    background: transparent;
    color: #1e1e1b;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.offline-entry-picker-option:last-child {
    border-bottom: 0;
}

.offline-entry-picker-option > img {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    background: #e7e7e2;
    object-fit: cover;
    filter: saturate(.72);
}

.offline-entry-picker-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.offline-entry-picker-option-copy strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-entry-picker-option-copy small {
    margin-top: 5px;
    overflow: hidden;
    color: #8b8b84;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-entry-picker-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid #d5d5cf;
    border-radius: 50%;
    color: transparent;
}

.offline-entry-picker-option.is-selected .offline-entry-picker-check {
    border-color: #20201e;
    background: #20201e;
    color: #fff;
}

.offline-entry-picker-check svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-entry-picker-empty {
    padding: 42px 18px;
    color: #92928b;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

.offline-entry-plot-main {
    min-height: 0;
    padding: clamp(20px, 5vh, 48px) 20px 16px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.offline-entry-plot-copy {
    margin: 0 auto 27px;
    text-align: left;
}

.offline-entry-plot-copy h1 {
    margin-top: 11px;
    font-size: clamp(27px, 7.5vw, 35px);
}

.offline-entry-plot-copy .offline-entry-plot-caption {
    color: #aaa9a3;
    font-family: Georgia, serif;
    font-size: 8px;
    font-style: italic;
    letter-spacing: .16em;
}

.offline-entry-mode-list {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: grid;
    gap: 11px;
}

.offline-entry-mode-card {
    width: 100%;
    min-height: 92px;
    padding: 15px 14px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(24, 24, 22, .065);
    border-radius: 22px;
    background: rgba(255, 255, 252, .78);
    color: #20201e;
    box-shadow: 0 5px 20px rgba(20, 20, 18, .025);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.offline-entry-mode-card:active:not(:disabled) {
    transform: scale(.988);
}

.offline-entry-mode-card.is-selected {
    border-color: #20201e;
    background: #fff;
}

.offline-entry-mode-card:disabled {
    opacity: .42;
    cursor: default;
}

.offline-entry-mode-index {
    align-self: start;
    padding-top: 2px;
    color: #a2a29b;
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: italic;
    letter-spacing: .08em;
}

.offline-entry-mode-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.offline-entry-mode-copy strong {
    font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.offline-entry-mode-copy small {
    margin-top: 7px;
    color: #85857e;
    font-size: 10px;
    line-height: 1.65;
}

.offline-entry-mode-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid #d7d7d1;
    border-radius: 50%;
    color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.offline-entry-mode-card.is-selected .offline-entry-mode-check {
    border-color: #20201e;
    background: #20201e;
    color: #fff;
}

.offline-entry-mode-check svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-entry-resume-panel {
    width: 100%;
    max-width: 430px;
    margin: 15px auto 0;
    padding: 15px;
    display: none;
    box-sizing: border-box;
    border: 1px solid rgba(24, 24, 22, .065);
    border-radius: 22px;
    background: #efefeb;
}

.offline-entry-resume-panel.is-visible {
    display: block;
    animation: offline-entry-stage-in .22s ease both;
}

.offline-entry-resume-head {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #5f5f5a;
    font-size: 11px;
    font-weight: 650;
}

.offline-entry-resume-head small {
    color: #a0a099;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
}

.offline-entry-resume-list {
    display: grid;
    gap: 7px;
}

.offline-entry-resume-option {
    width: 100%;
    min-height: 58px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 15px;
    background: rgba(255, 255, 252, .72);
    color: #292926;
    text-align: left;
    cursor: pointer;
}

.offline-entry-resume-option.is-selected {
    border-color: rgba(24, 24, 22, .28);
    background: #fff;
}

.offline-entry-resume-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.offline-entry-resume-option-copy strong,
.offline-entry-resume-option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-entry-resume-option-copy strong {
    font-size: 12px;
    font-weight: 650;
}

.offline-entry-resume-option-copy small {
    margin-top: 5px;
    color: #909089;
    font-size: 9px;
}

.offline-entry-resume-option > svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #8e8e87;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-entry-detail-panel {
    width: 100%;
    max-width: 430px;
    margin: 15px auto 0;
    padding: 16px;
    display: none;
    box-sizing: border-box;
    border: 1px solid rgba(24, 24, 22, .065);
    border-radius: 22px;
    background: rgba(255, 255, 252, .76);
    box-shadow: 0 5px 20px rgba(20, 20, 18, .025);
}

.offline-entry-detail-panel.is-visible {
    display: block;
    animation: offline-entry-stage-in .22s ease both;
}

.offline-entry-detail-head {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3d3d39;
    font-size: 13px;
    font-weight: 650;
}

.offline-entry-detail-head small {
    color: #a0a099;
    font-family: Georgia, serif;
    font-size: 8px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .15em;
}

#offline-entry-new-plot-input {
    width: 100%;
    min-height: 112px;
    padding: 13px 14px;
    display: block;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid rgba(24, 24, 22, .065);
    border-radius: 16px;
    outline: 0;
    background: #f1f1ed;
    color: #242421;
    font: 13px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    transition: border-color .2s ease, background .2s ease;
}

#offline-entry-new-plot-input::placeholder {
    color: #aaa9a3;
}

#offline-entry-new-plot-input:focus {
    border-color: rgba(24, 24, 22, .22);
    background: #f7f7f4;
}

.offline-entry-new-plot-meta {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #999992;
    font-size: 8px;
    line-height: 1.5;
}

.offline-entry-opener-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.offline-entry-opener-options button {
    min-height: 43px;
    padding: 0 14px;
    border: 1px solid rgba(24, 24, 22, .07);
    border-radius: 14px;
    background: #efefeb;
    color: #74746e;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.offline-entry-opener-options button:active:not(:disabled) {
    transform: scale(.98);
}

.offline-entry-opener-options button.is-selected {
    border-color: #20201e;
    background: #20201e;
    color: #fff;
}

.offline-entry-opener-options button:disabled {
    opacity: .48;
    cursor: default;
}

.offline-entry-plot-footer {
    display: none;
}

.offline-entry-plot-footer.is-visible {
    display: block;
    animation: offline-entry-stage-in .22s ease both;
}

@media (max-height: 690px) {
    .offline-entry-main {
        padding-top: 8px;
    }

    .offline-entry-copy h1 {
        margin-top: 8px;
        font-size: 25px;
    }

    .offline-entry-pair {
        height: 232px;
        margin-top: 14px;
    }

    .offline-entry-photo-card {
        height: 218px;
    }

    .offline-entry-pair-mark {
        bottom: -4px;
    }

    .offline-entry-plot-main {
        padding-top: 10px;
    }

    .offline-entry-plot-copy {
        margin-bottom: 15px;
    }

    .offline-entry-mode-card {
        min-height: 78px;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

@media (max-width: 350px) {
    .offline-entry-main,
    .offline-entry-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .offline-entry-photo-card {
        width: 148px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .offline-entry-photo-card,
    .offline-entry-start,
    .offline-entry-picker-backdrop,
    .offline-entry-picker-sheet,
    .offline-entry-stage,
    .offline-entry-resume-panel,
    .offline-entry-detail-panel,
    .offline-entry-plot-footer {
        transition-duration: .01ms;
        animation-duration: .01ms;
    }
}

/* Narrative theme behavior fixes */
.offline-overlay[data-offline-bg="custom"] {
    isolation: isolate;
    background-color: #eef2f7 !important;
    background-image: var(--offline-custom-bg) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.offline-overlay[data-offline-bg="custom"]::before {
    inset: -5% !important;
    width: auto;
    height: auto;
    background-image: var(--offline-custom-bg) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--offline-custom-blur, 0px));
    -webkit-filter: blur(var(--offline-custom-blur, 0px));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: scale(1.08);
    z-index: 0;
}

.offline-overlay[data-offline-bg="custom"] > .offline-topbar,
.offline-overlay[data-offline-bg="custom"] > .offline-body,
.offline-overlay[data-offline-bg="custom"] > .offline-inputbar {
    position: relative;
    z-index: 1;
}

.offline-overlay[data-offline-bg="custom"] > .offline-dialog-mask,
.offline-overlay[data-offline-bg="custom"] > .offline-comment-sheet-mask,
.offline-overlay[data-offline-bg="custom"] > .offline-setup-mask,
.offline-overlay[data-offline-bg="custom"] > .offline-summary-page {
    position: absolute;
}

.offline-overlay[data-offline-bg="custom"] > .offline-dialog-mask,
.offline-overlay[data-offline-bg="custom"] > .offline-comment-sheet-mask {
    z-index: 110;
}

.offline-overlay[data-offline-bg="custom"] > .offline-setup-mask {
    z-index: 120;
}

.offline-overlay[data-offline-bg="custom"] > .offline-summary-page {
    z-index: 130;
}

.offline-overlay[data-offline-bg="custom"] > .offline-body,
.offline-overlay[data-offline-reading-style="preset-4"][data-offline-bg="custom"] > .offline-body {
    background: transparent !important;
}

.offline-overlay[data-offline-bg="custom"] .offline-novel-entry,
.offline-overlay[data-offline-reading-style="preset-2"][data-offline-bg="custom"] .offline-novel-entry,
.offline-overlay[data-offline-reading-style="preset-3"][data-offline-bg="custom"] .offline-novel-entry,
.offline-overlay[data-offline-reading-style="preset-4"][data-offline-bg="custom"] .offline-novel-entry {
    background: var(--offline-reader-surface) !important;
    border-color: var(--offline-reader-border) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.offline-overlay[data-offline-color="dark-night"],
.offline-overlay[data-offline-color="dark-ink"] {
    background-color: #0f1319 !important;
    color: #f2f5f8;
}

.offline-overlay[data-offline-color="dark-night"] .offline-body,
.offline-overlay[data-offline-color="dark-ink"] .offline-body {
    background: linear-gradient(180deg, #12171e 0%, #0c1015 100%) !important;
}

.offline-overlay[data-offline-color="dark-night"][data-offline-bg="custom"] .offline-body,
.offline-overlay[data-offline-color="dark-ink"][data-offline-bg="custom"] .offline-body {
    background: transparent !important;
}

.offline-overlay[data-offline-color="dark-night"] .offline-topbar,
.offline-overlay[data-offline-color="dark-ink"] .offline-topbar,
.offline-overlay[data-offline-color="dark-night"] .offline-inputbar,
.offline-overlay[data-offline-color="dark-ink"] .offline-inputbar,
.offline-overlay[data-offline-reading-style="preset-4"][data-offline-color="dark-night"] .offline-topbar,
.offline-overlay[data-offline-reading-style="preset-4"][data-offline-color="dark-night"] .offline-inputbar,
.offline-overlay[data-offline-reading-style="preset-4"][data-offline-color="dark-ink"] .offline-topbar,
.offline-overlay[data-offline-reading-style="preset-4"][data-offline-color="dark-ink"] .offline-inputbar {
    background: rgba(14, 18, 24, .86) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.offline-overlay[data-offline-color="dark-night"] .offline-topbar-title,
.offline-overlay[data-offline-color="dark-ink"] .offline-topbar-title,
.offline-overlay[data-offline-color="dark-night"] .offline-topbar-btn,
.offline-overlay[data-offline-color="dark-ink"] .offline-topbar-btn {
    color: #eef2f6 !important;
}

.offline-overlay[data-offline-color="dark-night"] .offline-input,
.offline-overlay[data-offline-color="dark-ink"] .offline-input,
.offline-overlay[data-offline-reading-style="preset-3"][data-offline-color="dark-night"] .offline-input,
.offline-overlay[data-offline-reading-style="preset-3"][data-offline-color="dark-ink"] .offline-input {
    border-color: rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #f2f5f8 !important;
}

.offline-overlay[data-offline-color="dark-night"] .offline-rewind,
.offline-overlay[data-offline-color="dark-ink"] .offline-rewind {
    border-color: rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #dce2e9 !important;
}

.offline-summary-page .offline-summary-panel {
    display: grid;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.offline-summary-zone,
.offline-summary-results {
    padding: 18px;
    border: 1px solid rgba(59, 74, 94, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 34px rgba(57, 71, 90, .045);
}

.offline-summary-zone-index {
    margin-bottom: 15px;
    color: #9aa5b3;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}

.offline-summary-page .offline-summary-zone .offline-summary-setting-row {
    padding-bottom: 0;
    border-bottom: 0;
}

.offline-summary-zone-manual .offline-summary-actions {
    margin-top: 17px;
}

.offline-summary-zone-manual .offline-outline-action {
    width: 100%;
}

.offline-summary-results-title {
    color: #3c4856;
    font-size: 11px;
    font-weight: 650;
}

.offline-summary-page .offline-summary-results .offline-summary-list {
    margin-top: 12px;
}

.offline-overlay[data-offline-color="dark-night"] .offline-summary-zone,
.offline-overlay[data-offline-color="dark-night"] .offline-summary-results,
.offline-overlay[data-offline-color="dark-ink"] .offline-summary-zone,
.offline-overlay[data-offline-color="dark-ink"] .offline-summary-results {
    border-color: rgba(255, 255, 255, .08);
    background: #1b212a;
    box-shadow: none;
}

.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer .offline-setup-header,
.offline-overlay[data-offline-color="dark-night"] .offline-settings-footer,
.offline-overlay[data-offline-color="dark-night"] .offline-summary-page-header,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer .offline-setup-header,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-footer,
.offline-overlay[data-offline-color="dark-ink"] .offline-summary-page-header {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(21, 26, 33, .94);
}

.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer .offline-setup-title,
.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer .offline-form-label,
.offline-overlay[data-offline-color="dark-night"] .offline-summary-page-title,
.offline-overlay[data-offline-color="dark-night"] .offline-summary-setting-title,
.offline-overlay[data-offline-color="dark-night"] .offline-summary-results-title,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer .offline-setup-title,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer .offline-form-label,
.offline-overlay[data-offline-color="dark-ink"] .offline-summary-page-title,
.offline-overlay[data-offline-color="dark-ink"] .offline-summary-setting-title,
.offline-overlay[data-offline-color="dark-ink"] .offline-summary-results-title {
    color: #edf1f5;
}

.offline-overlay[data-offline-color="dark-night"] .offline-settings-section,
.offline-overlay[data-offline-color="dark-night"] .offline-beautify-section .offline-reader-section,
.offline-overlay[data-offline-color="dark-night"] .offline-settings-details,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-section,
.offline-overlay[data-offline-color="dark-ink"] .offline-beautify-section .offline-reader-section,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-details {
    border-color: rgba(255, 255, 255, .065);
}

.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer .offline-select,
.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer .offline-textarea,
.offline-overlay[data-offline-color="dark-night"] .offline-word-range-box,
.offline-overlay[data-offline-color="dark-night"] .offline-perspective-list > button,
.offline-overlay[data-offline-color="dark-night"] .offline-comment-persona-card,
.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer .offline-style-preset,
.offline-overlay[data-offline-color="dark-night"] .offline-settings-drawer .offline-fontsize-row,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer .offline-select,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer .offline-textarea,
.offline-overlay[data-offline-color="dark-ink"] .offline-word-range-box,
.offline-overlay[data-offline-color="dark-ink"] .offline-perspective-list > button,
.offline-overlay[data-offline-color="dark-ink"] .offline-comment-persona-card,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer .offline-style-preset,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-drawer .offline-fontsize-row {
    border-color: rgba(255, 255, 255, .075);
    background-color: #1b212a;
    color: #e6ebf0;
    box-shadow: none;
}

.offline-overlay[data-offline-color="dark-night"] .offline-word-range-box input,
.offline-overlay[data-offline-color="dark-night"] .offline-perspective-list strong,
.offline-overlay[data-offline-color="dark-night"] .offline-setting-switch-row,
.offline-overlay[data-offline-color="dark-night"] .offline-settings-details > summary,
.offline-overlay[data-offline-color="dark-ink"] .offline-word-range-box input,
.offline-overlay[data-offline-color="dark-ink"] .offline-perspective-list strong,
.offline-overlay[data-offline-color="dark-ink"] .offline-setting-switch-row,
.offline-overlay[data-offline-color="dark-ink"] .offline-settings-details > summary {
    color: #e6ebf0;
}

.offline-injection-notice-layer {
    position: fixed;
    inset: 0;
    z-index: 100020;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 29, 38, .28);
    opacity: 0;
    box-sizing: border-box;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity .2s ease;
}

.offline-injection-notice-layer.is-open {
    opacity: 1;
}

.offline-injection-notice-card {
    width: min(360px, calc(100vw - 40px));
    padding: 23px 20px 18px;
    border: 1px solid rgba(49, 62, 78, .08);
    border-radius: 22px;
    background: #fbfcfe;
    color: #1e2834;
    box-shadow: 0 20px 60px rgba(36, 48, 63, .14);
    transform: translateY(7px) scale(.985);
    transition: transform .24s cubic-bezier(.22, .74, .24, 1);
}

.offline-injection-notice-layer.is-open .offline-injection-notice-card {
    transform: translateY(0) scale(1);
}

.offline-injection-notice-kicker {
    color: #9aa5b3;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .19em;
}

.offline-injection-notice-title {
    margin-top: 11px;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .035em;
}

.offline-injection-notice-desc {
    margin-top: 10px;
    color: #7f8a98;
    font-size: 12px;
    line-height: 1.75;
}

.offline-injection-notice-actions {
    margin-top: 21px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.offline-injection-notice-btn {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .03em;
    cursor: pointer;
}

.offline-injection-notice-btn.secondary {
    border: 1px solid rgba(49, 62, 78, .1);
    background: #f0f3f6;
    color: #626f7e;
}

.offline-injection-notice-btn.primary {
    border: 1px solid #202b38;
    background: #202b38;
    color: #fff;
}

.offline-injection-notice-btn:active {
    transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
    .offline-injection-notice-layer,
    .offline-injection-notice-card {
        transition-duration: .01ms;
    }
}

/* === Call history: compact list + bilateral transcript card === */
#call-log-modal.call-log-modal-layer {
    background: #f3f5f7;
    color: #17191c;
}

#call-log-modal .modal-header-bar {
    border-bottom: 1px solid rgba(25, 31, 38, .055);
    background: rgba(249, 250, 251, .92);
    box-shadow: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.call-log-body {
    flex: 1;
    min-height: 0;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.call-log-list {
    width: min(100%, 560px);
    margin: 0 auto;
    display: grid;
    gap: 10px;
}

.call-log-item {
    overflow: hidden;
    border: 1px solid rgba(32, 39, 47, .065);
    border-radius: 18px;
    background: #fbfcfd;
    box-shadow: 0 3px 14px rgba(37, 45, 54, .035);
    transition: border-color .18s ease, background-color .18s ease;
}

.call-log-item.is-open {
    border-color: rgba(32, 39, 47, .105);
}

.call-log-summary {
    min-height: 74px;
    padding: 10px 11px 10px 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.call-log-summary:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(25, 31, 38, .18);
}

.call-log-type-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eef1f4;
    color: #30363d;
}

.call-log-type-icon svg,
.call-log-del-btn svg,
.call-log-chevron svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.call-log-type-icon svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.55;
}

.call-log-summary-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.call-log-kicker,
.call-log-transcript-kicker {
    color: #9aa2ab;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .16em;
}

.call-log-title {
    overflow: hidden;
    color: #282d33;
    font-size: 12px;
    font-weight: 560;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-log-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.call-log-del-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #a6adb5;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, transform .12s ease;
}

.call-log-del-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.55;
}

.call-log-del-btn:hover,
.call-log-del-btn:focus-visible {
    background: #f0f2f4;
    color: #525a63;
    outline: none;
}

.call-log-del-btn:active {
    transform: scale(.9);
}

.call-log-chevron {
    width: 22px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #b2b8bf;
    transition: transform .2s ease;
}

.call-log-chevron svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.45;
}

.call-log-item.is-open .call-log-chevron {
    transform: rotate(90deg);
}

.call-log-dialog-layer[hidden] {
    display: none;
}

.call-log-dialog-layer {
    position: absolute;
    inset: 0;
    z-index: 24;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    box-sizing: border-box;
}

.call-log-dialog-scrim {
    position: absolute;
    inset: 0;
    background: rgba(33, 38, 44, .28);
    opacity: 0;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity .19s ease;
}

.call-log-dialog-card {
    position: relative;
    z-index: 1;
    width: min(390px, calc(100vw - 32px));
    max-height: min(78vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(26, 32, 39, .075);
    border-radius: 26px;
    background: #fbfcfd;
    box-shadow: 0 24px 70px rgba(25, 31, 38, .16);
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity .19s ease, transform .22s cubic-bezier(.22, .74, .24, 1);
}

.call-log-dialog-layer.is-visible .call-log-dialog-scrim,
.call-log-dialog-layer.is-visible .call-log-dialog-card {
    opacity: 1;
}

.call-log-dialog-layer.is-visible .call-log-dialog-card {
    transform: translateY(0) scale(1);
}

.call-log-dialog-toolbar {
    min-height: 52px;
    padding: 8px 10px 4px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.call-log-dialog-meta {
    min-width: 0;
    overflow: hidden;
    color: #9aa2ab;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-log-dialog-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: #f0f2f4;
    color: #69717a;
    cursor: pointer;
}

.call-log-dialog-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
}

.call-log-dialog-content {
    min-height: 0;
    padding: 8px 18px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.call-log-dialog-footer {
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(32, 39, 47, .06);
    background: rgba(251, 252, 253, .96);
}

.call-log-play-btn {
    width: 100%;
    min-height: 54px;
    padding: 8px 14px 8px 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: 18px;
    background: #272c31;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform .14s ease, background-color .18s ease;
}

.call-log-play-btn:active {
    transform: scale(.98);
}

.call-log-play-btn:disabled {
    background: #e5e8eb;
    color: #929aa3;
    cursor: default;
}

.call-log-play-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
}

.call-log-play-icon svg {
    grid-area: 1 / 1;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.call-log-play-icon .is-pause,
.call-log-play-btn.is-playing .call-log-play-icon .is-play {
    display: none;
}

.call-log-play-btn.is-playing .call-log-play-icon .is-pause {
    display: block;
}

.call-log-play-btn.is-loading .call-log-play-icon {
    animation: call-log-play-pulse 1s ease-in-out infinite;
}

.call-log-play-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.call-log-play-copy strong {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .02em;
}

.call-log-play-copy small {
    overflow: hidden;
    color: rgba(255, 255, 255, .62);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-log-play-btn:disabled .call-log-play-icon {
    background: rgba(255, 255, 255, .42);
}

.call-log-play-btn:disabled .call-log-play-copy small {
    color: #a0a7af;
}

@keyframes call-log-play-pulse {
    50% {
        opacity: .48;
        transform: scale(.92);
    }
}

.call-log-transcript-head {
    padding: 0 2px 13px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(32, 39, 47, .065);
}

.call-log-transcript-head > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.call-log-transcript-head strong {
    color: #272c31;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
}

.call-log-transcript-count {
    color: #969ea7;
    font-size: 10px;
}

.call-log-transcript-list {
    padding-top: 14px;
    display: grid;
    gap: 12px;
}

.call-log-message {
    display: flex;
    justify-content: flex-start;
}

.call-log-message.is-me {
    justify-content: flex-end;
}

.call-log-message-wrap {
    max-width: 82%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.call-log-message.is-me .call-log-message-wrap {
    align-items: flex-end;
}

.call-log-message-speaker {
    padding: 0 5px;
    color: #959da6;
    font-size: 9px;
    line-height: 1.2;
}

.call-log-message-bubble {
    padding: 9px 11px;
    border: 1px solid rgba(36, 43, 51, .065);
    border-radius: 6px 14px 14px 14px;
    background: #fbfcfd;
    color: #32383f;
    font-size: 12px;
    line-height: 1.72;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 9px rgba(36, 43, 51, .025);
}

.call-log-message.is-me .call-log-message-bubble {
    border-color: #272c31;
    border-radius: 14px 6px 14px 14px;
    background: #272c31;
    color: #f8f9fa;
    box-shadow: none;
}

.call-log-message.is-direction .call-log-message-bubble {
    border-style: dashed;
    background: rgba(251, 252, 253, .52);
    color: #7d858e;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-style: italic;
}

.call-log-message.is-me.is-direction .call-log-message-bubble {
    border-color: rgba(39, 44, 49, .18);
    background: #e5e8eb;
    color: #626a73;
}

.call-log-transcript-empty {
    padding: 30px 12px 24px;
    color: #9ca4ad;
    font-size: 12px;
    text-align: center;
}

.call-log-empty {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #a0a7af;
}

.call-log-empty span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}

.call-log-empty strong {
    color: #777f88;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 15px;
    font-weight: 500;
}

.call-log-batch-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(32, 39, 47, .06);
    background: rgba(249, 250, 251, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.call-log-batch-bar.is-visible {
    display: flex;
}

.call-log-batch-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(32, 39, 47, .08);
    border-radius: 12px;
    background: #eef1f3;
    color: #59616a;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.call-log-batch-btn.is-primary {
    flex: 1;
    border-color: #272c31;
    background: #272c31;
    color: #fff;
}

#call-log-modal.is-selecting .call-log-del-btn,
#call-log-modal.is-selecting .call-log-chevron {
    visibility: hidden;
}

.call-log-item.is-selected {
    border-color: rgba(39, 44, 49, .38);
    background: #eef1f3;
    box-shadow: inset 0 0 0 1px rgba(39, 44, 49, .08);
}

@supports (height: 1dvh) {
    .call-log-dialog-card {
        max-height: min(78dvh, 640px);
    }
}

@media (max-width: 360px) {
    .call-log-body {
        padding-right: 10px;
        padding-left: 10px;
    }

    .call-log-summary {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 8px;
        padding-right: 7px;
        padding-left: 9px;
    }

    .call-log-message-wrap {
        max-width: 88%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .call-log-item,
    .call-log-del-btn,
    .call-log-chevron,
    .call-log-dialog-scrim,
    .call-log-dialog-card,
    .call-log-play-btn {
        transition-duration: .01ms;
    }

    .call-log-play-btn.is-loading .call-log-play-icon {
        animation: none;
    }
}

/* 记忆互通：同一用户身份下的私聊记录选择器 */
.memory-interop-modal {
    --memory-ink: #151515;
    --memory-muted: #7c838d;
    --memory-line: rgba(17, 17, 17, .075);
    position: fixed;
    inset: 0;
    z-index: 100080;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.memory-interop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 21, 25, .28);
    opacity: 0;
    transition: opacity .24s ease;
}

.memory-interop-sheet {
    position: relative;
    width: min(100%, 460px);
    max-height: min(84vh, 720px);
    max-height: min(84dvh, 720px);
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, .055);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    background: #f7f9fc;
    color: var(--memory-ink);
    box-shadow: 0 -18px 50px rgba(18, 24, 32, .1);
    transform: translateY(104%);
    transition: transform .28s cubic-bezier(.22, .75, .25, 1);
}

.memory-interop-modal.show {
    pointer-events: auto;
}

.memory-interop-modal.show .memory-interop-backdrop {
    opacity: 1;
}

.memory-interop-modal.show .memory-interop-sheet {
    transform: translateY(0);
}

.memory-interop-handle {
    width: 34px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #d9dee5;
}

.memory-interop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.memory-interop-eyebrow {
    margin-bottom: 5px;
    color: #969da7;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.memory-interop-header h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 650;
    letter-spacing: -.5px;
}

.memory-interop-close {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    color: #202328;
    font-size: 22px;
}

.memory-interop-intro {
    margin: 12px 0 16px;
    color: #6f7680;
    font-size: 13px;
    line-height: 1.65;
}

.memory-interop-count-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 15px;
    border: 1px solid var(--memory-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .025);
}

.memory-interop-count-copy {
    display: grid;
    gap: 4px;
}

.memory-interop-count-copy span {
    font-size: 14px;
    font-weight: 600;
}

.memory-interop-count-copy small {
    color: #9299a3;
    font-size: 10px;
}

.memory-interop-count-control {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 92px;
    padding: 7px 10px;
    border-radius: 14px;
    background: #f0f3f7;
    color: #7a818b;
    font-size: 12px;
}

.memory-interop-count-control input {
    width: 56px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111;
    font: inherit;
    font-size: 18px;
    font-weight: 650;
    text-align: center;
}

.memory-interop-section-head {
    display: flex;
    justify-content: space-between;
    margin: 20px 2px 9px;
    color: #868d97;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .7px;
}

.memory-interop-role-list {
    display: grid;
    gap: 8px;
    max-height: min(34dvh, 300px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.memory-interop-role-list::-webkit-scrollbar {
    display: none;
}

.memory-interop-role {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 9px 13px 9px 10px;
    border: 1px solid var(--memory-line);
    border-radius: 19px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.memory-interop-role:active {
    transform: scale(.985);
}

.memory-interop-role.selected {
    border-color: #151515;
    background: #fcfcfd;
}

.memory-interop-role input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.memory-interop-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8ebef;
    object-fit: cover;
}

.memory-interop-role-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.memory-interop-role-copy strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memory-interop-role-copy small {
    color: #a0a6af;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 1.15px;
}

.memory-interop-check {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #d7dce2;
    border-radius: 50%;
    color: transparent;
    font-size: 15px;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.memory-interop-role.selected .memory-interop-check {
    border-color: #151515;
    background: #151515;
    color: #fff;
}

.memory-interop-empty {
    display: grid;
    min-height: 142px;
    padding: 24px;
    place-items: center;
    align-content: center;
    gap: 7px;
    border: 1px dashed #d5dae1;
    border-radius: 20px;
    color: #858c96;
    text-align: center;
}

.memory-interop-empty i {
    margin-bottom: 2px;
    font-size: 28px;
}

.memory-interop-empty strong {
    color: #3f444b;
    font-size: 14px;
}

.memory-interop-empty span {
    font-size: 11px;
}

.memory-interop-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 3px 14px;
    color: #858c96;
    font-size: 10px;
    line-height: 1.5;
}

.memory-interop-note i {
    margin-top: 1px;
    color: #4d535b;
    font-size: 14px;
}

.memory-interop-save {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: #151515;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .3px;
}

@media (max-width: 360px) {
    .memory-interop-sheet {
        padding-right: 14px;
        padding-left: 14px;
    }

    .memory-interop-count-copy small {
        max-width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .memory-interop-backdrop,
    .memory-interop-sheet,
    .memory-interop-role,
    .memory-interop-check {
        transition-duration: .01ms;
    }
}