/* ===== 「＋」动作面板（微信式）：输入区统一 ➕ 按钮 + 动作网格面板 =====
 * 逻辑在 js/chat-actions.js；图标用 app-icons.js 的 stroke 风格（.app-icon）。
 * 桌面端：面板是按钮上方的气泡（fixed 定位，open 时按按钮位置计算）；
 * 手机端（≤768px）：面板从底部上滑（遮罩淡入 + translateY 滑出，微信同款手感）。
 */

/* ➕ 按钮：圆形、品牌紫底、白色加号；打开时旋转 45° 变 × */
.mp-plus-btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #5a67d8;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .2s;
}
.mp-plus-btn:hover { background: #4c51bf; }
.mp-plus-btn.open { transform: rotate(45deg); }
/* 录音中：➕ 变红脉冲（语音按钮收进面板后，面板外也能看到录音状态） */
.mp-plus-btn.recording { background: #e53e3e; animation: mp-act-pulse 1s infinite; }
@keyframes mp-act-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* friends 页 .chat-btns 移动端规则（flex:1 + padding）会压扁圆钮，这里按原尺寸压住 */
.chat-btns .mp-plus-btn { flex: 0 0 40px; padding: 0; min-height: 40px; }

/* 原入口按钮收纳标记：保留在 DOM（JS 仍读写其状态/绑定），仅视觉隐藏 */
.mp-act-src { display: none !important; }

/* 遮罩：桌面端透明（接住外部点击关闭），手机端半透明压暗 */
.mp-act-mask { position: fixed; inset: 0; z-index: 1000; background: transparent; }

/* 动作面板本体（桌面气泡） */
.mp-act-panel {
    position: fixed;
    z-index: 1001;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    padding: 14px;
    display: none;
}
.mp-act-panel.open { display: block; }

/* 动作网格：≤4 个单行排开，超过 4 个按 4 列换行（微信同款网格；也避免 7 项横排太宽被右下角悬浮钮盖住） */
.mp-act-grid {
    display: grid;
    grid-template-columns: repeat(4, 68px);
    gap: 10px 4px;
    justify-content: center;
}
.mp-act-item {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 2px;
    font-family: inherit;
}
.mp-act-item:disabled { opacity: .4; cursor: not-allowed; }
.mp-act-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #f1f3f9;
    color: #5a67d8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.mp-act-ico .app-icon { width: 26px; height: 26px; }
.mp-act-item:not(:disabled):hover .mp-act-ico { background: #e4e9f5; }
.mp-act-item:not(:disabled):active .mp-act-ico { background: #dbe2f0; }
/* 录音中：图标变红脉冲（镜像自原语音按钮的 .recording 状态） */
.mp-act-item.recording .mp-act-ico { background: #e53e3e; color: #fff; animation: mp-act-pulse 1s infinite; }
.mp-act-label { font-size: 12px; color: #4a5568; white-space: nowrap; }

/* 手机端：底部上滑面板（遮罩压暗 + 圆角顶边 + 安全区适配） */
@media (max-width: 768px) {
    .mp-act-mask { background: rgba(0,0,0,.35); }
    .mp-act-panel {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0;
        border-radius: 16px 16px 0 0;
        padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
        display: block;
        visibility: hidden;
        transform: translateY(100%);
        transition: transform .22s ease-out, visibility .22s;
    }
    .mp-act-panel.open { visibility: visible; transform: translateY(0); }
    .mp-act-grid { grid-template-columns: repeat(4, 25%); justify-content: start; }
}