/**
 * 对话页外壳 —— 单专家 / 专家团**共用**的一套样式(2026-10-26 抽出来)
 *
 * ## 为什么抽成一份 CSS
 *
 * 这套 `.ci-*` 原来是 `expertChatBase.js` 里 `injectExpertChatStyle()` 现注入的。
 * 2026-10-26 用户要求「专家团点进去的界面和单专家模式对齐」—— 对齐的做法有两种:
 *   ① 让团的页面也加载 expertChatBase.js(**为了几 KB 样式拖 180 KB 的 JS**)
 *   ② 把这堆样式挪成真 CSS 文件,两边都用同一套 class  ← 选这个
 * 抽出来的好处不只是省体积:**「像不像」变成了同一份定义**,不会各调各的漂开。
 *
 * ⚠️ 这些 class 名(`ci-*`)别改 —— `expertChatBase.js` 的模板里写满了它们。
 */

.cursor-blink { display: inline-block; animation: cursor-blink 1s steps(2) infinite; }
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.ci-chat-root { display: flex; flex-direction: column; height: calc(100vh - 60px); max-width: 960px; margin: 0 auto; padding: 0 16px; }
.ci-chat-top { flex: 0 0 auto; padding: 12px 4px 8px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-light); }
.ci-chat-scroll { flex: 1 1 auto; overflow-y: auto; padding: 16px 4px 24px; scroll-behavior: smooth; }
.ci-chat-input { flex: 0 0 auto; padding: 10px 4px 14px; background: var(--bg-card, #252830); border-top: 1px solid var(--border-light); }
.ci-msg { margin-bottom: 14px; }
/* 用 text-align:right 让气泡贴右,不用 flex — 避免 flex 子约束触发过早换行 bug */
.ci-msg-user { text-align: right; }
.ci-msg-user-bubble {
    display: inline-block;   /* 脱离块级,按内容宽度自适应 */
    max-width: 78%;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;   /* bubble 内文字左对齐,不受父 text-align:right 影响 */
}
.ci-msg-system {
    text-align: center;
    font-size: 11px;
    color: var(--text-placeholder);
    padding: 6px 0;
    font-style: italic;
}
.ci-thinking-body {
    font-family: Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    padding: 4px 2px;
}
.ci-progress-line { padding: 1px 0; line-height: 1.5; font-size: 12px; }
.ci-jump-bottom { position: absolute; right: 20px; bottom: 130px; z-index: 5; }
.ci-toolbar { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px; flex-wrap: wrap; }
.ci-input-wrap {
    position: relative;
    border: 1px solid var(--border-color, #3c4048);
    border-radius: 14px;
    padding: 8px 52px 8px 12px;   /* 右留 52px 给绝对定位的发送按钮 */
    background: var(--bg-input, #1e2126);
    transition: border-color 0.15s;
    min-height: 44px;
}
.ci-input-wrap:focus-within { border-color: var(--el-color-primary, #409eff); }
.ci-send-btn { position: absolute !important; right: 8px; bottom: 8px; }
/* el-input textarea 内文字从顶开始,避免视觉「下对齐」别扭 */
.ci-input-wrap .el-textarea__inner { padding: 4px 0 !important; line-height: 1.6 !important; }
.ci-hint-line { font-size: 10px; color: var(--text-placeholder); text-align: center; margin-top: 6px; }