/* 全局字体变量定义 */
: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;
}

#panorama-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
  cursor: grab;
}

/* Live2D Character Container */
#live2d-container {
  position: fixed;
  left: 5%;
  bottom: 15%;
  width: 210px;
  height: 315px;
  z-index: 500;
  pointer-events: auto;
  overflow: visible;
  cursor: grab;
  user-select: none;
}
#live2d-container.dragging { cursor: grabbing; }

#live2d-canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* 固定对话区域的样式,固定在屏幕底部 */
#dialogue-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 800px;
  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: 999999;
  /* 确保显示在最上层 */
  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);
  /* 悬停时图标变为魔法效果的单一颜色 */
}

/* 全屏按钮样式 */
/* 全屏按钮和音乐按钮的样式统一调整 */
#fullscreen-button,
#music-button,
#autoplay-button,
#reading-button {
  position: fixed;
  bottom: 30px;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  cursor: pointer;
  padding: 12px;
  transition: all 0.3s ease;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#fullscreen-button:hover,
#music-button:hover,
#autoplay-button:hover,
#reading-button:hover {
  transform: scale(1.05);
  background: rgba(0, 0, 0, 0.5);
}

#fullscreen-button:active,
#music-button:active,
#autoplay-button:active,
#reading-button:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.7);
}

#fullscreen-button svg,
#music-button svg,
#autoplay-button svg,
#reading-button svg {
  width: 100%;
  height: 100%;
}

#fullscreen-button svg path,
#music-button svg path,
#autoplay-button svg path,
#reading-button svg path {
  fill: rgba(255, 255, 255, 0.3);
  transition: fill 0.3s ease;
}

#fullscreen-button:hover svg path,
#music-button:hover svg path,
#autoplay-button:hover svg path,
#reading-button:hover svg path {
  fill: white;
}

#music-button    { right: 100px; }
#fullscreen-button { right: 30px; }
#autoplay-button { right: 170px; }
#reading-button  { right: 240px; }

/* ── 用户名弹窗 ── */
#modal-overlay {
  display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center; align-items: center;
}
#modal-box {
  background: #fff8ee;
  padding: 32px 36px;
  border-radius: 14px;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
#modal-box h2 {
  margin: 0 0 18px;
  font-size: 18px;
  color: #5c4a32;
  font-weight: bold;
}
#modal-input {
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid #c8b89a;
  font-size: 15px;
  width: 200px;
  outline: none;
}
#modal-input:focus { border-color: #7dba84; }
#modal-submit {
  display: block;
  margin: 18px auto 0;
  padding: 9px 28px;
  background: #7dba84;
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 15px;
  cursor: pointer;
}
#modal-submit:hover { background: #5fa867; }

/* ── 语音按钮录音状态 ── */
#voice-button.recording {
  background: rgba(200, 50, 50, 0.55);
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}