/* ======================================================== */
/* ⬇️ 内部软件6：聊天拓展与小组件 (菜单/表情/多选/撤回等) ⬇️ */
/* ======================================================== */

/* ==========================================
   🌟 引用消息系统样式 【内置引用气泡】
========================================== */
.chat-room-input-bar { position: relative; } /* 确保悬浮条定位基准 */

.reply-bar-container {
    position: absolute;
    bottom: 100%; left: 0; width: 100%;
    background: rgba(245, 245, 245, 0.95);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    padding: 8px 15px; display: none; flex-direction: row;
    align-items: center; justify-content: space-between;
    border-radius: 18px 18px 0 0; z-index: 20;
    box-sizing: border-box; box-shadow: 0 -2px 10px rgba(0,0,0,0.02);
}
.reply-bar-container.show { display: flex; animation: slideUpFade 0.2s ease-out; }
@keyframes slideUpFade { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.reply-bar-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-left: 3px solid #111; padding-left: 8px; }
.reply-bar-title { font-size: 11px; font-weight: 800; color: #333; margin-bottom: 2px; }
.reply-bar-text { font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.reply-close-btn { font-size: 18px; color: #999; cursor: pointer; padding: 0 5px; font-weight: 300; transition: color 0.2s; }
.reply-close-btn:active { color: #333; }

/* 引用消息堆叠布局 */
.msg-stack { display: flex; flex-direction: column; max-width: 100%; }
.preview-msg-row.right .msg-stack { align-items: flex-end; }
.preview-msg-row.left .msg-stack { align-items: flex-start; }

/* 外部悬浮引用小气泡 (仅用于图片/纯表情包等无底色消息) */
.reply-tiny-bubble {
    font-size: 10px; color: #888; background-color: #f2f2f2;
    padding: 4px 8px; border-radius: 8px; margin-bottom: 4px;
    max-width: 100%; width: fit-content; line-height: 1.3; font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.02);
}
.preview-msg-row.right .reply-tiny-bubble { background-color: rgba(0,0,0,0.04); }

/* 🌟 新增：内置在普通文本气泡内部的凹陷引用块 */
.reply-in-bubble {
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-all;
    user-select: none;
    -webkit-user-select: none;
}

/* 角色气泡内的引用 (加深黑透明遮罩) */
.Toutou-TT.char .reply-in-bubble {
    background-color: rgba(0, 0, 0, 0.06);
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.04);
}

/* 用户气泡内的引用 (加浅白透明遮罩) */
.Toutou-TT.user .reply-in-bubble {
    background-color: rgba(255, 255, 255, 0.15);
    border-left: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.08);
}

.reply-name {
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 2px;
    opacity: 0.8;
}

.reply-text {
    font-size: 11px;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================
   🌟 气泡长按菜单引擎 (高级磨砂浅灰玻璃)
========================================== */
.bubble-action-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: transparent; z-index: 2500; display: none;
}
.bubble-action-overlay.active { display: block; }

.bubble-action-menu {
    position: absolute;
    /* 🌟 高级白色磨砂，深灰色字 */
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(25px) saturate(180%); 
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 14px; 
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    display: flex; flex-direction: row; padding: 0 6px;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap; z-index: 2510;
}

.bubble-action-menu.bottom-arrow {
    transform: translate(-50%, calc(-100% + 15px)) scale(0.9);
    transform-origin: center bottom;
}
.bubble-action-overlay.active .bubble-action-menu.bottom-arrow {
    transform: translate(-50%, -100%) scale(1); opacity: 1; 
}

.bubble-action-menu.top-arrow {
    transform: translate(-50%, -15px) scale(0.9);
    transform-origin: center top;
}
.bubble-action-overlay.active .bubble-action-menu.top-arrow {
    transform: translate(-50%, 0) scale(1); opacity: 1; 
}

/* 动态下箭头（跟随白色主体底色） */
.bubble-action-menu.bottom-arrow::after {
    content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    border-width: 6px 6px 0 6px; border-style: solid; border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent;
}
/* 动态上箭头 (跟随白色主体底色) */
.bubble-action-menu.top-arrow::after {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
}

.b-action-item {
    padding: 12px 14px; font-size: 13px; font-weight: 600; 
    color: #333333; /* 🌟 更深一点的高级灰色 */
    cursor: pointer; transition: background 0.15s;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.b-action-item:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 25%; height: 50%; width: 1px;
    background: rgba(0,0,0,0.06); /* 分割线稍微明显一点点 */
}
.b-action-item:active { background: rgba(0,0,0,0.05); border-radius: 8px;}
.b-action-item.danger { color: #ff3b30; } 

/* ==========================================
   🌟 多选模式专属样式
========================================== */
.multi-select-navbar {
    /* 🌟 极致压缩：多选模式的顶栏距离灵动岛改为 5px */
    padding-top: calc(5px + var(--safe-top)); 
    padding-bottom: 15px;
    background: rgba(245, 245, 245, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    display: none; align-items: center; justify-content: space-between;
    padding-left: 15px; padding-right: 15px; flex-shrink: 0; z-index: 5;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    animation: slideDownFade 0.2s ease-out;
}
.chat-room-screen.multi-select-mode .multi-select-navbar { display: flex; }
.chat-room-screen.multi-select-mode .chat-room-header,
.chat-room-screen.multi-select-mode .chat-room-input-bar { display: none !important; }

.ms-nav-btn { font-size: 15px; font-weight: 600; cursor: pointer; padding: 5px; }
.ms-nav-cancel { color: #333; }
.ms-nav-delete { color: #ff3b30; }
.ms-nav-delete.disabled { color: #ccc; pointer-events: none; }
.ms-nav-title { font-size: 15px; font-weight: 800; color: #111; }

.msg-checkbox {
    width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #ccc;
    background: transparent; display: none; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; transition: all 0.2s; align-self: flex-end; margin-bottom: 2px;
}
.chat-room-screen.multi-select-mode .msg-checkbox { display: flex; animation: scaleIn 0.2s; }
.preview-msg-row.ms-selected .msg-checkbox { background-color: #222; border-color: #222; }
.msg-checkbox::after {
    content: ''; width: 6px; height: 3.5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translate(0.5px, -1px); opacity: 0; transition: opacity 0.2s;
}
.preview-msg-row.ms-selected .msg-checkbox::after { opacity: 1; }

/* 🌟 多选复选框占位：我方在左，对方在右 */
.preview-msg-row.left .msg-checkbox { order: 3; margin-left: 10px; } 
.preview-msg-row.right .msg-checkbox { order: -1; margin-right: 10px; } 
.chat-room-screen.multi-select-mode .preview-msg-row { cursor: pointer; }

@keyframes slideDownFade { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ==========================================
   🌟 聊天加号底部菜单 (100% 恢复原版绝美质感)
========================================== */
.chat-room-screen.plus-active .chat-room-input-bar { 
    transform: translateY(calc(-260px - var(--safe-bottom))); 
}
.chat-room-screen.plus-active .chat-room-body { 
    transform: translateY(calc(-260px - var(--safe-bottom))); 
}

.chat-plus-overlay {
    position: fixed; /* 固定在屏幕上，覆盖整个页面 */
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent; /* 透明背景 */
    z-index: 2010; 
    display: none; /* 默认隐藏 */
}
.chat-plus-overlay.active { display: block; } /* 激活时显示 */

.chat-plus-menu {
    position: fixed; 
    bottom: 0; left: 0; width: 100%; 
    height: calc(250px + var(--safe-bottom)); /* 🌟 强制统一弹窗高度 */
    padding: 20px 0 calc(10px + var(--safe-bottom)) 0; 
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.5); 
    border-radius: 24px 24px 0 0; 
    z-index: 2020;
    transform: translateY(100%); 
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
    display: flex; flex-direction: column; box-sizing: border-box;
}
.chat-plus-menu.active { transform: translateY(0); } /* 激活时滑入屏幕 */

/* ==========================================
   🌟 滑动双页容器 (嵌套原版网格)
========================================== */
.plus-pages-container {
    display: flex; width: 100%; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.plus-pages-container::-webkit-scrollbar { display: none; }

.plus-page {
    flex: 0 0 100%; width: 100%;
    scroll-snap-align: center;
    padding: 0 15px; box-sizing: border-box;
}

/* 网格布局：默认一行4个 (绝对原版) */
.plus-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 10px;
}

/* 每个功能项（图标 + 文字） (绝对原版) */
.plus-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 🌟 功能图标按钮：核心原版凹陷液态腔体效果 (100% 无修改还原) 🌟 */
.plus-icon {
    width: 50px;
    height: 50px;
    border-radius: 18px; 
    background: rgba(245, 245, 245, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.02); /* 极度微弱的暗边勾勒物理凹槽 */
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.06), /* 内部左上的暗部投影 (凹陷) */
        inset -4px -4px 8px rgba(255, 255, 255, 1), /* 内部右下的极致高光反光 (突出边缘) */
        0 1px 2px rgba(255, 255, 255, 0.8); /* 凹槽外圈的一点点受光亮边 */
    color: #555; /* SVG 图标颜色，语音按钮也会完美继承 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* 🌟 图标按钮的按压反馈：原版加深凹陷 (100% 无修改还原) 🌟 */
.plus-item:active .plus-icon {
    transform: scale(0.94); /* 按压时轻微缩小 */
    background: rgba(235, 235, 235, 0.6);
    box-shadow: 
        inset 6px 6px 12px rgba(0, 0, 0, 0.1), /* 凹陷更深 */
        inset -6px -6px 12px rgba(255, 255, 255, 1),
        0 1px 1px rgba(255, 255, 255, 0.5);
}

.plus-icon svg { width: 24px; height: 24px; }

/* 功能项下方的文字标签 (绝对原版) */
.plus-item span { font-size: 11px; color: #666; font-weight: 500; }

/* ==========================================
   🌟 翻页指示器 (简约适配毛玻璃底)
========================================== */
.plus-pagination {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin-top: 20px;
}
.plus-pagination .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.1); 
    transition: all 0.3s; cursor: pointer;
}
.plus-pagination .dot.active { 
    background: rgba(0, 0, 0, 0.4); 
}

/* ==========================================
   🌟 表情包系统专属样式
========================================== */
/* 🌟 新增：表情包面板专属的 360px 高度联动上推 */
.chat-room-screen.sticker-active .chat-room-input-bar { 
    transform: translateY(calc(-360px - var(--safe-bottom))); 
}
.chat-room-screen.sticker-active .chat-room-body { 
    transform: translateY(calc(-360px - var(--safe-bottom))); 
}

#sticker-panel {
    padding-bottom: 0 !important; 
}
#sticker-panel.active {
    height: calc(360px + var(--safe-bottom));
}

.sticker-grid-container {
    width: 100%; flex: 1; padding: 10px 0 0 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.sticker-pages-container {
    display: flex; width: 100%; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; flex: 1;
}
.sticker-pages-container::-webkit-scrollbar { display: none; }
.sticker-page {
    flex: 0 0 100%; width: 100%;
    scroll-snap-align: center;
    padding: 0 20px; box-sizing: border-box;
    overflow-y: auto; /* 🌟 保证表情极多时，内部自由上下滑动 */
}
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 15px;
    align-content: start; 
    padding-bottom: 15px; /* 🌟 确保滑到最底下时，最后一行不会被切掉 */
}

/* 🌟 精准控距：距上方内容区3px，距屏幕物理底线 5px */
.sticker-pagination {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    flex-shrink: 0; 
    padding-top: 3px; 
    padding-bottom: calc(5px + var(--safe-bottom));
}

.sticker-pagination .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.1); 
    transition: all 0.3s; cursor: pointer;
}
.sticker-pagination .dot.active { 
    background: rgba(0, 0, 0, 0.4); 
}

/* 表情包容器 (继承极简凹陷质感) */
.sticker-item-box {
    display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; position: relative;
}
.sticker-img-wrapper {
    width: 60px; height: 60px; border-radius: 16px;
    background: rgba(245, 245, 245, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.06), inset -4px -4px 8px rgba(255,255,255,1);
    display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5px;
    transition: all 0.2s ease;
}
.sticker-item-box:active .sticker-img-wrapper {
    transform: scale(0.92);
    background: rgba(235, 235, 235, 0.6);
    box-shadow: inset 6px 6px 12px rgba(0,0,0,0.1), inset -6px -6px 12px rgba(255,255,255,1);
}
.sticker-img-wrapper img {
    max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;
}
.sticker-name { font-size: 10px; color: #777; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }

/* 长按删除的小红叉 */
.sticker-delete-badge {
    position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%;
    background: #ff3b30; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: bold; box-shadow: 0 2px 5px rgba(255,59,48,0.3);
    opacity: 0; transform: scale(0); transition: all 0.2s;
}
.sticker-item-box.shake .sticker-delete-badge { opacity: 1; transform: scale(1); }
.sticker-item-box.shake { animation: sticker-shake 0.3s infinite alternate; }

@keyframes sticker-shake { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } }

/* 聊天室内展示的表情包图片 (去掉气泡背景，纯净展示) */
.chat-sent-sticker { max-width: 120px; max-height: 120px; object-fit: contain; display: block; margin: 4px; border-radius: 8px; }

/* 表情包分组 Tab */
.sticker-group-tabs { 
    display: flex; overflow-x: auto; gap: 8px; 
    padding: 0 20px 10px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); 
    flex-shrink: 0;
}
.sticker-group-tabs::-webkit-scrollbar { display: none; }
.sticker-group-tab { 
    padding: 6px 14px; font-size: 11px; font-weight: 700; color: #666; 
    background: rgba(0,0,0,0.04); border-radius: 14px; cursor: pointer; white-space: nowrap; 
    transition: all 0.2s;
}
.sticker-group-tab.active { background: #111; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.sticker-group-tab:active { transform: scale(0.95); }

/* ==========================================
   🌟 撤回消息系统专属样式 (吸收微信规范)
========================================== */
.recall-notice-row { 
    width: 100%; 
    /* 🌟 核心修复：使用负边距吃掉父容器 28px 的默认空隙，强制拉近距离 */
    margin: -8px 0; 
    text-align: center; 
    display: flex; justify-content: center; align-items: center;
}
.recall-pill { 
    background-color: rgba(0,0,0,0.04); border-radius: 12px; 
    padding: 4px 14px; font-size: 11px; color: #888; 
    font-weight: 600; user-select: none;
}
.recall-link { 
    color: #576b95; /* 经典微信蓝 */
    cursor: pointer; margin-left: 6px; font-weight: 700;
}
.recall-link:active { opacity: 0.6; }

/* ==========================================
   🌟 撤回消息窥探暗黑弹窗 (I WAS THINKING)
========================================== */
.recall-modal-box {
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    width: 280px;
    border-radius: 20px;
    padding: 30px 25px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.08);
    transform: scale(0.9); opacity: 0;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.custom-prompt-overlay.active .recall-modal-box { transform: scale(1); opacity: 1; }

.glow-title {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 15px; font-weight: 900; letter-spacing: 4px;
    color: #ffffff; text-align: center; margin-bottom: 25px;
    text-transform: uppercase;
    animation: neon-flow 2s ease-in-out infinite alternate;
}
@keyframes neon-flow {
    0% { text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 8px rgba(255,255,255,0.6), 0 0 15px rgba(200,220,255,0.3); }
    100% { text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(150,200,255,0.5), 0 0 35px rgba(150,200,255,0.4); }
}

.recall-section { display: flex; flex-direction: column; margin-bottom: 18px; }
.recall-label { font-size: 10px; font-weight: 800; color: #777; letter-spacing: 1.5px; margin-bottom: 6px; text-transform: uppercase; }
.recall-text { font-size: 13px; color: #eee; line-height: 1.6; text-align: justify; font-weight: 500; }
.recall-mood { font-size: 26px; color: #fff; text-align: center; margin-top: 5px; font-weight: bold; }

/* ==========================================
   🌟 翻译消息系统专属样式 【分离架构重构版】
========================================== */
/* 增加主文本的点击互动感 */
.msg-main-text {
    cursor: pointer;
    transition: opacity 0.2s;
}
.msg-main-text:active { opacity: 0.7; }

/* 翻译包裹层与横线 */
.msg-trans-container { margin-top: 4px; }

.msg-trans-line {
    width: 100%; height: 1px;
    background-color: rgba(0, 0, 0, 0.1); 
    margin: 8px 0; display: block;
}
.Toutou-TT.user .content .msg-trans-line { background-color: rgba(255, 255, 255, 0.25); }

/* 🌟 核心：将翻译文字大小设定为与正文一致的大字号 */
.msg-trans-text {
    font-size: 14px; 
    line-height: 1.5;
    opacity: 1; /* 取消原来的变淡 */
    font-weight: normal;
}