/* 全局字体变量定义 */
:root {
  --primary-font: -apple-system, "SF Pro SC", "SF Pro Display", "SF Pro Icons",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei",
    sans-serif;
  --secondary-font: Georgia, Times, "Times New Roman", serif;
}

#task-container {
  position: fixed;
  top: 3%;
  left: 2%;
  width: 16%;
  height: 19vh;
  z-index: 10;
  background: rgba(238, 238, 238, 0.1);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}
li.task-item{
  margin-bottom: 10px; display: flex; align-items: center;
}
/* 固定对话区域的样式,固定在屏幕底部 */
#dialogue-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 40px;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 998;
  /* 比按钮低一层 */
  pointer-events: auto;
  font-family: var(--primary-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 对话内容区域的样式，设置滚动条和对话间的间隔 */
#dialogue-content {
  height: 100px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 对话条目样式 */
.dialogue-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 25px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 用户对话条目，靠右对齐，背景模拟树叶的形状 */
.user-dialogue {
  background: rgba(139, 69, 19, 0.3);
  border: 2px solid #4B2E02;
  color: #000000;
  font-family: 'Garamond', serif;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  align-self: flex-end;
  max-width: 70%;
  font-family: var(--primary-font);
  font-weight: 400;
  /* 常见字重参考：100: Thin；300: Light；400: Regular/Normal；500: Medium；700: Bold；900: Black */
  letter-spacing: 0.015em;
  /* 控制字母之间的间距 */
}

/* 精灵对话条目，带有更加柔和且自然的发光效果 */
.companion-dialogue {
  background: rgba(102, 153, 255, 0.05);
  /* 更加轻柔的背景颜色，减少视觉压力 */
  color: #ffffff;
  padding: 15px 20px;
  margin: 8px 0;
  max-width: 70%;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  /* 增加模糊效果，使其更柔和 */
  border: none;
  box-shadow:
    0 0 2px 1.5px rgba(173, 216, 230, 0.15),
    /*扩大阴影范围并降低不透明度，使其更为自然*/
    0 0 4px 3px rgba(173, 216, 230, 0.1);
  /* 添加第二层更柔和的散发光晕效果，增强由内而外的发光感 */
  font-family: var(--primary-font);
  font-weight: 300;
  letter-spacing: 0.02em;
  /* 使用em单位，是相对于当前字体大小的单位，0.02em表示增加2%字体大小的间距 */

}

/* 对话输入区域，模拟魔法卷轴的外观，移至对话区域的底部 */
#dialogue-input {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 204, 0.7);
  border: 2px solid #DAA520;
  border-radius: 20px;
  padding: 5px;
}

#input-box {
  flex: 1;
  padding: 5px;
  border-radius: 15px;
  border: 1px solid #ccc;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.5);
}

/* 发送按钮和语音按钮的样式 */
#send-button,
#voice-button {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  border: none;
  cursor: pointer;
  background-size: cover;
}

#send-button {
  background-image: none;
}

/* SVG 样式，控制图标的颜色和大小 */
#icon-svg path {
  fill: gray;
  /* 默认图标颜色 */
}



/* “展开”按钮样式 */
#expand-button {
  position: absolute;
  top: -30px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transform: scale(1.2);
  /* 放大按钮的大小 */

}

/* 悬停效果，改变发送按钮和语音按钮的颜色，改用魔法效果的单一颜色 */
#send-button:hover #icon-svg path,
#voice-button:hover #icon-svg path,
#expand-button:hover svg path {
  fill: rgb(173, 216, 230);
  /* 悬停时图标变为魔法效果的单一颜色 */
}

/* 展开式菜单容器 */
#menu-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}

/* 主菜单按钮 */
#menu-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0c14b);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  transition: all 0.3s ease;
}

#menu-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

#menu-toggle svg {
  width: 28px;
  height: 28px;
}

#menu-toggle svg path {
  fill: #1a1a2e;
}

#menu-toggle.active {
  transform: rotate(90deg);
}

/* 菜单项容器 */
#menu-items {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

#menu-items.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 菜单项 */
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.menu-item:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: translateX(-5px);
  border-color: rgba(212, 175, 55, 0.5);
}

.menu-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.menu-item svg path {
  fill: rgba(255, 255, 255, 0.7);
  transition: fill 0.3s ease;
}

.menu-item:hover svg path {
  fill: #d4af37;
}

.menu-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-family: var(--primary-font);
}

/* 特殊菜单项颜色 */
#camera-button:hover svg path { fill: #4ade80; }
#share-button:hover svg path { fill: #7ec8e3; }
#config-button:hover svg path { fill: #d4af37; }
#music-button:hover svg path { fill: #f472b6; }
#autoplay-button:hover svg path { fill: #a78bfa; }
#fullscreen-button:hover svg path { fill: #60a5fa; }