/* 对话列表样式 */
.conversation-list-item {
  position: relative;
  padding: 12px 15px;
  margin-bottom: 4px;
  border-radius: 8px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.conversation-list-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.conversation-list-item.active {
  background-color: rgba(64, 158, 255, 0.2);
}

.conversation-list-item.pinned {
  border-left: 3px solid var(--accent-color, #409eff);
}

.conversation-list-item-content {
  flex: 1;
  min-width: 0;
}

.conversation-list-item-title {
  font-size: 14px;
  color: var(--text-primary, #ffffff);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="light"] .conversation-list-item-title {
  color: #000000;
}

.conversation-list-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

[data-theme="light"] .conversation-list-item-meta,
[data-theme="light"] .conversation-list-item-time {
  color: #555555;
}

.conversation-list-item-time {
  margin-left: 8px;
}

.conversation-list-item-menu-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  font-size: 14px;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}

.conversation-list-item:hover .conversation-list-item-menu-btn {
  opacity: 1;
}

.conversation-list-item-menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary, #ffffff);
}

/* 右键菜单样式 */
.conversation-context-menu {
  position: fixed;
  background: rgba(20, 25, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.conversation-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--text-primary, #ffffff);
  font-size: 14px;
  transition: background-color 0.2s;
  position: relative;
}

.conversation-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.conversation-menu-item.active {
  background-color: rgba(64, 158, 255, 0.2);
}

.conversation-menu-item.danger:hover {
  background-color: rgba(245, 108, 108, 0.2);
}

.menu-icon {
  margin-right: 10px;
  font-size: 16px;
}

.menu-arrow {
  margin-left: auto;
  font-size: 18px;
  opacity: 0.6;
}

.conversation-menu-submenu {
  position: fixed;
  background: rgba(20, 25, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  z-index: 10001;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.conversation-menu-submenu .conversation-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--text-primary, #ffffff);
  font-size: 14px;
  transition: background-color 0.2s;
}

.conversation-menu-submenu .conversation-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.3);
}

/* 欢迎界面样式 */

/* [新增] 强制隐藏初始隐藏的元素 */
.initially-hidden {
  display: none !important;
}

/* [新增] 智能体控制栏样式调整：清除底部间距 */
.agent-controls {
  margin-bottom: 0 !important;
}

/* [新增] 主面板清除顶部内边距 */
.main-pane {
  padding-top: 0 !important;
}

/* [新增] 欢迎模式下的主容器：顶部对齐 */
.chat-main-area.welcome-mode {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* [修改] 改为垂直居中 */
  align-items: center !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  /* [修改] 清除顶部间距，紧贴上层 */
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#chat-display-area {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
  /* 底部留白给输入框 */
  box-sizing: border-box;
  transition: opacity 0.35s ease;
}

#chat-display-area.welcome-mode {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
}

.chat-welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 0;
  /* [修改] 移除大位移，使用 Flexbox 布局自然居中 */
  transform: none;
  transition: none;
}

body.chat-entering #chat-display-area.welcome-mode .chat-welcome-screen {
  transition: opacity 2s cubic-bezier(0.22, 0.9, 0.25, 1), transform 2s cubic-bezier(0.22, 0.9, 0.25, 1) !important;
  opacity: 0 !important;
  transform: translateY(-20px) !important;
}

.chat-main-area:not(.welcome-mode) .chat-welcome-screen {
  display: none !important;
}

.chat-main-area:not(.welcome-mode) #inspiration-container {
  display: none !important;
}

.chat-welcome-title {
  font-size: 42px;
  /* [修改] 调大字体 */
  font-weight: 500;
  /* 加粗一点 */
  color: var(--text-primary, #ffffff);
  margin-top: 0 !important;
  margin-bottom: 50px !important;
  /* [修改] 移除顶部边距 */
  text-align: center;
  white-space: nowrap;
  transition: none;
  /* 添加动画 */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* 增加阴影提升可见度 */
}

.chat-welcome-title.typing-active {
  overflow: hidden;
  border-right: 3px solid var(--text-primary, #ffffff);
  display: inline-block;
  animation: blink 0.75s step-end infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

body.chat-entering #chat-display-area.welcome-mode .chat-welcome-title {
  transition: opacity 2s cubic-bezier(0.22, 0.9, 0.25, 1), transform 2s cubic-bezier(0.22, 0.9, 0.25, 1) !important;
  opacity: 0 !important;
  transform: translateY(-20px) !important;
}

/* 输入框区域动画 */
#tab-agent .input-area {
  transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1000;
}

/* [新增] 输入框从中间移动到底部的过渡动画 */
#tab-agent .input-area.transitioning-to-bottom {
  transition: transform 2s cubic-bezier(0.22, 0.9, 0.25, 1), opacity 2s cubic-bezier(0.22, 0.9, 0.25, 1) !important;
}

/* [修复] 智能体对话：输入框始终底部居中（非欢迎模式） */
#tab-agent .chat-main-area {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#tab-agent .chat-main-area.collapsed {
  display: none !important;
}

#tab-agent #chat-display-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
}

#tab-agent .input-area:not(.welcome-mode) {
  position: fixed !important;
  bottom: calc(20px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: min(900px, calc(100% - 40px)) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #050a14 !important;
  background-color: #050a14 !important;
  z-index: 1000 !important;
}

#tab-agent .input-area.collapsed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#tab-agent #inspiration-container.collapsed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#collapsed-chat-icon {
  overflow: visible !important;
}

#collapsed-chat-icon::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 62%, rgba(255, 255, 255, 0.75) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 62% 84%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 78%, rgba(255, 255, 255, 0.7) 0 1.1px, transparent 2.3px),
    radial-gradient(circle at 32% 46%, rgba(255, 255, 255, 0.55) 0 0.9px, transparent 2px),
    radial-gradient(circle at 66% 40%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2.2px),
    radial-gradient(circle at 44% 16%, rgba(255, 255, 255, 0.5) 0 0.9px, transparent 2px),
    radial-gradient(circle at 12% 56%, rgba(255, 255, 255, 0.55) 0 0.9px, transparent 2px),
    radial-gradient(circle at 52% 92%, rgba(255, 255, 255, 0.5) 0 0.9px, transparent 2px),
    radial-gradient(circle at 90% 44%, rgba(255, 255, 255, 0.5) 0 0.9px, transparent 2px);
  filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.45));
  animation: collapsedStarTwinkleMain 6s ease-in-out infinite, collapsedStarDriftMain 26s linear infinite;
}

@keyframes collapsedStarTwinkleMain {
  0% {
    opacity: 0.45;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    opacity: 0.45;
  }
}

@keyframes collapsedStarDriftMain {
  0% {
    transform: rotate(0deg) scale(1);
  }

  100% {
    transform: rotate(360deg) scale(1.02);
  }
}

#tab-agent .input-area:not(.welcome-mode) .collapse-chat-btn {
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
}

#tab-agent .input-area:not(.welcome-mode) .collapse-chat-btn:hover {
  margin-left: 0 !important;
}

#tab-agent .input-area.welcome-mode .collapse-chat-btn {
  display: none !important;
}

#tab-agent .input-area:not(.welcome-mode) .chat-input-row {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* 欢迎模式下的输入框 */
#tab-agent .input-area.welcome-mode {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(780px, calc(100% - 40px)) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  align-self: center !important;
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* 添加动画 */
}

/* [修复] 覆盖 style.css 中对输入框的错误边距设置，确保其紧贴标题 */
#tab-agent .chat-main-area.welcome-mode .input-area.welcome-mode {
  margin: 0 auto !important;
}

/* [修复] 强制移除欢迎模式下主聊天区域的顶部内边距，覆盖 style.css 的干扰 */
#tab-agent .chat-main-area.welcome-mode {
  padding-top: 0 !important;
}


/* 正常模式下的聊天显示区域 */
#chat-display-area:not(.welcome-mode) {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 120px;
  /* 底部留出空间给输入框 */
  padding-top: 20px;
  scroll-behavior: smooth;
  display: block;
  /* 确保是块级元素 */
}

/* 新聊天按钮样式 */
#btn-new-chat {
  background-color: transparent !important;
  border: 3px solid var(--warning-color, #e6a23c) !important;
  color: var(--warning-color, #e6a23c) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#btn-new-chat:hover {
  background-color: rgba(230, 162, 60, 0.14) !important;
  border-color: #f0b45e !important;
  color: #f0b45e !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#btn-new-chat:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

#btn-new-chat img {
  width: 16px;
  height: 16px;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  max-width: 100%;
}

.chat-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.chat-video {
  width: min(100%, 720px);
  max-width: 100%;
  border-radius: 8px;
  display: block;
}

.chat-audio {
  width: min(100%, 720px);
  max-width: 100%;
  display: block;
}

.chat-media-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}