/* =========================================================================
 * ui-style.css —— 网站通用 UI 交互样式（返回顶部 / 全局静音按钮 / 开启音效弹窗）
 * -------------------------------------------------------------------------
 * 与 ui-helper.js 配套，职责：非小A AI 助手的通用界面样式。
 * 全部使用 .ui- 前缀，不会与网站在原样式或 ai-style.css 冲突。
 * 需在 index.html 的 <head> 中通过 <link> 引入。
 * ========================================================================= */

/* =========================================================================
 * 1. 返回顶部悬浮按钮（仅常见问题答疑/班级组织介绍/大学社团组织显示）
 *    位置：右下角，比小A悬浮球默认位置(bottom:160px)更高，避开底部导航栏。
 * ========================================================================= */
.ui-backtop {
  position: fixed;
  right: 16px;
  bottom: 160px;                 /* 与小A悬浮球默认位置(bottom:160px)平行（左右对齐），且位于小A右侧 */
  z-index: 520;                  /* 高于页面内容/底部导航(100)，低于网站弹层(998+) */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #cfe1ff;
  color: #2f7cf6;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 124, 246, 0.20);
  transition: transform 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ui-backtop.ui-backtop--show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ui-backtop:active { transform: scale(0.9); }

/* =========================================================================
 * 2. 全局音效静音悬浮按钮
 *    默认静音；点击开启时才弹窗询问。
 * ========================================================================= */
.ui-sound-btn {
  position: fixed;
  right: 16px;
  bottom: 84px;                  /* 右下角、悬浮球右侧下方，不与返回顶部重叠 */
  z-index: 520;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #cfe1ff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(47, 124, 246, 0.18);
  transition: transform 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ui-sound-btn:active { transform: scale(0.9); }

/* =========================================================================
 * 3. 开启音效弹窗（半透明遮罩 + 居中卡片）
 * ========================================================================= */
.ui-sound-popup {
  position: fixed;
  inset: 0;
  z-index: 955;                 /* 高于小A对话框(950)，低于网站弹层(999+) */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(23, 42, 76, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ui-sound-popup.ui-sound-popup--show { display: flex; }

.ui-sound-popup-box {
  width: min(320px, 90vw);
  background: #ffffff;
  border-radius: 18px;
  padding: 20px 20px 14px;
  text-align: center;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28);
  animation: uiSoundIn 0.18s ease;
}
@keyframes uiSoundIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.ui-sound-popup-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 6px;
}
.ui-sound-popup-text {
  font-size: 13.5px;
  color: #5b6b7c;
  line-height: 1.7;
  margin-bottom: 16px;
}
.ui-sound-popup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.ui-sound-popup-btn {
  padding: 8px 22px;
  border: none;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s;
}
.ui-sound-popup-btn:active { transform: scale(0.94); }
.ui-sound-popup-btn-cancel { background: #eaf3ff; color: #1e3a8a; }
.ui-sound-popup-btn-ok { background: linear-gradient(135deg, #4a90ff, #2f7cf6); color: #ffffff; }