/**
 * OneNav AI — UI 视觉增强（纯 CSS，不影响功能）
 *
 * 安全原则：
 * 1. 只使用 addClass 覆盖，不删除任何现有样式
 * 2. 所有选择器都带 `.onenav-ai-` 前缀或限定在特定容器内
 * 3. 不影响父主题 app.js 的任何交互逻辑
 * 4. 有问题直接删除此文件即可完全恢复
 */

/* ============================================
   1. 卡片增强 — 更好的阴影、hover 效果
   ============================================ */

/* 卡片 hover 时轻微上浮 + 阴影加深 */
.url-body.max {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.url-body.max:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* 暗色模式下的卡片 hover */
.io-black-mode .url-body.max:hover,
.io-dark-mode .url-body.max:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* 卡片图标圆角优化 */
.url-body.max .url-img {
    transition: transform 0.2s ease;
}
.url-body.max:hover .url-img {
    transform: scale(1.05);
}

/* 标签样式优化 */
.url-body.max .url-goto .tga span a {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(108, 71, 255, 0.06);
    border-radius: 10px;
    font-size: 11px;
    color: #6c47ff;
    transition: background 0.15s;
}
.url-body.max .url-goto .tga span a:hover {
    background: rgba(108, 71, 255, 0.12);
    text-decoration: none;
}

/* 暗色模式标签 */
.io-black-mode .url-body.max .url-goto .tga span a,
.io-dark-mode .url-body.max .url-goto .tga span a {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}
.io-black-mode .url-body.max .url-goto .tga span a:hover,
.io-dark-mode .url-body.max .url-goto .tga span a:hover {
    background: rgba(167, 139, 250, 0.2);
}

/* ============================================
   2. 分类标题增强
   ============================================ */

/* 分类标题前加装饰线 */
.content-layout h4.text-gray {
    position: relative;
    padding-left: 12px;
}
.content-layout h4.text-gray::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(180deg, #6c47ff, #a78bfa);
    border-radius: 2px;
}

/* Tab 标签样式优化 */
.nav-pills .nav-link {
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 13px;
    transition: all 0.15s;
}
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #6c47ff, #8b5cf6);
    box-shadow: 0 2px 8px rgba(108, 71, 255, 0.3);
}

/* ============================================
   3. 详情页增强
   ============================================ */

/* 详情页头部卡片优化 */
.siteico {
    transition: transform 0.3s ease;
}
.siteico:hover {
    transform: scale(1.02);
}

/* "相关导航" 标题装饰 */
h2.text-gray.text-lg.my-4 {
    position: relative;
    padding-left: 14px;
}
h2.text-gray.text-lg.my-4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg, #6c47ff, #a78bfa);
    border-radius: 2px;
}

/* ============================================
   4. 搜索框增强
   ============================================ */

/* 搜索输入框 focus 时紫色光晕 */
.search-big input:focus,
.search-default input:focus,
.search-modal input:focus {
    border-color: #6c47ff !important;
    box-shadow: 0 0 0 3px rgba(108, 71, 255, 0.15) !important;
}

/* 搜索引擎 tab 活跃状态 */
.search-engine-tab.active,
.search-type li.active {
    color: #6c47ff !important;
    border-bottom-color: #6c47ff !important;
}

/* ============================================
   5. 滚动条美化
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(108, 71, 255, 0.2);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 71, 255, 0.4);
}

/* 暗色模式滚动条 */
.io-black-mode ::-webkit-scrollbar-thumb,
.io-dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.3);
}
.io-black-mode ::-webkit-scrollbar-thumb:hover,
.io-dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 139, 250, 0.5);
}

/* ============================================
   6. "更多" 按钮美化
   ============================================ */
a.btn-move {
    display: inline-flex;
    align-items: center;
    padding: 2px 12px;
    background: rgba(108, 71, 255, 0.06);
    border-radius: 12px;
    color: #6c47ff !important;
    font-size: 12px;
    transition: all 0.15s;
}
a.btn-move:hover {
    background: rgba(108, 71, 255, 0.12);
    text-decoration: none;
}

/* 暗色模式 "更多" */
.io-black-mode a.btn-move,
.io-dark-mode a.btn-move {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa !important;
}

/* ============================================
   7. 浮动按钮增强
   ============================================ */

/* 回到顶部等浮动按钮 */
.footer-tool .tool-item {
    transition: transform 0.15s ease, background 0.15s ease;
}
.footer-tool .tool-item:hover {
    transform: translateY(-2px);
    background: rgba(108, 71, 255, 0.1);
}

/* ============================================
   8. 公告/横幅美化
   ============================================ */

/* 公告滚动条 */
.bulletin-text {
    border-left: 3px solid #6c47ff;
    padding-left: 10px;
}

/* ============================================
   9. 友情链接卡片
   ============================================ */
.friendlink a {
    transition: color 0.15s;
}
.friendlink a:hover {
    color: #6c47ff;
}

/* ============================================
   10. 加载动画优化
   ============================================ */

/* 图片 lazy load 渐入效果 */
img.lazy[src] {
    animation: fadeInImg 0.3s ease;
}
@keyframes fadeInImg {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   11. 响应式优化
   ============================================ */
@media (max-width: 768px) {
    /* 手机端卡片间距优化 */
    .url-body.max {
        margin-bottom: 12px !important;
    }

    /* 手机端分类标题装饰线保留但缩小 */
    .content-layout h4.text-gray::before {
        height: 50%;
    }
}

/* ============================================
   12. 新标签 "NEW" / "置顶" 样式
   ============================================ */
.badge-new,
.badge-sticky {
    display: inline-block;
    padding: 0 5px;
    margin-right: 4px;
    font-size: 10px;
    line-height: 16px;
    border-radius: 3px;
    vertical-align: middle;
}
.badge-new {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #fff;
}
.badge-sticky {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #fff;
}

/* ============================================
   12.5 搜索框优化 — 限制宽度，更紧凑
   ============================================ */

/* 搜索框容器限制最大宽度并居中 */
.super-search-fm {
    max-width: 600px;
    margin: 0 auto;
}

/* 搜索输入框高度减小 */
#search-text {
    height: 42px;
    font-size: 14px;
}

/* 搜索分组标签居中，间距紧凑 */
.s-type-list.big label {
    padding: 4px 12px;
    margin: 2px 3px;
    font-size: 13px;
}

/* ============================================
   12.6 热门工具 — 使用 sidebar-enhanced.css 的原始样式
   （不再覆盖，保持紧凑布局）
   ============================================ */

/* ============================================
   13. 页脚优化 — 紧凑两列布局
   左：Logo + 描述  右：链接  底部：版权居中
   ============================================ */

/* 隐藏空社交图标 */
.footer-social {
    display: none !important;
}

/* 隐藏二维码列（第3列） */
.main-footer.footer-type-big .col-md-3 {
    display: none !important;
}

/* 前两列各占50% */
.main-footer.footer-type-big .col-md-4,
.main-footer.footer-type-big .col-md-5 {
    flex: 0 0 50%;
    max-width: 50%;
}

/* 链接列垂直居中 */
.main-footer.footer-type-big .col-md-5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Logo 隐藏 */
.footer-logo {
    display: none !important;
}

/* Logo 下方的描述文字隐藏 */
.main-footer.footer-type-big .col-md-4 .text-sm {
    display: none !important;
}

/* 左列（原Logo列）隐藏，链接列占满并居中 */
.main-footer.footer-type-big .col-md-4 {
    display: none !important;
}

.main-footer.footer-type-big .col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}

/* 链接居中 */
.footer-links {
    text-align: center;
}

/* 链接水平排列 */
.footer-links {
    margin-bottom: 0 !important;
}

.footer-links a {
    display: inline-block;
    font-size: 0.85rem;
    color: #555;
    margin: 0 1rem 0.4rem 0;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #6c47ff;
}

/* 整体间距 */
.main-footer.footer-type-big {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
}

.main-footer.footer-type-big .row.my-4 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

.main-footer.footer-type-big .col-12.mb-4 {
    margin-bottom: 0.5rem !important;
}

/* 版权栏 */
.footer-copyright {
    font-size: 0.78rem;
    color: #aaa;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
}

.footer-copyright a {
    color: #888;
    text-decoration: none;
}

.footer-copyright a:hover {
    color: #6c47ff;
}