@tailwind base;
@tailwind components;
@tailwind utilities;

/* 移除所有按钮和链接的焦点状态效果 */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:focus,
button:focus,
.xht-focus-none:focus {
  outline: none !important;
  box-shadow: none !important;
}

img {
  display: inline
}

/* 在文件末尾添加 */
.xht-outside-circle::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  right: -20px;
  top: 0;
  background: radial-gradient(circle at 100% 100%, transparent 20px, theme('colors.blue.400') 21px);
}

/* 隐藏滚动条但保持滚动功能 */
.xht-scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.xht-scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.xht-xhtheme-aitool-settingpage .components-radio-control {
  margin-top: -5px;
}

.xht-xhtheme-aitool-settingpage .components-radio-control .components-radio-control__input {
  transform: translateY(2px);
}

.xht-radio-horizontal .components-flex {
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.xht-radio-horizontal .components-radio-control__input-container {
  display: inline-flex;
  align-items: center;
}

@keyframes xht-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.xht-animate-fade-in {
  animation: xht-fade-in 0.4s;
}

/* 自定义美化滚动条样式 */
.xht-custom-scrollbar {
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: #dddddd transparent;
  /* Firefox - 滚动条颜色 背景颜色 */
}

/* Webkit 浏览器 (Chrome, Safari, Edge) */
.xht-custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.xht-custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.xht-custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.xht-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #cfcdcd;
}

.xht-custom-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: #cfcdcd;
}

body[class*="page_xhtheme-ai-interact"] {
  background: #eef2f7;
}

body[class*="page_xhtheme-ai-interact"] #wpcontent {
  background: #eef2f7;
}

body[class*="page_xhtheme-ai-interact"] #wpbody-content {
  min-height: calc(100vh - 32px);
  padding-bottom: 56px !important;
  background: #eef2f7;
}

body[class*="page_xhtheme-ai-interact"] #wpfooter {
  background: #eef2f7;
}

body[class*="page_xhtheme-ai-interact"] .wrap {
  margin: 0;
}

/* ========== AI 评论助手专用样式 ========== */

/* 1. 功能列表选中状态 - 浅灰色背景 */
.xht-menu-item-active {
  background-color: #f3f4f6 !important;
}

/* 2. ToggleControl 开关样式 - 主开关（模块级别） */
.xht-interact-toggle .components-form-toggle {
  margin: 0;
  vertical-align: middle;
}

/* 移除 Toggle 点击时的焦点样式 */
.xht-interact-toggle .components-form-toggle .components-form-toggle__input:focus,
.xht-interact-toggle .components-form-toggle.is-focus .components-form-toggle__track,
.xht-interact-toggle .components-form-toggle .components-form-toggle__input:focus+.components-form-toggle__track {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.xht-interact-toggle .components-form-toggle .components-form-toggle__track {
  width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background-color: #e5e7eb !important;
  border: 1px solid transparent !important;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  opacity: 1 !important;
}

.xht-interact-toggle .components-form-toggle.is-checked .components-form-toggle__track {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  opacity: 1 !important;
}

.xht-interact-toggle .components-form-toggle .components-form-toggle__thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: white !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  top: 3px !important;
  left: 3px !important;
  transition: left 0.2s ease !important;
}

.xht-interact-toggle .components-form-toggle.is-checked .components-form-toggle__thumb {
  left: 23px !important;
  transform: none !important;
}

/* 2b. ToggleControl 开关样式 - 次开关（子项级别） */
.xht-interact-toggle-sm .components-form-toggle {
  margin: 0;
  vertical-align: middle;
}

.xht-interact-toggle-sm .components-form-toggle .components-form-toggle__input:focus,
.xht-interact-toggle-sm .components-form-toggle.is-focus .components-form-toggle__track,
.xht-interact-toggle-sm .components-form-toggle .components-form-toggle__input:focus+.components-form-toggle__track {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.xht-interact-toggle-sm .components-form-toggle .components-form-toggle__track {
  width: 36px !important;
  height: 20px !important;
  border-radius: 10px !important;
  background-color: #e5e7eb !important;
  border: 1px solid transparent !important;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  opacity: 1 !important;
}

.xht-interact-toggle-sm .components-form-toggle.is-checked .components-form-toggle__track {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  opacity: 1 !important;
}

.xht-interact-toggle-sm .components-form-toggle .components-form-toggle__thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: white !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  top: 3px !important;
  left: 3px !important;
  transition: left 0.2s ease !important;
}

.xht-interact-toggle-sm .components-form-toggle.is-checked .components-form-toggle__thumb {
  left: 19px !important;
  transform: none !important;
}

/* 3. 用户搜索框高度 */
.xht-user-search-input {
  min-height: 38px !important;
  height: 38px !important;
}

/* 4. 用户列表项样式 - 还原 */
.xht-user-item-compact {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background-color: #fafafa !important;
  border-color: #d1d5db !important;
}

.xht-user-item-compact .xht-text-gray-900 {
  color: #111827 !important;
}

/* 12. UserSelector 选中用户标签 - 深色 Indigo 风格 */
.xht-selected-user-tag {
  background-color: #818cf8;
  border: 1px solid #818cf8;
  color: #ffffff;
  transition: all 0.2s ease;
}

.xht-selected-user-tag:hover {
  background-color: #6366f1;
  border-color: #6366f1;
}

/* 5. 设置范围按钮禁用状态 */
.xht-scope-btn-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.xht-scope-btn-disabled:hover {
  background: transparent !important;
}

/* 6. 弹窗中单选框横向排列靠左 */
.xht-radio-row .components-flex {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 24px !important;
}

.xht-radio-row .components-radio-control__option {
  margin-bottom: 0 !important;
}

/* 7. 分类列表分隔区域 */
.xht-cat-list-section {
  margin-top: 12px;
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 8px;
}

/* 8. 回复风格多选 - 自定义 checkbox 样式 */
.xht-style-checkbox {
  position: relative;
}

.xht-style-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.xht-style-checkbox .xht-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  margin-right: 8px;
  transition: all 0.15s ease;
  background: white;
}

.xht-style-checkbox.xht-checked .xht-check-icon {
  background: #0ea5e9;
  border-color: #0ea5e9;
}

.xht-style-checkbox.xht-checked .xht-check-icon svg {
  display: block;
}

.xht-style-checkbox .xht-check-icon svg {
  display: none;
  width: 12px;
  height: 12px;
  color: white;
}

/* 9. 回复风格选中状态背景 */
.xht-style-item-checked {
  background-color: #f3f4f6 !important;
}

/* 10. 注意事项和功能说明 - 2px虚线边框 */
.xht-notice-box {
  border-style: dashed !important;
  border-width: 2px !important;
}

/* 11. 关键词标签和范围标签 - 4px圆角 */
.xht-keyword-tag,
.xht-scope-tag {
  border-radius: 4px !important;
}

/* 12. 召唤词高亮样式 */
.xh-summon-word {
  color: #2563eb;
  padding: 0 2px;
  font-weight: 500;
}

/* Mobile-safe layout for the interaction log. */
.xht-interact-log,
.xht-interact-log * {
  box-sizing: border-box;
}

.xht-interact-log {
  min-width: 0;
  max-width: 100%;
}

.xht-interact-log a,
.xht-interact-log div,
.xht-interact-log span {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 767px) {
  .xht-interact-log {
    width: 100%;
    overflow: hidden;
  }

  .xht-interact-log a,
  .xht-interact-log div,
  .xht-interact-log span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}