/**
 * 聊天窗口面板 - 消息展示区样式
 * 包含：右侧主区、标题栏、消息列表、消息气泡
 * 独立样式（仅本面板使用，不与其他面板通用）
 * 字体：Microsoft YaHei（符合项目字体规范）
 */

/* ========== 右侧主区 ========== */
.chat-window-panel .chat-window-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cw-bg-page);
    position: relative; /* 为提示元素提供定位上下文 */
}

.chat-window-panel .chat-window-header {
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--cw-bg-panel);
    border-bottom: 1px solid var(--cw-border);
}
.chat-window-panel .chat-window-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--cw-text-title);
}

.chat-window-panel .chat-window-messages {
    flex: 1;
    min-height: 200px;
    padding: 12px 16px;
    background: var(--cw-bg-deep);
    overflow-y: auto;
    position: relative; /* 为提示元素提供定位上下文 */
    /* 优化滚动性能 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto; /* 使用 JS 控制滚动动画，不使用 CSS 的 smooth */
    /* 防止滚动时闪烁 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.chat-window-panel .chat-window-messages-empty,
.chat-window-panel .chat-window-messages-loading {
    font-size: 13px;
    color: var(--cw-text-muted);
    text-align: center;
    padding: 24px 16px;
}
.chat-window-panel .chat-window-messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px; /* 底部留白，便于最后一条图片/视频完全滚入视野 */
}
/* 日期分隔线 */
.chat-window-panel .chat-window-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    padding: 0 16px;
}
.chat-window-panel .chat-window-date-divider-line {
    flex: 1;
    height: 1px;
    background: var(--cw-border-subtle);
}
.chat-window-panel .chat-window-date-divider-text {
    font-size: 12px;
    color: var(--cw-text-muted);
    white-space: nowrap;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
}
/* 对方消息：左对齐，头像在左，气泡在右 */
.chat-window-panel .chat-window-message {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100%;
    gap: 8px;
    flex-direction: row;
}
/* 自己的消息：右对齐，气泡在左，头像在右 */
.chat-window-panel .chat-window-message.chat-window-message-is-self {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    flex-direction: row;
}
/* 自己的消息：使用order属性让气泡显示在左边，头像显示在右边 */
.chat-window-panel .chat-window-message.chat-window-message-is-self .chat-window-message-bubble {
    order: 1;
}
.chat-window-panel .chat-window-message.chat-window-message-is-self .chat-window-message-avatar {
    order: 2;
}
/* 消息头像 */
.chat-window-panel .chat-window-message-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cw-icon-bg);
}
.chat-window-panel .chat-window-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chat-window-panel .chat-window-message-avatar.user-avatar-color {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
.chat-window-panel .chat-window-message-bubble {
    max-width: calc(70% - 48px);  /* 减去头像宽度(40px)和间距(8px) */
    min-width: 0;  /* 允许气泡收缩 */
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cw-bg-panel);
    border: 1px solid var(--cw-border-subtle);
    word-wrap: break-word;
}
/* 自己的消息气泡：使用与其他用户相同的背景色 */
.chat-window-panel .chat-window-message.chat-window-message-is-self .chat-window-message-bubble {
    background: var(--cw-bg-panel);  /* 与其他用户消息相同的背景色 */
    border-color: var(--cw-border-subtle);  /* 与其他用户消息相同的边框色 */
    color: var(--cw-text);  /* 使用标准文本颜色 */
}
.chat-window-panel .chat-window-message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
/* 对方消息：发送者在左，时间在右 */
.chat-window-panel .chat-window-message .chat-window-message-meta {
    justify-content: flex-start;
}
/* 自己的消息：时间在右对齐 */
.chat-window-panel .chat-window-message.chat-window-message-is-self .chat-window-message-meta {
    justify-content: flex-end;
}
.chat-window-panel .chat-window-message-sender {
    font-size: 12px;
    font-weight: bold;
    color: var(--cw-text-muted);
}
.chat-window-panel .chat-window-message-time {
    font-size: 10px;
    color: var(--cw-text-muted);
}
.chat-window-panel .chat-window-message-body {
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-window-panel .chat-window-msg-attachment {
    font-size: 12px;
    color: var(--cw-text-muted);
}

/* ==================== 消息内引用预览块（仅本面板使用） ==================== */
.chat-window-panel .chat-window-message-quote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--cw-border-subtle);
}

.chat-window-panel .chat-window-message-quote-bar {
    display: none;
}

.chat-window-panel .chat-window-message-quote-main {
    flex: 1;
    min-width: 0;
}

.chat-window-panel .chat-window-message-quote-user {
    font-size: 12px;
    font-weight: bold;
    color: var(--cw-text-muted);
    margin-bottom: 2px;
}

.chat-window-panel .chat-window-message-quote-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-window-panel .chat-window-message-quote-thumb-wrap {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cw-bg-panel);
    flex-shrink: 0;
}

.chat-window-panel .chat-window-message-quote-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: block;
}

.chat-window-panel .chat-window-message-quote-text {
    font-size: 12px;
    color: var(--cw-text-muted);
    max-height: 36px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 历史消息加载提示 */
.chat-window-panel .chat-window-history-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    margin: 8px 0;
}

.chat-window-panel .chat-window-history-loading-text {
    font-size: 12px;
    color: var(--cw-text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
}