/* =================================================================== */
/* responsive.css (最终优化版)               */
/* =================================================================== */

/* 大屏幕到中等屏幕 - 保持三列布局，适当调整宽度 */
@media (max-width: 1400px) {
  .main-container {
    grid-template-columns: 1fr 400px 300px;
    gap: 20px;
    max-width: 1200px;
  }
}

/* 13寸MacBook及类似屏幕 - 仍保持三列但调整比例 */
@media (max-width: 1280px) {
  .main-container {
    grid-template-columns: 1fr 350px 280px;
    gap: 18px;
    max-width: 1150px;
  }
}

/* 小屏笔记本 - 改为两列布局 */
@media (max-width: 1200px) {
  .main-container {
    grid-template-columns: 1fr 400px;
    gap: 20px;
  }
  
  .lyrics-section {
    display: none;
  }
}

/* 平板屏幕 - 单列布局 */
@media (max-width: 1024px) {
  .main-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .nav-container {
    padding: 0 20px;
  }

  .search-container {
    margin: 0 20px;
  }

  .lyrics-section {
    display: block;
    position: static;
    max-height: 300px; /* 恢复显示歌词区域，但限制高度 */
  }

  .player-section {
    position: static;
    min-height: auto;
    height: auto;
    min-height: unset; /* 取消PC端的大高度限制 */
  }
  
  .content-section {
    min-height: unset; /* 取消PC端的大高度限制 */
    height: auto;
  }
}

/* 手机屏幕 (768px 及以下) */
@media (max-width: 768px) {
    /* ----------------------------------------------------------- */
    /* 导航栏布局优化 */
    /* ----------------------------------------------------------- */
    .navbar {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 12px 0;
    }

    .nav-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        /* 统一左右内边距，与主内容区域对齐 */
        padding: 0 16px;
        max-width: 100%;
        margin: 0 auto;
    }

    .logo {
        order: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        align-self: center;
        margin-bottom: 5px;
    }

    .logo i {
        color: var(--primary-color);
        font-size: 26px;
    }

    .logo span {
        color: var(--text-color-primary);
        font-size: 22px;
        font-weight: bold;
    }

    .search-container {
        order: 2;
        width: 100%;
        margin: 0;
    }

    .search-wrapper {
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .search-input {
        padding: 14px 16px;
        border-radius: 12px 12px 0 0;
    }

    .search-input::placeholder {
        color: var(--text-color-placeholder);
    }

    .source-select {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding: 12px 16px;
        font-size: 14px;
    }

    .search-btn {
        background: var(--primary-color);
        padding: 14px;
        border-radius: 0 0 12px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 15px;
    }

    .user-menu {
        order: 3;
        align-self: flex-end;
        margin-top: -8px; 
        margin-left: 0;
    }

    .auth-btn {
        background: var(--primary-color-gradient);
        border: none;
        border-radius: 20px;
        padding: 10px 20px;
        color: var(--text-color-primary);
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
    }
    
    .auth-btn:hover {
        background: linear-gradient(135deg, var(--primary-color-hover), #ff4444);
        color: var(--text-color-primary);
    }
    
    /* ----------------------------------------------------------- */
    /* 主要内容区域布局优化 (修复宽度不一致问题) */
    /* ----------------------------------------------------------- */
    .main-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        /* 移除 padding，让它全宽，由子元素控制左右间距 */
        padding: 0;
        max-width: 100%;
    }

    /* 内容板块通用样式 */
    .content-section, .player-section, .lyrics-section {
        background: var(--bg-glass-content);
        border-radius: 12px;
        
        /* 统一内边距 */
        padding: 18px; 
        
        /* 确保边框和内边距包含在宽度内 */
        box-sizing: border-box;
        
        /* 使用 calc() 确保宽度为父容器 - 32px */
        width: calc(100% - 32px);
        
        /* 移除 margin，因为 calc() 已经处理了间距 */
        margin: 0 auto;

        border: 1px solid var(--border-color-light);
        backdrop-filter: blur(10px);
        height: auto; 
        min-height: auto;
    }
    
    /* 歌词区域高度优化 */
    .lyrics-section {
        /* 在这里明确设置高度，以避免内容溢出 */
        max-height: 400px; /* 或者你认为合适的固定高度 */
    }

    .section-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        gap: 8px;
    }

    /* 标签页紧凑样式 */
    .tabs {
        margin-bottom: 16px;
        gap: 8px;
    }

    .tab-btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* 歌曲列表紧凑样式 */
    .search-results {
        max-height: 50vh;
        overflow-y: auto;
    }
    
    /* 歌词容器滚动优化 */
    .lyrics-container {
        max-height: calc(400px - 50px); /* 根据 .lyrics-section 高度调整，减去标题和内边距高度 */
        overflow-y: auto;
    }

    .song-item {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 6px;
        background: rgba(255, 255, 255, 0.03);
    }

    .song-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .song-name {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .song-artist {
        font-size: 13px;
    }

    .song-duration {
        font-size: 12px;
        margin-left: 12px;
    }
    
    .song-actions {
        margin-right: 8px;
    }

    /* 播放器区域紧凑样式 */
    .current-cover {
        width: 120px;
        height: 120px;
        margin: 0 auto 16px;
        border-width: 4px;
    }

    .player-controls {
        gap: 12px;
        margin: 16px 0;
    }

    .control-btn.small {
        width: 44px;
        height: 44px;
    }

    .play-btn {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    /* 进度条样式 */
    .progress-container {
        margin: 16px 0;
    }

    .progress-bar {
        height: 4px;
        margin-bottom: 8px;
    }

    .time-info {
        font-size: 12px;
    }
    
    .quality-container, .volume-container, .download-container {
        margin-bottom: 16px;
    }

    /* 确保触控区域足够大 */
    button, .tab-btn, .song-item {
        min-height: 44px;
    }

    .action-btn {
        min-width: 32px;
        min-height: 32px;
    }

    /* 防止iOS输入框缩放 */
    input[type="text"], input[type="email"], input[type="password"], select, textarea {
        font-size: 16px !important;
    }
}