/* 移动端优化样式 */

/* 基础移动端适配 */
@media (max-width: 768px) {
    /* 容器调整 */
    .container {
        padding: 1rem;
    }

    /* 顶部导航栏 */
    .top-nav {
        padding: 0.75rem 1rem;
    }

    .nav-title {
        font-size: 1.2rem;
    }

    .shortcuts-nav-btn {
        padding: 0.5rem;
    }

    .shortcuts-nav-btn svg {
        width: 20px;
        height: 20px;
    }

    .shortcuts-nav-btn span {
        display: none;
    }

    /* 主内容区域 */
    main {
        padding-top: 4rem;
    }

    /* 工具栏 */
    .top-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .toolbar-btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 80px;
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    .toolbar-btn svg {
        width: 18px;
        height: 18px;
        margin-bottom: 0.25rem;
    }

    .toolbar-btn span {
        font-size: 0.8rem;
    }

    /* 首页布局 */
    .hero {
        text-align: center;
        padding: 2rem 1rem;
    }

    .hero h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .typing-container {
        margin: 1rem 0;
    }

    .typing-text {
        font-size: 1.2rem;
    }

    /* 技能标签 */
    .skill-tags {
        gap: 0.4rem;
        justify-content: flex-start;
    }

    .skill-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    /* 项目卡片 */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .project-card {
        padding: 1.5rem;
    }

    .project-card h3 {
        font-size: 1.2rem;
    }

    .project-links {
        margin-top: 1rem;
    }

    .project-links a {
        display: inline-block;
        padding: 0.5rem 1rem;
        margin: 0.25rem;
        font-size: 0.85rem;
    }

    /* 联系方式 */
    .contact-links {
        flex-direction: column;
        gap: 1rem;
    }

    .contact-links a {
        padding: 1rem;
        text-align: center;
        font-size: 1rem;
    }

    .contact-links svg {
        width: 24px;
        height: 24px;
        margin-bottom: 0.5rem;
    }

    /* 搜索面板 */
    .search-panel {
        width: 100%;
        height: 100%;
    }

    .search-container {
        width: 95%;
        max-width: none;
    }

    .search-header {
        padding: 1rem;
    }

    .search-input-wrapper {
        flex-direction: column;
    }

    .search-input-wrapper input {
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
    }

    .search-shortcuts {
        justify-content: center;
        font-size: 0.8rem;
    }

    .search-filters {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .tags-filter {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tag-filter {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    .search-results {
        max-height: calc(100vh - 300px);
        padding: 0 1rem 1rem;
    }

    .search-result {
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .result-header h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .result-meta {
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.85rem;
    }

    .result-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* 笔记列表 */
    .notes-page {
        padding: 1rem;
    }

    .notes-header {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .notes-header h1 {
        font-size: 1.5rem;
    }

    .notes-stats {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.9rem;
    }

    .notes-stats span {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }

    .notes-toolbar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .notes-toolbar input,
    .notes-toolbar select {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
    }

    .tags-cloud {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .tag-cloud-item {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    .notes-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .note-card {
        padding: 1.25rem;
    }

    .note-card-header h3 {
        font-size: 1.1rem;
    }

    .note-card-topic {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    .note-card-excerpt {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .note-card-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .mini-tag {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }

    /* 知识图谱 */
    .graph-container {
        padding: 1rem;
    }

    .graph-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .graph-controls {
        order: -1;
    }

    .graph-controls button {
        padding: 0.5rem;
        font-size: 1.2rem;
        margin-left: 0.5rem;
    }

    .graph-legend {
        display: none;
    }

    #graph-canvas-container {
        height: 400px;
        margin-bottom: 1rem;
    }

    .graph-sidebar {
        width: 100%;
        max-width: none;
    }

    .graph-tooltip {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    /* 时间线 */
    .timeline-container {
        padding: 1rem;
    }

    .timeline-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .timeline-controls {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .timeline-controls select,
    .timeline-controls input {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
    }

    .timeline-group {
        margin-bottom: 1.5rem;
    }

    .timeline-group-header {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }

    .timeline-item {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    .timeline-item h4 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .timeline-item p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .timeline-item-meta {
        font-size: 0.8rem;
    }

    /* 笔记详情 */
    .note-detail {
        padding: 1rem;
    }

    .note-header {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .note-title {
        font-size: 1.5rem;
    }

    .note-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .note-content {
        font-size: 1rem;
        line-height: 1.7;
    }

    .note-content h1,
    .note-content h2,
    .note-content h3 {
        font-size: 1.3em;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .note-content h4,
    .note-content h5,
    .note-content h6 {
        font-size: 1.1em;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .note-content p {
        margin-bottom: 1rem;
    }

    .note-content ul,
    .note-content ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }

    .note-content li {
        margin-bottom: 0.5rem;
    }

    .note-content blockquote {
        padding: 0.75rem 1rem;
        margin: 1rem 0;
        border-left: 3px solid var(--primary-color);
        font-size: 0.9rem;
    }

    .note-content table {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .note-content th,
    .note-content td {
        padding: 0.5rem;
    }

    .note-content img {
        max-width: 100%;
        height: auto;
        margin: 1rem 0;
    }

    .note-content pre {
        margin: 1rem 0;
        overflow-x: auto;
    }

    .note-content code {
        font-size: 0.9em;
    }

    .note-content pre code {
        font-size: 0.85em;
    }

    .backlinks-section {
        margin-top: 2rem;
        padding: 1rem;
        background: var(--bg-color);
        border-radius: 8px;
    }

    .backlinks-section h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .backlinks-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .backlink-item {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    /* 快捷键面板 */
    .shortcuts-container {
        width: 95%;
        max-height: 85vh;
        top: 2rem;
    }

    .shortcuts-header h2 {
        font-size: 1.2rem;
    }

    .shortcuts-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .shortcuts-section h3 {
        font-size: 1rem;
    }

    .shortcuts-list li {
        padding: 0.5rem 0;
    }

    .shortcuts-list kbd {
        margin: 0 0.5rem;
        padding: 0.2rem 0.4rem;
        font-size: 0.85rem;
    }

    /* 其他通用调整 */
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    p {
        font-size: 1rem;
        line-height: 1.6;
    }

    button {
        min-height: 44px;
        /* 确保按钮易于点击 */
    }

    input,
    textarea {
        font-size: 16px;
        /* 防止iOS缩放 */
    }

    /* 触摸优化 */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    /* 防止文本被选中 */
    .no-select {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* 横屏适配 */
    @orientation :landscape {
        .top-toolbar {
            padding: 0.5rem;
        }

        .toolbar-btn {
            flex: 1 1 calc(33.333% - 0.5rem);
            font-size: 0.8rem;
            padding: 0.5rem 0.25rem;
        }

        .hero h1 {
            font-size: 1.5rem;
        }
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    /* 进一步缩小间距和字体 */
    .container {
        padding: 0.75rem;
    }

    .hero {
        padding: 1.5rem 1rem;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .typing-text {
        font-size: 1rem;
    }

    .skill-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .projects-grid {
        gap: 0.75rem;
    }

    .project-card {
        padding: 1rem;
    }

    .project-card h3 {
        font-size: 1.1rem;
    }

    .contact-links a {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .search-container {
        width: 98%;
    }

    .search-header {
        padding: 0.75rem;
    }

    .search-input-wrapper input {
        font-size: 1rem;
    }

    .search-filters {
        padding: 0.75rem;
    }

    .notes-header {
        margin-bottom: 1rem;
    }

    .notes-header h1 {
        font-size: 1.3rem;
    }

    .notes-grid {
        gap: 0.75rem;
    }

    .note-card {
        padding: 1rem;
    }

    .note-card-header h3 {
        font-size: 1rem;
    }

    .note-card-excerpt {
        font-size: 0.85rem;
    }

    #graph-canvas-container {
        height: 300px;
    }

    .note-title {
        font-size: 1.3rem;
    }

    .note-content {
        font-size: 0.95rem;
    }

    .shortcuts-container {
        width: 98%;
        max-height: 90vh;
    }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sharp-text {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* 减少动画以节省电量 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 暗色模式移动端优化 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .shortcuts-container {
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
    }
}