/* 导航栏搜索框 - 极简风格 */

.nav-search-group {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: var(--is-surface);
}

.nav-search-group .input-group-prepend .input-group-text {
    background: var(--is-surface);
    border: none;
    color: var(--is-element, #ff5722);
    padding-left: 1rem;
}

.nav-search-group #trigger-search {
    border: none;
    background: var(--is-surface);
    padding: 0.5rem 1rem;
}

.nav-search-group #trigger-search:focus {
    background: var(--is-surface);
    box-shadow: none;
}

.nav-search-group .btn {
    background: var(--is-element, #ff5722);
    border: none;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.5 !important;
}

.nav-search-group .btn:hover {
    background: #e64a19 !important; 
    color: #fff;
    transform: none !important;
    box-shadow: none !important;
}

/* 标签轮播容器 */
.nav-search-group {
    position: relative !important;
}

.tag-rotate-container {
    position: absolute;
    left: 3rem; /* 在放大镜图标右侧 */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.tag-rotate-text {
    color: #999;
    font-size: 14px;
    white-space: nowrap;
}

/* 输入框聚焦或有内容时隐藏轮播（通过JS控制，这里做备用） */
.nav-search-group #trigger-search:focus + * + .tag-rotate-container,
.nav-search-group.has-input .tag-rotate-container {
    opacity: 0;
    pointer-events: none;
}

/* ========== 搜索弹框（ri.popup）========== */
/* 弹框内容容器 */
.search-popup-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 弹框头部搜索框 */
.search-popup-header {
    margin-bottom: 15px;
}

.search-popup-header .input-group {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 输入框包装器 */
.search-popup-header .search-input-wrapper {
    position: relative;
    flex: 1;
}

.search-popup-header .form-control {
    border: 1px solid rgba(0,0,0,0.1);
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 12px 40px 12px 16px; /* 右侧留出清除按钮空间 */
    font-size: 16px;
}

/* 清除按钮（在输入框内部） */
.search-popup-header .btn-clear-input {
    display: none; /* 默认隐藏，有内容时显示 */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    background: #e0e0e0;
    border: none;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.search-popup-header .btn-clear-input:hover {
    background: #d0d0d0;
    color: #333;
}

.search-popup-header .btn-clear-input i {
    font-size: 14px;
}

.search-popup-header .btn {
    border-radius: 0 12px 12px 0;
}

.search-popup-header .btn {
    background: var(--is-element, #ff5722);
    border: none;
    color: #fff;
    font-weight: 500;
}

.search-popup-header .btn:hover {
    background: #e64a19;
     color: #fff;
}

/* 快捷按钮区域 */
.search-quick-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-wrap: wrap;
}

.quick-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    border: 1px solid transparent;
    font-weight: 500;
}

.quick-button:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.quick-button[style*="--hover-rgb"]:hover {
    background-color: rgba(var(--hover-rgb), 0.18) !important;
}

.quick-button i {
    font-size: 16px;
}

/* 搜索建议区域 - flex布局，探索发现放底部 */
.search-suggestions {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.suggestions-section {
    margin-bottom: 24px;
}

/* 探索发现放最底部 */
.suggestions-section:last-child {
    margin-top: auto;
    margin-bottom: 0;
}

.suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--is-font, #000);
}

/* 换一换按钮 */
.refresh-guess-btn {
    cursor: pointer;
    color: var(--is-element, #ff5722);
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.refresh-guess-btn:hover {
    background: rgba(var(--is-rgb, 255, 87, 34), 0.1);
    color: var(--is-element, #ff5722);
}

.refresh-guess-btn i {
    font-size: 14px;
}

/* 旋转动画 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 搜索发现图片网格（一排3张） */
.suggestions-section:last-child .suggestions-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.discovery-image-item {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #f5f5f5;
    aspect-ratio: 3 / 2; /* 保持3:2比例 */
}

.discovery-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}

.discovery-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.discovery-image-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 移动端响应式：一排2张 */
@media (max-width: 768px) {
    .suggestions-section:last-child .suggestions-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* 历史搜索区域 - 限制最多2行显示 */
.suggestions-section:first-child .suggestions-list {
    max-height: calc(2 * (40px + 8px)); /* 2行高度：每行约40px（包含padding） + gap 8px */
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.suggestion-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}

.suggestion-item:hover {
    background: rgba(var(--is-rgb, 255, 87, 34), 0.1);
    text-decoration: none;
    color: inherit;
}

/* 猜你想搜角标样式在 main.min.css 中定义（.label-新、.label-促、.label-爆） */

.delete-single {
    color: #ff3b30;
    cursor: pointer;
    font-weight: bold;
    margin-left: 8px;
}

.action-icon {
    cursor: pointer;
    color: var(--is-element, #ff5722);
    font-size: 18px;
}

/* 删除全部按钮 - 大红色 */
#delete-all-button {
    color: #ff3b30 !important;
}

.action-button {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--is-element, #ff5722);
}

.action-button:hover {
    background: rgba(var(--is-rgb, 255, 87, 34), 0.1);
}

.refresh-icon.spin {
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(var(--is-rgb, 255, 87, 34), 0.2);
    border-top-color: var(--is-element, #ff5722);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.search-empty {
    text-align: center;
    color: #8e8e93;
    padding: 40px 20px;
    font-size: 14px;
}
/*侧边弹框公告样式开始*/

/* ==================== 通知抽屉样式 ==================== */
/* 顶部图标按钮 */
.topbar-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ios-gray-4, #f2f2f7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
    position: relative;
    color: var(--ios-gray-1, #1d1d1f);
    font-size: 18px;
    margin-right: 12px; 
}

.topbar-icon-btn:hover {
    background: var(--ios-gray-5, var(--ri-tertiary-bg));
    transform: scale(1.05);
}
img.alignnone.size-full {
    border-radius: 12px;
}
.badge-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--ios-red, #ff3b30);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}
/* 遮罩层 */
.notification-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    visibility: hidden; /* 完全隐藏，不占用空间 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.notification-drawer-overlay.show {
    opacity: 1;
    visibility: visible; /* 显示时可见 */
}

/* 通知抽屉容器 */
.notification-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 70vw; /* 使用视口宽度比例，自适应屏幕 */
    max-width: 800px; /* 最大宽度限制 */
    min-width: 400px; /* 最小宽度限制 */
    height: 100vh;
    background: var(--ri-secondary-bg);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%); /* 完全隐藏到右侧，不依赖固定宽度 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.notification-drawer.show {
    transform: translateX(0); /* 显示时移回原位 */
}

/* 抽屉头部 */
.notification-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ri-tertiary-bg);
    background: var(--is-surface);
    flex-shrink: 0;
}

.notification-drawer-title {
    font-size: 20px;
    font-weight: 700;
    color: var( --is-font);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}



.notification-drawer-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--ri-secondary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--ri-secondary-color);
    font-size: 16px;
}

.notification-drawer-close:hover {
    background: var(--ri-tertiary-bg);
    color: var( --is-font);
    transform: rotate(360deg);
}

/* 抽屉内容区 */
.notification-drawer-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 滚动条美化（右侧内容区域和左侧筛选器） */
.notification-tab-content::-webkit-scrollbar,
.notification-sidebar-filter::-webkit-scrollbar {
    width: 6px;
}

.notification-tab-content::-webkit-scrollbar-track,
.notification-sidebar-filter::-webkit-scrollbar-track {
    background: transparent;
}

.notification-tab-content::-webkit-scrollbar-thumb,
.notification-sidebar-filter::-webkit-scrollbar-thumb {
    background: #d1d1d6;
    border-radius: 3px;
}

.notification-tab-content::-webkit-scrollbar-thumb:hover,
.notification-sidebar-filter::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 内容区域包装器（左侧筛选器 + 右侧内容） */
.notification-content-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

/* 左侧垂直筛选器（固定，顶到底） */
.notification-sidebar-filter {
    width: 40%; /* 使用百分比，自适应屏幕 */
    min-width: 120px; /* 最小宽度 */
    max-width: 220px; /* 最大宽度 */
    background: var(--is-surface);
    border-right: 1px solid var(--ri-tertiary-bg);
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 右侧内容区域 */
.notification-right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ri-secondary-bg);
}

/* iOS风格Tab切换（在右侧内容区域的顶部，固定） */
.notification-tabs {
    background: var(--is-surface);
    padding: 8px;
    margin: 0;
    border-bottom: 1px solid var(--ri-tertiary-bg);
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.notification-tabs .tab-buttons {
    display: flex;
    gap: 4px;
}

.notification-tabs .tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--is-font);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Tab 小红点：用于更新日志/即将推出（方案C：last_seen_ts） */
.notification-tabs .tab-unread-dot {
    position: absolute;
    top: 6px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff3b30;
    box-shadow: 0 0 0 2px rgba(255,255,255,.9);
    display: none;
}

.notification-tabs .tab-btn.active {
    background: #007aff;
    color: white;
}

.notification-tabs .tab-btn:hover:not(.active) {
    background: var(--ri-secondary-bg);
    color: var( --is-font);
}

.notification-tabs .tab-icon {
    font-size: 16px;
    line-height: 1;
}

.notification-tabs .tab-text {
    font-size: 12px;
    font-weight: 500;
}


.filter-sidebar-btn {
    width: 100%;
    padding: 1.5vh 0.8vw; /* 使用视口单位，自适应 */
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    font-size: clamp(12px, 1.3vw, 14px); /* 响应式字体大小 */
    cursor: pointer;
    color: var(--is-font);
    display: flex;
    align-items: center;
    gap: 12px; /* 图标和文字间距 */
    transition: all 0.2s ease;
}

.filter-sidebar-btn:hover {
    background: var(--ri-secondary-bg);
    color: var(--is-element, #ff8315); /* 悬停时使用系统强调色 */
}

.filter-sidebar-btn.active {
    background: rgba(var(--is-rgb, 255, 87, 34), 0.12);
    color: var(--is-element, #ff8315);
    border-left-color: var(--is-element, #ff8315);
    font-weight: 600;
}

/* 筛选器文字 */
.filter-text {
    font-weight: 500; /* 适当加粗 */
    flex: 1;
}

/* 筛选器图标 - 彩色圆角立体按钮（带光泽） */
.filter-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px; /* 圆角方形，更立体 */
    background: var(--ri-tertiary-bg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; /* 用于角标定位 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* 防止图标被压缩 */
    overflow: visible; /* 允许角标显示在外面 */
}

/* 高光效果（光泽） */
.filter-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    border-radius: 14px 14px 0 0;
}

/* 平台通告 - 蓝色（增强光泽） */
.filter-sidebar-btn[data-filter="all_platform"] .filter-icon {
background-image:linear-gradient(to right, #56ccf2,#2f80ed);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.filter-sidebar-btn[data-filter="all_platform"].active .filter-icon {
background-image:linear-gradient(to right, #56ccf2,#2f80ed);
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.5), 0 0 0 4px rgba(0, 122, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 与我相关 - 紫色（增强光泽） */
.filter-sidebar-btn[data-filter="wodexiaoxi"] .filter-icon {
    background: linear-gradient(135deg, #bf62ee 0%, #af52de 50%, #8e44ad 100%);
    box-shadow: 0 4px 12px rgba(175, 82, 222, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.filter-sidebar-btn[data-filter="wodexiaoxi"].active .filter-icon {
    background: linear-gradient(135deg, #bf62ee 0%, #af52de 50%, #8e44ad 100%);
    box-shadow: 0 8px 24px rgba(175, 82, 222, 0.5), 0 0 0 4px rgba(175, 82, 222, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 声音克隆 - 青色（增强光泽） */
.filter-sidebar-btn[data-filter="kelong-gonggao"] .filter-icon {
    background: linear-gradient(135deg, #6ad8ff 0%, #5ac8fa 50%, #34aadc 100%);
    box-shadow: 0 4px 12px rgba(90, 200, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.filter-sidebar-btn[data-filter="kelong-gonggao"].active .filter-icon {
    background: linear-gradient(135deg, #6ad8ff 0%, #5ac8fa 50%, #34aadc 100%);
    box-shadow: 0 8px 24px rgba(90, 200, 250, 0.5), 0 0 0 4px rgba(90, 200, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 灵音AI - 绿色（增强光泽） */
.filter-sidebar-btn[data-filter="peiyin"] .filter-icon {
    background: linear-gradient(135deg, #44d769 0%, #34c759 50%, #28a745 100%);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.filter-sidebar-btn[data-filter="peiyin"].active .filter-icon {
    background: linear-gradient(135deg, #44d769 0%, #34c759 50%, #28a745 100%);
    box-shadow: 0 8px 24px rgba(52, 199, 89, 0.5), 0 0 0 4px rgba(52, 199, 89, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* goo智库 - 橙色（增强光泽） */
.filter-sidebar-btn[data-filter="zhiku"] .filter-icon {
    background: linear-gradient(135deg, #ffaa20 0%, #ff9500 50%, #ff7700 100%);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.filter-sidebar-btn[data-filter="zhiku"].active .filter-icon {
    background: linear-gradient(135deg, #ffaa20 0%, #ff9500 50%, #ff7700 100%);
    box-shadow: 0 8px 24px rgba(255, 149, 0, 0.5), 0 0 0 4px rgba(255, 149, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 其他 - 灰色（增强光泽） */
.filter-sidebar-btn[data-filter="other"] .filter-icon {
    background: linear-gradient(135deg, #9e9ea3 0%, #8e8e93 50%, #6d6d70 100%);
    box-shadow: 0 4px 12px rgba(142, 142, 147, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.filter-sidebar-btn[data-filter="other"].active .filter-icon {
    background: linear-gradient(135deg, #9e9ea3 0%, #8e8e93 50%, #6d6d70 100%);
    box-shadow: 0 8px 24px rgba(142, 142, 147, 0.5), 0 0 0 4px rgba(142, 142, 147, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 图标本身 - 始终白色 */
.filter-icon i {
    font-size: 22px;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 悬停效果 */
.filter-sidebar-btn:hover .filter-icon {
    transform: scale(1.08);
}

.filter-sidebar-btn.active:hover .filter-icon {
    transform: scale(1.1);
}

/* Tab内容区域（可滚动） */
.notification-tab-content {
    flex: 1;
    padding: 16px;
    background: var(--ri-secondary-bg);
    overflow-y: auto;
    overflow-x: hidden;
}

.notification-tab-content .tab-pane {
    display: none;
}

.notification-tab-content .tab-pane.active {
    display: block;
}

/* 加载状态 */
.notification-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--ri-secondary-color);
}

.notification-loading i {
    font-size: 32px;
    margin-bottom: 12px;
    color: #007aff;
}

.notification-loading p {
    font-size: 14px;
    margin: 0;
}

/* 公告列表 */
.notification-list {
    padding: 0;
}

/* 公告项样式（复刻gengxin.php） */
.announcement-item {
    background: var(--is-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.announcement-item:hover {
    transform: scale(1.02);  /* 放大 2% */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);  /* 阴影更大更明显 */
    transition: all 0.3s ease;  /* 增加过渡动画，让变化更平滑 */
}

.announcement-item.pinned {
    background: color-mix(in srgb, var(--is-element, #ff5722) 16%, var(--is-surface));
    border-left: 4px solid #ffc107;
}

.announcement-item:last-child {
    margin-bottom: 0;
}

/* ==================== 更新日志时间轴样式（复刻gengxin.php） ==================== */
.timeline-container {
    position: relative;
    padding: 0;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    width: 2px;
    height: 100%;
    background: var(--ri-tertiary-bg);
}

.timeline-item {
    margin-bottom: 16px;
    background: var(--is-surface);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    position: relative;
    padding-left: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.timeline-item:hover {
    background: var(--ri-tertiary-bg);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #007aff;
    background: var(--is-surface);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.timeline-date {
    color: var(--ri-secondary-color);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.timeline-title {
    color: var( --is-font);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.3;
}

.timeline-description {
    color: var( --is-font);
}

.timeline-description ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-description li {
    margin-bottom: 8px;
    padding-left: 0;
    position: relative;
    line-height: 1.5;
    font-size: 15px;
    color: var( --is-font);
}

.timeline-description li:last-child {
    margin-bottom: 0;
}

/* 更新日志标签徽章 */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
    letter-spacing: 0.2px;
}

.badge-new {
    background: #ff3b30;
    color: white;
}

.badge-improve {
    background: #ff9500;
    color: white;
}

.badge-fix {
    background: #34c759;
    color: white;
}

/* 即将推出功能样式 */
.notification-coming-list {
    padding: 0;
}

.coming-feature-item {
    display: flex;
    background: var(--is-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.coming-feature-item:hover {
    background: var(--ri-tertiary-bg);
}

.coming-feature-item:last-child {
    margin-bottom: 0;
}

.feature-icon {
    font-size: 32px;
    margin-right: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

.feature-content {
    flex: 1;
    position: relative;
    padding-bottom: 36px;
}

.feature-content h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.feature-content p {
    color: var(--ri-secondary-color);
    font-size: 15px;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.feature-progress {
    padding-top: 25px;
}

.progress-bar {
    height: 4px;
    background: var(--ri-tertiary-bg);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}

.progress-fill {
    height: 100%;
    background: #007aff;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 13px;
    color: var(--ri-secondary-color);
    font-weight: 500;
}

.feature-date {
    color: #007aff;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

.expect-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #ffd166;
    background: color-mix(in srgb, var(--is-element, #ff5722) 12%, var(--is-surface));
    color: #d48806;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.expect-btn:hover {
    background: color-mix(in srgb, var(--is-element, #ff5722) 18%, var(--is-surface));
    border-color: #ffb940;
}

.expect-btn:active {
    transform: translateY(1px);
}

.expect-btn.active {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #096dd9;
}

@media (max-width: 768px) {
    .timeline-container::before {
        left: 10px;
    }
    .timeline-item {
        padding-left: 28px;
    }
    .timeline-item::before {
        left: 4px;
    }
}

.announcement-item.collapsible .announcement-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.announcement-item.collapsible.expanded .announcement-content {
    max-height: 45vh;
    overflow-y: auto;
    padding-right: 12px;
}

.announcement-item.collapsible.collapsed .announcement-content {
    max-height: 85px;
}

.announcement-item.collapsible .announcement-content::after {
    content: '';
    display: block;
    height: 0;
    transition: height 0.2s ease, opacity 0.2s ease;
}

.announcement-item.collapsible.collapsed .announcement-content::after {
    height: 24px;
    margin-top: -24px;
    background: linear-gradient(180deg, rgba(242,242,247,0) 0%, rgba(242,242,247,0.9) 100%);
    opacity: 1;
}

.announcement-item.collapsible.expanded .announcement-content::after {
    height: 0;
    opacity: 0;
}

.collapse-btn {
    border: none;
    background: none;
    color: #007aff;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 0;
    font-size: 13px;
}

.announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-radius: 8px;
}

.announcement-badge-wrapper {
    position: relative;
    display: inline-block;
}

.announcement-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: #007aff;
    color: white;
}

.announcement-unread-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    border: 2px solid #f2f2f7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.announcement-badge.badge-top {
    background: linear-gradient(135deg, #ffb400, #ff6b00);
}

.announcement-badge.badge-maintain {
    background: #ff7a18;
    color: #fff;
}

.announcement-badge.badge-upgrade {
    background: #1890ff;
    color: #fff;
}

.announcement-badge.badge-event {
    background: #34c759;
    color: #fff;
}

.announcement-date {
    color: var(--ri-secondary-color);
    font-size: 13px;
    font-weight: 500;
}

.announcement-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.3;
}

.announcement-content {
    font-size: 15px;
    line-height: 1.5;
}

.announcement-footer {
    margin-top: 12px;
    font-size: 13px;
}

.announcement-content p {
    margin: 0 0 12px 0;
}

.announcement-content p:last-child {
    margin-bottom: 0;
}
/* 预约状态通知卡片：只留壳子，阶段条样式直接复用 yuyue_user.css（减少重复 CSS） */
.announcement-content .yuyue-notice-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 12px;
    background: var(--is-surface);
}

.announcement-content .yuyue-notice-text {
    margin-bottom: 10px;
    color: var(--is-font);
}

.announcement-content .yuyue-notice-link-wrap {
    margin-top: 10px;
        font-size: 12px;
}
/* 虚位以待占位符 */
.notification-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    color: var(--ri-secondary-color);
    text-align: center;
}

.notification-placeholder i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
    color: #007aff;
}

.notification-placeholder p {
    font-size: 20px;
    font-weight: 600;
    color: var( --is-font);
    margin: 0 0 8px 0;
}

.notification-placeholder span {
    font-size: 14px;
    color: var(--ri-secondary-color);
}

/* 响应式 */
@media (max-width: 768px) {
    .notification-drawer {
        width: 100vw; /* 移动端全屏 */
        min-width: 100vw;
        max-width: 100vw;
    }
    
    .notification-tabs .tab-btn {
        padding: 1vh 2vw;
        font-size: clamp(11px, 3vw, 13px);
    }
    
    .notification-tabs .tab-icon {
        font-size: clamp(12px, 3.5vw, 16px);
    }
    
    .notification-tabs .tab-text {
        font-size: clamp(10px, 2.5vw, 12px);
    }
    
    .notification-sidebar-filter {
        width: 28%; /* 移动端占28% */
        min-width: 120px;
        max-width: 160px;
    }
    
    .filter-sidebar-btn {
        padding: 14px 8px;
        font-size: clamp(12px, 2.8vw, 14px);
    }
    
    .filter-icon {
        width: 40px;
        height: 40px;
    }
    
    .filter-icon i {
        font-size: 18px;
    }
}
/* ==================== 暗色模式适配（搜索页/搜索弹框） ==================== */
[data-bs-theme='dark'] .nav-search-group,
[data-bs-theme='dark'] .nav-search-group .input-group-prepend .input-group-text,
[data-bs-theme='dark'] .nav-search-group #trigger-search,
[data-bs-theme='dark'] .nav-search-group #trigger-search:focus,
[data-bs-theme='dark'] .search-popup-header .input-group,
[data-bs-theme='dark'] .search-popup-header .form-control,
[data-bs-theme='dark'] .notification-drawer-header,
[data-bs-theme='dark'] .notification-sidebar-filter,
[data-bs-theme='dark'] .notification-tabs,
[data-bs-theme='dark'] .announcement-item,
[data-bs-theme='dark'] .timeline-item,
[data-bs-theme='dark'] .coming-feature-item {
    background: var(--is-surface) !important;
    color: var( --is-font);
}

[data-bs-theme='dark'] .search-popup-header .form-control {
    border-color: var(--ri-border-color) !important;
}

[data-bs-theme='dark'] .notification-drawer,
[data-bs-theme='dark'] .notification-right-content,
[data-bs-theme='dark'] .notification-tab-content,
[data-bs-theme='dark'] .filter-sidebar-btn:hover,
[data-bs-theme='dark'] .notification-tabs .tab-btn:hover:not(.active),
[data-bs-theme='dark'] .timeline-item:hover,
[data-bs-theme='dark'] .coming-feature-item:hover {
    background: var(--ri-secondary-bg) !important;
    color: var( --is-font);
}

[data-bs-theme='dark'] .notification-drawer-header,
[data-bs-theme='dark'] .notification-sidebar-filter,
[data-bs-theme='dark'] .notification-tabs,
[data-bs-theme='dark'] .notification-drawer-close,
[data-bs-theme='dark'] .timeline-container::before,
[data-bs-theme='dark'] .progress-bar {
    border-color: var(--ri-border-color) !important;
}


[data-bs-theme='dark'] .tag-rotate-text,
[data-bs-theme='dark'] .search-empty,
[data-bs-theme='dark'] .notification-loading,
[data-bs-theme='dark'] .notification-placeholder,
[data-bs-theme='dark'] .notification-placeholder span,
[data-bs-theme='dark'] .announcement-date,
[data-bs-theme='dark'] .timeline-date,
[data-bs-theme='dark'] .feature-content p,
[data-bs-theme='dark'] .progress-text {
    color: var(--ri-secondary-color) !important;
}

[data-bs-theme='dark'] .suggestion-item,
[data-bs-theme='dark'] .discovery-image-item,
[data-bs-theme='dark'] .announcement-item.pinned,
[data-bs-theme='dark'] .expect-btn {
    background: var(--ri-tertiary-bg) !important;
    color: var( --is-font);
    border-color: var(--ri-border-color) !important;
}

[data-bs-theme='dark'] .announcement-item.collapsible.collapsed .announcement-content::after {
    background: linear-gradient(180deg, rgba(60,60,60,0) 0%, rgba(60,60,60,0.95) 100%);
}

/*侧边弹框公告样式结束*/