/* @🍮 聊天室专属美化 CSS 文件 */
/* 这个文件专门用来给你随心所欲地修改聊天室的样式！绝对不会影响外面！ */

/* ==========================================
   第一部分：聊天室外部框架 (头部、底部输入区)
   ========================================== */

/* 顶部栏大盒子 */
.cr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}
/* 返回键、设置键、取消键 */
.cr-back-btn, .cr-settings-btn, .cr-cancel-btn {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cr-cancel-btn { font-size: 16px; width: auto; padding: 6px 12px; }
.cr-settings-btn img { width: 28px; height: 28px; }

/* 顶部标题区 */
.cr-title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/* 标题布局控制 */
.cr-title-box.title-layout-left { position: static; transform: none; align-items: flex-start; flex-grow: 1; margin-left: 10px; }
.cr-title-box.title-layout-right { position: static; transform: none; align-items: flex-end; flex-grow: 1; margin-right: 10px; }
/* 标题文字 */
.cr-title { font-size: 18px; font-weight: 600; color: var(--text-color); margin: 0; }
/* 在线状态小字 */
.cr-subtitle { font-size: 12px; color: #888; display: flex; align-items: center; margin-top: 2px; }

/* 聊天气泡显示的大区域 */
.cr-content {
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-bottom: 10px;
    transition: padding-bottom 0.3s ease;
}
#chat-room-screen.multi-select-active .cr-content { padding-bottom: 70px; }

/* 底部输入框总盒子 */
.cr-bottom-wrapper { flex-shrink: 0; }
.cr-bottom-wrapper.hidden { display: none; }

/* 输入框上方的功能栏 (表情/转账等) */
.cr-action-bar {
    padding: 0 10px 5px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 2px;
}
.cr-action-bar::-webkit-scrollbar { display: none; }
.cr-action-btn { background: none; border: none; padding: 5px; cursor: pointer; flex-shrink: 0; }
.cr-action-btn svg { width: 28px; height: 28px; fill: #888; }

/* 引用预览框 */
.cr-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--primary-color);
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #555;
    flex-shrink: 0;
    display: none;
}
.cr-reply-preview.visible { display: flex; }
.cr-reply-content { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
.cr-reply-close { background: none; border: none; font-size: 20px; color: #888; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }

/* 打字输入区 */
.cr-input-box {
    display: flex;
    align-items: center;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    gap: 10px;
    border-bottom-left-radius: var(--phone-corner-radius);
    border-bottom-right-radius: var(--phone-corner-radius);
    overflow: hidden;
}
.cr-input { flex-grow: 1; border: none; padding: 12px; border-radius: 18px; background-color: #f0f0f0; }
.cr-input:focus { outline: none; }
.cr-input::placeholder { color: #aaa; }

/* 发送键 和 AI回复键 */
.cr-send-btn, .cr-ai-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.cr-send-btn { font-size: 18px; }
.cr-send-btn:disabled, .cr-ai-btn:disabled { background-color: #cccccc; cursor: not-allowed; }
.cr-send-btn svg, .cr-ai-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* 夜间模式适配 (框架部分) */
body.global-dark-mode .cr-header,
body.global-dark-mode .cr-input-box,
body.global-dark-mode .cr-action-bar { background-color: rgba(30, 30, 30, 0.8); }
body.global-dark-mode .cr-header { border-bottom-color: #333; }
body.global-dark-mode .cr-input { background-color: #333; color: #e0e0e0; }
body.global-dark-mode .cr-reply-preview { background-color: rgba(30, 30, 30, 0.85); border-color: #333; color: #ccc; }


/* ==========================================
   第二部分：聊天气泡与特殊卡片清单
   (这些类名已在底层的 style.css 中定义好，你可以在下面添加样式来覆盖它们！)
   ========================================== */

/* 1. 聊天气泡大外壳 */
/* .message-wrapper { } */
/* .message-bubble { } */
/* .message-bubble.sent { } */ /* 我方气泡 */
/* .message-bubble.received { } */ /* 对方气泡 */

/* 2. 特殊卡片 */
/* .transfer-card { } */ /* 转账卡片 */
/* .gift-card { } */ /* 礼物卡片 */
/* .voice-bubble { } */ /* 语音框 */
/* .pv-card { } */ /* 照片视频卡片 */
/* .image-bubble { } */ /* 图片气泡 */
/* .sticker-bubble { } */ /* 表情包透明气泡 */

/* 3. 系统提示与文字 */
/* .system-notification-bubble { } */ /* 灰色小字系统提示 */
/* .recalled-bubble { } */ /* 撤回提示 */
/* .recalled-content-box { } */ /* 撤回查看框 */
/* .voice-transcript { } */ /* 语音转文字框 */

/* 4. 双语与引用 */
/* .bilingual-trans-outer { } */ /* 双语外部翻译框 */
/* .bilingual-trans-inner { } */ /* 双语内部翻译框 */
/* .message-reply-box { } */ /* 气泡底部的引用框 */

/* 5. 正在输入中 */
/* 5. 正在输入中 */
/* .typing-indicator { } */

/* ==========================================
   @🍮 第三部分：底部输入区高级定制专属类
   ========================================== */
/* 【菜单模式】 */
.cr-layout-menu-active .cr-menu-btn { display: flex !important; }
.cr-layout-menu-active #sticker-bar { display: none !important; }
.cr-layout-menu-active.cr-menu-opened #sticker-bar { display: flex !important; }

/* 【表情外置模式】 */
.cr-layout-ext-sticker .cr-external-sticker-btn { display: flex !important; }
.cr-layout-ext-sticker #sticker-toggle-btn { display: none !important; }

/* 【重回内置模式】 */
.cr-layout-int-regen .cr-internal-regen-btn { display: flex !important; }
.cr-layout-int-regen .cr-input { padding-right: 38px !important; }
.cr-layout-int-regen #regenerate-btn { display: none !important; }

/* 【隐形发送模式 (最右侧暗门)】 */
.cr-layout-invisible-ai { position: relative; }
.cr-layout-invisible-ai .cr-ai-btn { 
    position: absolute !important; 
    right: 10px; 
    top: 10px;
    opacity: 0 !important; 
    z-index: 100; 
}
.cr-layout-invisible-ai .cr-input {
    padding-right: 48px !important;
}

/* 【隐形菜单模式 (最左侧盲盒)】 */
.cr-layout-invisible-menu { position: relative; }
.cr-layout-invisible-menu .cr-menu-btn { 
    position: absolute !important; 
    display: flex !important;
    left: 10px; 
    top: 10px;
    opacity: 0 !important; 
    z-index: 100; 
}
.cr-layout-invisible-menu .cr-input {
    padding-left: 48px !important;
}