/* ============================================================
   css/chat/chat-input.css — 聊天输入区（设计系统 v3）
   输入栏 / 加号面板 / 全屏展开 / 摄像头 / 红包 / 转账 / 支付
   设计: 毛玻璃底板 · 多层阴影 · 微交互三态 · 花字装饰
   ============================================================ */

/* ===== 底部Dock — 输入区+面板一体 ===== */
#bottom-dock {
    flex-shrink: 0;
    transition: transform 0.15s ease-out;
}

/* ===== 输入栏容器 — 毛玻璃 ===== */
#input-area {
    border-top: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(24px);
    will-change: transform;  /* 独立合成层，避免面板切换时按钮重绘 */
    -webkit-backdrop-filter: blur(24px);
    padding: 0;
    position: relative;      /* 为 #quote-bar 的 absolute 定位提供锚点 */
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.4) inset,
        0 -4px 20px rgba(160,145,130,0.05);
}

/* ---- 图片模式容器 ---- */
.image-mode-container {
    display: none;
    padding: 8px 12px 0;
    gap: 8px;
    align-items: flex-start;
}
#input-area.image-mode .image-mode-container { display: flex; }
#input-area.image-mode .input-row { display: none; }
.img-preview-grid { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.img-preview-item {
    width: 56px; height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden; position: relative; cursor: pointer;
    border: 1px solid var(--border); flex-shrink: 0;
    box-shadow: var(--shadow-xs);
    transition: transform 0.15s ease;
}
.img-preview-item:hover { transform: scale(1.04); }
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.img-preview-item .im-remove {
    position: absolute; top: 1px; right: 1px; width: 18px; height: 18px;
    border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
    border: none; font-size: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.im-right-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.im-right-actions button {
    padding: 6px 10px; border: none; border-radius: var(--radius-sm);
    font-size: 12px; cursor: pointer; font-family: inherit;
    transition: all 0.15s ease;
}
.im-right-actions .im-add { background: var(--accent-light); color: var(--accent); }
.im-right-actions .im-add:hover { background: rgba(201,176,168,0.22); }
.im-right-actions .im-add:active { transform: scale(0.95); }
.im-right-actions .im-send {
    background: var(--accent-gradient); color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.im-right-actions .im-send:hover { transform: translateY(-1px); box-shadow: 0 4px 14px var(--accent-glow); }
.im-right-actions .im-send:active { transform: scale(0.95); }
.im-right-actions .im-cancel { background: rgba(0,0,0,0.05); color: var(--text-secondary); }

/* ===== 输入主行 ===== */
.input-row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    padding: 8px 10px;
    padding-bottom: calc(8px + var(--safe-bottom));
    width: 100%;
    overflow-x: clip;       /* 子元素缩到0时不溢出 */
}
/* ★ iOS 底部安全区归属：面板/键盘打开时，底部安全区由最底层可见元素（面板）承担，
   输入栏去掉底部安全区 → 输入栏紧贴面板/键盘顶部，消除「输入栏与面板间的夹缝」及底部重复空白。
   「面板/键盘打开」用两条独立信号触发，互补兜底：
   ① JS 同步的 .panel-open 类；② 面板自身进入 .bottom-panel.open（键盘/面板升起时都会加 .open）。
   双保险确保 iOS 键盘检测边缘情况（getKeyboardHeight 报 0 时）输入栏仍去掉安全区，不露红框夹缝。 */
#bottom-dock.panel-open .input-row,
#bottom-dock:has(.bottom-panel.open) .input-row { padding-bottom: 8px; }

/* ---- 动作区容器（+ / 发送 切换）—— 固定宽度平滑过渡 ---- */
.input-actions {
    position: relative;
    width: 34px;               /* +号宽度 */
    height: 34px;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.input-actions.has-send {
    width: 58px;               /* 发送按钮实际宽度(56px) + 2px 余量 */
}

/* ---- 左侧竖排 ---- */
.input-left-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

/* ===== 圆形按钮（语音/表情/加号共用）— 三态反馈 ===== */
.circle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface-solid);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
    font-size: 18px;
    color: var(--text-secondary);
    box-shadow: 0 1px 3px rgba(160,145,130,0.04);
}
.circle-btn:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
/* ★ 2026-10-19 九改：原来这里有 transform: translateY(-1px)，已删。
   ①手机上点过之后 hover 会一直粘着不释放（同族病见下方 :focus 重置的注释），按钮就永远"浮"着 1px；
   ②表情/语音各有 translateZ(0) 把这句盖掉了，只有加号没有 → 三个圆钮里唯一真的会上浮的那个（甲方实锤）。
   悬停反馈仍由边框/背景/图标/阴影四处承担，不靠位移。 */
.circle-btn:active {
    transform: scale(0.93);
    transition: all 0.06s ease;
}
/* 问题5修复：:focus/:focus-visible 显式重置所有属性，防止移动端 sticky hover 残留 */
.circle-btn:focus,
.circle-btn:focus-visible {
    outline: none;
    background: var(--surface-solid);
    border-color: var(--border);
    color: var(--text-secondary);
}

/* 语音按钮内SVG */
#voice-btn svg {
    width: 15px;
    height: 15px;
    display: block;
}
/* ★ GPU合成层隔离：独立于 #input-area 的 backdrop-filter 层，面板切换时不闪烁 */
#voice-btn { transform: translateZ(0); }

/* 表情在圆圈内 */
#emoji-chat-btn {
    font-size: 17px;
    line-height: 32px;
    margin-right: 6px;      /* gap替代 */
    transform: translateZ(0); /* ★ GPU合成层隔离 */
}

/* 加号按钮 — 绝对定位在容器内，淡出+微缩
   ★ 2026-10-19 九改（甲方：两个圆圈不一样大、加号会上浮，喜欢表情那个）：
   不再单独覆盖 width/height（回落到 .circle-btn 的 32×32）；容器 34 高且 .input-row 是底对齐，
   定位由 top:0 改成 bottom:0 → 与 32 高的表情按钮底边齐、圆心也齐。
   （原来是 top:0 + 34×34 正好填满容器：底边与表情齐、顶边高出 2px，看着就像"浮着"。） */
.plus-circle-btn {
    position: absolute;
    right: 0; bottom: 0;
    font-size: 22px;
    font-weight: 300;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}
/* 按压反馈与表情/语音一致：那两个各有 translateZ(0)，ID 选择器优先级更高，
   把 .circle-btn:active 的 scale(0.93) 盖掉了（所以按下不缩）；加号原来没有 → 只有它按下会缩一圈。
   这里补上同样的覆盖，三个圆钮手感统一（甲方要求"以表情为样板"）。 */
.plus-circle-btn:active { transform: translateZ(0); }
.plus-circle-btn.shrink {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}
/* send 按钮切换为 + 按钮后防止残留高亮 */
.plus-circle-btn:focus-visible { outline: none; }

/* 录音中状态 */
.circle-btn.recording {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    animation: breathe 1.5s ease-in-out infinite;
}

/* ===== 展开按钮（输入区左上角线条图标）===== */
.expand-btn {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 5;
    width: 24px;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    display: none;
    padding: 0;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.expand-btn.visible { display: flex; align-items: center; justify-content: center; }
.expand-btn svg { width: 16px; height: 16px; }
.expand-btn:hover { color: var(--accent); }

/* ===== 输入框外壳（2026-11-02 第三次改：高度动画搬到这里）=====
   甲方真机两次实锤「多行变少行时输入框里的字闪一下、消失又出现」。
   根因：高度 0.12s 过渡原来挂在 textarea 自己身上 —— 每帧都在改一个**正在画文字**的元素的尺寸，
   iOS 会把这层文字重新绘制（真机上就是闪一下）。改法：外壳 #input-clip 负责长高/回落（过渡在这层），
   里面的 textarea 高度一次写死、transition 里没有 height —— 框照样缓慢变，文字全程不参与动画。
   边框、底色、圆角、聚焦高亮一起搬上来，视觉与改版前完全一致（仅文字框比旧版高 2px，正好是原来少算的边框）。 */
#input-clip {
    flex: 1;
    min-width: 0;
    position: relative;
    box-sizing: border-box;
    height: 36px;                 /* 空态：文字框 34 + 上下边框 2 */
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-solid);
    margin: 0 6px;                /* gap替代：与左右按钮间距 */
    box-shadow: 0 1px 3px rgba(160,145,130,0.03) inset;
    transition: height 0.12s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#input-clip:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light), 0 1px 3px rgba(160,145,130,0.03) inset;
}

/* ===== Textarea 输入框（只负责画文字与光标：无边框、无底色、不参与尺寸动画）=====
   2026-11-02 第四改（小知复核后的口径）：**外壳是唯一的背景/边框绘制者，文字框完全透明**。
   原来两层都画底色（哪怕同一个令牌），移动端合成层晚一拍重绘就会露出第二种白——
   甲方真机原话「内部底框的下半部分会白一下，像没铺满」，实测同一个圆角框里确实有两种白。
   现在框里只有一层不透明背景，没有任何第二层可以露出来。 */
#input {
    position: absolute;
    left: 1px; right: 1px; top: 1px;
    width: auto;
    display: block;
    margin: 0;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 0;
    border-radius: 0;
    appearance: none;             /* 关掉原生控件外观（阴影/内嵌描边/自带底） */
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;            /* 整数行高：20 + 7 + 7 = 34，正好一行，无 0.3px 取整抖动 */
    resize: none;
    height: 34px;                 /* 由 JS 按内容写死；CSS 只给初始值（= 一行净高，见 INPUT_EMPTY_H） */
    background: transparent;      /* ★ 底色只由外壳画，这里绝不画第二层 */
    color: var(--text-primary);
    transition: none;             /* ★ 绝不参与尺寸动画 —— 这就是文字闪的源头 */
    box-shadow: none;
    outline: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#input::-webkit-scrollbar { display: none; }
#input:focus { outline: none; box-shadow: none; }
#input::placeholder { color: var(--text-muted); }

/* ===== 发送文字按钮 =====
   绝对定位在容器内，opacity+translateX 淡入滑入
   容器宽度一次性过渡（.input-actions.has-send），输入框平滑跟随 ===== */
.send-text-btn {
    position: absolute;
    right: 0; top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    max-width: 72px;
    padding: 0 14px;
    border: none;
    border-radius: 17px;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: opacity 0.22s ease,
                transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.send-text-btn.grow {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.send-text-btn.grow:active {
    transform: scale(0.96);
}
.send-text-btn.grow:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* 旧发送按钮兼容（已废弃）*/
.send-btn { display: none; }

/* 旧 keyframe 动画已废弃，按钮显隐由 transition 统一接管 */

/* ===== 底部面板（表情/加号二合一 — 高度由 JS 动态设置，键盘模式跟帧同步）===== */
.bottom-panel {
    flex-shrink: 0;
    position: relative;
    background: var(--surface-solid);
    height: 0;
    overflow: hidden;
    isolation: isolate;  /* 隔离 backdrop-filter，避免页面切换时 input-area 按钮重绘 */
    border-top: none;
    /* ★ 2028-09 三改：面板高度**不再用 CSS 过渡**——高度由 JS（socket-nav.js 的 _smoothPanel）逐帧缓动写死。
       以前这里挂 0.3s 过渡，会和 JS 的逐帧写叠成两条动画，实测就是「面板先掉到低于该在的高度、再慢慢升起来」。
       现在是「一个写者 + 一套缓动」，键盘升降与面板切换都有中间过程、绝不瞬移。 */
}
.bottom-panel.open {
    border-top: 1px solid var(--border);
    /* height 由 JS updateLayout() 动态设置 */
}
/* 子页面：叠加定位，切换时淡入淡出 */
/* ★ 2028-09 五改（甲方实锤「关面板时内容先消失、底板还杵着」）：内容只由「哪一页该显示」决定，
   而「该显示」由 JS 的 .active 说了算；补一条 .closing —— 收面板期间保留内容，让它陪着底板一起被裁下去。 */
.bottom-panel-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    /* ★ 2028-09 六改：撤掉 will-change:opacity —— 面板开合时它一直挂着一层独立合成层，
       而这一层里装的正是几十个表情小图（很长很高），安卓中端机上逐帧重绘这一层就是「打开面板卡卡的」的来源。
       这里透明度变化很轻（每次开合各一次），不值得为它常驻一层。 */
}
.bottom-panel-page.active {
    opacity: 1;
    pointer-events: auto;
}
/* 正在收下去（高度还没到 0）：内容不许提前消失，跟着底板一起被裁切边扫下去。
   ★ 只作用于「收之前正在显示的那一页」——用 :has 判断这一页是不是当前激活页（本仓已有 :has 用法）。
     不这么写的话，收「加号」面板时表情页会以不透明露出来，看着像闪了一下。 */
.bottom-panel.closing:has(> .bottom-panel-page.active) > .bottom-panel-page.active {
    opacity: 1;
    pointer-events: none;
}
/* 键盘垫底（点输入框把键盘叫出来了）：面板保持高度当垫底，内容淡出。
   ★ 由输入框聚焦那一路打标，与「面板状态」彻底解耦 —— 以前这里是直接把状态清空，
     于是「状态=关、高度=300」分家，关面板／再开面板全乱（底板冻住 + 图标点不开的真根因）。 */
.bottom-panel.kb-fill .bottom-panel-page {
    opacity: 0;
    pointer-events: none;
}

/* 分组导航条 */
.ep-group-bar {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 48px;
    -webkit-overflow-scrolling: touch;
}
.ep-group-bar::-webkit-scrollbar { display: none; }
.ep-group-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: 5px;
    background: var(--surface-solid);
    border: 1.5px solid transparent;
    overflow: hidden;
    font-size: 10px;
    color: var(--text-secondary);
}
.ep-group-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.ep-group-icon.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}
.ep-fav-placeholder { font-size: 20px !important; font-weight: 300 !important; }

/* 内容区 */
.ep-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ep-group-title {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 4px 2px;
    flex-shrink: 0;
}
.ep-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    align-content: start;  /* 单行分组不被撑高 → 长按高亮灰块恢复正常大小（2027 甲方实锤） */
}
.ep-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: 2px 1px;
    border-radius: 6px;
    transition: background 0.12s ease, transform 0.12s ease;
}
.ep-item:hover { background: var(--accent-light); }
.ep-item:active { transform: scale(0.95); }
.ep-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 5px;
    max-width: 56px;
}
.ep-item .ep-img-jpg { border-radius: 5px; }
.ep-item .ep-img-png { border-radius: 0; }
.ep-item-name {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ===== 加号面板内容（bottom-panel 子页面）===== */

/* ---- 固定标题区（不随翻页滚动）---- */
.plus-header {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--border);
}
.plus-header-en {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--rose);
    letter-spacing: 1px;
    line-height: 1;
}
.plus-header-cn {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* ---- 横向滚动区（包裹 plus-track）---- */
.plus-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* 横向交给 JS 拖拽驱动（阈值+甩动翻页），纵向留给页面滚动 */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.plus-scroll-area.is-dragging {
    cursor: grabbing;
}
.plus-scroll-area::-webkit-scrollbar { display: none; }

.plus-track {
    display: flex;
}
.plus-track::-webkit-scrollbar { display: none; }

.plus-page {
    flex: 0 0 auto;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px 8px;
    padding: 12px 16px 14px;
}

.plus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;            /* 4px网格 */
    cursor: pointer;
    padding: 4px;
    transition: all 0.15s ease;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
}
.plus-item:hover { background: var(--accent-light); }
.plus-item:active { transform: scale(0.94); }

.plus-item-icon {
    width: 56px; height: 56px;
    border-radius: 12px;  /* 法式圆角 */
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.plus-item:hover .plus-item-icon {
    background: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.plus-item-icon img, .plus-item-icon svg {
    width: 30px; height: 30px; display: block;
}

.plus-item-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.plus-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 0 8px;
    flex-shrink: 0;
}
.plus-dot {
    width: 6px; height: 6px;
    border-radius: 3px;
    background: var(--border);
    transition: all 0.25s ease;
}
.plus-dot.active {
    width: 18px;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* ===== 全屏展开编辑器 ===== */
.expand-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--bg-chat);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
    will-change: transform;
}
.expand-overlay.open {
    transform: translateY(0);
    pointer-events: auto;
}
@media (min-width: 768px) {
    .expand-overlay,
    .camera-overlay {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
    }
}
.expand-top {
    display: flex;
    align-items: center;
    padding: 10px 14px 10px 10px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.expand-collapse {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.15s ease;
}
.expand-collapse:hover { color: var(--accent); background: var(--accent-light); }
.expand-collapse:active { transform: scale(0.92); }
.expand-textarea {
    flex: 1;
    width: 100%;
    padding: 16px 18px;
    border: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    resize: none;
    background: transparent;
    color: var(--text-primary);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.expand-textarea { scrollbar-width: none; -ms-overflow-style: none; }
.expand-textarea::-webkit-scrollbar { display: none; }
.expand-textarea:focus { outline: none; }
.expand-textarea::placeholder { color: var(--text-muted); }

/* ===== 全屏 Overlay 通用（桌面端限制在 app 宽度内）===== */
.full-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 400;
    background: var(--bg-chat);
    display: none;
    flex-direction: column;
}
.full-overlay.open { display: flex; }

/* 桌面端居中适配 */
@media (min-width: 768px) {
    .red-packet-overlay,
    .transfer-overlay,
    .pay-loading-overlay,
    .pay-password-overlay,
    .pay-error-overlay,
    .pay-method-overlay,
    .game-overlay,
    .fav-select-overlay,
    .numpad-overlay {
        left: 50% !important;
        right: auto !important;
        width: 480px !important;
        margin-left: -240px !important;
        transform: none !important;
    }
}

.overlay-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px 10px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.overlay-topbar-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 通用收起/关闭按钮 */
.collapse-icon-btn {
    width: 36px; height: 36px;
    margin-left: -4px;
    border: none; background: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
    font-size: 20px;
    border-radius: 50%;
    transition: all 0.15s ease;
}
.collapse-icon-btn:hover { color: var(--accent); background: var(--accent-light); }
.collapse-icon-btn:active { transform: scale(0.92); }

/* ================================================================
   摄像头
   ================================================================ */
.camera-overlay {
    position: fixed;
    inset: 0;
    z-index: 2400;   /* ★ 高于选图器(2350)：相册内「拍摄」入口打开时不至于被选图器盖住 */
    background: #000;
    display: none;
    flex-direction: column;
}
.camera-overlay.open { display: flex; }

.camera-topbar {
    position: absolute;
    top: 0; left: 0; right: 0; z-index: 2;
    padding: 10px 14px 10px 10px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; justify-content: space-between;
}
.camera-topbar .collapse-icon-btn {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#camera-video {
    flex: 1; width: 100%; height: 100%; object-fit: contain; background: #000;
}

.camera-bottombar {
    position: absolute;
    bottom: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    gap: 22px; padding: 18px 16px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.capture-btn {
    width: 58px; height: 58px; border-radius: 50%;
    border: 3px solid #fff; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s ease;
}
.capture-btn::after {
    content: ''; width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}
.capture-btn:active { transform: scale(0.9); }
/* 摄像头切换按钮（问题12：线条SVG图标，半透明白色圆形容器） */
.camera-switch-btn {
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: all 0.2s ease;
}
.camera-switch-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.7); }
.camera-switch-btn:active { transform: translateY(-50%) scale(0.9); }

/* 拍照后预览：左上返回重拍 + 底部 保存/编辑/发送（磨砂底 + 主题色） */
.camera-preview {
    position: absolute; inset: 0; z-index: 3;
    background: #000; display: none; flex-direction: column;
}
.camera-preview.show { display: flex; }
.camera-preview img {
    flex: 1; width: 100%; height: 100%; object-fit: contain;
}
.camera-prew-top {
    position: absolute; top: 0; left: 0; z-index: 2;
    padding: 12px 12px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.camera-back-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4); background: rgba(20,16,14,0.34);
    color: #fff;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.camera-back-btn:hover { background: rgba(20,16,14,0.5); border-color: rgba(255,255,255,0.7); }
.camera-back-btn:active { transform: scale(0.9); }

/* 预览操作区：底部磨砂渐变条，左 保存/编辑 图标钮 + 右 发送圆钮 */
.camera-preview-actions {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(10,8,7,0.55), rgba(10,8,7,0));
}
.camera-icon-group { display: flex; gap: 12px; }
.camera-icon-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5);
    background: rgba(20,16,14,0.34);
    color: var(--accent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.camera-icon-btn:hover { background: rgba(20,16,14,0.5); border-color: rgba(255,255,255,0.85); }
.camera-icon-btn:active { transform: scale(0.9); }
.camera-send-round {
    width: 54px; height: 54px; border-radius: 50%;
    border: none;
    /* ★ 浅色模式用深玫瑰（--rose 太浅，白箭头看不清）：白箭头在 #A88080 上对比度≈3.2:1 */
    background: var(--rose-dark);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.28);
    transition: all 0.18s cubic-bezier(0.32,0.72,0,1);
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 1px;
}
/* 暗色模式：亮玫瑰底 + 深色箭头（白箭头在亮玫瑰上看不清） */
[data-theme-mode="dark"] .camera-send-round {
    background: var(--rose);
    color: #2A2018;
}
.camera-send-round:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.32); }
.camera-send-round:active { transform: scale(0.92); }
/* picker 模式：发送钮变「确认」文字药丸（与发送圆钮异质） */
.camera-send-round.is-confirm {
    width: auto; height: 46px;
    padding: 0 30px;
    border-radius: 23px;
}
@media (prefers-reduced-motion: reduce) {
    .camera-icon-btn, .camera-send-round { transition: none; }
}

/* ================================================================
   红包页面（保留原有的花字设计，微调变量统一）
   ================================================================ */
.red-packet-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 400;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(255,255,255,0.4), rgba(0,0,0,0.35));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.6s ease;
}
[data-theme-mode="dark"] .red-packet-overlay {
    background: radial-gradient(circle at top, rgba(255,255,255,0.08), rgba(0,0,0,0.55));
}
.red-packet-overlay.open { display: flex; }

/* 主信封卡片 */
.rp-top-area {
    width: 86%;
    max-width: 380px;
    height: 250px;
    background: linear-gradient(135deg, #e59090, #cc6464, #a84242);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 28px 28px 0 0;
    flex-shrink: 0;
}
.rp-top-area::before {
    content: '';
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 65%);
    pointer-events: none;
    border-radius: 50%;
}
.rp-corner-tl {
    position: absolute;
    top: 18px; left: 18px;
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.5);
    font-family: Georgia, 'Times New Roman', serif;
    pointer-events: none;
}
.rp-corner-br {
    position: absolute;
    bottom: 16px; right: 20px;
    font-size: 18px;
    letter-spacing: 10px;
    color: rgba(255,255,255,0.32);
    font-family: Georgia, 'Times New Roman', serif;
    pointer-events: none;
}
.rp-close-btn {
    position: absolute;
    top: 12px; right: 12px;
}
.rp-close-btn svg line {
    stroke: rgba(255,255,255,0.55);
}

/* 主标题英文花体 */
@keyframes rp-float-title {
    0%, 100% { transform: scale(1.05, 1.12) translateY(0px); }
    50%      { transform: scale(1.05, 1.12) translateY(-4px); }
}
@keyframes rp-float-sub {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-3px); }
}
.rp-title-en {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px;
    letter-spacing: 6px;
    color: rgba(255,255,255,0.85);
    transform: scale(1.05, 1.12);
    text-align: center;
    line-height: 1;
    animation: rp-float-title 7s ease-in-out infinite;
}
.rp-subtitle-en {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    letter-spacing: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    animation: rp-float-sub 6.5s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* 浮动金额卡片 */
.rp-amount-card {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 175px; height: 76px;
    background: var(--surface);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 10px 32px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    transition: background 0.6s ease;
}
[data-theme-mode="dark"] .rp-amount-card {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 10px 32px rgba(0,0,0,0.45);
}
.rp-amount-num {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    color: var(--text-primary);
    line-height: 1;
    transition: color 0.6s ease;
}
.rp-amount-text {
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--text-secondary);
    margin-top: 2px;
    transition: color 0.6s ease;
}

/* 下方卡片纸质感 */
.rp-content {
    width: 86%;
    max-width: 380px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 50vh;
    padding: 60px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: linear-gradient(180deg, var(--bg-chat), var(--bg-primary));
    border-radius: 0 0 28px 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.18);
    position: relative;
    transition: background 0.6s ease;
}
[data-theme-mode="dark"] .rp-content {
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.rp-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    opacity: 0.14;
    pointer-events: none;
    border-radius: 0 0 28px 28px;
    transition: opacity 0.6s ease;
}
[data-theme-mode="dark"] .rp-content::after { opacity: 0.03; }

/* 字段 */
.rp-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
.rp-label {
    font-size: 11px;
    letter-spacing: 3.5px;
    color: var(--text-secondary);
    font-weight: 400;
}
.rp-input {
    width: 100%;
    padding: 6px 0;
    margin-top: 4px;
    border: none;
    font-family: inherit;
    font-size: 15px;
    background: transparent;
    color: var(--text-primary);
    border-radius: 0;
}
.rp-input:focus { outline: none; }
.rp-input::placeholder { color: var(--text-muted); }

/* 封面选择 */
.rp-cover-section { display: flex; flex-direction: column; gap: 8px; }
.rp-cover-options { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rp-cover-chip {
    width: 44px; height: 44px;
    border-radius: 11px;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.22s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
}
[data-theme-mode="dark"] .rp-cover-chip { box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.rp-cover-chip.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    transform: scale(1.07);
}
.rp-cover-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.rp-cover-chip.add-cover {
    border: 1.5px dashed var(--border);
    font-size: 20px;
    font-weight: 200;
    color: var(--text-muted);
    background: transparent;
    box-shadow: none;
}

/* 发送按钮 — 火漆印章 */
.rp-send-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #cc6464, #a84242);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 6px;
    transition: all 0.18s ease;
    margin-top: 4px;
    box-shadow: 0 4px 20px rgba(168,66,66,0.35);
}
.rp-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(168,66,66,0.45); }
.rp-send-btn:active { transform: scale(0.97); opacity: 0.88; }

/* ================================================================
   支付流程
   ================================================================ */

/* 支付中 Loading */
.pay-loading-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 410;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
}
.pay-loading-overlay.open { display: flex; }
.pay-loading-box {
    width: 140px; height: 140px;
    background: var(--surface-solid);
    border-radius: 16px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 12px 40px rgba(0,0,0,0.2);
}
.pay-loading-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
}
.pay-loading-icon svg {
    width: 100%; height: 100%;
    stroke: var(--accent);
}
.pay-loading-text { font-size: 13px; color: var(--text-secondary); }
.pay-dots { display: flex; gap: 4px; align-items: center; }
.pay-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text-muted);
    animation: payDotBounce 1.4s infinite;
}
.pay-dot:nth-child(2) { animation-delay: 0.2s; }
.pay-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes payDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* 密码输入面板 */
.pay-password-overlay {
    position: fixed; inset: 0; z-index: 410;
    display: none; flex-direction: column; justify-content: flex-end;
}
.pay-password-overlay.open { display: flex; }
.pay-pw-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pay-pw-panel {
    position: relative;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    height: 66vh;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
}
.pay-pw-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 8px; flex-shrink: 0;
}
.pay-pw-header .collapse-icon-btn { width: 30px; height: 30px; }
.pay-pw-title-area { text-align: center; flex: 1; }
.pay-pw-title { font-size: 13px; color: var(--text-muted); }
.pay-pw-amount {
    font-size: 32px; font-weight: 700; color: var(--text-primary); margin-top: 4px;
}
.pay-pw-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--divider), transparent);
    margin: 4px 16px; flex-shrink: 0;
}
.pay-pw-method-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; flex-shrink: 0;
}
.pay-pw-method-label { font-size: 12px; color: var(--text-muted); }
.pay-pw-method-change {
    font-size: 12px; color: var(--accent); cursor: pointer;
    display: flex; align-items: center; gap: 2px;
}
.pay-pw-card-display {
    margin: 8px 20px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface-solid);
}
.pay-pw-card-left { display: flex; align-items: center; gap: 10px; }
.pay-pw-card-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-light); display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--accent);
}
.pay-pw-card-info { font-size: 13px; color: var(--text-primary); }
.pay-pw-card-check { color: var(--success); font-size: 16px; font-weight: 700; }

/* 密码输入框 */
.pay-pw-dots-row {
    display: flex; gap: 12px; justify-content: center;
    padding: 16px 0; flex-shrink: 0;
}
.pay-pw-dot-box {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--input-bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--text-primary);
}
.pay-pw-dot-box.filled::after {
    content: '●'; font-size: 14px; color: var(--text-primary);
}

/* 数字键盘 */
.pay-numpad { flex: 1; display: flex; flex-direction: column; }
.pay-numpad .numpad-row { flex: 1; }
.pay-numpad .numpad-key { font-size: 22px; }

/* 支付错误弹窗 */
.pay-error-overlay {
    position: fixed; inset: 0; z-index: 420;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
}
.pay-error-overlay.open { display: flex; }
.pay-error-box {
    width: 280px;
    background: var(--surface-solid);
    border-radius: 14px;
    display: flex; flex-direction: column;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 12px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}
.pay-error-msg {
    text-align: center;
    padding: 28px 20px 20px;
    font-size: 15px;
    color: var(--text-primary);
}
.pay-error-actions {
    display: flex; flex-direction: column;
    border-top: 0.5px solid var(--divider);
}
.pay-error-action {
    padding: 14px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.12s ease;
    font-family: inherit;
    background: none;
    border: none;
}
.pay-error-action:hover { background: var(--accent-light); }
.pay-error-action + .pay-error-action { border-top: 0.5px solid var(--divider); }
.pay-error-action.primary { color: var(--accent); font-weight: 500; }

/* 支付方式选择 */
.pay-method-overlay {
    position: fixed; inset: 0; z-index: 420;
    background: var(--bg-chat);
    display: none; flex-direction: column;
}
.pay-method-overlay.open { display: flex; }
.pay-method-top {
    display: flex; align-items: center; padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    flex-shrink: 0; border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.pay-method-back {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-solid);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-secondary);
    transition: all 0.15s ease;
}
.pay-method-back:hover { border-color: var(--accent); color: var(--accent); }
.pay-method-title {
    flex: 1; text-align: center;
    font-size: 15px; color: var(--text-primary); margin-right: 32px;
}
.pay-method-list { flex: 1; overflow-y: auto; }
.pay-method-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    border-bottom: 0.5px solid var(--divider);
    cursor: pointer; transition: background 0.12s ease;
}
.pay-method-item:hover { background: var(--accent-light); }
.pay-method-item.disabled { opacity: 0.4; pointer-events: none; }
.pay-method-item-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent-light);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.pay-method-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.pay-method-item-info { flex: 1; min-width: 0; }
.pay-method-item-name { font-size: 14px; color: var(--text-primary); }
.pay-method-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pay-method-item-check { color: var(--success); font-size: 16px; font-weight: 700; flex-shrink: 0; }

/* ================================================================
   转账页面
   ================================================================ */
.transfer-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: var(--bg-chat);
    display: none; flex-direction: column;
}
.transfer-overlay.open { display: flex; }

.tf-header-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.tf-back-btn {
    width: 40px; height: 40px; border: none; background: none;
    cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; transition: color 0.15s ease;
    margin-left: -6px; border-radius: 50%;
}
.tf-back-btn:hover { color: var(--accent); background: var(--accent-light); }
.tf-recipient { font-size: 15px; color: var(--text-primary); text-align: center; }
.tf-avatar-placeholder { width: 36px; height: 36px; }
.tf-avatar-placeholder img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tf-body {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; padding: 20px 30px;
}
.tf-amount-label {
    font-size: 14px; color: var(--text-secondary);
    font-style: italic; letter-spacing: 1px;
}
.tf-amount-field { display: flex; align-items: center; gap: 2px; cursor: text; min-height: 60px; }
.tf-yuan-sign { font-size: 36px; font-weight: 300; color: var(--text-primary); }
.tf-amount-value {
    font-size: 44px; font-weight: 300; color: var(--text-primary);
    min-width: 8px; border-bottom: 2px solid var(--accent);
    padding-bottom: 2px; line-height: 1;
}
.tf-amount-cursor {
    width: 2px; height: 40px; background: var(--accent);
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.tf-note-input {
    width: 200px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: inherit; font-size: 13px; text-align: center;
    background: var(--input-bg); color: var(--text-secondary);
    transition: border-color 0.2s ease;
}
.tf-note-input:focus { outline: none; border-color: var(--accent); }

/* ================================================================
   数字键盘（转账用）—— ★ 管钱 V3 · 第 5 窗口：**整段搬走**。

   这里原来还留着一份 .numpad-overlay / .numpad-key 的旧长相（贴边、方角、
   高度写死 52px、确认键用 --accent-gradient、z-index:410 散值）。
   现在这一份是唯一实现，住在 css/chat/chat-payment.css（走 --money-* 令牌 +
   --z-money-modal），两份定义并存＝改哪一份都可能不生效（长期规则 #194 的反面）。
   下面这一段删掉，**没有留任何占位类**，别再往这里加回来。
   ================================================================ */

/* ================================================================
   收藏选择面板
   ================================================================ */
.fav-select-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: var(--bg-chat);
    display: none; flex-direction: column;
}
.fav-select-overlay.open { display: flex; }
.fs-search-bar { padding: calc(8px + var(--safe-top)) 16px; flex-shrink: 0; }
.fs-search-bar input {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-family: inherit; font-size: 13px; background: var(--input-bg);
    color: var(--text-primary); box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fs-search-bar input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.fs-list { flex: 1; overflow-y: auto; padding: 0 16px 8px; }

/* 收藏组卡片 */
.fs-group-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    margin: 6px 0; cursor: pointer; transition: all 0.15s ease; overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.fs-group-card:hover {
    box-shadow: var(--shadow-sm); border-color: var(--accent);
    transform: translateY(-1px);
}
.fs-group-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.fs-group-icon { color: var(--text-secondary); flex-shrink: 0; display: flex; align-items: center; }
.fs-group-info { flex: 1; min-width: 0; }
.fs-group-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.fs-group-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.fs-group-arrow { font-size: 18px; color: var(--text-muted); }

/* 单条收藏项 */
.fs-text-item, .fs-link-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    border-bottom: 0.5px solid var(--divider); cursor: pointer; transition: background 0.12s ease;
}
.fs-text-item:hover, .fs-link-item:hover { background: var(--accent-light); }
.fs-link-item {
    border: 1px solid var(--border); border-radius: 10px; margin: 4px 0; border-bottom: 1px solid var(--border);
}
.fs-item-icon { font-size: 16px; flex-shrink: 0; padding-top: 1px; display: flex; align-items: center; }
/* 收藏项缩略图（图片类收藏在选择面板里也能一眼看到，2028-09） */
.fs-item-thumb {
    width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    flex-shrink: 0; background: var(--bg-primary); border: 1px solid var(--border);
}
.fs-item-body { flex: 1; min-width: 0; }
.fs-item-preview {
    font-size: 13px; color: var(--text-primary); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fs-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 收藏组预览 */
.fs-group-preview { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.fs-gp-header {
    display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
    padding: 12px 8px; border-bottom: 0.5px solid var(--divider); flex-shrink: 0;
}
.fs-gp-back { background: none; border: none; font-size: 13px; cursor: pointer; color: var(--accent); font-family: inherit; text-align: left; padding: 4px; }
.fs-gp-title { text-align: center; font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-gp-send { background: var(--accent-gradient); color: #fff; border: none; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s ease; }
.fs-gp-send:hover { transform: translateY(-1px); box-shadow: 0 2px 8px var(--accent-glow); }
.fs-gp-send:active { transform: scale(0.95); }
.fs-gp-messages { flex: 1; overflow-y: auto; padding: 8px 14px; }
.fs-gp-msg { padding: 6px 0; border-bottom: 0.5px solid var(--divider); font-size: 13px; }
.fs-gp-name { font-weight: 500; color: var(--accent); margin-right: 6px; }
.fs-gp-text { color: var(--text-primary); }

/* ================================================================
   银行卡管理 —— ★ 管钱 V3 · 第 5 窗口：卡面从「银行 App 的 3D 黑金卡」
   改成「一个有材质的小生活物件」（手册 §7 / §10 / §21）。
   六款卡面已换成浅纸底（js/panels/panels-nest-treasury.js），所以这里的字
   一律改成深墨 —— 旧版写死 color:#fff + 黑色浮雕阴影，压在浅纸底上等于看不见。
   ================================================================ */
.card-list { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }

.bank-card {
    position: relative;
    /* 旧版写死 180px 一张；现在内容说了算，最低 132px（钱袋多的时候不占满屏）*/
    min-height: 132px; border-radius: var(--money-radius-card);
    padding: 16px 18px;
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 10px;
    color: var(--money-ink);
    font-family: var(--money-font);
    cursor: pointer;
    border: 1px solid var(--money-line-faint);
    box-shadow: var(--money-shadow-sm);
    transition: transform var(--money-duration-base) var(--money-ease),
                box-shadow var(--money-duration-base) var(--money-ease);
    overflow: hidden;
}
/* 按下只做一点点侧倾（旧版 rotateY(-3deg) scale(.98) 太像翻卡牌）*/
.bank-card:active { transform: perspective(700px) rotateY(-1.5deg) scale(0.985); }
.bank-card:hover { box-shadow: var(--money-shadow-md); }

/* 卡号：默认只是「她在详情里才看」的东西，字重与配色都退后（不再做浮雕）*/
.bank-card-number {
    align-self: flex-start;
    font-size: 15px; font-weight: 500; letter-spacing: 0.12em;
    font-family: var(--money-font-num);
    font-variant-numeric: tabular-nums;
    color: var(--money-ink-soft);
    opacity: 0.72;
    background: oklch(1 0 0 / 0.42);
    padding: 3px 9px; border-radius: 7px;
    text-shadow: none;
}
/* 深棕夜那一款（卡面本身是深的）：字自己翻成正色 */
.bank-card.is-dark-face { color: oklch(0.955 0.008 84); border-color: oklch(0.42 0.02 60); }
.bank-card.is-dark-face .bank-card-number {
    color: oklch(0.955 0.008 84);
    background: oklch(1 0 0 / 0.14);
}
.bank-card.is-dark-face .bank-card-purpose { background: oklch(1 0 0 / 0.16); }
.bank-card.is-dark-face .bank-card-balance,
.bank-card.is-dark-face .bank-card-name { text-shadow: none; }

.bank-card-name { font-size: var(--money-fs-sub); color: inherit; opacity: 0.82; text-shadow: none; }
.bank-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.bank-card-purpose {
    font-size: 11px; opacity: 0.85;
    background: oklch(1 0 0 / 0.42);
    padding: 3px 8px; border-radius: var(--money-radius-tag);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bank-card-balance {
    font-family: var(--money-font-num);
    font-size: 19px; font-weight: 500; color: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-shadow: none;
    flex: 0 0 auto;
}

/* 添加新卡 */
.add-card-btn {
    min-height: 132px; border-radius: var(--money-radius-card);
    border: 1.5px dashed var(--money-line);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer;
    color: var(--money-muted);
    background: transparent;
    font-family: var(--money-font);
    transition: border-color var(--money-duration-base) var(--money-ease),
                color var(--money-duration-base) var(--money-ease),
                background var(--money-duration-base) var(--money-ease);
}
.add-card-btn:hover {
    border-color: var(--money-accent-line); color: var(--money-on-accent-soft);
    background: var(--money-accent-soft);
}
.add-card-btn .plus-icon { font-size: 26px; font-weight: 300; }

/* 卡操作按钮组（★ 管钱 V3 第 7 窗口：小金库那一排「新卡 / 转账」已经换成
   「新建」一枚 + 点开一张卡才有动作，这两个类不再有人用，已删——留着就是第二份写法） */

/* 创建新卡步骤 */
.card-form-step { display: none; flex-direction: column; gap: 16px; padding: 16px 0; }
.card-form-step.active { display: flex; }
.card-form-input {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
    border-radius: 12px; font-family: inherit; font-size: 15px;
    background: var(--input-bg); color: var(--text-primary); box-sizing: border-box;
    transition: border-color 0.2s ease;
}
.card-form-input:focus { outline: none; border-color: var(--accent); }

/* 卡片样式选择网格 */
.card-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card-style-option {
    aspect-ratio: 1.6; border-radius: 12px;
    border: 2px solid transparent; cursor: pointer; overflow: hidden;
    position: relative; transition: all 0.15s ease;
}
.card-style-option.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.card-style-option img { width: 100%; height: 100%; object-fit: cover; }

/* 表单步骤指示器 */
.card-step-dots { display: flex; gap: 8px; justify-content: center; padding: 8px 0; }
.card-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all 0.2s ease; }
.card-step-dot.active { background: var(--accent); }
.card-step-dot.done { background: var(--accent-light); }

/* ================================================================
   Claude 小游戏（密码重置）
   ================================================================ */
.game-overlay {
    position: fixed; inset: 0; z-index: 430;
    background: rgba(0,0,0,0.9); display: none;
    flex-direction: column; align-items: center; justify-content: center;
}
.game-overlay.open { display: flex; }
.game-canvas-wrap { position: relative; }
#game-canvas { border-radius: 12px; background: #1a1a2e; image-rendering: pixelated; }
.game-hint { color: #fff; font-size: 14px; margin-top: 16px; text-align: center; opacity: 0.8; }
.game-close-btn {
    margin-top: 20px; padding: 8px 24px;
    border: 1px solid rgba(255,255,255,0.3); border-radius: 20px;
    background: none; color: #fff; font-size: 13px; cursor: pointer;
    font-family: inherit; transition: all 0.15s ease;
}
.game-close-btn:hover { background: rgba(255,255,255,0.1); }

/* ================================================================
   文件卡片
   ================================================================ */
/* ===== 文件待发送卡片 v2（SVG图标 + 进度条 + 设计系统） ===== */
.file-pending-card {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    background: var(--surface); border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-xs);
    transition: all 0.2s ease;
    margin-bottom: 6px;
}
.file-pending-card:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-sm);
    transform: translateY(-1px);
}
.fpc-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--accent-light);
}
.fpc-icon svg { width: 16px; height: 16px; color: var(--text-secondary); }
.fpc-pdf .fpc-icon { background: rgba(220,80,60,0.1); }
.fpc-pdf .fpc-icon svg { color: #C44; }
.fpc-docx .fpc-icon { background: rgba(40,100,180,0.1); }
.fpc-docx .fpc-icon svg { color: #468; }
.fpc-sheet .fpc-icon { background: rgba(30,140,80,0.1); }
.fpc-sheet .fpc-icon svg { color: #2A8; }
.fpc-code .fpc-icon { background: rgba(120,60,180,0.1); }
.fpc-code .fpc-icon svg { color: #84A; }
.fpc-archive .fpc-icon { background: rgba(180,140,40,0.1); }
.fpc-archive .fpc-icon svg { color: #B84; }
.fpc-video .fpc-icon { background: rgba(200,120,140,0.1); }
.fpc-video .fpc-icon svg { color: var(--rose); }
.fpc-audio .fpc-icon { background: rgba(160,180,140,0.1); }
.fpc-audio .fpc-icon svg { color: var(--sage); }
.fpc-body { flex:1; min-width:0; }
.fpc-name {
    font-size: 12px; color: var(--text-primary); font-family: var(--font-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpc-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fpc-size { font-size: 10px; color: var(--text-muted); }
.fpc-status { font-size: 10px; }
.fpc-status.uploading { color: var(--rose); }
.fpc-status.ready { color: var(--sage); }
.fpc-status.local { color: var(--lavender); }
.fpc-status.error { color: var(--danger); }
.fpc-progress {
    width: 100%; height: 3px; background: var(--divider);
    border-radius: 2px; margin-top: 4px; overflow: hidden;
}
.fpc-progress-bar {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--rose), var(--lavender));
    transition: width 0.3s ease;
}
.fpc-remove {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 16px; line-height: 1;
    padding: 2px 4px; transition: color 0.15s;
    flex-shrink: 0;
}
.fpc-remove:hover { color: var(--danger); }

/* ===== 拖拽上传覆盖层 ===== */
.drop-zone {
    position: absolute; inset: 0; z-index: 300;
    background: rgba(248, 244, 239, 0.78);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0;
    transition: opacity 0.25s ease;
}
.drop-zone.active { opacity: 1; }
.drop-zone-inner {
    text-align: center; padding: 36px 24px;
    border: 2px dashed var(--rose);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-md);
}
.drop-zone-icon svg { width: 48px; height: 48px; opacity: 0.6; }
.drop-zone-title-en {
    font-family: var(--font-decorative); font-style: italic;
    font-size: 20px; letter-spacing: 3px;
    color: var(--rose); margin-top: 12px;
}
.drop-zone-title-cn {
    font-size: 13px; color: var(--text-muted); margin-top: 4px;
    font-family: var(--font-body);
}
@media (prefers-color-scheme: dark) {
    .drop-zone { background: rgba(26, 22, 20, 0.82); }
    .drop-zone-inner { background: var(--surface); }
}
@media (max-width: 370px) {
    .file-pending-card { padding: 6px 8px; gap: 6px; }
    .fpc-icon { width: 24px; height: 24px; }
    .fpc-icon svg { width: 14px; height: 14px; }
    .fpc-name { font-size: 11px; }
    .drop-zone-inner { padding: 24px 16px; }
    .drop-zone-title-en { font-size: 16px; }
}

/* ===== 通话类型选择浮层 ===== */
.call-type-sheet {
    position: fixed; inset: 0; z-index: 2800;
    display: flex; align-items: flex-end;
    background: rgba(30, 28, 26, 0.4);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cts-panel {
    width: 100%; padding: 20px 18px calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 10px;
    background: #FCFAF6; border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(30, 28, 26, 0.3);
    animation: cmsUp 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cts-head { padding: 0 4px 6px; }
.cts-title { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: #1E1C1A; }
.cts-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 16px; border: none; border-radius: 14px;
    background: rgba(248, 244, 239, 0.7); cursor: pointer;
    font-family: inherit; text-align: left;
    transition: background 0.15s ease;
}
.cts-item:active { background: rgba(201, 168, 168, 0.15); }
.cts-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201, 168, 168, 0.12); color: var(--rose, #b08585);
}
.cts-body { display: flex; flex-direction: column; gap: 2px; }
.cts-label { font-size: 15px; font-weight: 500; color: #1E1C1A; letter-spacing: 0.5px; }
.cts-hint { font-size: 11.5px; color: #8A8278; }
/* 第 5 条：次要入口（通话记录）——同样好看，但一眼看得出不是主按钮 */
.cts-item-sub { background: rgba(248, 244, 239, 0.38); }
.cts-item-sub .cts-icon { background: rgba(201, 168, 168, 0.07); color: #9A9186; }
.cts-item-sub .cts-label { font-size: 14px; font-weight: 400; color: #4A443E; }

/* ============================================================
   待发文件悬浮横条（输入栏上方，类似引用；单个横向滚动）
   ============================================================ */
.pending-file-strip {
    position: absolute;
    left: 12px;
    width: calc(100% - 24px);
    bottom: 100%;
    margin-bottom: 6px;
    display: none;              /* JS 控制显隐 */
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;
    background: var(--surface);
    opacity: 0.95;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.3) inset,
        0 2px 12px rgba(160,145,130,0.06),
        0 0 0 1px rgba(201,168,168,0.08);
    z-index: 20;
    animation: popIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 有引用条时把横条往上抬一条高度，避免重叠 */
.pending-file-strip.above-quote { bottom: calc(100% + 42px); }
.pending-file-strip::-webkit-scrollbar { display: none; }

.pfs-item {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all 0.12s ease;
}
.pfs-item:hover { border-color: var(--accent-rose); }
.pfs-no {
    flex: none;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--rose);
    color: var(--surface-solid);
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.pfs-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pfs-status { font-size: 11px; color: var(--text-muted); }
.pfs-status.err { color: var(--danger); }
.pfs-status.local, .pfs-status.uploading { color: var(--text-muted); }
.pfs-x {
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    padding: 0;
    transition: all 0.15s ease;
}
.pfs-x:hover { color: var(--danger); background: var(--accent-light); border-color: var(--accent-rose); }

/* 窄屏 (≤370px) */
@media (max-width: 370px) {
    .pending-file-strip { left: 6px; width: calc(100% - 12px); padding: 5px; gap: 5px; }
    .pending-file-strip.above-quote { bottom: calc(100% + 40px); }
    .pfs-name { max-width: 88px; }
}