/**
 * 聊天窗口面板 - 通知和状态样式
 * 包含：新消息提示、右键菜单、已删除状态、媒体删除提示
 * 独立样式（仅本面板使用，不与其他面板通用）
 * 字体：Microsoft YaHei（符合项目字体规范）
 */

/* 新消息提示样式 */
.chat-window-panel .chat-window-new-message-tip {
    position: absolute !important;
    bottom: 140px !important; /* 固定在输入区域上方，距离输入框更近 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important; /* 稍微增加内边距，提升可读性 */
    background: #ffffff !important; /* 纯白色背景，确保最佳对比度 */
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(76, 175, 80, 0.2) !important;
    cursor: pointer !important;
    user-select: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    z-index: 1000 !important; /* 提高z-index，确保不被其他元素遮挡 */
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif !important;
    font-size: 13px !important;
    color: #1a1a1a !important; /* 深色文字，确保在白色背景上清晰可见 */
    font-weight: 500 !important; /* 增加字体粗细，提升可读性 */
    pointer-events: auto !important; /* 确保可以点击 */
}

.chat-window-panel .chat-window-new-message-tip.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    display: flex !important; /* 确保显示 */
}

.chat-window-panel .chat-window-new-message-tip:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(76, 175, 80, 0.3);
    transform: translateX(-50%) translateY(-2px);
    border-color: rgba(76, 175, 80, 0.5);
}

/* 绿色发光小球 */
.chat-window-panel .chat-window-new-message-tip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6), 0 0 16px rgba(76, 175, 80, 0.4);
    animation: chat-window-glow-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* 发光闪烁动画 */
@keyframes chat-window-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.6), 0 0 16px rgba(76, 175, 80, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 12px rgba(76, 175, 80, 0.9), 0 0 24px rgba(76, 175, 80, 0.6), 0 0 32px rgba(76, 175, 80, 0.3);
        transform: scale(1.1);
    }
}

/* 提示文字 */
.chat-window-panel .chat-window-new-message-tip-text {
    font-size: 13px;
    color: #1a1a1a; /* 深色文字，确保清晰可见 */
    font-weight: 500; /* 增加字体粗细 */
    white-space: nowrap;
    letter-spacing: 0.3px; /* 增加字间距，提升可读性 */
}

/* 未读消息数量 */
.chat-window-panel .chat-window-new-message-tip-count {
    font-size: 13px; /* 稍微增大字体 */
    color: #2e7d32; /* 更深的绿色，提升对比度 */
    font-weight: 600; /* 加粗字体 */
    white-space: nowrap;
    letter-spacing: 0.2px; /* 增加字间距 */
}

/* ========== 右键菜单样式 ========== */
.chat-window-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--cw-bg-panel, #1e1e1e);
    border: 1px solid var(--cw-border, #2e2e2e);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 120px;
    padding: 4px 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
    font-size: 13px;
}

.chat-window-context-menu-item {
    padding: 8px 16px;
    color: var(--cw-text, #e8e8e8);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.chat-window-context-menu-item:hover {
    background: var(--cw-hover, #282828);
}

.chat-window-context-menu-item[data-action="delete-friend"] {
    color: #ff6b6b;
}

.chat-window-context-menu-item[data-action="delete-friend"]:hover {
    background: rgba(255, 107, 107, 0.1);
}

/* ========== 已删除好友状态样式 ========== */
.chat-window-panel .chat-window-user-item-deleted {
    opacity: 0.7;
}

.chat-window-panel .chat-window-user-item-deleted .chat-window-user-name {
    color: var(--cw-text-muted, #909090);
}

.chat-window-panel .chat-window-user-item-deleted .chat-window-user-msg {
    color: var(--cw-text-muted, #909090);
    font-style: italic;
}

/* 已删除提示横幅 */
.chat-window-deleted-banner {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 12px;
    text-align: center;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
    font-size: 13px;
    color: #ff6b6b;
}

.chat-window-deleted-banner-text {
    display: block;
    line-height: 1.5;
}

/* ========== 媒体消息删除提示样式 ========== */
.chat-window-msg-deleted-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    background: var(--cw-bg-deep, #141414);
    border: 1px dashed var(--cw-border, #2e2e2e);
    border-radius: 6px;
    color: var(--cw-text-muted, #909090);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
    text-align: center;
}

.chat-window-msg-media {
    position: relative;
}

.chat-window-msg-media .chat-window-msg-deleted-tip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: auto;
}

/* ========== 消息撤回样式 ========== */
.chat-window-message-revoked {
    opacity: 0.7;
}

.chat-window-message-revoked .chat-window-message-body {
    font-style: italic;
}

.chat-window-message-revoked-text {
    color: var(--cw-text-muted, #909090);
    font-size: 13px;
    font-style: italic;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", Arial, sans-serif;
}

/* 消息右键菜单样式 */
.chat-window-message-context-menu {
    min-width: 100px;
}

.chat-window-context-menu-item[data-action="revoke-message"] {
    color: var(--cw-text, #e8e8e8);
}

.chat-window-context-menu-item[data-action="revoke-message"]:hover {
    background: var(--cw-hover, #282828);
    color: var(--cw-accent, #4caf50);
}

