/* 页面的自定义基础样式 */
body {
    font-family: 'Inter', sans-serif; /* 设置全局字体 */
    transition: background-color 0.3s ease-in-out; /* 背景颜色过渡效果 */
}
/* 为日间/夜间模式统一图标颜色 */
.icon-color {
    color: rgb(255 255 255); /* 白色 */
    transition: color 0.3s ease-in-out; /* 颜色过渡效果 */
}
.dark .icon-color {
    color: rgb(255 255 255); /* 白色 */
}

/* 下拉列表的自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px; /* 滚动条宽度 */
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; /* 滚动条轨道背景透明 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* 滚动条滑块颜色 */
    border-radius: 2px; /* 滚动条滑块圆角 */
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); /* 深色模式下滚动条滑块颜色 */
}

/* 主要内容的可见性 */
#main-content {
    opacity: 0; /* 初始透明度为0，用于加载动画 */
    transition: opacity 0.8s ease-in-out; /* 透明度过渡效果 */
}

#main-content.visible {
    opacity: 1; /* 完全显示 */
}

/* 自定义全局焦点样式 (由 focus-visible.js polyfill 驱动) */
:where(a, button, div[role="button"], input, [tabindex]:not([tabindex*="-"])) {
    outline: none;
    /* 设置一个默认的、透明的 box-shadow 以便过渡 */
    box-shadow: 0 0 0 0px rgba(17, 24, 39, 0);
    transition: box-shadow 0.25s ease-in-out;
}

/* 仅当 polyfill 添加 .focus-visible 类时才应用焦点样式 */
:where(a, button, div[role="button"], input, [tabindex]:not([tabindex*="-"])).focus-visible {
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.5); /* 日间模式光圈 */
}

/* 夜间模式样式 */
.dark :where(a, button, div[role="button"], input, [tabindex]:not([tabindex*="-"])) {
    /* 为夜间模式设置一个默认的、透明的 box-shadow */
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0);
}

.dark :where(a, button, div[role="button"], input, [tabindex]:not([tabindex*="-"])).focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6); /* 夜间模式光圈 */
}

/*
  为主要内容区域内的按钮元素提供统一的、优先级更高的过渡效果。
  这确保了即使元素上应用了 Tailwind 的 `transition-colors` 等类，
  transform 和 box-shadow 的过渡动画也能生效。
*/
#main-content a[href],
#main-content button,
#main-content div[role="button"] {
    /* 合并所有需要的过渡效果 */
    transition: color 0.2s ease,
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.25s ease-in-out,
                transform 0.1s ease-in-out,
                filter 0.2s ease-in-out,
                opacity 0.3s ease-in-out;
}

/* 为这些按钮添加统一的点击缩放效果，并排除搜索栏两侧的按钮 */
#main-content a[href]:not(.no-scale):active,
#main-content button:not(.no-scale):active,
#main-content div[role="button"]:not(.no-scale):active {
    transform: scale(0.95);
}