/* Mobile responsive */

/* Desktop layout */
@media (min-width: 769px) {
    .mobile-only { display:none !important; }
    .left-panel { width:320px; min-width:320px; }
}

/* Mobile layout */
@media (max-width: 768px) {
    .app-container {
        position:relative;
    }
    .left-panel {
        position:absolute; top:0; left:0; width:100%; min-width:100%;
        z-index:20; transition:transform 0.3s ease;
    }
    .left-panel.hidden {
        transform:translateX(-100%);
    }
    .right-panel {
        position:absolute; top:0; left:0; width:100%;
        z-index:15;
    }
    .right-panel.hidden {
        display:none;
    }
    .chat-placeholder {
        display:none;
    }
    .chat-window {
        position:absolute; top:0; left:0; width:100%; height:100%;
    }
    .msg-item {
        max-width:85%;
    }
    .mobile-only {
        display:flex !important;
    }
    .add-menu {
        position:fixed; top:64px; right:8px; left:auto; bottom:auto;
        border-radius:14px; padding:6px 0; background:#1a1a1a;
        box-shadow:0 8px 30px rgba(0,0,0,0.5); min-width:150px;
        animation:scaleIn 0.2s ease; transform-origin:top right;
    }
    /* 顶部三角指示器，用 --caret-right 对准"+"号按钮中心（由 JS 计算） */
    .add-menu::before {
        content:''; position:absolute; top:-7px;
        right:calc(var(--caret-right, 24px) - 7px);
        width:0; height:0; border-left:7px solid transparent;
        border-right:7px solid transparent; border-bottom:7px solid #1a1a1a;
    }
    /* 移动端添加菜单改为右上角深色样式：图标文字转白，行间加白色分割线 */
    .add-menu-item { color:#fff; position:relative; padding:13px 18px; white-space:nowrap; }
    .add-menu-item i { color:#fff; }
    .add-menu-item:hover { background:rgba(255,255,255,0.08); }
    .add-menu-item:not(:last-child)::after {
        content:''; position:absolute; left:32px; right:32px; bottom:0;
        height:1px; background:rgba(255,255,255,0.10);
    }
    .modal-card {
        width:95%; max-height:90vh;
    }
    /* 发布动态「谁可以看」下拉：手机端加大到 34px 命中区域，字号同步放大一档 */
    .moment-vis-select { height:34px; border-radius:17px; }
    .moment-vis-select select { font-size:14px; padding:0 26px 0 29px; }
    .moment-vis-icon { left:10px; font-size:15px; }
    .moment-vis-caret { right:8px; font-size:15px; }
    .moments-fullscreen {
        padding-top:0;
    }
    .emoji-panel {
        grid-template-columns:repeat(6,1fr);
    }
    .balance-amount { font-size:28px; }
    .amount-grid { grid-template-columns:repeat(4,1fr); }
}

/* ============================================
   移动端尺寸放大基线（手机端专用，PC 端不受影响）
   ------------------------------------------------------------
   背景：全站尺寸都是照桌面显示器调的固定 px，移动端的媒体查询只改了布局
   （绝对定位/满宽/隐藏 PC 容器），没有放大过任何字号和控件，手机上整体小一号。

   做法：只在这里定义一个缩放增量变量 --m-d，各处尺寸写成
   calc(基准px + var(--m-d) × N)。窄机(≤360px)取 0，宽机(≥430px)取 2px，
   中间按屏宽线性插值。以后想整体再调大一档，只改 --m-d 一个值即可。

   单位换算：(2px 增量 ÷ 70px 屏宽差) = .0286
   ============================================ */
@media (max-width: 768px) {
    :root {
        /* 兜底：clamp() 在 iOS 13.3 以下、部分旧安卓 WebView 里不认，
           那种浏览器会保留上一条声明，于是 --m-d = 0，尺寸等于下面写死的
           「窄机基准值」（仍然比改动前大），不会退化成无字号。
           真正要缩放的浏览器走 @supports 里的 clamp 版本。 */
        --m-d: 0px;
        /* 底部导航图标单独抽一个变量：角标位置要用它反算，图标变了角标要跟着走 */
        --m-tab-icon: calc(26px + var(--m-d));
    }
    @supports (width: clamp(1px, 1vw, 2px)) {
        :root { --m-d: clamp(0px, calc((100vw - 360px) * .0286), 2px); }
    }

    /* ---------- 顶部标题栏 ---------- */
    /* 顶部标题栏所有「返回」箭头统一大一号（.icon-btn 基准 24px → 28px）。
   直接给 <i> 写字号而不是给按钮写：main.css 里 button.wallet-back-btn /
   button.txn-back-btn 选择器更具体，把按钮字号钉死在 22px，会盖掉上面 .icon-btn 的 24px，
   导致钱包 / 交易记录 / 提现记录这几页的箭头比其它页小一号。作用到图标上可以绕开这条继承链。
   一并覆盖 index.html 里那些 visibility:hidden 的占位箭头，保证标题仍然居中。 */
    .icon-btn i.ri-arrow-left-s-line { font-size: calc(28px + var(--m-d)); }

    /* 顶部标题栏 */
    .left-header {
        padding-top:  calc(18px + var(--m-d));
        padding-bottom: calc(12px + var(--m-d));
    }
    .mobile-page-title { font-size: calc(19px + var(--m-d)); }
    .left-header-actions { gap: calc(5px + var(--m-d) * .5); }
    /* .icon-btn 是全局图标按钮（22px），手机上一律放大；8px 内边距让可点区域到 40px+ */
    .icon-btn {
        font-size: calc(24px + var(--m-d));
        padding: calc(8px + var(--m-d) * .5);
    }
    .search-bar { margin-bottom: calc(12px + var(--m-d)); }
    .search-bar i { font-size: calc(17px + var(--m-d) * .5); }
    .search-bar input {
        height: calc(40px + var(--m-d) * 2);
        font-size: calc(15px + var(--m-d) * .5);
    }

    /* ---------- 会话列表卡片：大圆角 + 极浅投影（与个人中心卡片同一套语言） ---------- */
    .session-item {
        padding-top:    calc(14px + var(--m-d) * .5);
        padding-bottom: calc(14px + var(--m-d) * .5);
        gap: calc(14px + var(--m-d));
        border-radius: 16px;
    }
    .session-item::after { display: none; }
    .session-avatar {
        width:  calc(52px + var(--m-d) * 2);
        height: calc(52px + var(--m-d) * 2);
    }
    .session-name { font-size: calc(16px + var(--m-d)); }
    .session-last { font-size: calc(14px + var(--m-d) * .5); }
    .session-time { font-size: calc(12px + var(--m-d) * .5); }
    .mobile-session-tab {
        padding-top:    calc(12px + var(--m-d));
        padding-bottom: calc(12px + var(--m-d));
        font-size: calc(14px + var(--m-d) * .5);
    }

    /* ---------- 底部导航 ---------- */
    /* 图标槽位跟着 --m-tab-icon 一起放大，中间凸起按钮的占位块 .tab-fab::before
       读同一个变量，文字才会和左右两侧落在同一水平线上 */
    .tab-bar {
        --tab-icon-box: var(--m-tab-icon);
        padding-bottom: calc(4px + var(--m-d) * .5);
        /* 移动端屏幕较小，阴影适中 */
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08);
    }
    /* FAB 启用时的 fallback 和 drop-shadow 在移动端同步 */
    .tab-bar.has-fab {
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.06);
    }
    .tab-bar > svg.fab-top-border path.stroke-line {
        filter: drop-shadow(0 -1px 7px rgba(0, 0, 0, 0.12));
    }
    /* 移动端 FAB 接缝阴影 blur 稍微加大，浮起感更柔和 */
    .tab-bar > svg.fab-top-border path.fab-shadow-line {
        filter: blur(5px);
    }
    .tab {
        padding-top:    calc(10px + var(--m-d) * .5);
        padding-bottom: calc(10px + var(--m-d) * .5);
        gap: calc(3px + var(--m-d) * .5);
        font-size: calc(12px + var(--m-d) * .5);
    }
    .tab i { font-size: var(--m-tab-icon); }
    /* 角标跟着图标尺寸重算：原来图标 22px 时写死 22，图标放大后必须同步 */
    .tab .badge {
        top: 4px;
        right: calc(50% - var(--m-tab-icon));
    }
    .badge {
        min-width: calc(20px + var(--m-d));
        height:    calc(20px + var(--m-d));
        font-size: calc(12px + var(--m-d) * .5);
        padding: 0 calc(6px + var(--m-d) * .5);
        border-radius: calc(10px + var(--m-d));
    }
    /* 中间凸起圆钮：CSS 圆钮本体改成 56px，app.js 里 SVG 弧形缺口半径同步改成 34，
       圆钮和弧线都按比例放大了，里面图标也跟着等比放大约 29px（24 * 56/46 ≈ 29.2） */
    .tab-fab .tab-fab-circle i { font-size: calc(29px + var(--m-d)); }

    /* ---------- 聊天输入栏 ---------- */
    .chat-input-row {
        padding: calc(10px + var(--m-d) * .5) calc(12px + var(--m-d));
        gap: calc(7px + var(--m-d) * .5);
    }
    /* 输入框右侧的表情键和 + 号键视觉上是一组，挨得比行内其它间隔更近。
       只给 + 号加负 margin 收这一处：表情键→+号变紧，但输入框→表情键、
       表情键→发送键（有内容时 + 号隐藏、发送键顶上）的间距都不受影响。
       用相邻兄弟选择器，避免误伤同样挂 .chat-plus-btn 的其它状态。 */
    #emojiToggleBtn + #plusBtn { margin-left: -3px; }
    /* 聊天输入栏两侧图标按钮原本只有 34×34，低于手指 44×44 的最小可点区域，这里补到 42~44 */
    .chat-icon-btn,
    .chat-plus-btn {
        width:  calc(42px + var(--m-d));
        height: calc(42px + var(--m-d));
    }
    .chat-icon-btn { font-size: calc(27px + var(--m-d)); }
    .chat-plus-btn { font-size: calc(29px + var(--m-d)); }
    /* 语音模式的收起 X 也挂着 .chat-icon-btn，会被上面一起放大，这里单独压回小一号 */
    .voice-close-btn {
        width:  calc(32px + var(--m-d) * .5);
        height: calc(32px + var(--m-d) * .5);
        font-size: calc(20px + var(--m-d) * .5);
    }
    .rich-input {
        min-height: calc(44px + var(--m-d));
        font-size: calc(16px + var(--m-d) * .5);
        padding: calc(10px + var(--m-d)) calc(14px + var(--m-d));
        border-radius: 8px;
    }
    .send-btn {
        height: calc(40px + var(--m-d));
        padding: 0 calc(16px + var(--m-d));
        font-size: calc(15px + var(--m-d) * .5);
    }

    /* ---------- 弹窗 / 表单控件 ---------- */
    .modal-input,
    .form-group input,
    .form-group select,
    .form-group textarea {
        height: calc(46px + var(--m-d));
        font-size: calc(15px + var(--m-d) * .5);
    }
    .form-group label { font-size: calc(14px + var(--m-d) * .5); }
    .btn-primary,
    .btn-danger,
    .btn-outline-danger { height: calc(48px + var(--m-d)); }
    .confirm-btn { height: calc(46px + var(--m-d)); }
    .amount-btn,
    .amount-custom { height: calc(44px + var(--m-d)); }
    .pin-input input {
        width:  calc(44px + var(--m-d));
        height: calc(44px + var(--m-d));
        font-size: calc(22px + var(--m-d));
    }
    .toast,
    .empty-tip { font-size: calc(15px + var(--m-d) * .5); }

    /* ===== 移动端细调 ===== */

    /* 我的页面（#profilePanel）所有卡片的图标 + 文字统一 +2px */
    #profilePanel .profile-nickname       { font-size: 18px; }
    #profilePanel .profile-edit-icon      { font-size: 16px; }
    #profilePanel .profile-account        { font-size: 15px; }
    #profilePanel .profile-copy-icon-sm   { font-size: 15px; }
    #profilePanel .profile-qrcode-btn     { width: 46px; height: 46px; }
    #profilePanel .profile-qrcode-btn i   { font-size: 26px; }
    /* 我的页面卡片：完全按现代「个人中心卡片」设计语言重做 —— 白底 + 大圆角 + 极浅投影 +
       卡片间 10px 留白，不再靠底部 1px 分隔线分组，按下轻微缩放给点击反馈。
       之前是灰底 + 小圆角 + 1px 分割线，会话列表 / 通讯录好友卡片早就是这个语言，
       我的页面这几张卡一直还是旧视觉，统一一下。 */
    #profilePanel .profile-cards {
        padding: 10px 14px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #profilePanel .profile-card-item {
        padding: 12px 14px;
        gap: 14px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.03);
        border-bottom: 0;
        margin-bottom: 0;
        transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    #profilePanel .profile-card-item:active { transform: scale(.985); }
    /* 卡片内图标方块（保持 38×38 渐变色块），文字 15→17，箭头/复制图标微调 */
    #profilePanel .profile-card-icon      { width: 38px; height: 38px; border-radius: 9px; }
    #profilePanel .profile-card-icon i    { font-size: 24px; }
    #profilePanel .profile-card-label     { font-size: 17px; }
    #profilePanel .profile-card-value,
    #profilePanel .profile-value-text      { font-size: 17px; }
    #profilePanel .profile-arrow          { font-size: 20px; }
    #profilePanel .profile-copy-icon      { font-size: 18px; }
    /* 底部退出登录横条：文字和图标跟着卡片一起放大 */
    #profilePanel .profile-logout-bar    { font-size: 17px; padding: calc(13px + var(--m-d) * .5) 12px; }
    #profilePanel .profile-logout-bar i  { font-size: 21px; }

    /* 会话列表/通讯录好友 / 我的设置卡 / 发现卡 / "我"卡 全部统一成现代卡片语言，
       下面的传统列表块没了。 */
    /* "我" 页面卡片：和会话列表 / 通讯录好友 / 我的设置卡 / 发现卡 用同一种现代卡片语言重做。
       整个页面是两个卡片组：顶部 1 张"头像大卡" + 下方 1 列"入口小卡"。
       之前 .me-card / .me-item 都是「整行白底 + 1px 底分割线」传统列表样式，
       现在统一成白底 + 14px 圆角 + 极浅投影 + 卡片间 10px 留白，按下轻微缩放给点击反馈。 */

    /* 顶部头像大卡：padding 14 16，gap 14，阴影/圆角和 list 卡片对齐；
       顶端 10px、左右 14px 安全留白，底部 0（让 me-list 自己管 padding-top: 10px 形成 10px 间距） */
    #tab-me .me-card {
        margin: 10px 14px 0;
        padding: 14px 16px;
        gap: 14px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.03);
        border-bottom: 0;
        transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    #tab-me .me-card:active { transform: scale(.985); }
    #tab-me .me-avatar { width: 56px; height: 56px; border-radius: 12px; }
    #tab-me .me-card > i { font-size: 22px; color: var(--text-muted); }

    /* 入口卡片列表：钱包 / 我的收藏 / 交易记录 / 个性化设置 / 一键群发 / 账号设置 等
       （「我的朋友圈」已挪到个人中心，个性签名下方） */
    #tab-me .me-list {
        padding: 10px 14px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #tab-me .me-item {
        padding: 12px 14px;
        gap: 14px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.03);
        border-bottom: 0;
        transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    #tab-me .me-item:active { transform: scale(.985); }
    /* 渐变图标（conic-gradient / linear-gradient 文本填充）22→26，与旁边 17px label 视觉平衡 */
    #tab-me .me-item i:first-child  { font-size: 26px; }
    #tab-me .me-item span           { font-size: 17px; }
    #tab-me .me-item-extra          { font-size: 13px !important; }
    #tab-me .me-item > i:last-child { font-size: 20px; color: var(--text-muted, #ccc); }

    /* 发现页面卡片：和会话列表 / 通讯录好友 / 我的设置卡 用同一种现代卡片语言重做。
       之前是整行白底 + 1px 底部分隔线的传统列表（base .discover-item 有 border-bottom: 1px solid var(--border)），
       现在改成白底 + 14px 圆角 + 极浅投影 + 卡片间 10px 留白，按下轻微缩放给点击反馈。 */
    #tab-discover .discover-list {
        padding: 10px 14px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #tab-discover .discover-item {
        padding: 12px 14px;
        gap: 14px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.03);
        border-bottom: 0;
        transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    #tab-discover .discover-item:active { transform: scale(.985); }
    /* 图标方块从 36 提至 38（对齐 .profile-card-icon），圆角 8→9，
       字体 18→21（白字在 primary 底色上需要稍大才能与旁边的 17px label 视觉平衡） */
    #tab-discover .discover-icon             { width: 38px; height: 38px; border-radius: 9px; font-size: 21px; }
    #tab-discover .discover-item > span      { font-size: 17px; }
    #tab-discover .discover-item > i:last-child { font-size: 20px; color: var(--text-muted, #ccc); }

    /* 发现页顶部「朋友圈」大卡片：渐变跟随主题色，保留深色卡造型 */
    #tab-discover .discover-item-moments {
        padding: 36px 16px;
        gap: 13px;
        /* 跟随主题色 --primary/--primary-dark，color-mix 混入黑色得到深色调 */
        background:
            radial-gradient(110% 130% at 12% 18%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 58%),
            linear-gradient(135deg,
                color-mix(in srgb, var(--primary), black 45%) 0%,
                color-mix(in srgb, var(--primary-dark), black 55%) 50%,
                color-mix(in srgb, var(--primary-dark), black 70%) 100%);
        border-radius: 14px;
        border-bottom: 0;
        box-shadow: 0 3px 10px rgba(0,0,0,.28);
    }
    #tab-discover .discover-item-moments:active { transform: scale(.985); }
    /* 深色卡 hover 提亮一档 */
    #tab-discover .discover-item-moments:hover {
        background:
            radial-gradient(110% 130% at 12% 18%, color-mix(in srgb, var(--primary) 32%, transparent) 0%, transparent 58%),
            linear-gradient(135deg,
                color-mix(in srgb, var(--primary), black 38%) 0%,
                color-mix(in srgb, var(--primary-dark), black 48%) 50%,
                color-mix(in srgb, var(--primary-dark), black 63%) 100%);
    }
    /* 图标：取消白底方块和圆角，图标本体用和个人中心同款的彩虹圆锥渐变 */
    #tab-discover .discover-item-moments .discover-icon {
        width: 48px; height: 48px;
        background: transparent;
        border-radius: 0;
        font-size: 48px;
        color: transparent;
    }
    #tab-discover .discover-item-moments .discover-icon i {
        color: transparent;
        background-image: conic-gradient(from 0deg, #ff4d4f 0deg, #3478f6 90deg, #52c41a 180deg, #ffd666 270deg, #ff4d4f 360deg);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    /* 右侧两行文字：标题 + 副标题 */
    #tab-discover .discover-item-moments .discover-moments-title { font-size: 19px; font-weight: 700; color: #fff; }
    #tab-discover .discover-item-moments .discover-moments-sub   { font-size: 13px; color: rgba(255,255,255,.7); }
    #tab-discover .discover-item-moments > i:last-child { font-size: 22px; color: #fff; }
    /* 顶部「全部/未读/已读」tab 栏自己那条底边（#e8e8e8）同样压浅到 #f2f2f2 */
    .mobile-session-tabs { border-bottom-color: #f2f2f2; }

    /* 通讯录顶部 好友/群聊 分段按钮：高度 +10（padding 6→11） */
    .contact-toggle-btn { padding: 11px 0; }
    /* 分段条整体右侧收进 26px，让出空间给右边竖排字母索引条 */
    .contact-toggle { margin-right: 38px; }
    /* 入口卡片组（新的朋友 / 入群申请 / 发起群聊）也让 34px 给 A-Z 索引条，
       否则卡片右侧红色数字角标会被竖排字母遮挡 */
    .contact-section { padding-right: 34px; }
    /* 入口卡片（新的朋友 / 入群申请 / 发起群聊）：
       对齐下方好友列表卡片的视觉语言——白底 + 大圆角 + 双层阴影 */
    .contact-item {
        background:#fff; border-radius:14px;
        box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.025);
        transition:transform .15s ease, box-shadow .2s ease;
        margin-bottom:10px;
    }
    .contact-item:active { transform: scale(.985); }
    .contact-item:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04); }

    /* 通讯录好友卡片跟随会话卡片一起放大（42px 头像基准） */
    .contact-friend-item { gap: calc(13px + var(--m-d) * .5); }
    .contact-friend-item span { font-size: calc(16px + var(--m-d)); }
    .friend-avatar-wrap, .friend-avatar-wrap img,
    .contact-avatar-wrap, .contact-avatar-wrap img {
        width:  calc(44px + var(--m-d));
        height: calc(44px + var(--m-d));
    }
    .friend-avatar-wrap img, .contact-avatar-wrap img { border-radius: 10px; }

    /* ===== 移动端群详情（#groupDetailBody）：头像 36→46，全部文字 +2px，切换按钮放大 ===== */
    /* 成员头像：图和 [+][-] 图标块一起放大，角标尺寸也要跟着翻倍才不会糊在头像边上 */
    #groupDetailBody .group-grid-item-avatar img { width: 46px; height: 46px; border-radius: 8px; }
    #groupDetailBody .group-grid-item.action-btn .group-grid-item-icon { width: 46px; height: 46px; border-radius: 8px; }
    #groupDetailBody .group-grid-item.action-btn i { font-size: 24px; }
    #groupDetailBody .group-grid-item-badge { font-size: 12px; padding: 0 5px; border-radius: 9px; line-height: 19px; top: 0; right: 1px; }
    /* 方格要装得下 46px 头像：5 列布局里每格跟着放大，否则头像会顶到相邻格 */
    #groupDetailBody .group-grid { grid-template-columns: repeat(5, 1fr); padding: 10px 2px 2px; }
    #groupDetailBody .group-grid-item { width: 100%; }

    /* 文字统一 +2px */
    #groupDetailBody .group-grid-item-name,
    #groupDetailBody .group-grid-item-label { font-size: 13px; }
    #groupDetailBody .group-more-link   { font-size: 14px; }
    #groupDetailBody .group-info-name   { font-size: 19px; }
    #groupDetailBody .group-info-no     { font-size: 15px; }
    #groupDetailBody .group-info-count  { font-size: 14px; }
    #groupDetailBody .group-info-ann    { font-size: 15px; }
    #groupDetailBody .group-info-row    { font-size: 16px; }
    #groupDetailBody .group-mgmt-title  { font-size: 17px; }
    #groupDetailBody .group-mgmt-sub    { font-size: 14px; }
    #groupDetailBody .group-mgmt-radio-label { font-size: 16px; }
    /* 群公告 / 群昵称 / 清空群记录 这三张卡的标题和副标题是内联字号，只能靠属性选择器覆盖 */
    #groupDetailBody span[style*="font-size:14px"] { font-size: 16px !important; }
    #groupDetailBody span[style*="font-size:12px"] { font-size: 14px !important; }
    /* 行尾箭头图标跟文字等比放大 */
    #groupDetailBody .group-info-row > i.ri-arrow-right-s-line,
    #groupDetailBody .group-mgmt-option > i.ri-arrow-right-s-line { font-size: 20px; }

    /* 切换按钮（群管理区用的是 .switch.green-fix 48×26，不是好友资料那套 .switch-btn 56×24）
       轨道 48×26 → 58×31，圆点 20 → 25，滑到位的 left 25 → 30，三者必须一起改，否则圆点会滑出轨道 */
    #groupDetailBody .switch.green-fix  { width: 58px; height: 31px; border-radius: 16px; }
    #groupDetailBody .switch.green-fix span { width: 25px; height: 25px; }
    #groupDetailBody .switch.green-fix.on span { left: 30px; }
    /* 单选圆点 18 → 22 */
    #groupDetailBody .group-mgmt-radio-dot { width: 22px; height: 22px; border-width: 2.5px; }
    #groupDetailBody .group-mgmt-radio.active .group-mgmt-radio-dot::after { inset: 4px; }

    /* 底部「解散群聊 / 退出群聊」按钮文字放大 */
    #groupDetailBody .group-info-footer .btn-danger { font-size: 17px; }

    /* 记录中心 交易记录/提现记录 分段按钮：高度 +10（30→40），字略大 */
    .records-tab { height: 40px; font-size: 14px; }

    /* 会话列表顶部 全部/未读/已读 三个 tab：
       1) 字体大一号（13→15）；2) 三个都加阴影，选中更立体（阴影刻意压得比常规卡片浅一档，
          否则顶栏整条都发灰，反而看不清选中的是哪个） */
    .mobile-session-tab  { font-size: 15px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
    .mobile-session-tab.active { box-shadow: 0 2px 7px rgba(0, 0, 0, .12); }

    /* 好友资料：全页文字再放大 2px（15→17），开关按钮和卡片高度同步放大 */
    .friend-profile-row .k,
    .friend-profile-row .v { font-size: 16px; }
    /* 「性别」「个性签名」「Ta的朋友圈」三行：上下留白再加一点，别挤在一起 */
    .friend-profile-row-gender { padding: 16px 0; }
    .friend-profile-row-sign,
    .friend-profile-row-moments { padding-top: 16px; padding-bottom: 12px; }
    .friend-profile-row-burn,
    .friend-profile-row-block { padding-top: 12px; padding-bottom: 8px; }
    .friend-profile-row-burn  .switch-track,
    .friend-profile-row-block .switch-track { width: 72px; height: 32px; border-radius: 16px; }
    .friend-profile-row-burn  .switch-dot,
    .friend-profile-row-block .switch-dot { width: 26px; height: 26px; top: 3px; }
    .friend-profile-row-burn  .switch-btn.on .switch-dot,
    .friend-profile-row-block .switch-btn.on .switch-dot { left: 43px; }
    .friend-profile-row-burn  .switch-label,
    .friend-profile-row-block .switch-label { font-size: 15px; right: 8px; }
    .friend-profile-row-burn  .switch-btn.on .switch-label,
    .friend-profile-row-block .switch-btn.on .switch-label { left: 8px; right: auto; }

    /* 清理我的/清理双向/删除好友 三个按钮：文字大一号、按钮高度大一点 */
    .clear-btn { font-size: 17px; padding: 16px 8px; }                              /* 15/14 → 17/16：文字 +2、按钮高 +2 */
    .clear-btn i { font-size: 19px; }
    .friend-profile-actions .btn-danger { font-size: 18px; height: 58px; }         /* 16/54 → 18/58：文字 +2、高 +4 */
    .friend-profile-actions .btn-danger i { font-size: 20px; }                     /* 删除图标跟着放大 */

    /* 性别修改弹窗：圆点 18→22，文字 15→17，和群管理单选保持同一档 */
    .gender-option        { padding: 14px 2px; }
    .gender-option-dot    { width: 22px; height: 22px; border-width: 2.5px; }
    .gender-option.active .gender-option-dot::after { inset: 4px; }
    .gender-option-label  { font-size: 17px; }

    /* ===== FAB 凸起按钮避让 =====
       底部 tab-bar 中间的 FAB 圆按钮向上凸出 28px，会压住页面内容最后一行。
       带 tab-bar 的页面内容区统一由 JS 打上 .fab-avoid（仅 FAB 启用时才加），
       这里留出 36px 避让空间：28px 凸起 + 8px 呼吸间隙。
       用 !important 是因为 .page-panel-body 多数带内联 padding 简写，
       外部样式无法覆盖内联的 padding-bottom。 */
    .fab-avoid {
        padding-bottom: 36px !important;
    }
    /* 提现页有固定底栏 .withdraw-footer，避让加在底栏上更贴合，
       内容区不再重复留白（JS 对这类页面不加 .fab-avoid） */
    .withdraw-footer.fab-avoid-footer {
        padding-bottom: max(36px, calc(12px + env(safe-area-inset-bottom, 0px)));
    }

    /* ===== 移动端提现页：底部按钮不再吸底 =====
       原来 .withdraw-footer 是滚动区 .page-panel-body 的兄弟节点，
       按钮被钉死在屏幕底部。这里把提现页改成「整页一个滚动容器」：
       底栏跟着内容一起滚动到底，按钮不再固定悬浮。
       顶部标题栏和底部导航用 sticky 保持可见。
       仅限移动端，PC 端弹窗布局完全不变。 */
    #withdrawPanel .page-panel {
        display: block;              /* 取消 flex 纵向布局，整页一起滚动 */
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #withdrawPanel .page-panel-body {
        overflow: visible;           /* 交给整页容器滚动，内部不再单独滚 */
    }
    #withdrawPanel .moments-header {
        position: sticky; top: 0; z-index: 20;
    }
    #withdrawPanel .tab-bar {
        position: sticky; bottom: 0; z-index: 20;
    }
    /* 底栏不再贴边，改为普通内容块（去掉上边框和投影） */
    #withdrawPanel .withdraw-footer {
        border-top: none;
        box-shadow: none;
        background: transparent;
    }
}

/* 窄屏（≤380px）只收紧左右留白，不再压缩字号和图标。
   原来这里把 .tab 文字压到 11px、图标压到 18px —— 360/375px 这类最常见的手机
   反而比宽屏机小一号，和上面的放大基线互相打架，所以只保留留白微调。 */
@media (max-width: 380px) {
    .left-header  { padding-left: 14px; padding-right: 14px; }
    .session-item { padding-left: 10px; padding-right: 10px; }
    .session-item::after { display: none; }
    /* 通讯录好友卡片 + 右侧 A-Z 索引条 */
    .contact-list { padding-left: 8px; padding-right: 8px; }
    .contact-friend-item { padding-left: 10px; padding-right: 10px; }
}