/* 修复ALL/2D/3D/4D按钮在亮色和暗黑模式下的尺寸一致性问题 */

/* Glass Container 基础样式 */
.glass-container {
    background: rgba(243, 244, 246, 0.8);
    border: 1px solid rgba(229, 231, 235, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 4px;
}

/* Glass Container 暗黑模式 - 与白天模式保持一致 */
.dark .glass-container {
    background: rgba(22, 27, 34, 0.6);
    border: 1px solid rgba(240, 246, 252, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Category Filter Buttons - 统一尺寸和样式，完全无边框 */
.category-btn {
    color: #6b7280;
    background: transparent !important;
    border: none !important;
    min-width: 60px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    padding: 0 24px;
    cursor: pointer;
    outline: none;
}

.category-btn.active {
    background: white !important;
    color: #ff7a49;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none !important;
    font-weight: 600;
}

.category-btn:hover:not(.active) {
    color: #ff7a49;
    background: rgba(255, 122, 73, 0.05) !important;
    border: none !important;
}

/* 强制移除所有按钮的边框 */
.category-btn,
.category-btn:not(.active),
.category-btn:hover,
.category-btn:focus {
    border: none !important;
    outline: none !important;
}

/* Category Filter Buttons 暗黑模式 - 完全无边框，与白天模式一致 */
.dark .category-btn {
    color: #8b949e !important;
    background: transparent !important;
    border: none !important;
    min-width: 60px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    padding: 0 24px;
}

.dark .category-btn.active {
    background: linear-gradient(135deg, #ff7a49, #e55a2b) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(255, 122, 73, 0.4);
    border: none !important;
    font-weight: 600;
}

.dark .category-btn:hover:not(.active) {
    color: #ff7a49 !important;
    background: rgba(255, 122, 73, 0.1) !important;
    border: none !important;
}

/* 强制移除暗黑模式下按钮的任何边框 */
.dark .category-btn,
.dark .category-btn:not(.active),
.dark .category-btn:hover,
.dark .category-btn:focus {
    border: none !important;
    outline: none !important;
}

/* 搜索结果框 - 基础样式 */
.search-results {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 320px;
    overflow-y: auto;
    z-index: 2147483647;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
}

.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #374151;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: linear-gradient(90deg, rgba(255, 122, 73, 0.05), transparent);
    color: #ff7a49;
}

.search-result-item mark {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
}

.search-result-item.keyboard-selected {
    background: linear-gradient(90deg, rgba(255, 122, 73, 0.1), rgba(255, 122, 73, 0.05));
    color: #ff7a49;
}

/* 搜索结果框 - 暗黑模式 */
.dark .search-results {
    background: linear-gradient(145deg, #161b22, #0d1117) !important;
    border: 1px solid rgba(240, 246, 252, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 强制覆盖搜索结果框的白色背景 */
.dark #search-results {
    background: linear-gradient(145deg, #161b22, #0d1117) !important;
    border: 1px solid rgba(240, 246, 252, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
}

/* 确保搜索结果容器在暗黑模式下正确显示 */
.dark .search-results,
.dark #search-results,
.dark [id="search-results"] {
    background: linear-gradient(145deg, #161b22, #0d1117) !important;
    border: 1px solid rgba(240, 246, 252, 0.12) !important;
    color: #e6edf3 !important;
}

.dark .search-result-item {
    border-bottom: 1px solid rgba(240, 246, 252, 0.08) !important;
    color: #e6edf3 !important;
    border-left: 3px solid transparent;
    background: transparent !important;
}

.dark .search-result-item:last-child {
    border-bottom: none !important;
}

.dark .search-result-item:hover {
    background: rgba(255, 122, 73, 0.1) !important;
    border-left-color: #ff7a49 !important;
    color: #ffffff !important;
}

.dark .search-result-item mark {
    background: rgba(255, 122, 73, 0.2) !important;
    color: #ffffff !important;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
}

.dark .search-result-item.keyboard-selected {
    background: rgba(255, 122, 73, 0.15) !important;
    border-left-color: #ff7a49 !important;
    color: #ffffff !important;
}

/* 强制覆盖搜索结果项的样式 */
.dark #search-results .search-result-item,
.dark #search-results-content .search-result-item,
.dark [id="search-results"] .search-result-item {
    background: transparent !important;
    color: #e6edf3 !important;
    border-bottom: 1px solid rgba(240, 246, 252, 0.08) !important;
}

.dark #search-results .search-result-item:hover,
.dark #search-results-content .search-result-item:hover,
.dark [id="search-results"] .search-result-item:hover {
    background: rgba(255, 122, 73, 0.1) !important;
    color: #ffffff !important;
}

/* 搜索结果项的图标和文本 */
.dark .search-result-item .search-result-icon {
    background: linear-gradient(135deg, #ff7a49, #e55a2b) !important;
    color: #ffffff !important;
}

.dark .search-result-item .search-result-title {
    color: #e6edf3 !important;
}

.dark .search-result-item .search-result-subtitle {
    color: #8b949e !important;
}

.dark .search-result-item:hover .search-result-title {
    color: #ffffff !important;
}

.dark .search-result-item:hover .search-result-subtitle {
    color: #f0f6fc !important;
}

/* 搜索结果项图标 */
.search-result-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ff7a49, #e55a2b);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.dark .search-result-icon {
    background: linear-gradient(135deg, #ff7a49, #e55a2b);
    box-shadow: 0 2px 8px rgba(255, 122, 73, 0.3);
}

/* 搜索结果项内容 */
.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 2px;
}

.search-result-subtitle {
    font-size: 14px;
    opacity: 0.7;
}

.dark .search-result-subtitle {
    opacity: 0.6;
}

/* 修复搜索框在暗黑模式下的样式 */
.dark .search-input {
    background: #161b22;
    border: 1px solid rgba(240, 246, 252, 0.15);
    color: #e6edf3;
    box-shadow: none;
}

.dark .search-input:focus {
    border-color: rgba(240, 246, 252, 0.3);
    box-shadow: none;
}

.dark .search-input:hover:not(:focus) {
    border-color: rgba(240, 246, 252, 0.25);
}

.dark .search-input::placeholder {
    color: #8b949e;
}

/* 3. 搜索框与图标一体化动画 - 由JS添加的class驱动 */

/* 定义搜索容器的基础过渡效果 */
.search-container {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 定义图标的基础颜色和过渡效果 */
.search-icon {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 默认状态下的图标颜色 */
html:not(.dark) .search-icon {
    color: #9ca3af; /* 亮色模式 */
}
.dark .search-icon {
    color: #8b949e; /* 暗黑模式 */
}

/* 悬停状态：容器上移，图标变色 */
.search-container.state-hovered {
    transform: none;
}
.search-container.state-hovered .search-icon {
    color: #6b7280;
}

/* 聚焦状态：容器上移更多，图标变色 */
.search-container.state-focused {
    transform: none;
}
.search-container.state-focused .search-icon {
    color: #6b7280;
}

/* 额外的搜索结果修复 - 确保完全覆盖 */
.dark * [class*="search-result"] {
    background: transparent !important;
}

.dark * [class*="search-results"] {
    background: linear-gradient(145deg, #161b22, #0d1117) !important;
    border: 1px solid rgba(240, 246, 252, 0.12) !important;
}

/* 修复可能的内联样式覆盖 */
.dark .search-results[style*="background"] {
    background: linear-gradient(145deg, #161b22, #0d1117) !important;
}

.dark .search-result-item[style*="background"] {
    background: transparent !important;
}

/* 确保搜索结果文本颜色正确 */
.dark .search-results * {
    color: #e6edf3 !important;
}

.dark .search-results .search-result-item:hover * {
    color: #ffffff !important;
}

/* 修复搜索结果的时间戳显示 */
.dark .search-result-item .text-gray-500,
.dark .search-result-item .text-sm {
    color: #8b949e !important;
}

.dark .search-result-item:hover .text-gray-500,
.dark .search-result-item:hover .text-sm {
    color: #f0f6fc !important;
}

/* 修复搜索结果的代币名称显示 */
.dark .search-result-item .font-semibold,
.dark .search-result-item .font-medium {
    color: #e6edf3 !important;
}

.dark .search-result-item:hover .font-semibold,
.dark .search-result-item:hover .font-medium {
    color: #ffffff !important;
}

/* 通用搜索结果项修复 */
.dark div[id*="search"] div,
.dark div[class*="search"] div {
    background: transparent !important;
}

/* 最高优先级修复 */
html.dark .search-results,
html.dark #search-results {
    background: linear-gradient(145deg, #161b22, #0d1117) !important;
    border-color: rgba(240, 246, 252, 0.12) !important;
}

html.dark .search-result-item {
    background: transparent !important;
    color: #e6edf3 !important;
}

html.dark .search-result-item:hover {
    background: rgba(255, 122, 73, 0.1) !important;
    color: #ffffff !important;
}