/* 主CSS文件 - 导入所有模块化样式 */

/* 导入CSS变量 */
@import url('css/variables.css');

/* 导入基础样式 */
@import url('css/base.css');

/* 导入头部样式 */
@import url('css/header.css');

/* 导入联系人列表样式 */
@import url('css/contact-list.css');

/* 导入聊天样式 */
@import url('css/chat.css');

/* 导入模态框样式 */
@import url('css/modal.css');

/* 导入帮助文档和外观设置样式 */
@import url('css/help.css');

/* 导入AI配置样式 */
@import url('css/ai-config.css');

/* 导入暗色模式专用样式 */
@import url('css/dark-mode.css');

/* 全局样式覆盖和特殊处理 */
.hidden {
  display: none !important;
}

/* 移除所有头像元素的白色描边 */
.contact-avatar,
.avatar-small,
.avatar-preview {
  border: none !important;
  outline: none !important;
  /* 移除 box-shadow: none !important; 以允许主题自定义阴影 */
}

/* 优化过渡效果 - 只对必要的元素应用过渡 */
/* 移除全局过渡以提升滚动性能 */

/* 按钮和交互元素保持过渡，但优化性能 */
button,
input,
textarea,
select,
.modal,
.action-sheet,
.message-bubble {
  transition:
    background-color 0.2s ease-out,
    color 0.2s ease-out,
    border-color 0.2s ease-out,
    transform 0.15s ease-out,
    opacity 0.15s ease-out;
}

/* 联系人列表相关元素不应用过渡以提升滚动性能 */
.contact-list,
.contact-item,
.contact-item-wrapper,
.contact-item-content,
.contact-avatar,
.contact-info,
.contact-header,
.contact-name,
.contact-time,
.contact-preview {
  transition: none !important;
}

/* 确保暗色模式下的文字对比度 */
body.dark-mode {
  color-scheme: dark;
}

/* 优化滚动性能 - 专门针对PWA模式修复 */
.chat-messages,
.contact-list,
.help-content {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* 确保PWA模式下可以正常滚动 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 防止文本选择时的背景色问题 */
::selection {
  background-color: var(--accent-blue);
  color: white;
}

/* PWA 更新提示样式 */
.pwa-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  font-size: 14px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pwa-toast button {
  background-color: var(--accent-blue);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease;
  white-space: nowrap; /* 防止按钮文字换行 */
}

.pwa-toast button:hover {
  background-color: #0056b3;
}

.pwa-toast #pwa-close-btn {
  background: none;
  color: #ccc;
  font-size: 20px;
  padding: 0 5px;
  line-height: 1;
}

.pwa-toast #pwa-close-btn:hover {
  color: white;
}

.pwa-toast span {
  white-space: nowrap; /* 防止文本换行 */
}

::-moz-selection {
  background-color: var(--accent-blue);
  color: white;
}

/* 暗色模式下的选择文本样式 */
body.dark-mode ::selection {
  background-color: var(--accent-blue);
  color: white;
}

body.dark-mode ::-moz-selection {
  background-color: var(--accent-blue);
  color: white;
}