/* 统一 statusBar 和 tips 样式：透明背景+柔和边框阴影 */
body.light-mode #oml2d-statusBar,
body.light-mode #oml2d-tips {
  /* 透明背景（白色半透，不遮挡页面） */
  background-color: rgba(255, 255, 255, 0.1) !important;
  /* 柔和淡蓝边框（显质感不突兀） */
  border-color: #e0e7ff !important;
  /* 文字色（深灰偏蓝，清晰不刺眼） */
  color: #2d3748 !important;
  /* 统一阴影（淡蓝模糊，增强层次感） */
  box-shadow: 0 2px 8px rgba(144, 164, 255, 0.3) !important;
}

/* 单独处理 tips 的 filter 阴影（与 box-shadow 风格统一） */
body.light-mode #oml2d-tips {
  filter: drop-shadow(0 2px 8px rgba(144, 164, 255, 0.3)) !important;
}

/* ✨ 动画优化：淡入+轻微上浮，避免突兀 */
@keyframes oml2d-display-tips {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ✨ 抖动动画优化：轻微左右晃动，更灵动（替代原生硬抖动） */
@keyframes oml2d-shake-tips {
  0%, 100% { transform: translateX(-50%) scale(1); }
  25% { transform: translateX(-52%) scale(1); }
  75% { transform: translateX(-48%) scale(1); }
}

/* 🔘 按钮容器样式（覆盖内联样式，确保布局正确） */
#oml2d-menus {
  gap: 12px !important; /* 按钮间距，避免拥挤 */
  bottom: 15% !important; /* 覆盖内联 bottom:10%，调整位置 */
  right: 15px !important; /* 覆盖内联 right:10px，微调水平位置 */
  font-size: unset !important; /* 清除内联 font-size:26px，避免影响图标 */
  display: flex !important; /* 横向排列按钮 */
  flex-direction: column !important; /* 垂直排列（符合 Live2D 菜单习惯） */
  align-items: center !important; /* 按钮居中 */
}

/* 🔥 浅色模式（light-mode）- 按钮样式（class 选择器 .oml2d-menus-item，正确！） */
body.light-mode .oml2d-menus-item {
  background-color: rgba(255, 255, 255, 0.9) !important; /* 半透明白背景 */
  border: 1px solid #e5e7eb !important; /* 细浅灰边框 */
  border-radius: 50% !important; /* 圆形按钮 */
  width: 42px !important; /* 按钮大小 */
  height: 42px !important;
  display: flex !important; /* 图标居中 */
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06)) !important; /* 柔和阴影 */
  transition: all 0.25s ease !important; /* 平滑过渡 */
  cursor: pointer !important; /* 鼠标指针 */
  padding: 0 !important; /* 清除默认内边距 */
  margin: 0 !important; /* 清除默认外边距 */
}

/* 浅色模式 - 图标样式（适配 SVG use 标签） */
body.light-mode .oml2d-menus-item .oml2d-icon {
  width: 22px !important; /* 图标大小 */
  height: 22px !important;
  fill: #4a5568 !important; /* 图标颜色（深色，清晰可见） */
  transition: fill 0.25s ease !important;
}

/* 🔥 深色模式（dark-mode）- 按钮样式（class 选择器 .oml2d-menus-item，正确！） */
body.dark-mode .oml2d-menus-item {
  background-color: rgba(26, 32, 44, 0.9) !important; /* 半透明深色背景 */
  border: 1px solid #4a5568 !important; /* 细深灰边框 */
  border-radius: 50% !important; /* 圆形按钮 */
  width: 42px !important; /* 统一按钮大小 */
  height: 42px !important;
  display: flex !important; /* 图标居中 */
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important; /* 深色阴影 */
  transition: all 0.25s ease !important; /* 平滑过渡 */
  cursor: pointer !important; /* 鼠标指针 */
  padding: 0 !important; /* 清除默认内边距 */
  margin: 0 !important; /* 清除默认外边距 */
}

/* 深色模式 - 图标样式（适配 SVG use 标签） */
body.dark-mode .oml2d-menus-item .oml2d-icon {
  width: 22px !important; /* 图标大小 */
  height: 22px !important;
  fill: #e2e8f0 !important; /* 图标颜色（浅色，不刺眼） */
  transition: fill 0.25s ease !important;
}

/* ✨ 交互效果：鼠标悬浮 */
body.light-mode .oml2d-menus-item:hover {
  background-color: rgba(255, 255, 255, 1) !important; /* 背景变实 */
  transform: scale(1.1) !important; /* 轻微放大 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) !important; /* 阴影加深 */
  border-color: #d1d5db !important; /* 边框稍深 */
}

body.dark-mode .oml2d-menus-item:hover {
  background-color: rgba(26, 32, 44, 1) !important; /* 背景变实 */
  transform: scale(1.1) !important; /* 轻微放大 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) !important; /* 阴影加深 */
  border-color: #718096 !important; /* 边框稍浅 */
}

/* ✨ 交互效果：鼠标点击（按压反馈） */
.oml2d-menus-item:active {
  transform: scale(0.95) !important; /* 轻微缩小，模拟按压 */
  transition: transform 0.1s ease !important;
}

/* ✨ 激活状态（如果按钮有选中逻辑，添加 .active 类即可） */
.oml2d-menus-item.active {
  background-color: #4299e1 !important; /* 主题色高亮 */
  border-color: #4299e1 !important;
}

body.light-mode .oml2d-menus-item.active .oml2d-icon {
  fill: #ffffff !important; /* 激活时图标变白 */
}

body.dark-mode .oml2d-menus-item.active .oml2d-icon {
  fill: #ffffff !important; /* 激活时图标变白 */
}

/* ✨ 自定义悬浮提示（替代浏览器默认 title 样式，更美观） */
.oml2d-menus-item::after {
  content: attr(title); /* 读取 title 属性（休息、切换衣服等） */
  position: absolute;
  right: 60px; /* 提示文字在按钮左侧 */
  white-space: nowrap; /* 不换行 */
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 10000; /* 高于按钮层级 */
  pointer-events: none; /* 不影响按钮点击 */
}

body.light-mode .oml2d-menus-item::after {
  background-color: #2d3748;
  color: #ffffff;
}

body.dark-mode .oml2d-menus-item::after {
  background-color: #f7fafc;
  color: #2d3748;
}

.oml2d-menus-item:hover::after {
  opacity: 1;
  visibility: visible;
  right: 55px; /* 轻微偏移，避免紧贴按钮 */
}

/* 补充：确保 SVG 图标容器正确显示（适配 use 标签） */
.oml2d-icon use {
  fill: inherit !important; /* 继承父元素的 fill 颜色，确保图标颜色生效 */
}