/* 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;
    }
    .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));
        padding-bottom: calc(14px + var(--m-d));
        gap: calc(14px + var(--m-d));
    }
    /* 头像从 46 → 48~52px，列表分割线的左边距必须跟着走，否则会切进头像里 */
    .session-item::after {
        left:  calc(70px + var(--m-d) * 2);
        right: 16px;
    }
    .session-avatar {
        width:  calc(48px + var(--m-d) * 2);
        height: calc(48px + 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);
    }
    .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);
    }
    /* 聊天输入栏两侧图标按钮原本只有 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; }
    /* 卡片：图标方块 + 里面的图标（20→24，框 32→38），文字 15→17 */
    #profilePanel .profile-card-item      { padding: 10px 4px; gap: 14px; }
    #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,
    #profilePanel .profile-select         { font-size: 17px; }
    #profilePanel .profile-arrow          { font-size: 20px; }
    #profilePanel .profile-copy-icon      { font-size: 18px; }
    /* 底部保存按钮文字 */
    #profilePanel .profile-save-btn       { font-size: 17px; }

    /* 三个 Tab 页的卡片分隔线统一压浅：会话列表用 ::after 画线（#e8e8e8），
       发现/我的用 border-bottom。三处都换成 #f2f2f2（白底上几乎要凑近看才看得到线），
       仅限移动端用 #tab-* 容器包住，PC 端走 .pc-chat-list / .pc-discover 这套不命中 */
    #tab-chats   .session-item::after { background: #f2f2f2; }
    #tab-discover .discover-item     { border-bottom-color: #f2f2f2; }
    #tab-me       .me-item           { border-bottom-color: #f2f2f2; }
    /* 末位行不画线：last-child 直接透明，避免最后一行下面还多一根孤线 */
    #tab-discover .discover-item:last-child,
    #tab-me       .me-item:last-child { border-bottom-color: transparent; }
    /* 顶部「全部/未读/已读」tab 栏自己那条底边（#e8e8e8）同样压浅到 #f2f2f2 */
    .mobile-session-tabs { border-bottom-color: #f2f2f2; }

    /* 通讯录顶部 好友/群聊 分段按钮：高度 +10（padding 6→11） */
    .contact-toggle-btn { padding: 11px 0; }

    /* ===== 移动端群详情（#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); }

    /* 好友资料：阅后即焚/黑名单 两张卡 文字 & 切换按钮大一号，卡片高度也大一号 */
    .friend-profile-row .k,
    .friend-profile-row .v { font-size: 15px; }
    .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: 64px; height: 30px; border-radius: 15px; }
    .friend-profile-row-burn  .switch-dot,
    .friend-profile-row-block .switch-dot { width: 24px; height: 24px; }
    .friend-profile-row-burn  .switch-btn.on .switch-dot,
    .friend-profile-row-block .switch-btn.on .switch-dot { left: 37px; }
    .friend-profile-row-burn  .switch-label,
    .friend-profile-row-block .switch-label { font-size: 13px; right: 10px; }
    .friend-profile-row-burn  .switch-btn.on .switch-label,
    .friend-profile-row-block .switch-btn.on .switch-label { left: 10px; }

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

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