/* 全局样式 */
:root {
  --primary-color          : #4361ee;
  --primary-dark           : #3a56d4;
  --secondary-color        : #7209b7;
  --success-color          : #4cc9f0;
  --danger-color           : #f72585;
  --warning-color          : #f8961e;
  --info-color             : #4895ef;
  --light-color            : #f8f9fa;
  --dark-color             : #212529;
  --white-color            : #ffffff;
  --gray-color             : #6c757d;
  --gray-light             : #e9ecef;
  --gray-dark              : #495057;
  --border-color           : #dee2e6;
  --shadow                 : 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-light           : 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --transition             : all 0.3s ease-in-out;
  --sidebar-width          : 280px;
  --sidebar-collapsed-width: 70px;
  --header-height          : 60px;
  --radius                 : 12px;
}

* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

body {
  font-family     : 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f0f2f5;
  color           : #333;
  line-height     : 1.6;
  height          : 100vh;
  overflow        : hidden;
}

a {
  text-decoration: none;
  color          : var(--primary-color);
}

ul {
  list-style: none;
}

/* App Layout */
.app-layout {
  display : flex;
  height  : 100vh;
  overflow: hidden;
  position: relative;  /* 添加相对定位，用于用户菜单定位 */
}

/* Sidebar Styles */
.sidebar {
  width         : var(--sidebar-width);
  background    : linear-gradient(180deg, #4cc9f0, #4361ee);
  color         : white;
  height        : 100%;
  display       : flex;
  flex-direction: column;
  transition    : all 0.3s ease;
  box-shadow    : var(--shadow);
  z-index       : 100;
  overflow      : hidden;
  position      : relative;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 20px;
  border-bottom  : 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  font-family  : 'Poppins', sans-serif;
  font-weight  : 700;
  font-size    : 1.5rem;
  margin       : 0;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .logo {
  display: none;
}

.icon-button {
  background     : rgba(255, 255, 255, 0.1);
  border         : none;
  width          : 36px;
  height         : 36px;
  border-radius  : 50%;
  color          : white;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : var(--transition);
}

.icon-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.sidebar.collapsed .sidebar-actions .icon-button {
  margin-left: 7px;
}

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

.new-chat-btn {
  background   : rgba(255, 255, 255, 0.15);
  color        : white;
  border       : none;
  border-radius: var(--radius);
  padding      : 12px 16px;
  font-size    : 1rem;
  font-weight  : 500;
  cursor       : pointer;
  width        : 100%;
  display      : flex;
  align-items  : center;
  gap          : 12px;
  transition   : var(--transition);
}

.new-chat-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform : translateY(-2px);
}

.sidebar.collapsed .new-chat-btn span {
  display: none;
}

.sidebar.collapsed .new-chat-btn {
  justify-content: center;
  padding        : 16px;
}

.history-section {
  margin-top: 24px;
}

.history-title {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  font-size     : 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color         : rgba(255, 255, 255, 0.7);
  margin-bottom : 16px;
}

.sidebar.collapsed .history-title span {
  display: none;
}

.sidebar.collapsed .history-title {
  justify-content: center;
}

/* 移动端手势提示样式 */
.sidebar::before {
  content       : '';
  position      : absolute;
  top           : 50%;
  right         : 10px;
  width         : 20px;
  height        : 20px;
  border-right  : 2px solid rgba(255, 255, 255, 0.5);
  border-top    : 2px solid rgba(255, 255, 255, 0.5);
  transform     : rotate(45deg) translateY(-50%);
  opacity       : 0;
  transition    : opacity 0.3s ease;
  pointer-events: none;
}

.sidebar         : hover:: before,
.sidebar.visible:: before {
  opacity: 1;
}

.history-list {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

.history-item {
  background   : rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding      : 12px 16px;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  gap          : 12px;
  transition   : var(--transition);
  border       : 1px solid transparent;
  position     : relative;
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.history-item.active {
  background: rgba(255, 255, 255, 0.25);
  border    : 1px solid rgba(255, 255, 255, 0.3);
}

.history-item-icon {
  min-width : 20px;
  text-align: center;
}

.history-item-text {
  flex         : 1;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.history-item-delete {
  background     : none;
  border         : none;
  color          : rgba(255, 255, 255, 0.7);
  cursor         : pointer;
  opacity        : 0;
  transition     : var(--transition);
  width          : 24px;
  height         : 24px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
}

.history-item:hover .history-item-delete {
  opacity: 1;
}

.history-item-delete:hover {
  background: rgba(255, 255, 255, 0.2);
  color     : white;
}

/* 优化侧边栏折叠时的历史记录项显示 */
.sidebar.collapsed .history-item-text,
.sidebar.collapsed .history-item-delete {
  display: none;
}

.sidebar.collapsed .history-item {
  justify-content: center;
  padding        : 16px;
  position       : relative;
}

/* 添加工具提示，当鼠标悬停在折叠的项目上时显示完整标题 */
.sidebar.collapsed .history-item::before {
  content: attr(title);
  position: absolute;
  left: calc(var(--sidebar-collapsed-width) + 10px);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  transform: translateX(-10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar.collapsed .history-item:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Main Content */
.main-content {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  background    : #f0f2f5;
}

/* Chat Header */
.chat-header {
  background : var(--white-color);
  box-shadow : var(--shadow-light);
  padding    : 0 20px;
  height     : var(--header-height);
  display    : flex;
  align-items: center;
  gap        : 16px;
  z-index    : 99;
}

.mobile-toggle {
  display: none;
}

.chat-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size  : 1.25rem;
  color      : var(--dark-color);
  margin     : 0;
}

.chat-header-actions {
  margin-left: auto;
}

/* Chat Container */
.chat-container {
  flex          : 1;
  overflow-y    : auto;
  padding       : 20px;
  display       : flex;
  flex-direction: column;
  background    : 
    radial-gradient(circle at 15% 50%, rgba(67, 97, 238, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 85% 30%, rgba(114, 9, 183, 0.05) 0%, transparent 20%);
}

.welcome-message {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  padding        : 20px;
  flex           : 1;
}

.welcome-logo {
  font-size              : 4rem;
  margin-bottom          : 20px;
  background             : linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width                  : 100px;
  height                 : 100px;
  display                : flex;
  align-items            : center;
  justify-content        : center;
  border-radius          : 50%;
  border                 : 2px solid rgba(67, 97, 238, 0.1);
  margin                 : 0 auto 20px;
}

.welcome-message h1 {
  font-family            : 'Poppins', sans-serif;
  font-weight            : 700;
  font-size              : 2.5rem;
  margin-bottom          : 10px;
  background             : linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-message p {
  font-size    : 1.1rem;
  color        : var(--gray-dark);
  max-width    : 600px;
  margin-bottom: 40px;
}

.features-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap                  : 20px;
  max-width            : 900px;
  width                : 100%;
  margin-top           : 20px;
}

.feature-card {
  background   : var(--white-color);
  border-radius: var(--radius);
  padding      : 24px;
  box-shadow   : var(--shadow-light);
  transition   : var(--transition);
  text-align   : center;
}

.feature-card:hover {
  transform : translateY(-5px);
  box-shadow: var(--shadow);
}

.feature-card i {
  font-size              : 2.5rem;
  margin-bottom          : 16px;
  background             : linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-card h3 {
  font-size    : 1.25rem;
  margin-bottom: 10px;
  color        : var(--dark-color);
}

.feature-card p {
  font-size: 0.95rem;
  color    : var(--gray-color);
  margin   : 0;
}

/* Messages */
.message {
  max-width    : 80%;
  padding      : 16px 20px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  animation    : fadeIn 0.3s ease;
  position     : relative;
  line-height  : 1.5;
}

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

.message-user {
  background                : var(--primary-color);
  color                     : white;
  align-self                : flex-end;
  border-bottom-right-radius: 4px;
  box-shadow                : 0 2px 8px rgba(67, 97, 238, 0.3);
}

.message-ai {
  background               : var(--white-color);
  color                    : var(--dark-color);
  align-self               : flex-start;
  box-shadow               : var(--shadow-light);
  border-bottom-left-radius: 4px;
  border                   : 1px solid var(--border-color);
}

.message-content {
  white-space: pre-wrap;
  word-break : break-word;
}

.message-meta {
  font-size : 0.75rem;
  margin-top: 8px;
  opacity   : 0.8;
}

.message-user .message-meta {
  text-align: right;
  color     : rgba(255, 255, 255, 0.9);
}

.message-ai .message-meta {
  color: var(--gray-color);
}

/* Input Container */
.input-container {
  padding   : 16px 20px;
  background: var(--white-color);
  border-top: 1px solid var(--border-color);
  display   : flex;
  gap       : 12px;
}

.message-input {
  flex         : 1;
  border       : 1px solid var(--border-color);
  border-radius: var(--radius);
  padding      : 12px 16px;
  font-size    : 1rem;
  resize       : none;
  max-height   : 200px;
  outline      : none;
  transition   : var(--transition);
  font-family  : inherit;
}

.message-input:focus {
  border-color: var(--primary-color);
  box-shadow  : 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.send-button {
  background     : var(--primary-color);
  color          : white;
  border         : none;
  border-radius  : var(--radius);
  width          : 46px;
  height         : 46px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : var(--transition);
}

.send-button:hover:not(:disabled) {
  background: var(--primary-dark);
  transform : scale(1.05);
}

.send-button:disabled {
  background: var(--gray-light);
  cursor    : not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sidebar {
    position   : fixed;
    left       : 0;
    top        : 0;
    height     : 100%;
    z-index    : 1000;
    transform  : translateX(-100%);
    width      : 80%;
    max-width  : 320px;
    transition : transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    background : linear-gradient(180deg, #4cc9f0, #4361ee);
    box-shadow : 2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .sidebar.visible {
    transform: translateX(0);
    /* 添加滑入时的轻微放大效果 */
    transform: translateX(0) scale(1.02);
  }

  .sidebar-overlay {
    position               : fixed;
    top                    : 0;
    left                   : 0;
    width                  : 100%;
    height                 : 100%;
    background             : rgba(0, 0, 0, 0.5);
    z-index                : 999;
    display                : none;
    backdrop-filter        : blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .sidebar-overlay.visible {
    display  : block;
    animation: fadeInOverlay 0.3s ease forwards;
  }

  @keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .mobile-toggle {
    display: flex;
    padding: 10px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap                  : 16px;
  }

  .message {
    max-width   : 90%;
    margin-left : 10px;
    margin-right: 10px;
  }
  
  /* 在移动设备上调整用户菜单位置 */
  .user-profile {
    left  : 10px;
    right : 10px;
    bottom: 15px;
  }
  
  /* 移动端用户信息样式优化 */
  .user-info {
    width        : auto;
    margin       : 0 10px;
    padding      : 8px 12px;
    border-radius: 24px;
  }
  
  /* 移动端设置面板适配 */
  .settings-panel {
    width        : 100%;
    right        : 0;
    left         : 0;
    top          : 0;
    height       : 100%;
    border-radius: 0;
    animation    : slideInUp 0.3s ease;
  }
  
  @keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

@media (max-width: 576px) {
  .chat-header {
    padding: 0 15px;
  }

  .chat-container {
    padding: 15px;
  }

  .input-container {
    padding: 12px 15px;
  }

  .message-input {
    padding: 10px 12px;
  }

  .send-button {
    width : 40px;
    height: 40px;
  }

  .welcome-message h1 {
    font-size: 2rem;
  }

  .welcome-message p {
    font-size: 1rem;
  }
  
  /* 在小屏幕上进一步调整用户菜单 */
  .user-menu {
    left  : 0;
    right : 0;
    width : calc(100% - 20px);
    margin: 0 10px;
  }
  
  /* 移动端设置面板适配 */
  .settings-panel .settings-content {
    padding: 15px;
  }
}

/* 用户信息和菜单样式 */
.sidebar-user-profile {
  position: absolute;
  bottom  : 20px;
  left    : 20px;
  right   : 20px;
  z-index : 101;
}

.user-info {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  background     : rgba(255, 255, 255, 0.9);
  border-radius  : 30px;
  padding        : 8px 15px;
  cursor         : pointer;
  box-shadow     : var(--shadow-light);
  transition     : all 0.3s ease;
  width          : calc(var(--sidebar-width) * 1 - 40px);
  justify-content: space-between;
  margin         : 0 auto;
}

.sidebar.collapsed .user-info {
  padding        : 8px;
  justify-content: center;
  width          : 40px;
  margin         : 0 auto;
}

.user-info:hover {
  background: var(--white-color);
  box-shadow: var(--shadow);
}

.user-avatar {
  width          : 30px;
  height         : 30px;
  border-radius  : 50%;
  background     : linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 14px;
  flex-shrink    : 0;
}

.user-name {
  font-size    : 14px;
  font-weight  : 500;
  color        : var(--dark-color);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  flex-grow    : 1;
  text-align   : left;
}

.arrow-icon {
  color      : var(--gray-color);
  font-size  : 14px;
  flex-shrink: 0;
}

.user-menu {
  position     : fixed;
  bottom       : 90px;
  left         : calc(var(--sidebar-width) / 2);
  background   : var(--white-color);
  border-radius: var(--radius);
  box-shadow   : var(--shadow);
  padding      : 10px 0;
  min-width    : 150px;
  transform    : translateX(-50%) translateY(10px);
  opacity      : 0;
  visibility   : hidden;
  transition   : all 0.3s ease;
  width        : calc(var(--sidebar-width) * 0.8);
  z-index      : 1000;
}

.sidebar.collapsed .user-menu {
  left: calc(var(--sidebar-collapsed-width) / 2 + 15px);
}

.user-menu.show {
  transform : translateX(-50%) translateY(0);
  opacity   : 1;
  visibility: visible;
}

.sidebar.collapsed .user-menu.show {
  transform: translateX(-13%) translateY(0);
  bottom   : 76px;
}

.menu-item {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 12px 20px;
  cursor       : pointer;
  transition   : var(--transition);
  color        : var(--dark-color);
  font-size    : 14px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .menu-item {
  padding  : 10px 15px;
  font-size: 13px;
}

.menu-item:hover {
  background: var(--gray-light);
}

.menu-item i {
  width     : 20px;
  text-align: center;
}

.sidebar.collapsed .menu-item i {
  width: 16px;
}

.arrow-icon {
  color      : var(--gray-color);
  font-size  : 14px;
  flex-shrink: 0;
}

.sidebar.collapsed .user-name,
.sidebar.collapsed .arrow-icon {
  display: none;
}