/* 让浮层相对父容器定位 */
.robot-selector {
    position: relative;
    margin-bottom: 8px;
    padding: 8px 8px 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6;
    flex-shrink: 0;
}
/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    display: flex;
    background-color: #f7f7f7;
    color: #333;
}

/* 应用容器 */
.app-container {
    display: flex;
    width: 100%;
    height: calc(100% - 48px); /* 减去顶部header高度 */
    overflow: hidden;
    position: fixed;
    top: 48px; /* 从顶部header下方开始 */
    left: 0;
    right: 0;
    bottom: 0;
}

.app-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 48px;
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 1000;
    padding: 0 24px;
}

.header-user-info {
    margin-right: 16px;
    font-size: 15px;
    color: #333;
}

.logout-btn {
    padding: 6px 16px;
    font-size: 14px;
    background: #f44336;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 左侧菜单栏样式 */
.sidebar-menu {
    width: 80px;
    background-color: #f5f5f5;
    border-right: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    flex-shrink: 0;
    gap: 12px;
}

/* 左侧菜单项样式 - 限定在 .sidebar-menu 下 */
.sidebar-menu .menu-item {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-color: transparent;
}

.sidebar-menu .menu-item:hover {
    background-color: #e8e8e8;
}

.sidebar-menu .menu-item.active {
    background-color: #07c160;
}

.sidebar-menu .menu-item.active .menu-icon {
    color: #ffffff;
    stroke: #ffffff;
}

.sidebar-menu .menu-icon {
    width: 28px;
    height: 28px;
    color: #333333;
    stroke: #333333;
    stroke-width: 2;
    transition: all 0.2s ease;
}

.sidebar-menu .menu-item:not(.active):hover .menu-icon {
    color: #07c160;
    stroke: #07c160;
}

.menu-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #ff3b30;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* 会话列表容器样式 */
.conversation-list-container {
    width: 350px;
    background-color: #ffffff;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e6e6e6;
    position: relative;
    overflow: hidden;
}

/* 会话列表容器 */
#conversationList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-color: #ffffff;
}

/* 会话分区样式 */
.conversation-section {
    background-color: #fff;
    margin-bottom: 1px;
    position: relative;
}

/* 分区标题固定 */
.section-header {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: sticky;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #f0f0f0;
}

/* 置顶会话区域 */
.pinned-conversations {
    position: relative;
}

/* 置顶会话标题固定在顶部 */
.pinned-conversations .section-header {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 普通会话区域 */
.normal-conversations {
    position: relative;
}

/* 普通会话标题固定在顶部 */
.normal-conversations .section-header {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 标题悬浮效果 */
.section-header:hover {
    background-color: #f5f5f5;
}

/* 标题激活效果 */
.section-header:active {
    background-color: #e6e6e6;
}

/* 会话项容器 */
.conversation-items {
    background-color: #fff;
    position: relative;
}

/* 会话项样式 */
.conversation-item {
    display: flex;
    padding: 12px;
    cursor: default;
    position: relative;
    align-items: center; /* 关键：上下居中对齐 */
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}

/* 确保最后一个会话项没有边框 */
.conversation-items:last-child .conversation-item:last-child {
    border-bottom: none;
}

/* 会话分区之间的间隔 */
.conversation-section + .conversation-section {
    border-top: 1px solid #f0f0f0;
}

/* 折叠状态 */
.conversation-items.collapsed {
    display: none;
}

.section-collapse-icon {
    transition: transform 0.2s ease;
}

.section-collapse-icon.collapsed {
    transform: rotate(-90deg);
}

/* 搜索栏样式 */
.search-bar {
    padding: 12px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
    flex-shrink: 0;
}

.conversation-filter-menu {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 12px 12px;
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6;
    flex-shrink: 0;
}

.robot-status-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 6px;
}

.robot-status-tab {
    flex: 1;
    text-align: center;
    padding: 4px 8px;
    font-size: 12px;
    color: #666;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.robot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
}

.robot-header-meta {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.robot-header-meta #robotCount,
.robot-toggle-icon {
    color: #999;
}

.robot-toggle-icon {
    font-size: 12px;
}

.robot-list {
    margin-top: 6px;
    display: none;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 6px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.search-bar input {
    width: 100%;
    padding: 9px 50px 9px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background-color: #ffffff;
    outline: none;
    font-size: 14px;
    color: #333;
    transition: all 0.2s;
    line-height: 1.4;
}

.search-bar input:focus {
    border-color: #07c160;
}

.search-bar::before {
    display: none;
}

.search-bar .clear-search {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
    padding: 4px;
    display: none;
    font-size: 16px;
    line-height: 1;
    z-index: 21;
    pointer-events: auto;
}

.search-bar input:not(:placeholder-shown) + .clear-search {
    display: block;
}

.clear-search:hover {
    color: #666;
}

.search-button {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    border: none;
    background-color: #07c160;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 21;
    transition: all 0.2s;
    box-sizing: border-box;
}

.search-button:hover {
    background-color: #06ad56;
}

.search-button:active {
    background-color: #059048;
}

.search-button svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
    stroke: #ffffff;
}

.conversation-header {
    padding: 8px 12px;
    font-size: 12px;
    color: #999;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
}

.conversation-count {
    display: inline-block;
    font-size: 12px;
    color: #999;
    margin-left: 4px;
}

.conversation-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    will-change: transform;
    transform: translateZ(0);
}

.conversation-viewport {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
}

/* 会话项样式 */
.conversation-item {
    display: flex;
    padding: 12px;
    cursor: default;
    position: relative;
    align-items: center; /* 关键：上下居中对齐 */
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.conversation-item:hover {
    background-color: #f5f5f5;
}

/* 普通会话的选中状态样式 */
.conversation-item.active {
    background-color: #e6f7ff;
    border-left: 4px solid #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
    transform: translateX(2px);
    position: relative;
}

.conversation-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #1890ff, #40a9ff);
}

.conversation-item.active .conversation-name {
    color: #1890ff;
    font-weight: 600;
}

.conversation-item.active .name-text {
    color: #1890ff;
    font-weight: 600;
    text-shadow: 0 0 1px rgba(24, 144, 255, 0.3);
}

.conversation-item.active .conversation-preview {
    color: #1890ff;
    font-weight: 500;
}

.conversation-item.active .conversation-time {
    color: #1890ff;
    font-weight: 500;
}

.conversation-item.active .conversation-avatar {
    border: 2px solid #1890ff;
    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
}

/* 会话头像样式 */
.conversation-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f5f5f5;
}

.conversation-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    user-select: none;
}

.conversation-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 30px; /* 为时间留出空间 */
}

.conversation-name {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}
.conversation-name .name-badge-wrap {
    position: relative;
    display: inline-block;
}
.recent3days-user-badge {
    display: inline-block;
    background: #eaf4ff;
    color: #409eff;
    font-size: 10px;
    border-radius: 6px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    border: 1px solid #b3d8ff;
    font-weight: normal;
    letter-spacing: 0.5px;
    position: static;
    box-shadow: none;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    max-width: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.conversation-name .name-text {
    margin-top: 0;
}

.name-text {
    font-size: 14px;
    color: #1f2329;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px; /* 限制名称最大宽度 */
    cursor: help; /* 当有tooltip时显示帮助光标 */
}

.name-text.font-bold {
    font-weight: 600;
}

/* 有tooltip的名称样式 */
.name-text[title]:hover {
    color: #1890ff;
    text-decoration: underline;
    position: relative;
}

/* 自定义tooltip样式 */
.name-text[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.name-text[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    margin-bottom: -5px;
    z-index: 1000;
}

/* 性别图标样式 */
.sex-icon {
    font-size: 16px;
    font-weight: 900;
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
}

.sex-icon[title="男"] {
    color: #1890ff;
}

.sex-icon[title="女"] {
    color: #ff69b4;
}

.conversation-preview {
    font-size: 13px;
    color: #8c8c8c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help; /* 当有tooltip时显示帮助光标 */
}

/* 有tooltip的预览文本样式 */
.conversation-preview[title]:hover {
    color: #666;
    text-decoration: underline;
    position: relative;
}

/* 预览文本自定义tooltip样式 */
.conversation-preview[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-preview[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    margin-bottom: -5px;
    z-index: 1000;
}

.conversation-time {
    font-size: 10px;
    color: #8c8c8c;
    position: absolute;
    right: 8px;
    top: 17px;
    min-width: 50px; /* 确保时间有固定的最小宽度 */
    text-align: right;
}

/* 置顶会话样式 */
.conversation-item.pinned {
    background-color: #fafafa;
}

/* 未读消息样式 */
.unread-badge {
    background-color: #ff4d4f;
    color: #fff;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-weight: normal;
}

/* 未读会话样式 */
.conversation-item.unread .conversation-preview {
    color: #1f2329;
    font-weight: 500;
}

/* 被删除会话的样式 */
.conversation-item.deleted {
    opacity: 0.6;
    background-color: #f8f9fa;
    position: relative;
}

.conversation-item.deleted::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 77, 79, 0.1) 30%, rgba(255, 77, 79, 0.1) 70%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.conversation-item.deleted .conversation-avatar {
    opacity: 0.5;
    filter: grayscale(100%);
}

.conversation-item.deleted .conversation-name {
    color: #999;
}

.conversation-item.deleted .conversation-preview {
    color: #ccc;
}

.conversation-item.deleted .conversation-time {
    color: #ccc;
}

.conversation-item.deleted .name-text {
    text-decoration: line-through;
    color: #999;
}

.conversation-item.deleted .deleted-badge {
    position: absolute;
    top: 40px;
    right: 8px;
    background-color: #ff4d4f;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 2;
}

.conversation-item.deleted:hover {
    opacity: 0.8;
    background-color: #f0f0f0;
}

.conversation-item.deleted:hover::before {
    background: linear-gradient(45deg, transparent 30%, rgba(255, 77, 79, 0.15) 30%, rgba(255, 77, 79, 0.15) 70%, transparent 70%);
}

/* 被删除会话的选中状态样式 */
.conversation-item.deleted.active {
    background-color: #ffebee;
    opacity: 1;
    border-left: 4px solid #ff4d4f;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
    transform: translateX(2px);
    position: relative;
}

/* 删除会话的聊天界面样式 */
.deleted-conversation-input {
    background-color: #f8f9fa;
    border-top: 2px solid #ff4d4f;
    position: relative;
}

.deleted-conversation-input::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 77, 79, 0.05) 30%, rgba(255, 77, 79, 0.05) 70%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.deleted-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #fff2f0;
    border-bottom: 1px solid #ffccc7;
    color: #d32f2f;
    font-size: 13px;
    font-weight: 500;
}

.deleted-icon {
    font-size: 16px;
}

.deleted-text {
    flex: 1;
}

.deleted-badge-chat {
    background-color: #ff4d4f;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: normal;
}

/* 禁用状态的输入框和按钮样式 */
.message-input.disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #d9d9d9;
}

.message-input.disabled::placeholder {
    color: #bfbfbf;
}

.tool-buttons.disabled .tool-button.disabled {
    color: #bfbfbf !important;
    cursor: not-allowed;
    opacity: 0.5;
}

.tool-buttons.disabled .tool-button.disabled:hover {
    background-color: transparent;
    color: #bfbfbf !important;
}

.voice-button.disabled,
.send-button.disabled {
    background-color: #f5f5f5;
    color: #bfbfbf;
    border-color: #d9d9d9;
    cursor: not-allowed;
    opacity: 0.6;
}

.voice-button.disabled:hover,
.send-button.disabled:hover {
    background-color: #f5f5f5;
    color: #bfbfbf;
    border-color: #d9d9d9;
    transform: none;
    box-shadow: none;
}

.keyword-mask-toggle {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    color: #666;
    font-size: 12px;
    line-height: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.keyword-mask-toggle:hover {
    border-color: #40a9ff;
    color: #1890ff;
    background: #f0f8ff;
}

.keyword-mask-toggle.active {
    border-color: #52c41a;
    background: #52c41a;
    color: #fff;
}

.keyword-mask-toggle.disabled,
.keyword-mask-toggle:disabled {
    background-color: #f5f5f5;
    color: #bfbfbf;
    border-color: #d9d9d9;
    cursor: not-allowed;
    opacity: 0.6;
}

.keyword-mask-toggle.disabled:hover,
.keyword-mask-toggle:disabled:hover {
    background-color: #f5f5f5;
    color: #bfbfbf;
    border-color: #d9d9d9;
}

.conversation-item.deleted.active::before {
    background: linear-gradient(45deg, transparent 25%, rgba(255, 77, 79, 0.25) 25%, rgba(255, 77, 79, 0.25) 75%, transparent 75%);
}

.conversation-item.deleted.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #ff4d4f, #ff7875);
}

.conversation-item.deleted.active .conversation-name {
    color: #d32f2f;
    font-weight: 600;
}

.conversation-item.deleted.active .name-text {
    color: #d32f2f;
    text-decoration: line-through;
    font-weight: 600;
    text-shadow: 0 0 1px rgba(255, 77, 79, 0.3);
}

.conversation-item.deleted.active .conversation-preview {
    color: #d32f2f;
    font-weight: 500;
}

.conversation-item.deleted.active .conversation-time {
    color: #d32f2f;
    font-weight: 500;
}

.conversation-item.deleted.active .deleted-badge {
    background-color: #d32f2f;
    color: white;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(255, 77, 79, 0.4);
    transform: scale(1.1);
}

.conversation-item.deleted.active .conversation-avatar {
    opacity: 0.7;
    filter: grayscale(80%);
    border: 2px solid #ff4d4f;
    box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
}

/* 滚动条样式 */
#conversationList::-webkit-scrollbar {
    width: 4px;
}

#conversationList::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

#conversationList::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 错误消息样式 */
#conversationList .error-message {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
    background-color: #fff;
}

/* 加载状态样式 */
#conversationList .loading {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#conversationList .loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid #f0f0f0;
    border-top-color: #1890ff;
    border-radius: 50%;
    animation: loading-spin 0.8s infinite linear;
}

@keyframes loading-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 聊天容器样式 */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

/* 聊天消息样式 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background-color: #f5f5f5;
    -webkit-overflow-scrolling: touch;
    position: relative;
    height: calc(100% - 120px); /* 减去头部(48px) + chat-header(约60px) + 输入框(约60px)的高度 */
}

/* 时间轴样式 */
.time-divider {
    text-align: center;
    margin: 16px 0;
    position: relative;
    clear: both;
    z-index: 1;
}

.time-divider-text {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    color: #999;
    background-color: transparent;
    line-height: 1.4;
}

.message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;
    clear: both;
}

.message:last-child {
    margin-bottom: 0;
}

.message-group {
    margin-bottom: 20px;
}

.message-group:last-child {
    margin-bottom: 0;
}

.message-content {
    display: flex;
    flex-direction: column;
    max-width: 60%;
}

.message-self {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-self .message-avatar {
    margin-right: 0;
    margin-left: 12px;
}

.message-text {
    padding: 10px 14px;
    background-color: #fff;
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 14px;
    position: relative;
}

.message-self .message-text {
    background-color: #1890ff;
    border-radius: 16px 4px 16px 16px;
    color: #fff;
}

/* 移除表情图片相关样式 */
.emoji {
    display: inline;
    vertical-align: middle;
    font-size: 1.2em;
    line-height: 1;
    margin: 0 1px;
}

/* 确保表情在消息气泡中正确显示 */
.message-text .emoji {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin: -4px 1px 0;
}

/* 确保表情在系统消息中正确显示 */
.message-system .emoji {
    width: 20px;
    height: 20px;
    margin: -3px 1px 0;
}

/* 移除表情图片相关样式，因为现在使用Unicode表情 */



/* 语音消息样式 */
.voice-message {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 60%;
}

.message-voice {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #fff;
    border-radius: 4px 16px 16px 16px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
    max-width: 200px;
    position: relative;
    box-sizing: border-box;
}

.message-self .message-voice {
    background-color: #2b7efb;
    border-radius: 16px 4px 16px 16px;
    color: #fff;
}

.voice-text {
    font-size: 12px;
    color: #666;
    background-color: rgba(0, 0, 0, 0.03);
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 4px;
    white-space: pre-line;
    line-height: 1.5;
}

.message-self .voice-text {
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
}

/* 图片消息样式 */
.message-image {
    max-width: 300px;
    border-radius: 4px;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

.message-image:hover {
    transform: scale(1.02);
}

.message-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 图片查看器样式 */
.image-viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-viewer.active {
    display: flex;
    opacity: 1;
}

.image-viewer-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    margin: auto;
}

#viewerImage {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.close-viewer {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.close-viewer:hover {
    transform: scale(1.1);
}

/* 表情消息样式 */
.message-emoji {
    max-width: 120px;
    position: relative;
    margin-bottom: 0;
}

.message-emoji img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.message-emoji .emoji-text {
    font-size: 48px;
    line-height: 1;
    padding: 10px;
    margin-top: 4px;
    user-select: none;
}

.emoji-label {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 2px;
    padding: 2px 8px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

.message-emoji .emoji-label {
    display: none;
}

/* 表情在消息文本中的样式 */
.message-text .emoji {
    font-size: 22px;
    vertical-align: middle;
    margin: 0 2px;
    line-height: 1;
}

.today-user-badge {
    display: inline-block;
    background: #ff4d4f;
    color: #fff;
    font-size: 12px;
    border-radius: 8px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
  }
  
  
/* 表情标签对齐修复 */
.emoji-label {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 4px;
    padding: 2px 8px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* 卡片消息样式 */
.message-card {
    width: 240px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-header {
    padding: 10px 12px;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.card-body {
    padding: 12px;
}

.card-image {
    margin: -12px -12px 12px;
}

.card-image img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.card-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #1f2329;
}

.card-desc {
    font-size: 13px;
    color: #8c8c8c;
    margin-bottom: 8px;
    line-height: 1.4;
}

.card-link {
    font-size: 13px;
    color: #1890ff;
    cursor: pointer;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}

.card-sender {
    font-size: 12px;
    color: #8c8c8c;
    margin-bottom: 6px;
    font-style: italic;
}

/* 视频消息样式 */
.message-video {
    max-width: 240px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.message-video video {
    width: 100%;
    display: block;
}

/* 错误消息样式 */
.message-error {
    color: #ff4d4f;
    font-size: 12px;
    padding: 8px 12px;
    background-color: #fff2f0;
    border-radius: 4px;
    margin-top: 4px;
}

/* 加载状态 */
.loading {
    text-align: center;
    padding: 12px;
    color: #999;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #e8e8e8;
    border-top-color: #1890ff;
    border-radius: 50%;
    animation: loading-spin 0.8s infinite linear;
}

@keyframes loading-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.no-more {
    text-align: center;
    padding: 12px;
    color: #999;
    font-size: 13px;
    background-color: #fff;
}

.error-message {
    text-align: center;
    padding: 12px;
    color: #ff4d4f;
    font-size: 13px;
    background-color: #fff;
}

.empty-message {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
    background-color: #fff;
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 系统消息样式 */
.message-recalled {
    color: #999;
    font-style: italic;
}

.message-self .message-image {
    float: right;
}

/* 撤回消息样式 */
.message-recalled {
    text-align: center;
    padding: 8px 16px;
    margin: 12px 0;
    color: #999;
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.message-recalled .recall-icon {
    margin-right: 4px;
    opacity: 0.7;
}

/* 消息状态样式 */
.message-status {
    position: static;
    display: flex;
    align-self: flex-end;
    min-height: 22px;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}

.message-status .badge {
    width: auto;
    min-width: 0;
    height: 22px;
    gap: 5px;
    padding: 0 9px 0 7px;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
}

.message-status .badge-soft-dark::before,
.message-status .badge-soft-success::before,
.message-status .badge-soft-danger::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.message-status .badge-soft-dark::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid rgba(96, 117, 138, 0.24);
    border-top-color: #1677ff;
    animation: message-status-spin 0.8s linear infinite;
}

.message-status .badge-soft-success::before {
    content: "✓";
    background: #52c41a;
}

.message-status .badge-soft-danger::before {
    content: "!";
    background: #ff4d4f;
}

@keyframes message-status-spin {
    to {
        transform: rotate(360deg);
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.badge-soft-dark {
    color: #60758a;
    background-color: #edf3fa;
}

.badge-soft-success {
    color: #389e0d;
    background-color: #edf9ef;
}

.badge-soft-danger {
    color: #d9363e;
    background-color: #fff1f0;
}

/* 系统消息样式 */
.message-system {
    display: flex;
    justify-content: center;
    margin: 8px 0;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
}

.message-system .message-content {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 4px 12px;
    text-align: center;
    max-width: 70%;
}

.message-system .message-text {
    background-color: transparent;
    box-shadow: none;
    text-align: center;
    color: #999;
    padding: 4px 0;
}

.message-system .message-time {
    font-size: 11px;
    color: #bbb;
    margin-top: 2px;
}

/* Make sure self-sent images align properly */
.message-self .message-image-container {
    text-align: right;
}

/* 图片查看器样式 */
.image-viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-viewer.active {
    display: flex;
    opacity: 1;
}

.image-viewer-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    margin: auto;
}

#viewerImage {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.close-viewer {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.close-viewer:hover {
    transform: scale(1.1);
}

/* 聊天消息中的图片样式 */
.message-image {
    max-width: 300px;
    border-radius: 4px;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

.message-image:hover {
    transform: scale(1.02);
}

.message-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 表情消息样式 - 已删除重复定义，使用第一个完整的气泡样式 */



/* 卡片消息样式 */
.message-card {
    width: 240px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 卡片样式已移至上方统一管理 */

/* 视频消息样式 */
.message-video {
    max-width: 240px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.message-video video {
    width: 100%;
    display: block;
}

/* 错误消息样式 */
.message-error {
    color: #ff4d4f;
    font-size: 12px;
    padding: 4px 8px;
    background-color: #fff2f0;
    border-radius: 4px;
    border: 1px solid #ffccc7;
}

/* 聊天头部样式 */
.chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 999; /* 确保在顶部登录header下方 */
}

.chat-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chat-title {
    font-size: 16px;
    font-weight: 500;
    color: #1f2329;
    margin: 0;
    text-align: left;
}

.chat-subtitle {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 4px;
    text-align: left;
}

.robot-id {
    color: #1890ff;
}

/* 头部菜单按钮样式 */
.chat-header-menu {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.chat-header-menu-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 20px;
    transition: all 0.2s;
    background: none;
    border: none;
    padding: 0;
}

.chat-header-menu-btn:hover {
    background-color: #f5f5f5;
    color: #1890ff;
}

/* 下拉菜单样式 */
.chat-header-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    display: none;
    z-index: 1001;
}

.chat-header-dropdown.show {
    display: block;
}

.chat-header-dropdown-item {
    padding: 10px 16px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.chat-header-dropdown-item:hover {
    background-color: #f5f5f5;
    color: #1890ff;
}

.chat-header-dropdown-item i {
    font-size: 16px;
}

/* 添加好友弹窗样式 */
.add-friend-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    width: 360px;
    display: none;
    z-index: 1100;
}

.add-friend-modal.show {
    display: block;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 500;
    color: #1f2329;
}

.modal-content {
    padding: 20px;
}

.modal-content .form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
}

.modal-content .form-input:focus {
    border-color: #1890ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-cancel {
    background: #f5f5f5;
    border: none;
    color: #666;
}

.modal-btn-cancel:hover {
    background: #e8e8e8;
}

.modal-btn-primary {
    background: #1890ff;
    border: none;
    color: #fff;
}

.modal-btn-primary:hover {
    background: #40a9ff;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 1050;
}

.modal-overlay.show {
    display: block;
}

.add-friend-swal {
    width: min(520px, calc(100vw - 32px)) !important;
    padding: 24px 24px 20px !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(15, 35, 95, 0.16) !important;
}

.add-friend-swal-title {
    margin: 0 0 18px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #1f2329 !important;
}

.add-friend-swal-body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.add-friend-dialog {
    display: grid;
    gap: 16px;
    width: 100%;
    text-align: left;
}

.add-friend-tip {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f5f8ff;
    border: 1px solid #d9e6ff;
    color: #4e5969;
    font-size: 13px;
    line-height: 1.6;
}

.add-friend-field {
    display: grid;
    gap: 8px;
}

.add-friend-label {
    display: block;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.add-friend-select,
.add-friend-input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2329;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.add-friend-select:focus,
.add-friend-input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.12);
}

.add-friend-shortcuts-wrap {
    display: grid;
    gap: 10px;
}

.add-friend-shortcuts-title {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

.add-friend-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-friend-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #d9e6ff;
    border-radius: 8px;
    background: #f7fbff;
    color: #1677ff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.add-friend-shortcut:hover {
    background: #eaf3ff;
    border-color: #91caff;
    transform: translateY(-1px);
}

.add-friend-shortcut:active {
    transform: translateY(0);
}

.add-friend-swal-actions {
    width: 100%;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.add-friend-swal-confirm,
.add-friend-swal-cancel {
    min-width: 96px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin: 0 !important;
    transition: all 0.2s ease;
}

.add-friend-swal-confirm {
    background: #1677ff;
    color: #fff;
}

.add-friend-swal-confirm:hover {
    background: #0958d9;
}

.add-friend-swal-cancel {
    background: #fff;
    border-color: #d9d9d9;
    color: #4e5969;
}

.add-friend-swal-cancel:hover {
    background: #f5f5f5;
    border-color: #bfbfbf;
}

.add-friend-swal-validation {
    margin: 12px 0 0 !important;
    border-radius: 8px !important;
    background: #fff2f0 !important;
    color: #cf1322 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.remark-swal {
    width: min(560px, calc(100vw - 32px)) !important;
    padding: 26px 24px 20px !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(15, 35, 95, 0.16) !important;
}

.remark-swal-title {
    margin: 0 0 18px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #1f2329 !important;
}

.remark-swal-body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.remark-dialog {
    display: grid;
    gap: 18px;
    width: 100%;
    text-align: left;
}

.remark-field {
    display: grid;
    gap: 8px;
}

.remark-label {
    display: block;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.remark-input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2329;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.remark-input:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.remark-shortcuts-wrap {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

.remark-shortcuts-title {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

.remark-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.remark-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid #d9e6ff;
    border-radius: 999px;
    background: #f7fbff;
    color: #1677ff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.remark-shortcut:hover {
    background: #eaf3ff;
    border-color: #91caff;
    transform: translateY(-1px);
}

.remark-shortcut:active {
    transform: translateY(0);
}

.remark-swal-actions {
    width: 100%;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    justify-content: center !important;
}

.remark-swal-confirm,
.remark-swal-cancel {
    min-width: 96px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin: 0 !important;
    transition: all 0.2s ease;
}

.remark-swal-confirm {
    background: #6f63ff;
    color: #fff;
}

.remark-swal-confirm:hover {
    background: #5d52e6;
}

.remark-swal-cancel {
    background: #7d8793;
    color: #fff;
}

.remark-swal-cancel:hover {
    background: #6b7480;
}

.remark-swal-validation {
    margin: 12px 0 0 !important;
    border-radius: 8px !important;
    background: #fff2f0 !important;
    color: #cf1322 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

@media (max-width: 640px) {
    .add-friend-swal {
        width: calc(100vw - 20px) !important;
        padding: 20px 16px 16px !important;
    }

    .add-friend-swal-title {
        font-size: 18px !important;
        margin-bottom: 14px !important;
    }

    .add-friend-shortcuts {
        gap: 6px;
    }

    .add-friend-swal-actions {
        justify-content: stretch !important;
    }

    .add-friend-swal-confirm,
    .add-friend-swal-cancel {
        flex: 1 1 0;
        min-width: 0;
    }

    .remark-swal {
        width: calc(100vw - 20px) !important;
        padding: 20px 16px 16px !important;
    }

    .remark-swal-title {
        font-size: 18px !important;
        margin-bottom: 14px !important;
    }

    .remark-shortcuts {
        gap: 8px;
    }

    .remark-shortcut {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    .remark-swal-actions {
        justify-content: stretch !important;
    }

    .remark-swal-confirm,
    .remark-swal-cancel {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* 添加收藏夹模态框样式 */
.add-favorite-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.add-favorite-modal.show {
    opacity: 1;
    visibility: visible;
}

.add-favorite-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.add-favorite-modal .modal-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.add-favorite-modal.show .modal-content {
    transform: scale(1);
}

.add-favorite-modal .modal-header {
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-favorite-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.add-favorite-modal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.add-favorite-modal .modal-close:hover {
    background: #f5f5f5;
    color: #666;
}

.add-favorite-modal .modal-body {
    padding: 20px 24px;
}

.add-favorite-modal .form-group {
    margin-bottom: 20px;
}

.add-favorite-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.add-favorite-modal .form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.add-favorite-modal .form-input:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.add-favorite-modal .form-input::placeholder {
    color: #bfbfbf;
}

.add-favorite-modal .modal-footer {
    padding: 16px 24px 20px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.add-favorite-modal .modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.add-favorite-modal .modal-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.add-favorite-modal .modal-btn-cancel:hover {
    background: #e8e8e8;
    color: #333;
}

.add-favorite-modal .modal-btn-primary {
    background: #1890ff;
    color: #fff;
}

.add-favorite-modal .modal-btn-primary:hover {
    background: #40a9ff;
}

.add-favorite-modal .modal-btn-primary:active {
    background: #096dd9;
}

/* 收藏夹表单切换样式 */
.add-favorite-modal .favorite-form {
    display: none;
    animation: fadeIn 0.3s ease;
}

.add-favorite-modal .favorite-form.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 文件上传样式 */
.add-favorite-modal input[type="file"] {
    padding: 8px;
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-favorite-modal input[type="file"]:hover {
    border-color: #1890ff;
    background: #f0f8ff;
}

.add-favorite-modal input[type="file"]:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 数字输入框样式 */
.add-favorite-modal input[type="number"] {
    -moz-appearance: textfield;
}

.add-favorite-modal input[type="number"]::-webkit-outer-spin-button,
.add-favorite-modal input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* URL输入框样式 */
.add-favorite-modal input[type="url"] {
    font-family: monospace;
    font-size: 13px;
}

/* 文件预览样式 */
.add-favorite-modal .file-preview {
    margin-top: 10px;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.3s ease;
}

.add-favorite-modal .preview-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.add-favorite-modal .file-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.add-favorite-modal .file-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    word-break: break-all;
}

.add-favorite-modal .file-size {
    font-size: 12px;
    color: #666;
}

.add-favorite-modal .voice-icon {
    font-size: 24px;
    color: #1890ff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f7ff;
    border-radius: 6px;
}

.add-favorite-modal .remove-file {
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.add-favorite-modal .remove-file:hover {
    background: #ff7875;
    transform: scale(1.1);
}

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


/* 收藏夹类型选择菜单样式 */
.favorite-type-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.favorite-type-menu .type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.favorite-type-menu .type-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #007bff, #0056b3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.favorite-type-menu .type-item:hover {
    border-color: #007bff;
    background: #f8f9ff;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
}

.favorite-type-menu .type-item:hover::before {
    opacity: 0.05;
}

.favorite-type-menu .type-icon {
    font-size: 28px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.favorite-type-menu .type-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    position: relative;
    z-index: 2;
}

/* 标签页样式 */
.nav-tabs {
    border-bottom: 1px solid #dee2e6 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.nav-tabs .nav-item {
    margin-bottom: -1px !important;
    list-style: none !important;
}

.nav-tabs .nav-link {
    border: 1px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px !important;
    color: #6c757d !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: block !important;
    cursor: pointer !important;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6 !important;
    color: #495057 !important;
    text-decoration: none !important;
}

.nav-tabs .nav-link.active {
    color: #007bff !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
    font-weight: 500 !important;
}

.tab-content {
    padding: 16px 0 !important;
}

.tab-pane {
    display: none !important;
}

.tab-pane.active {
    display: block !important;
}

/* 录音器样式 */
.recorder {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 16px;
}

.timer {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 8px;
}

.status {
    color: #6c757d;
    margin-bottom: 16px;
}

.record-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #dc3545;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.record-button:hover {
    background: #c82333;
    transform: scale(1.1);
}

.record-button.recording {
    background: #28a745;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.hint {
    font-size: 12px;
    color: #6c757d;
}

/* 文件上传预览 */
.file-preview {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.preview-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.file-size {
    font-size: 12px;
    color: #6c757d;
}

.remove-file {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
}

.remove-file:hover {
    background: #c82333;
}

/* 添加按钮样式 */
.add-button {
    width: 34px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #888;
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
}

.add-button:hover {
    color: #666;
}

/* 微信标记样式 */
.wechat-tag {
    color: #07c160;
    font-size: 12px;
    margin-left: 4px;
    font-weight: normal;
}

/* 语音消息样式 */
.voice-message {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    min-width: 80px;
    position: relative;
}

.message-self .voice-message {
    background: #1890ff;
    color: #fff;
}

.voice-message::before {
    content: "🔊";
    margin-right: 8px;
    font-size: 16px;
}

.voice-duration {
    font-size: 12px;
    color: #666;
}

.message-self .voice-duration {
    color: rgba(255, 255, 255, 0.8);
}

/* 播放动画 */
.voice-message.playing::before {
    animation: voicePlay 1s infinite;
}

@keyframes voicePlay {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* 语音消息样式 */
.message-voice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: #fff;
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    min-width: 80px;
    max-width: 200px;
    position: relative;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.message-self .message-voice {
    background-color: #1890ff;
    border-radius: 16px 4px 16px 16px;
    color: #fff;
}

.voice-icon {
    font-size: 16px;
    color: #666;
}

.message-self .voice-icon {
    color: #fff;
}

.voice-duration {
    font-size: 14px;
    color: #666;
}

.message-self .voice-duration {
    color: rgba(255, 255, 255, 0.9);
}

/* 播放状态样式 */
.message-voice.playing .voice-icon {
    animation: voicePlay 1s infinite;
}

@keyframes voicePlay {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* 隐藏音频元素 */
audio {
    display: none;
}

/* 错误消息样式 */
.message-error {
    color: #ff4d4f;
    font-size: 12px;
    padding: 4px 8px;
    background-color: #fff2f0;
    border-radius: 4px;
    border: 1px solid #ffccc7;
}

/* 聊天头部样式 */
.chat-header {
    padding: 16px 20px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-title {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 4px;
}

.chat-subtitle {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.chat-subtitle .robot-id {
    color: #ff7a45;
    font-weight: 500;
    margin-left: 2px;
    display: inline-block;
}

/* 修复间距 */
.chat-subtitle span {
    margin: 0 1px;
}

/* 添加按钮样式 */
.add-button {
    width: 34px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #888;
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
}

.add-button:hover {
    color: #666;
}

/* 微信标记样式 */
.wechat-tag {
    color: #07c160;
    font-size: 12px;
    margin-left: 4px;
    font-weight: normal;
}

/* 语音消息样式 */
.voice-message {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    min-width: 80px;
    position: relative;
}

.message-self .voice-message {
    background: #1890ff;
    color: #fff;
}

.voice-message::before {
    content: "🔊";
    margin-right: 8px;
    font-size: 16px;
}

.voice-duration {
    font-size: 12px;
    color: #666;
}

.message-self .voice-duration {
    color: rgba(255, 255, 255, 0.8);
}

/* 播放动画 */
.voice-message.playing::before {
    animation: voicePlay 1s infinite;
}

@keyframes voicePlay {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* 快捷面板样式 - 已废弃，使用新的固定定位样式 */
/* .quick-panel {
    width: 280px;
    background-color: #fff;
    border-left: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
} */

.quick-section {
    padding: 16px;
    border-bottom: 1px solid #e6e6e6;
}

.quick-section:last-child {
    border-bottom: none;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h3 {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.add-quick-reply,
.add-image {
    padding: 4px 8px;
    font-size: 12px;
    color: #1890ff;
    background: none;
    border: 1px solid #1890ff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-quick-reply:hover,
.add-image:hover {
    background-color: rgba(24, 144, 255, 0.1);
}

/* 快捷回复列表 */
.quick-replies {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.quick-reply-item {
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: all 0.2s ease;
}

.quick-reply-item:last-child {
    margin-bottom: 0;
}

.quick-reply-item:hover {
    background-color: #e6f7ff;
    color: #1890ff;
}

/* 图片库样式 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.gallery-item {
    position: relative;
    padding-bottom: 100%;
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 滚动条样式 */
.quick-replies::-webkit-scrollbar,
.gallery-grid::-webkit-scrollbar {
    width: 4px;
}

.quick-replies::-webkit-scrollbar-thumb,
.gallery-grid::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.quick-replies::-webkit-scrollbar-track,
.gallery-grid::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 空状态样式 */
.quick-replies:empty::after,
.gallery-grid:empty::after {
    content: '暂无内容';
    display: block;
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}

/* 聊天输入区域样式 */
.chat-input {
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    flex-shrink: 0;
    position: relative;
    z-index: 999; /* 确保在顶部登录header下方 */
}

.message-input {
    width: 100%;
    height: 80px;
    padding: 10px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    resize: none;
    outline: none;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.3s ease;
    margin-bottom: 8px;
    background-color: #fff;
}

.message-input:focus {
    border-color: #1890ff;
}

/* 工具栏样式优化 */
.input-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    background: #fff;  /* 确保背景色 */
}

.tool-buttons {
    display: flex;
    gap: 12px;
    position: relative;
    padding: 0 8px;  /* 增加内边距 */
}

.tool-button {
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 16px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;  /* 用于定位表情面板 */
}

.tool-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);  /* 悬停时放大效果 */
}

.tool-button.active {
    background-color: rgba(24, 144, 255, 0.1);
    color: #1890ff;
}

#audioNotificationBtn {
    transition: all 0.3s ease;
}

#audioNotificationBtn:hover {
    transform: scale(1.1);
}

.send-button {
    padding: 6px 20px;
    background-color: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    height: 32px;
    line-height: 20px;
}

.send-button:hover {
    background-color: #40a9ff;
}

.send-button:active {
    background-color: #096dd9;
}

/* 空聊天状态样式 */
.empty-chat {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 40px;
    text-align: center;
}

.empty-chat-icon {
    font-size: 64px;
    margin-bottom: 24px;
    color: #e6e6e6;
    line-height: 1;
}

.empty-chat-text {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

.empty-chat-subtext {
    font-size: 14px;
    color: #999;
}

/* 搜索高亮样式 */
.search-highlight {
    background-color: #ffe58f;
    padding: 0 2px;
    border-radius: 2px;
    color: #000;
    font-weight: 500;
}

/* 右键菜单样式 */
.context-menu {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    min-width: 160px;
    z-index: 1000;
}

.context-menu .menu-item {
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1f2329;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    min-height: 34px;
}

.context-menu .menu-item:hover {
    background-color: #f5f5f5;
    color: #1890ff;
}

.context-menu .menu-icon {
    font-size: 15px;
    opacity: 0.85;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.context-menu .menu-text {
    flex: 1;
    display: block;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1f2329 !important;
    font-weight: 400;
    font-size: 13px;
}

.context-menu .delete {
    color: #ff4d4f;
}

.context-menu .delete:hover {
    background-color: #fff1f0;
    color: #ff4d4f;
}

.context-menu .delete .menu-text {
    color: #ff4d4f;
}

.context-menu .menu-item:hover .menu-text {
    color: #1890ff;
}

/* 机器人状态切换标签 */
.robot-status-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 6px;
}

.robot-status-tab {
    flex: 1;
    text-align: center;
    padding: 4px 8px;
    font-size: 12px;
    color: #666;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
}

.robot-status-tab:hover {
    background: rgba(255, 255, 255, 0.5);
}

.robot-status-tab.active {
    color: #333;
    background: #fff;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 被封状态切换标签 */
.blocked-status-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 6px;
}

.blocked-status-tab {
    flex: 1;
    text-align: center;
    padding: 4px 8px;
    font-size: 12px;
    color: #666;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
}

.blocked-status-tab:hover {
    background: rgba(255, 255, 255, 0.5);
}

.blocked-status-tab.active {
    color: #333;
    background: #fff;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.robot-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    position: relative;
}
.robot-card.active {
    border-color: #91caff;
    background: #e6f4ff;
}
.robot-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #f2f3f5;
    display: inline-block;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    color: #666;
}
.robot-avatar--placeholder {
    border: 1px solid #eee;
}
.robot-avatar--all {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fafafa;
    border: 1px dashed #ddd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
}
.robot-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.robot-name {
    font-size: 13px;
    color: #333;
    line-height: 1.2;
}
.robot-company {
    font-size: 12px;
    color: #8c8c8c;
    line-height: 1.2;
}

/* 机器人离线样式 */
.robot-card.offline {
    opacity: 0.6;
    background: #f5f5f5;
    border-color: #d9d9d9;
}

.robot-card.offline .robot-avatar {
    opacity: 0.5;
    filter: grayscale(100%);
}

.robot-card.offline .robot-name {
    color: #999;
}

.robot-card.offline .robot-company {
    color: #ccc;
}

.robot-card.offline::after {
    content: '离线';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ff7875;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 1;
}

/* 会话项离线样式 */
.conversation-item.offline {
    opacity: 0.7;
    background-color: #fafafa;
    position: relative;
}

.conversation-item.offline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(140, 140, 140, 0.1) 30%, rgba(140, 140, 140, 0.1) 70%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.conversation-item.offline .conversation-avatar {
    opacity: 0.6;
    filter: grayscale(80%);
}

.conversation-item.offline .conversation-name {
    color: #999;
}

.conversation-item.offline .conversation-preview {
    color: #ccc;
}

.conversation-item.offline .conversation-time {
    color: #ccc;
}

.conversation-item.offline .offline-badge {
    position: absolute;
    top: 40px;
    right: 8px;
    background-color: #8c8c8c;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 2;
}

/* 当同时存在已删除和离线状态时，调整徽章位置避免重叠 */
.conversation-item.deleted.offline .deleted-badge {
    right: 60px; /* 为离线徽章留出空间 */
}

.conversation-item.deleted.offline .offline-badge {
    right: 8px; /* 离线徽章在右侧 */
}

.conversation-item.offline:hover {
    opacity: 0.85;
    background-color: #f0f0f0;
}

.conversation-item.offline.active {
    background-color: #f5f5f5;
    opacity: 1;
    border-left: 4px solid #8c8c8c;
}

/* 搜索结果样式 */
#searchResults {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-color: #f7f7f7;
}

#searchResults .section-header {
    background-color: #f0f7ff;
    border-bottom: 1px solid #e6f0fa;
}

#searchResults .section-icon {
    color: #1890ff;
    margin-right: 8px;
}

.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #999;
}

.no-results-icon {
    font-size: 32px;
    margin-bottom: 16px;
}

.no-results-text {
    font-size: 14px;
}

.clear-search {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #999;
    cursor: pointer;
    font-size: 12px;
    display: none;
}

.clear-search:hover {
    color: #666;
}

#searchInput:not(:placeholder-shown) + .clear-search {
    display: block;
}

/* 置顶会话样式 */
.pinned-conversations {
    margin-bottom: 1px;
}

.pinned-conversations .section-header {
    background-color: #f7f7f7;
}

.pinned-conversations .section-icon {
    color: #1890ff;
}

.pinned-items .conversation-item {
    background-color: #fafafa;
}

.pinned-items .conversation-item:hover {
    background-color: #f0f0f0;
}

/* 置顶会话的选中状态样式 */
.pinned-items .conversation-item.active {
    background-color: #e6f7ff;
    border-left: 4px solid #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
    transform: translateX(2px);
    position: relative;
}

.pinned-items .conversation-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #1890ff, #40a9ff);
}

.pinned-items .conversation-item.active .conversation-name {
    color: #1890ff;
    font-weight: 600;
}

.pinned-items .conversation-item.active .name-text {
    color: #1890ff;
    font-weight: 600;
    text-shadow: 0 0 1px rgba(24, 144, 255, 0.3);
}

.pinned-items .conversation-item.active .conversation-preview {
    color: #1890ff;
    font-weight: 500;
}

.pinned-items .conversation-item.active .conversation-time {
    color: #1890ff;
    font-weight: 500;
}

.pinned-items .conversation-item.active .conversation-avatar {
    border: 2px solid #1890ff;
    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
}

.pin-indicator {
    font-size: 12px;
    color: #1890ff;
    margin-left: 4px;
}

/* 未读消息样式 */
.unread-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background-color: #ff4d4f;
    color: #fff;
    border-radius: 9px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-weight: normal;
}

.conversation-item.unread .conversation-preview {
    color: #1f2329;
    font-weight: 500;
}

/* 加载更多消息样式 */
.loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    color: #666;
    font-size: 13px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 8px;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e9ecef;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: loading-spin 1s linear infinite;
}

/* 聊天消息右键菜单 */
.message-context-menu {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  min-width: 120px;
  padding: 4px 0;
  display: none;
}
.message-context-menu .menu-item {
  padding: 8px 20px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.message-context-menu .menu-item:hover {
  background: #f5f5f5;
  color: #1890ff;
}

/* 引用消息样式 */
.quote-preview {
  background: #f5f5f5;
  border-left: 3px solid #1890ff;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
  position: relative;
}

.quote-preview .quote-sender {
  font-weight: 500;
  color: #1890ff;
  margin-bottom: 4px;
}

.quote-preview .quote-content {
  color: #333;
  line-height: 1.4;
}

.quote-preview .quote-close {
  position: absolute;
  top: 4px;
  right: 8px;
  cursor: pointer;
  color: #999;
  font-size: 16px;
  line-height: 1;
}

.quote-preview .quote-close:hover {
  color: #666;
}

/* 聊天记录中的引用消息样式 */
.message-quoted {
  background: #f8f9fa !important;
  border-left: 3px solid #1890ff !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  color: #666 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.message-quoted .quoted-sender {
  font-weight: 500 !important;
  color: #1890ff !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.message-quoted .quoted-content {
  color: #333 !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* 语音转文字相关样式 */
.voice-to-text-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  margin-top: 8px;
  border: 1px solid #e9ecef;
}

.loading-text {
  font-size: 12px;
  color: #6c757d;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e9ecef;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.voice-to-text-result {
  margin-top: 8px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  border-left: 4px solid #28a745;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
}

.text-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.text-result-label {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
}

.text-result-copy {
  background: #007bff;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.text-result-copy:hover {
  background: #0056b3;
}

.text-result-content {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 20px;
  font-size: 13px;
  color: #212529;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow: visible;
}

/* 消息右键菜单中的转文字选项样式 */
.message-context-menu .voice-to-text {
  color: #007bff;
  font-weight: 500;
}

.message-context-menu .voice-to-text:hover {
  background-color: #e3f2fd;
}

/* Toast 提示样式 */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  max-width: 300px;
  word-wrap: break-word;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background-color: #28a745;
}

.toast-error {
  background-color: #dc3545;
}

.toast-info {
  background-color: #17a2b8;
}

/* 已转换语音消息的样式 */
.message-voice-converted {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px;
  margin: 4px 0;
  position: relative;
}

.voice-original-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #6c757d;
}

.voice-icon-small {
  font-size: 14px;
  opacity: 0.7;
}

.voice-duration-small {
  font-size: 11px;
  color: #868e96;
}

.voice-converted-label {
  background-color: #28a745;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
}

.voice-text-content {
  font-size: 14px;
  color: #212529;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: white;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #28a745;
}

/* 语音转文字分隔线样式 */
.voice-to-text-divider {
  height: 1px;
  background: #e6e6e6;
  margin: 8px 0;
}

.voice-to-text-result {
  margin-top: 8px;
  align-self: stretch;
}

.text-result-content {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.message-text,
.text-result-content,
.voice-to-text-plain {
  white-space: pre-wrap;
  word-break: break-word;
}

.sex-icon {
  font-size: 14px;
  margin-left: 4px;
  color: #1890ff;
  vertical-align: middle;
  font-weight: bold;
}

/* 表情面板样式 */
.emoji-panel {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px;
    width: min(300px, 90vw);  /* 响应式宽度 */
    max-height: min(300px, 50vh);  /* 响应式高度 */
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));  /* 响应式网格 */
    gap: 5px;
    z-index: 1000;
}

.emoji-item {
    cursor: pointer;
    padding: 5px;
    text-align: center;
    font-size: 20px;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;  /* 保持正方形 */
}

.emoji-item:hover {
    background-color: #f0f0f0;
    transform: scale(1.1);  /* 悬停时放大效果 */
}

/* 工具栏样式优化 */
.input-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    background: #fff;  /* 确保背景色 */
}

.tool-buttons {
    display: flex;
    gap: 12px;
    position: relative;
    padding: 0 8px;  /* 增加内边距 */
}

.tool-button {
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 16px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;  /* 用于定位表情面板 */
}

.tool-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);  /* 悬停时放大效果 */
}

.tool-button.active {
    background-color: rgba(24, 144, 255, 0.1);
    color: #1890ff;
}

/* 滚动条样式 */
.emoji-panel::-webkit-scrollbar {
    width: 4px;
}

.emoji-panel::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.emoji-panel::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 测试按钮样式 */
.test-button {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.test-button:hover {
    background: #e0e0e0;
    border-color: #ccc;
}

.test-button:active {
    background: #d0d0d0;
}

/* 系统通知样式优化 */
.tool-button[title="系统通知"] {
    position: relative;
}

.tool-button[title="系统通知"]::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ff4d4f;
    border-radius: 50%;
    display: none;
}

.tool-button[title="系统通知"].has-permission::after {
    display: block;
    background: #52c41a;
}

/* 快捷面板样式 */
.quick-access {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.quick-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quick-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quick-btn.active {
    background: #1890ff;
    border-color: #1890ff;
    color: white;
}

.quick-icon {
    font-size: 20px;
}

.quick-panel {
    width: 400px;
    background: #fff;
    border-left: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    z-index: 999; /* 确保在顶部登录header下方 */
}

.quick-panel .panel-section {
    width: 100%;
}

/* 右侧面板容器 */
#right-panel-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 面板区域 */
.panel-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 1px solid #e6e6e6;
}

.panel-section:last-child {
    border-bottom: none;
}

/* 客户跟进备注面板 (30%) */
.customer-note-section {
    flex: 0 0 30%;
    min-height: 0;
}

/* 收藏夹面板 (70%) */
.phrase-section {
    flex: 0 0 70%;
    min-height: 0;
}

/* 右侧仅剩一个可见面板时，自动撑满整个高度 */
#right-panel-container.single-panel .panel-section,
#right-panel-container.single-panel .customer-note-section,
#right-panel-container.single-panel .phrase-section {
    flex: 1 1 auto;
}

.panel-header {
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header .add-favorite-btn {
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.panel-header .add-favorite-btn:hover {
    background: #40a9ff;
    transform: scale(1.05);
}

.panel-header .add-favorite-btn:active {
    background: #096dd9;
    transform: scale(0.95);
}

.panel-header .add-note-btn {
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.panel-header .add-note-btn:hover {
    background: #40a9ff;
    transform: scale(1.05);
}

.panel-header .add-note-btn:active {
    background: #096dd9;
    transform: scale(0.95);
}

/* 客户跟进备注样式 */
.customer-notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.customer-note-item {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
}

.customer-note-item:hover {
    background: #f0f0f0;
    border-color: #d0d0d0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.customer-note-item .note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.customer-note-item .note-time {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

.customer-note-item .note-actions {
    display: flex;
    gap: 4px;
}

.customer-note-item .note-edit-btn,
.customer-note-item .note-delete-btn {
    background: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.customer-note-item .note-edit-btn:hover {
    background: #e6f7ff;
    opacity: 1;
}

.customer-note-item .note-delete-btn:hover {
    background: #fff1f0;
    opacity: 1;
}

.customer-note-item .note-action,
.customer-note-item .note-situation {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}

.customer-note-item .note-action strong,
.customer-note-item .note-situation strong {
    color: #1890ff;
    margin-right: 4px;
}

/* 面板内容容器 */
.panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* 允许flex子元素收缩 */
}

/* 确保面板section内的content可以滚动 */
.panel-section .panel-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative; /* 为sticky定位提供定位上下文 */
}

/* 快捷话术面板 */
.phrase-container {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.phrase-container:last-child {
    border-bottom: none;
}

.quick-phrase {
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    background: #f8f9fa;
    border:0px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quick-phrase:hover {
    background: #e6f7ff;
    border-color: #91d5ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.quick-phrase .text {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    word-wrap: break-word;
    margin-bottom: 4px;
}

.phrase-remarks {
    font-size: 11px;
    color: #666;
    font-style: italic;
    padding: 2px 6px;
    background: #f0f0f0;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}

/* 移除展开相关样式 */

/* 移除展开按钮样式 */

/* 移除收藏内容相关样式 */

/* 表情面板 */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 16px;
}

.emoji-item {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.emoji-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.emoji-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片面板 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
}

.image-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.image-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 链接面板样式已移至上方统一管理 */

/* 响应式设计 */
@media (max-width: 768px) {
    .quick-access {
        right: 10px;
    }
    
    .quick-panel {
        width: 320px;
    }
    
    .emoji-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 动画效果 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 滚动条样式 - 已移至 .panel-content */

/* 收藏内容相关样式 */
.favorite-remarks {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

.loading-state {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

.empty-state {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

/* 移除发送按钮相关样式 */

/* 移除发送按钮样式 */

/* 面板内容滚动条样式 */
.panel-content::-webkit-scrollbar {
    width: 6px;
}

.panel-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.quick-reply-list {
  height: 400px;      /* 固定高度，根据实际情况调整 */
  overflow-y: auto;   /* 只在垂直方向滚动 */
}

/* 收藏夹分类布局样式 */
.favorites-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 12px;
    overflow: hidden;
    flex-wrap: wrap;
    flex-shrink: 0; /* 防止被压缩 */
}

.favorite-tab {
    flex: 1;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-right: 1px solid #e0e0e0;
    background: #f8f9fa;
    position: relative;
}

.favorite-tab:last-child {
    border-right: none;
}

.favorite-tab:hover {
    background: #e6f7ff;
}

.favorite-tab.active {
    background: #1890ff;
    color: white;
}

.favorite-tab .tab-icon {
    font-size: 16px;
    margin-right: 4px;
}

.favorite-tab .tab-text {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* 移除竖排tab布局，保持水平布局 */

.favorites-content {
    display: none;
    padding: 0 4px;
}

.favorites-content.active {
    display: block;
}

/* 图片网格样式 */
.favorites-content[data-type="图片"] .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 0;
}

.favorites-content[data-type="图片"] .image-item,
.favorites-content[data-type="表情"] .image-item,
.favorites-content[data-type="链接"] .card-item {
    border: none;
    border-radius: 8px;
    /* 其他样式 */
}

.favorites-content[data-type="图片"] .image-item:hover,
.favorites-content[data-type="表情"] .image-item:hover,
.favorites-content[data-type="链接"] .card-item:hover {
    /* 只加阴影或背景色，不加边框 */
}

.favorites-content[data-type="图片"] .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-remarks {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 语音列表样式 */
.favorites-content[data-type="语音"] .voice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.favorites-content[data-type="语音"] .voice-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0px ;
}

.favorites-content[data-type="语音"] .voice-item:hover {
    background: #e6f7ff;
    border-color: #91d5ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.favorites-content[data-type="语音"] .voice-icon {
    font-size: 24px;
    margin-right: 12px;
    color: #1890ff;
}

.favorites-content[data-type="语音"] .voice-info {
    flex: 1;
    min-width: 0;
}

.favorites-content[data-type="语音"] .voice-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorites-content[data-type="语音"] .voice-duration {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}

.voice-remarks {
    font-size: 10px;
    color: #999;
    font-style: italic;
    padding: 1px 4px;
    background: #f5f5f5;
    border-radius: 3px;
    display: inline-block;
}

/* 文本内容样式调整 */
.favorites-content[data-type="文本"] .phrase-container {
    margin-bottom: 2px;
}

.favorites-content[data-type="文本"] .phrase-container:last-child {
    margin-bottom: 0;
}

/* 空状态样式 */
.favorites-content .empty-state {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

.favorites-content .empty-state .empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* 表情网格样式 */
.favorites-content[data-type="表情"] .emoji-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px 0;
}

.favorites-content[data-type="表情"] .emoji-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.favorites-content[data-type="表情"] .emoji-item:hover {
    transform: scale(1.05);
    border-color: #1890ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
}

.favorites-content[data-type="表情"] .emoji-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emoji-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.emoji-remarks {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 链接列表样式 */
.favorites-content[data-type="链接"] .card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.favorites-content[data-type="链接"] .card-item {
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.favorites-content[data-type="链接"] .card-item:hover {
    background: #e6f7ff;
    border-color: #91d5ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.favorites-content[data-type="链接"] .card-item .card-header {
    padding: 8px 12px;
    background: #1890ff;
    color: white;
    font-size: 12px;
    font-weight: 500;
}

.favorites-content[data-type="链接"] .card-item .card-body {
    padding: 12px;
}

.favorites-content[data-type="链接"] .card-item .card-image {
    margin: -12px -12px 12px;
    height: 120px;
    overflow: hidden;
}

.favorites-content[data-type="链接"] .card-item .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorites-content[data-type="链接"] .card-item .card-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.favorites-content[data-type="链接"] .card-item .card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 4px;
}

.card-remarks {
    font-size: 10px;
    color: #999;
    font-style: italic;
    padding: 2px 6px;
    background: #f8f9fa;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #e0e0e0;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .favorites-content[data-type="图片"] .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .favorites-content[data-type="表情"] .emoji-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .favorite-tab .tab-text {
        font-size: 12px;
    }
    
    .favorite-tab .tab-icon {
        font-size: 14px;
    }
    
    /* 在小屏幕上调整tab样式 */
    .favorite-tab .tab-text {
        font-size: 11px;
    }
    
    .favorite-tab .tab-icon {
        font-size: 14px;
    }
}

/* 移除图片、表情、链接卡片的边框和边框高亮 */
.favorites-content[data-type="图片"] .image-item,
.favorites-content[data-type="表情"] .image-item,
.favorites-content[data-type="表情"] .emoji-item,
.favorites-content[data-type="链接"] .card-item {
    border: none !important;
    border-color: transparent !important;
}
.favorites-content[data-type="图片"] .image-item:hover,
.favorites-content[data-type="表情"] .image-item:hover,
.favorites-content[data-type="表情"] .emoji-item:hover,
.favorites-content[data-type="链接"] .card-item:hover {
    border: none !important;
    border-color: transparent !important;
}

.favorites-context-menu {
    position: fixed !important;
    min-width: 100px;
    max-width: 180px;
    background: #fff;
    border: 1px solid var(--page-line, #e7edf4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(52, 64, 84, 0.14);
    padding: 4px;
    font-size: 13px;
    user-select: none;
}
.favorites-context-menu .menu-item {
    min-height: 32px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    color: var(--page-text, #344054);
    cursor: pointer;
    transition: background 0.2s;
}
.favorites-context-menu .menu-item:hover {
    background: var(--page-primary-soft, #edf6ff);
    color: var(--page-primary, #1677ff);
}

/* 收藏夹内容悬停发送按钮样式 */
.favorites-content .phrase-container,
.favorites-content .image-item,
.favorites-content .voice-item,
.favorites-content .card-item {
    position: relative;
}

.favorites-content .send-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
    transition: all 0.3s ease;
    z-index: 10;
}

.favorites-content .send-button:hover {
    background: #40a9ff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.favorites-content .phrase-container:hover .send-button,
.favorites-content .image-item:hover .send-button,
.favorites-content .voice-item:hover .send-button,
.favorites-content .card-item:hover .send-button {
    display: flex;
}

/* 确保发送按钮在图片和表情的备注文字之上 */
.favorites-content .image-item .send-button,
.favorites-content .card-item .send-button {
    z-index: 15;
}

/* 为不同类型的收藏内容调整发送按钮位置 */
.favorites-content[data-type="文本"] .send-button {
    bottom: 4px;
    right: 4px;
}

.favorites-content[data-type="语音"] .send-button {
    bottom: 8px;
    right: 8px;
}

.card-image-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.recent3days-user-badge {
    display: inline-block;
    background: #eaf4ff;
    color: #409eff;
    font-size: 10px;
    border-radius: 6px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    border: 1px solid #b3d8ff;
    font-weight: normal;
    letter-spacing: 0.5px;
    position: static;
    box-shadow: none;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    max-width: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.conversation-name .name-text {
    margin-top: 4px;
}

/* 卡片消息样式 */
.message-card {
    width: 240px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 名片消息样式 */
.message-business-card {
    width: 280px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.message-business-card .card-header {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.message-business-card .card-type-icon {
    font-size: 14px;
}

.message-business-card .card-body {
    padding: 16px;
    background: #fff;
}

.business-card-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.business-card-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f0f0f0;
}

.business-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-card-info {
    flex: 1;
    min-width: 0;
}

.business-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2329;
    margin-bottom: 4px;
    line-height: 1.2;
}

.business-card-company {
    font-size: 14px;
    color: #1890ff;
    font-weight: 500;
    margin-bottom: 2px;
    line-height: 1.2;
}

.business-card-title {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.2;
}

.business-card-phone,
.business-card-email,
.business-card-address {
    font-size: 12px;
    color: #8c8c8c;
    margin-bottom: 4px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.business-card-phone:last-child,
.business-card-email:last-child,
.business-card-address:last-child {
    margin-bottom: 0;
}

/* 通话取消/结束消息样式 */
.message-call-cancel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    color: #6c757d;
    font-size: 13px;
    max-width: 280px;
    margin: 4px 0;
}

.message-call-cancel .call-icon {
    font-size: 16px;
    opacity: 0.8;
}

.message-call-cancel .call-wording {
    font-weight: 500;
}

/* 原生模态框样式 */
.native-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.native-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.native-modal-header {
    padding: 20px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.native-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.native-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.native-modal-close:hover {
    color: #333;
}

.native-modal-body {
    padding: 20px 24px;
    min-height: 0;
    overflow-y: auto;
}

.native-modal-footer {
    padding: 0 24px 20px;
    text-align: right;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.native-modal-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.native-modal-btn-cancel {
    background: #6c757d;
    color: white;
}

.native-modal-btn-cancel:hover {
    background: #545b62;
}

.native-modal-btn-primary {
    background: #007bff;
    color: white;
}

.native-modal-btn-primary:hover {
    background: #0056b3;
}

/* 表单样式 */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.native-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.native-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
    outline: none;
}

.native-input[type="textarea"] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.native-file {
    border: 2px dashed #ddd;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.native-file:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.native-file:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* 标签页样式 */
.native-tabs {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 16px;
}

.native-tab {
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    padding: 8px 16px;
    color: #6c757d;
    background: transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
    cursor: pointer;
    border: none;
    font-size: 14px;
}

.native-tab:hover {
    color: #495057;
    background: #f8f9fa;
}

.native-tab.active {
    color: #007bff;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 500;
}

.native-tab-content {
    margin-top: 16px;
}

.native-tab-pane {
    display: none;
}

.native-tab-pane.active {
    display: block;
}

/* 文件预览样式 */
.file-preview {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.preview-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.file-size {
    font-size: 12px;
    color: #6c757d;
}

.remove-file {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.remove-file:hover {
    background: #c82333;
}

.conversation-filter-tabs {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex: 1;
    min-width: 0;
    border-bottom: 1px solid #edf1f5;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}

.conversation-filter-tabs .filter-tab {
    min-width: 92px;
    padding: 10px 18px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    line-height: 1;
    color: #7a8599;
    cursor: pointer;
    border: none;
    border-radius: 12px 12px 0 0;
    background: #f7f9fc;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    outline: none;
}

.conversation-filter-tabs .filter-tab .filter-tab-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.conversation-filter-tabs .filter-tab.active {
    color: #1677ff;
    border-bottom: 2px solid #1677ff;
    background: #fff;
    box-shadow: 0 8px 20px rgba(22, 119, 255, 0.08);
}

.conversation-filter-tabs .filter-tab:hover:not(.active) {
    color: #4096ff;
    background: #f2f7ff;
}

.mark-all-read-btn {
    flex-shrink: 0;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #d9e8ff;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color: #1677ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mark-all-read-btn:hover {
    border-color: #91caff;
    background: linear-gradient(180deg, #ffffff 0%, #eaf3ff 100%);
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.12);
}

.mark-all-read-btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

.unread-badge-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  line-height: 20px;
  background: linear-gradient(180deg, #ff6b6d 0%, #ff4d4f 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 0 7px;
  box-shadow: 0 4px 10px rgba(255, 77, 79, 0.22);
  vertical-align: middle;
}

.all-badge-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  line-height: 20px;
  color: #7a8599;
  font-size: 12px;
  font-weight: 600;
  padding: 0 4px;
}

/* 新消息按钮美化样式 */
.new-message-button {
  position: fixed;
  right: 24px;
  bottom: 120px;
  display: none;
  padding: 12px 20px;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  z-index: 1500;
  font-size: 14px;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  /* 渐变背景 */
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #1890ff 100%) !important;
  background-size: 200% 200% !important;
  
  /* 文字和边框 */
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  
  /* 阴影和边框 */
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.4), 
              0 2px 8px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  
  /* 过渡效果 */
  transition: all 0.3s ease !important;
  
  /* 闪烁和脉动动画 */
  animation: blinkAndPulse 2s ease-in-out infinite !important;
  
  /* 确保按钮有足够的对比度 */
  backdrop-filter: blur(10px) !important;
}

.new-message-button:hover {
  background: linear-gradient(135deg, #40a9ff 0%, #69c0ff 50%, #40a9ff 100%) !important;
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.5), 
              0 4px 12px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

.new-message-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4), 
              0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

/* 闪烁和脉动动画 */
@keyframes blinkAndPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(24, 144, 255, 0.4), 
                0 2px 8px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background-position: 0% 50%;
  }
  25% {
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(24, 144, 255, 0.6), 
                0 4px 12px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-position: 100% 50%;
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(24, 144, 255, 0.7), 
                0 6px 16px rgba(0, 0, 0, 0.25),
                0 0 20px rgba(24, 144, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background-position: 0% 50%;
  }
  75% {
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(24, 144, 255, 0.6), 
                0 4px 12px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-position: 100% 50%;
  }
}

/* 按钮内的箭头图标动画 */
.new-message-button span {
  display: inline-block;
  animation: bounceArrow 1.5s ease-in-out infinite;
}

@keyframes bounceArrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* 通讯录界面样式 */
.contacts-list-container {
    width: 300px;
    background-color: #ffffff;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e6e6e6;
    overflow: hidden;
}

@media (max-width: 1366px) {
    .conversation-list-container {
        width: 320px;
    }

    .contacts-list-container {
        width: 280px;
    }
}

@media (max-width: 1180px) {
    .contact-detail-container,
    .quick-panel {
        display: none !important;
    }
}

.contacts-search-bar {
    padding: 12px;
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6;
}

.contacts-search-bar input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}

.contacts-search-bar input:focus {
    border-color: #07c160;
}

.contacts-header {
    padding: 16px 12px;
    border-bottom: 1px solid #e6e6e6;
}

.contacts-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.contacts-categories {
    border-bottom: 1px solid #e6e6e6;
}

.contact-category {
    padding: 8px 0;
}

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s;
}

.category-item:hover {
    background-color: #f5f5f5;
}

.category-item.expanded {
    font-weight: 500;
}

.category-count {
    color: #999;
    font-size: 13px;
    margin-left: 8px;
}

.expand-icon {
    color: #999;
    font-size: 12px;
    margin-left: auto;
}

.contact-subcategory {
    padding: 4px 0;
    background-color: #fafafa;
}

.subcategory-item {
    padding: 8px 12px 8px 32px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.subcategory-item:hover {
    background-color: #f0f0f0;
}

.contacts-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.contact-item:hover {
    background-color: #f5f5f5;
}

.contact-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-right: 12px;
    object-fit: cover;
    background-color: #e6e6e6;
}

.contact-item-name {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.contact-section-header {
    padding: 8px 12px;
    font-size: 12px;
    color: #999;
    background-color: #fafafa;
    font-weight: 500;
}

/* 联系人详情样式 */
.contact-detail-container {
    flex: 1;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contact-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e6e6e6;
}

.contact-detail-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
    flex: 1;
}

.contact-detail-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-icon,
.menu-dots {
    width: 20px;
    height: 20px;
    color: #666;
    cursor: pointer;
}

.contact-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.contact-avatar-large {
    text-align: center;
    margin-bottom: 24px;
}

.contact-avatar-large img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #e6e6e6;
}

.contact-info-section {
    margin-bottom: 24px;
}

.info-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    width: 80px;
    font-size: 14px;
    color: #999;
    flex-shrink: 0;
}

.info-value {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.contact-moments-section {
    margin-bottom: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.contact-moments-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.moments-content {
    min-height: 100px;
    color: #999;
    font-size: 14px;
}

.contact-signature {
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

.contact-source {
    font-size: 13px;
    color: #999;
    margin-bottom: 24px;
}

.contact-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.contact-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
}

.contact-action-btn:hover {
    background-color: #f5f5f5;
    border-color: #07c160;
}

.contact-action-btn svg {
    width: 24px;
    height: 24px;
    color: #666;
}

.contact-action-btn span {
    font-size: 13px;
    color: #333;
}

/* 机器人工作范围：常态显示摘要，详细列表按需展开 */
.robot-selector {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 10px 0;
    margin-bottom: 6px;
}

.robot-header {
    order: 1;
    min-height: 38px;
    padding: 6px 8px;
    background: #f7fbff;
    border: 1px solid #dceeff;
    border-radius: 6px;
}

.robot-header-meta {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.robot-header-meta span:first-child {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.robot-scope-summary {
    order: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 2px 3px;
    color: #667085;
    font-size: 11px;
    white-space: nowrap;
}

.robot-summary-item strong {
    margin-left: 2px;
    color: #344054;
    font-weight: 600;
}

.robot-summary-online strong { color: #16a34a; }
.robot-summary-offline strong { color: #98a2b3; }
.robot-summary-blocked strong { color: #dc2626; }

.robot-panel-tools {
    order: 3;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 0 6px;
}

.robot-panel-tools input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    border: 1px solid #d9e2ec;
    border-radius: 5px;
    outline: none;
    color: #344054;
    font-size: 12px;
    background: #fff;
}

.robot-panel-tools input:focus {
    border-color: #91caff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.08);
}

.robot-panel-tools button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
}

.robot-panel-tools button:hover {
    background: #f2f4f7;
    color: #475467;
}

.robot-selector .robot-status-tabs,
.robot-selector .blocked-status-tabs {
    display: none;
    order: 4;
    margin: 0 0 5px;
}

.robot-selector .blocked-status-tabs {
    order: 5;
}

.robot-selector.robot-panel-open .robot-status-tabs,
.robot-selector.robot-panel-open .blocked-status-tabs {
    display: flex;
}

.robot-list {
    order: 6;
    gap: 2px;
    max-height: 300px;
    padding: 5px;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    background: #fff;
}

.robot-card {
    min-height: 44px;
    padding: 6px 7px;
    border: 0;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 4px;
    box-shadow: none;
}

.robot-card:last-child {
    border-bottom: 0;
}

.robot-card:hover {
    background: #f7fbff;
}

.robot-card.active {
    border-color: transparent;
    background: #eaf4ff;
}

.robot-card .robot-meta {
    min-width: 0;
}

.robot-card .robot-name,
.robot-card .robot-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.robot-status-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.robot-status-chip {
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 1.2;
}

.robot-status-chip.is-online,
.robot-status-chip.is-safe {
    color: #137333;
    background: #ecfdf3;
}

.robot-status-chip.is-offline {
    color: #667085;
    background: #f2f4f7;
}

.robot-status-chip.is-blocked {
    color: #b42318;
    background: #fef3f2;
}

@media (max-width: 720px) {
    .robot-scope-summary {
        gap: 5px;
        font-size: 10px;
    }

    .robot-status-group {
        gap: 3px;
    }

    .robot-status-chip {
        padding: 2px 4px;
        font-size: 9px;
    }
}

/* 机器人面板优化：展开后占据自然高度，避免浮层压住搜索和会话列表 */
.robot-selector {
    z-index: 4;
    padding: 8px 10px 6px;
    margin-bottom: 6px;
    border: 1px solid #e7edf3;
    border-radius: 8px;
    background: #fff;
}

.robot-selector.robot-panel-open {
    background: #fbfdff;
    box-shadow: 0 5px 16px rgba(52, 64, 84, 0.08);
}

.robot-header {
    min-height: 40px;
    padding: 7px 9px;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.robot-header:hover {
    background: #f5f9fc;
}

.robot-header:focus-visible {
    outline: 2px solid #91caff;
    outline-offset: 1px;
}

.robot-header-meta {
    gap: 6px;
    min-width: 0;
}

.robot-scope-label {
    flex-shrink: 0;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 500;
}

.robot-current-name {
    min-width: 0;
    overflow: hidden;
    color: #344054;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.robot-count {
    flex-shrink: 0;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 400;
}

.robot-toggle-icon {
    flex-shrink: 0;
    color: #667085;
    font-size: 11px;
}

.robot-scope-summary {
    min-height: 32px;
    gap: 5px;
    padding: 5px 2px 4px;
    overflow: hidden;
}

.robot-summary-item {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid #edf0f3;
    border-radius: 999px;
    background: #fafbfc;
    color: #667085;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.robot-summary-item:hover {
    border-color: #b8d9ff;
    background: #f2f8ff;
}

.robot-summary-item:focus-visible {
    outline: 2px solid rgba(22, 119, 255, 0.28);
    outline-offset: 1px;
}

.robot-summary-item.active {
    border-color: #91caff;
    background: #eaf4ff;
    color: #1677ff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(22, 119, 255, 0.12);
}

.robot-summary-item.active strong {
    color: inherit;
}

.robot-summary-online {
    border-color: #d9f3e5;
    background: #f1fcf5;
}

.robot-summary-offline {
    border-color: #e6e9ed;
    background: #f8f9fa;
}

.robot-summary-blocked {
    border-color: #f8d8d5;
    background: #fff7f6;
}

.robot-panel-tools {
    gap: 6px;
    padding: 5px 2px 7px;
}

.robot-panel-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.robot-selector .robot-status-tabs,
.robot-selector .blocked-status-tabs {
    gap: 4px;
    padding: 3px;
    margin: 0 2px 6px;
    border: 1px solid #edf0f3;
    border-radius: 6px;
    background: #f7f9fb;
}

.robot-status-tab,
.blocked-status-tab {
    min-width: 0;
    padding: 5px 6px;
    color: #667085;
    font-size: 11px;
}

.robot-status-tab.active,
.blocked-status-tab.active {
    color: #1677ff;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.robot-list {
    position: static;
    gap: 0;
    max-height: 280px;
    margin-top: 0;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid #e7edf3;
    border-radius: 6px;
    box-shadow: none;
}

.robot-card {
    min-height: 46px;
    padding: 7px 6px;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 4px;
}

.robot-card.active {
    background: #edf6ff;
    box-shadow: inset 2px 0 0 #409eff;
}

.robot-card .robot-company {
    color: #98a2b3;
}

.robot-empty {
    padding: 20px 8px;
    color: #98a2b3;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 420px) {
    .robot-status-group {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* 会话筛选工具栏：标签与一键已读保持同一基线和边界 */
.conversation-filter-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #edf1f5;
}

.conversation-filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 3px;
    min-width: 0;
    height: 38px;
    padding: 3px;
    border: 1px solid #e9eef5;
    border-radius: 9px;
    background: #f7f9fc;
}

.conversation-filter-tabs .filter-tab {
    min-width: 0;
    height: 30px;
    flex-direction: row;
    gap: 5px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    margin: 0;
    background: transparent;
    box-shadow: none;
    color: #7a8599;
    font-size: 13px;
    line-height: 1;
}

.conversation-filter-tabs .filter-tab .filter-tab-label {
    font-size: 13px;
    font-weight: 600;
}

.conversation-filter-tabs .filter-tab.active {
    border: 0;
    background: #fff;
    color: #1677ff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}

.conversation-filter-tabs .filter-tab:hover:not(.active) {
    background: #eef5ff;
    color: #4096ff;
}

.mark-all-read-btn {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #cfe1ff;
    border-radius: 8px;
    background: #f7fbff;
    color: #1677ff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.mark-all-read-btn:hover {
    border-color: #91caff;
    background: #eaf3ff;
    box-shadow: none;
}

.all-badge-tab,
.unread-badge-tab {
    min-width: 0;
    height: auto;
    padding: 0;
    line-height: 1;
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
}

.unread-badge-tab {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    font-size: 11px;
}

@media (max-width: 420px) {
    .conversation-filter-menu {
        gap: 6px;
        padding: 7px 8px;
    }

    .conversation-filter-tabs .filter-tab {
        gap: 3px;
        padding: 0 5px;
        font-size: 12px;
    }

    .conversation-filter-tabs .filter-tab .filter-tab-label {
        font-size: 12px;
    }

    .mark-all-read-btn {
        padding: 0 9px;
        font-size: 11px;
    }
}

/* 会话分区导航与顶部工具栏统一视觉层级 */
#conversationList .section-header {
    min-height: 36px;
    padding: 0 12px;
    gap: 8px;
    background: #f7f9fc;
    border-bottom: 1px solid #e9eef5;
    box-shadow: none;
}

#conversationList .section-header:hover {
    background: #eef5ff;
}

#conversationList .section-header:active {
    background: #e5f0ff;
}

#conversationList .section-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

#conversationList .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    font-size: 13px;
    line-height: 1;
}

#conversationList .pinned-conversations .section-header {
    background: #f7fbff;
    border-bottom-color: #e1efff;
}

#conversationList .pinned-conversations .section-header:hover {
    background: #eef6ff;
}

#conversationList .pinned-conversations .section-icon {
    color: #1677ff;
}

#conversationList .normal-conversations .section-icon {
    color: #7f8d9f;
}

#conversationList .conversation-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    border: 1px solid #e4eaf1;
    border-radius: 999px;
    background: #fff;
    color: #7a8599;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
}

#conversationList .section-collapse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-left: auto;
    border-radius: 5px;
    color: #98a2b3;
    font-size: 11px;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

#conversationList .section-header:hover .section-collapse-icon {
    background: #e4f0ff;
    color: #1677ff;
}

#conversationList .section-collapse-icon.collapsed {
    transform: rotate(-90deg);
}

/* 会话工作区统一视觉基线 */
#conversationListContainer {
    --conversation-primary: #1677ff;
    --conversation-primary-soft: #edf6ff;
    --conversation-surface: #f7f9fc;
    --conversation-hover: #f3f8ff;
    --conversation-line: #e9eef5;
    --conversation-text: #344054;
    --conversation-muted: #98a2b3;
    --conversation-danger: #ff4d4f;
    background: #fff;
    border-right-color: var(--conversation-line);
}

#conversationListContainer .search-bar {
    padding: 2px 10px 8px;
    background: #fff;
    border-bottom: 0;
}

#conversationListContainer .search-bar input {
    height: 36px;
    padding: 0 44px 0 12px;
    border: 1px solid var(--conversation-line);
    border-radius: 8px;
    background: var(--conversation-surface);
    color: var(--conversation-text);
    font-size: 13px;
    line-height: 36px;
}

#conversationListContainer .search-bar input::placeholder {
    color: var(--conversation-muted);
}

#conversationListContainer .search-bar input:focus {
    border-color: #91caff;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.08);
}

#conversationListContainer .search-button {
    top: 5px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--conversation-primary);
}

#conversationListContainer .search-button:hover {
    background: #4096ff;
}

#conversationListContainer .search-button:active {
    background: #0958d9;
}

#conversationListContainer .conversation-filter-menu {
    padding: 8px 12px;
    border-bottom-color: var(--conversation-line);
}

#conversationListContainer #conversationList {
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #c9d5e3 transparent;
}

#conversationListContainer #conversationList::-webkit-scrollbar {
    width: 6px;
}

#conversationListContainer #conversationList::-webkit-scrollbar-track {
    background: transparent;
}

#conversationListContainer #conversationList::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9d5e3;
}

#conversationListContainer #conversationList::-webkit-scrollbar-thumb:hover {
    background: #aebed0;
}

#conversationListContainer .conversation-section {
    margin-bottom: 0;
    background: #fff;
}

#conversationListContainer .conversation-section + .conversation-section {
    border-top: 1px solid var(--conversation-line);
}

#conversationListContainer .conversation-items {
    background: #fff;
}

#conversationListContainer .conversation-item {
    min-height: 68px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
    transition: background 0.16s ease, border-color 0.16s ease;
}

#conversationListContainer .conversation-item:hover {
    background: var(--conversation-hover);
}

#conversationListContainer .conversation-item.active {
    border-left: 3px solid var(--conversation-primary);
    background: var(--conversation-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.05);
    transform: none;
}

#conversationListContainer .conversation-item.active::after {
    display: none;
}

#conversationListContainer .conversation-avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 8px;
    box-shadow: none;
}

#conversationListContainer .conversation-item.active .conversation-avatar {
    border: 2px solid rgba(22, 119, 255, 0.5);
    box-shadow: none;
}

#conversationListContainer .conversation-info {
    gap: 3px;
    padding-right: 48px;
}

#conversationListContainer .conversation-name {
    min-height: 18px;
    line-height: 18px;
}

#conversationListContainer .name-text {
    color: var(--conversation-text);
    font-size: 13px;
    line-height: 18px;
}

#conversationListContainer .name-text.font-bold,
#conversationListContainer .conversation-item.active .name-text {
    color: var(--conversation-primary);
    font-weight: 600;
}

#conversationListContainer .conversation-preview {
    color: var(--conversation-muted);
    font-size: 12px;
    line-height: 18px;
}

#conversationListContainer .conversation-item.unread .conversation-preview {
    color: #667085;
    font-weight: 600;
}

#conversationListContainer .conversation-item.active .conversation-preview {
    color: #5b8bc2;
    font-weight: 500;
}

#conversationListContainer .conversation-time {
    top: 11px;
    right: 12px;
    min-width: 44px;
    color: var(--conversation-muted);
    font-size: 10px;
    line-height: 16px;
}

#conversationListContainer .conversation-item.active .conversation-time {
    color: #6e9bd0;
    font-weight: 500;
}

#conversationListContainer .conversation-item.pinned,
#conversationListContainer .pinned-items .conversation-item {
    background: #fcfdff;
}

#conversationListContainer .pinned-items .conversation-item:hover {
    background: var(--conversation-hover);
}

#conversationListContainer .pin-indicator {
    margin-left: 4px;
    color: var(--conversation-primary);
    font-size: 11px;
    line-height: 16px;
}

#conversationListContainer .unread-badge {
    right: 12px;
    bottom: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--conversation-danger);
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    box-shadow: 0 2px 5px rgba(255, 77, 79, 0.16);
}

#conversationListContainer .conversation-item.offline {
    opacity: 0.78;
    background: #fafbfc;
}

#conversationListContainer .conversation-item.offline::before,
#conversationListContainer .conversation-item.deleted::before {
    display: none;
}

#conversationListContainer .conversation-item.offline .conversation-avatar,
#conversationListContainer .conversation-item.deleted .conversation-avatar {
    filter: grayscale(70%);
    opacity: 0.72;
}

#conversationListContainer .conversation-item.offline .conversation-preview,
#conversationListContainer .conversation-item.deleted .conversation-preview {
    color: #aeb7c3;
}

#conversationListContainer .conversation-item.deleted {
    opacity: 0.7;
    background: #fbf8f8;
}

#conversationListContainer .conversation-item.deleted:hover {
    opacity: 0.82;
    background: #fff5f5;
}

#conversationListContainer .conversation-item.deleted .name-text {
    color: #98a2b3;
}

#conversationListContainer .conversation-item.deleted .deleted-badge,
#conversationListContainer .conversation-item.offline .offline-badge {
    right: 12px;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 14px;
}

#conversationListContainer .conversation-item.deleted .deleted-badge {
    background: #fff1f0;
    color: #cf1322;
    border: 1px solid #ffccc7;
}

#conversationListContainer .conversation-item.offline .offline-badge {
    background: #f2f4f7;
    color: #667085;
    border: 1px solid #e4e7ec;
}

/* 输入工具栏和表情面板对齐 */
#chatContainer .input-toolbar .tool-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

#chatContainer .input-toolbar .tool-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    transform: none;
}

#chatContainer .input-toolbar .tool-button:hover {
    transform: none;
}

#emojiPanel {
    position: fixed !important;
    z-index: 1200;
    right: auto !important;
    bottom: auto !important;
    width: 300px;
    max-width: calc(100vw - 16px);
    max-height: min(300px, 50vh);
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--page-line, #e7edf4);
    border-radius: 8px;
    background: var(--page-surface, #fff);
    box-shadow: 0 8px 24px rgba(52, 64, 84, 0.14);
    overflow-y: auto;
}

#emojiPanel .emoji-item {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 32px;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    transform: none;
}

#emojiPanel .emoji-item:hover {
    border: 0;
    background: var(--page-primary-soft, #edf6ff);
    box-shadow: none;
    transform: none;
}

#emojiPanel::-webkit-scrollbar {
    width: 5px;
}

#emojiPanel::-webkit-scrollbar-track {
    background: transparent;
}

#emojiPanel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9d5e3;
}

@media (max-width: 420px) {
    #conversationListContainer .conversation-item {
        min-height: 64px;
        padding: 9px 10px;
    }

    #conversationListContainer .conversation-avatar {
        width: 38px;
        height: 38px;
        margin-right: 9px;
    }

    #conversationListContainer .conversation-info {
        padding-right: 42px;
    }
}

/* 全页面统一设计基线 */
:root {
    --page-primary: #1677ff;
    --page-primary-hover: #4096ff;
    --page-primary-soft: #edf6ff;
    --page-background: #f5f8fc;
    --page-surface: #ffffff;
    --page-surface-soft: #f7f9fc;
    --page-line: #e7edf4;
    --page-line-strong: #d9e3ee;
    --page-text: #344054;
    --page-text-soft: #667085;
    --page-text-muted: #98a2b3;
    --page-danger: #ff4d4f;
    --page-success: #16a34a;
    --page-radius: 8px;
    --page-control-height: 36px;
}

body {
    background: var(--page-background);
    color: var(--page-text);
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-header {
    height: 48px;
    padding: 0 16px;
    background: var(--page-surface);
    border-bottom: 1px solid var(--page-line);
}

.header-user-info {
    margin-right: 12px;
    color: var(--page-text-soft);
    font-size: 13px;
}

.logout-btn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #ffd8d8;
    border-radius: var(--page-radius);
    background: #fff7f7;
    color: #cf1322;
    font-size: 12px;
}

.logout-btn:hover {
    border-color: #ffb3b3;
    background: #fff1f0;
}

.app-container {
    background: var(--page-background);
}

.sidebar-menu {
    width: 72px;
    padding: 16px 0;
    gap: 8px;
    background: var(--page-surface-soft);
    border-right: 1px solid var(--page-line);
}

.sidebar-menu .menu-item {
    width: 48px;
    height: 48px;
    border-radius: var(--page-radius);
}

.sidebar-menu .menu-item:hover {
    background: var(--page-primary-soft);
}

.sidebar-menu .menu-item.active {
    background: var(--page-primary);
    box-shadow: 0 4px 10px rgba(22, 119, 255, 0.16);
}

.sidebar-menu .menu-icon {
    width: 24px;
    height: 24px;
    color: var(--page-text-soft);
    stroke: var(--page-text-soft);
}

.sidebar-menu .menu-item:not(.active):hover .menu-icon {
    color: var(--page-primary);
    stroke: var(--page-primary);
}

.menu-badge {
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--page-danger);
    font-size: 10px;
    box-shadow: 0 2px 5px rgba(255, 77, 79, 0.16);
}

.chat-container,
.contact-detail-container,
.contacts-list-container,
.quick-panel {
    background: var(--page-surface);
}

.conversation-list-container,
.contacts-list-container {
    border-right-color: var(--page-line);
}

/* 对话区 */
.chat-header {
    min-height: 58px;
    padding: 10px 16px;
    background: var(--page-surface);
    border-bottom: 1px solid var(--page-line);
}

.chat-title {
    color: var(--page-text);
    font-size: 15px;
    font-weight: 600;
}

.chat-subtitle {
    margin-top: 3px;
    color: var(--page-text-muted);
    font-size: 11px;
}

.chat-subtitle .robot-id,
.robot-id {
    color: var(--page-primary);
}

.chat-header-menu-btn {
    border-radius: 6px;
    color: var(--page-text-muted);
}

.chat-header-menu-btn:hover {
    background: var(--page-primary-soft);
    color: var(--page-primary);
}

.chat-messages {
    padding: 16px;
    background: var(--page-background);
    scrollbar-width: thin;
    scrollbar-color: #c9d5e3 transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9d5e3;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.time-divider {
    margin: 14px 0;
}

.time-divider-text {
    padding: 3px 8px;
    border: 1px solid var(--page-line);
    border-radius: 999px;
    background: var(--page-surface-soft);
    color: var(--page-text-muted);
    font-size: 10px;
}

.message {
    margin-bottom: 12px;
}

.message-content {
    max-width: 68%;
}

.message-avatar {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: var(--page-radius);
}

.message-self .message-avatar {
    margin-right: 0;
    margin-left: 10px;
}

.message-text {
    padding: 9px 12px;
    border: 1px solid var(--page-line);
    border-radius: 8px 12px 12px 12px;
    background: var(--page-surface);
    box-shadow: 0 1px 2px rgba(52, 64, 84, 0.04);
    color: var(--page-text);
    font-size: 13px;
    line-height: 1.55;
}

.message-self .message-text {
    border-color: var(--page-primary);
    border-radius: 12px 8px 12px 12px;
    background: var(--page-primary);
    color: #fff;
}

/* 小程序消息 */
.message-mini-program {
    display: block;
    width: 248px;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #eceef0;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    color: #1f2329;
    text-decoration: none;
}

.mini-program-favorite-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    padding: 0;
}

.mini-program-favorite-item {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0;
}

.mini-program-favorite-card.message-mini-program {
    width: 100%;
}

.mini-program-favorite-item .mini-program-description.is-visible {
    display: block;
    overflow: hidden;
    color: #646a73;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-program-favorite-remarks {
    padding: 6px 0 0;
    overflow-wrap: anywhere;
    color: #7b8791;
    font-size: 12px;
    line-height: 18px;
}

.favorites-content[data-type="小程序"] .mini-program-favorite-item > .send-button {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 16;
}

.favorites-content[data-type="小程序"] .mini-program-favorite-item:hover > .send-button {
    display: flex;
}

/* 收藏夹沿用聊天中的小程序卡片，仅在双列空间中做紧凑缩放。 */
.favorites-content[data-type="小程序"] .mini-program-app {
    gap: 5px;
    padding: 6px 6px 4px;
}

.favorites-content[data-type="小程序"] .mini-program-app-icon,
.favorites-content[data-type="小程序"] .mini-program-app-icon-fallback {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.favorites-content[data-type="小程序"] .mini-program-app-icon-fallback {
    padding: 3px;
}

.favorites-content[data-type="小程序"] .mini-program-app-name {
    font-size: 11px;
    line-height: 16px;
}

.favorites-content[data-type="小程序"] .mini-program-main {
    padding: 2px 6px 6px;
}

.favorites-content[data-type="小程序"] .mini-program-title {
    font-size: 12px;
    line-height: 18px;
    -webkit-line-clamp: 2;
}

.favorites-content[data-type="小程序"] .mini-program-cover-frame {
    margin-top: 6px;
}

.favorites-content[data-type="小程序"] .mini-program-cover-placeholder-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
}

.favorites-content[data-type="小程序"] .mini-program-footer {
    min-height: 23px;
    padding: 3px 6px;
    font-size: 10px;
    line-height: 15px;
}

.favorites-content[data-type="小程序"] .mini-program-mark {
    width: 11px;
    height: 11px;
    flex-basis: 11px;
}

@media (max-width: 360px) {
    .mini-program-favorite-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

a.message-mini-program {
    cursor: pointer;
}

a.message-mini-program:hover {
    border-color: #91caff;
    box-shadow: 0 3px 10px rgba(31, 35, 41, 0.12);
}

.message-self .message-mini-program {
    border-color: #c6e2ff;
}

.mini-program-app {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 8px 7px 5px;
}

.mini-program-app-icon,
.mini-program-app-icon-fallback {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 4px;
}

.mini-program-app-icon {
    display: block;
    object-fit: cover;
}

.mini-program-app-icon-fallback,
.mini-program-mark {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

.mini-program-app-icon-fallback {
    padding: 4px;
    background: #16a34a;
}

.mini-program-app-icon-fallback i,
.mini-program-mark i {
    display: block;
    border-radius: 1px;
    background: currentColor;
}

.mini-program-app-icon-fallback i {
    color: #fff;
}

.mini-program-app-name {
    min-width: 0;
    overflow: hidden;
    color: #646a73;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-program-main {
    padding: 3px 8px 8px;
}

.mini-program-title {
    display: -webkit-box;
    overflow: hidden;
    color: #1f2329;
    padding: 0 1px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.mini-program-description {
    display: none;
}

.mini-program-cover-frame {
    position: relative;
    display: grid;
    width: 100%;
    margin-top: 8px;
    aspect-ratio: 5 / 4;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f5f6;
}

.mini-program-cover {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    transition: opacity 0.16s ease;
}

.mini-program-cover-frame[data-cover-state="loaded"] .mini-program-cover {
    opacity: 1;
}

.mini-program-cover-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: #f4f7f5;
}

.mini-program-cover-frame[data-cover-state="loaded"] .mini-program-cover-placeholder {
    display: none;
}

.mini-program-cover-placeholder-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
}

.mini-program-cover-placeholder-mark {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 8px;
    background: #16a34a;
}

.mini-program-cover-placeholder-mark i {
    display: block;
    border-radius: 1px;
    background: #fff;
}

.mini-program-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 5px 8px;
    border-top: 1px solid #e9ebed;
    color: #8f959e;
    font-size: 11px;
    line-height: 17px;
}

.mini-program-mark {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    padding: 1px;
    color: #8f959e;
}

@media (max-width: 720px) {
    .message-mini-program {
        width: min(248px, calc(100vw - 112px));
    }
}

.message-recalled {
    padding: 6px 10px;
    border: 1px solid var(--page-line);
    border-radius: 999px;
    background: var(--page-surface-soft);
    color: var(--page-text-muted);
    font-size: 11px;
}

.chat-input {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--page-line);
    background: var(--page-surface);
}

.message-input {
    height: 76px;
    margin-bottom: 6px;
    padding: 10px 12px;
    border: 1px solid var(--page-line-strong);
    border-radius: var(--page-radius);
    background: var(--page-surface-soft);
    color: var(--page-text);
    font-size: 13px;
}

.message-input:focus {
    border-color: #91caff;
    background: var(--page-surface);
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.08);
}

.input-toolbar {
    padding: 4px 0 0;
    background: var(--page-surface);
}

.tool-buttons {
    gap: 4px;
    padding: 0;
}

.tool-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    color: var(--page-text-soft);
}

.tool-button:hover {
    background: var(--page-primary-soft);
    color: var(--page-primary);
    transform: none;
}

.tool-button.active {
    background: var(--page-primary-soft);
    color: var(--page-primary);
}

/* 通讯录 */
.contacts-search-bar {
    padding: 10px 12px 8px;
    background: var(--page-surface);
    border-bottom: 0;
}

.contacts-search-bar input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--page-line);
    border-radius: var(--page-radius);
    background: var(--page-surface-soft);
    color: var(--page-text);
    font-size: 13px;
}

.contacts-search-bar input:focus {
    border-color: #91caff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.08);
}

.contacts-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--page-line);
}

.contacts-header h2 {
    color: var(--page-text);
    font-size: 15px;
}

.contacts-categories {
    border-bottom-color: var(--page-line);
}

.contact-category {
    padding: 6px 0;
}

.category-item,
.subcategory-item {
    min-height: 34px;
    padding: 8px 12px;
    color: var(--page-text-soft);
    font-size: 12px;
}

.category-item:hover,
.subcategory-item:hover {
    background: var(--page-primary-soft);
    color: var(--page-primary);
}

.category-item.expanded {
    color: var(--page-primary);
    font-weight: 600;
}

.category-count,
.expand-icon {
    color: var(--page-text-muted);
    font-size: 11px;
}

.contact-subcategory {
    padding: 4px 0;
    background: var(--page-surface-soft);
}

.contacts-list {
    scrollbar-width: thin;
    scrollbar-color: #c9d5e3 transparent;
}

.contact-item {
    min-height: 60px;
    padding: 9px 12px;
    border-bottom-color: #f0f2f5;
}

.contact-item:hover {
    background: var(--page-hover, #f3f8ff);
}

.contact-item-avatar {
    width: 38px;
    height: 38px;
    margin-right: 10px;
    border-radius: var(--page-radius);
    background: var(--page-surface-soft);
}

.contact-item-name {
    color: var(--page-text);
    font-size: 13px;
}

.contact-section-header {
    padding: 7px 12px;
    border-bottom: 1px solid var(--page-line);
    background: var(--page-surface-soft);
    color: var(--page-text-muted);
    font-size: 11px;
}

/* 右侧备注与收藏面板 */
.quick-panel {
    width: 400px;
    border-left: 1px solid var(--page-line);
}

.panel-section {
    border-bottom-color: var(--page-line);
}

.panel-header {
    min-height: 48px;
    padding: 0 14px;
    background: var(--page-surface);
    border-bottom: 1px solid var(--page-line);
    color: var(--page-text);
    font-size: 13px;
}

.panel-header .add-favorite-btn,
.panel-header .add-note-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #cfe1ff;
    border-radius: 7px;
    background: var(--page-primary-soft);
    color: var(--page-primary);
    font-size: 15px;
}

.panel-header .add-favorite-btn:hover,
.panel-header .add-note-btn:hover {
    border-color: #91caff;
    background: #dbeaff;
    transform: none;
}

.panel-content {
    background: var(--page-background);
    scrollbar-width: thin;
    scrollbar-color: #c9d5e3 transparent;
}

.panel-content::-webkit-scrollbar {
    width: 6px;
}

.panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9d5e3;
}

.customer-notes-list {
    gap: 8px;
    padding: 12px;
}

.customer-note-item {
    padding: 10px;
    border: 1px solid var(--page-line);
    border-radius: var(--page-radius);
    background: var(--page-surface);
    box-shadow: none;
}

.customer-note-item:hover {
    border-color: #b9d7f7;
    background: var(--page-primary-soft);
    box-shadow: none;
}

.customer-note-item .note-time {
    color: var(--page-text-muted);
    font-size: 11px;
}

.customer-note-item .note-edit-btn,
.customer-note-item .note-delete-btn {
    border-radius: 6px;
    color: var(--page-text-muted);
}

.customer-note-item .note-edit-btn:hover {
    background: var(--page-primary-soft);
}

.customer-note-item .note-delete-btn:hover {
    background: #fff1f0;
}

.customer-note-item .note-action,
.customer-note-item .note-situation {
    margin-top: 6px;
    color: var(--page-text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.customer-note-item .note-action strong,
.customer-note-item .note-situation strong {
    color: var(--page-primary);
}

.favorites-tabs {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--page-line);
    background: var(--page-background);
    box-shadow: none;
}

.favorite-tab {
    min-width: 0;
    min-height: 34px;
    padding: 0 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--page-text-muted);
    gap: 3px;
}

.favorite-tab:hover {
    background: var(--page-primary-soft);
    color: var(--page-primary);
}

.favorite-tab.active {
    background: var(--page-surface);
    color: var(--page-primary);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}

.favorite-tab .tab-icon {
    margin-right: 0;
    font-size: 13px;
    line-height: 1;
}

.favorite-tab .tab-text {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
}

.favorites-content {
    min-height: 0;
    padding: 10px 12px;
    background: var(--page-background);
}

.favorites-content .empty-state {
    padding: 32px 16px;
    color: var(--page-text-muted);
    font-size: 12px;
}

.favorites-content .empty-state .empty-icon {
    margin-bottom: 8px;
    font-size: 30px;
    opacity: 0.45;
}

.favorites-content .phrase-container,
.favorites-content .image-item,
.favorites-content .voice-item,
.favorites-content .card-item {
    border: 1px solid var(--page-line) !important;
    border-radius: var(--page-radius);
    background: var(--page-surface);
    box-shadow: none;
}

.favorites-content .phrase-container {
    margin-bottom: 8px;
    padding: 8px;
}

.favorites-content .quick-phrase {
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: var(--page-surface-soft);
}

.favorites-content .quick-phrase:hover,
.favorites-content .voice-item:hover,
.favorites-content .card-item:hover,
.favorites-content .image-item:hover,
.favorites-content .emoji-item:hover {
    border-color: #b9d7f7 !important;
    background: var(--page-primary-soft);
    box-shadow: none;
    transform: none;
}

.favorites-content .quick-phrase .text,
.favorites-content[data-type="语音"] .voice-title,
.favorites-content[data-type="链接"] .card-item .card-title {
    color: var(--page-text);
    font-size: 12px;
}

.favorites-content[data-type="语音"] .voice-list,
.favorites-content[data-type="链接"] .card-list {
    gap: 8px;
    padding: 0;
}

.favorites-content[data-type="语音"] .voice-item {
    padding: 10px;
}

.favorites-content[data-type="语音"] .voice-icon {
    margin-right: 10px;
    color: var(--page-primary);
    font-size: 20px;
}

.favorites-content[data-type="语音"] .voice-duration,
.favorites-content[data-type="链接"] .card-item .card-desc,
.favorite-remarks,
.voice-remarks,
.card-remarks {
    color: var(--page-text-muted);
    font-size: 11px;
}

.favorites-content[data-type="图片"] .image-grid,
.favorites-content[data-type="表情"] .emoji-grid {
    gap: 8px;
    padding: 0;
}

.favorites-content[data-type="表情"] .emoji-item,
.favorites-content[data-type="图片"] .image-item {
    border-radius: var(--page-radius);
}

.favorites-content[data-type="链接"] .card-item .card-header {
    padding: 8px 10px;
    background: var(--page-primary-soft);
    color: var(--page-primary);
    font-size: 11px;
}

.favorites-content[data-type="链接"] .card-item .card-body {
    padding: 10px;
}

.favorites-content .send-button {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--page-primary);
    box-shadow: 0 2px 6px rgba(22, 119, 255, 0.16);
}

.favorites-content .send-button:hover {
    background: var(--page-primary-hover);
    box-shadow: 0 3px 8px rgba(22, 119, 255, 0.2);
    transform: none;
}

/* 联系人详情 */
.contact-detail-header {
    min-height: 58px;
    padding: 10px 16px;
    border-bottom-color: var(--page-line);
}

.contact-detail-header h3 {
    color: var(--page-text);
    font-size: 15px;
}

.contact-detail-actions {
    gap: 6px;
}

.contact-icon,
.menu-dots {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 6px;
    color: var(--page-text-muted);
}

.contact-icon:hover,
.menu-dots:hover {
    background: var(--page-primary-soft);
    color: var(--page-primary);
}

.contact-detail-content {
    padding: 16px;
    background: var(--page-surface);
}

.contact-avatar-large {
    margin-bottom: 18px;
}

.contact-avatar-large img {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    background: var(--page-surface-soft);
}

.contact-info-section {
    margin-bottom: 18px;
}

.info-item {
    min-height: 38px;
    padding: 9px 0;
    border-bottom-color: var(--page-line);
}

.info-label {
    width: 64px;
    color: var(--page-text-muted);
    font-size: 12px;
}

.info-value {
    color: var(--page-text);
    font-size: 12px;
}

.contact-moments-section {
    margin-bottom: 18px;
    padding-top: 18px;
    border-top-color: var(--page-line);
}

.contact-moments-section h4 {
    margin-bottom: 8px;
    color: var(--page-text);
    font-size: 13px;
}

.moments-content,
.contact-signature,
.contact-source {
    color: var(--page-text-muted);
    font-size: 12px;
}

.contact-signature {
    padding: 10px 0;
    margin-bottom: 10px;
    border-top-color: var(--page-line);
    border-bottom-color: var(--page-line);
}

.contact-source {
    margin-bottom: 18px;
}

.contact-actions {
    gap: 8px;
    padding-top: 18px;
    border-top-color: var(--page-line);
}

.contact-action-btn {
    min-width: 88px;
    padding: 10px 12px;
    border: 1px solid var(--page-line);
    border-radius: var(--page-radius);
    background: var(--page-surface-soft);
}

.contact-action-btn:hover {
    border-color: #b9d7f7;
    background: var(--page-primary-soft);
}

.contact-action-btn svg {
    width: 20px;
    height: 20px;
    color: var(--page-primary);
}

.contact-action-btn span {
    color: var(--page-text);
    font-size: 12px;
}

/* 置顶会话选中态必须放在文件末尾，避免被置顶默认背景覆盖。 */
#conversationListContainer .pinned-items .conversation-item.active,
#conversationListContainer .pinned-items .conversation-item.active:hover {
    border-left: 4px solid var(--conversation-primary);
    background: #dcecff;
    box-shadow: inset 0 0 0 1px #91caff, 0 2px 8px rgba(22, 119, 255, 0.16);
    opacity: 1;
}

#conversationListContainer .pinned-items .conversation-item.active .name-text {
    color: #0958d9;
    font-weight: 700;
}

#conversationListContainer .pinned-items .conversation-item.active .conversation-preview,
#conversationListContainer .pinned-items .conversation-item.active .conversation-time {
    color: #326ca8;
    font-weight: 500;
}

#conversationListContainer .pinned-items .conversation-item.active .conversation-avatar {
    border: 2px solid var(--conversation-primary);
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.14);
}