/* ============================================
   Amaker AI 工坊 — PC 桌面端增强样式
   Phase A: 3 断点 (768 / 1024 / 1440)
   在 muji.css 之后加载，按需覆盖
   ============================================ */

/* ═══════════════════════════════════════════
   A1 · 通用宽屏变量重置
   ═══════════════════════════════════════════ */

/* ── 平板 / 小屏 PC (>= 768px) ── */
@media (min-width: 768px) {
  :root {
    --card-max-width: 100%;
    --card-min-width: 240px;
  }

  /* 整体内容区居中 */
  .header,
  .home-tab-bar,
  .filter-bar {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2 列网格 */
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 卡片微调 */
  .project-card {
    max-width: 100%;
  }
  .project-card:hover {
    transform: translateY(-4px);
  }

  /* 轮播图更大 */
  .card-carousel {
    min-height: 200px;
  }

  /* Header 紧凑 */
  .header {
    padding: 10px 20px;
    flex-direction: row;
    align-items: center;
  }
  .header__logo {
    font-size: 20px;
  }
  .header__logo span {
    font-size: 13px;
  }

  /* 管理页——Header 中按钮压缩 */
  .header .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 30px;
  }

  /* 管理后台 4 列统计卡 */
  .admin-layout .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 两栏图表 */
  .admin-layout .chart-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── 标准 PC (>= 1024px) ── */
@media (min-width: 1024px) {
  :root {
    --card-min-width: 260px;
  }

  /* 3 列网格 */
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  body {
    font-size: 15px;
  }

  /* 详情页宽屏——左右双栏 */
  #detail-section #detail-content {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 创作空间——两栏：参考图 | AI 面板 */
  .creation-card {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
  }

  /* 自由布局编辑器最大化 */
  #free-form-editor-container {
    min-height: 650px;
  }
  #free-form-editor-container svg {
    max-height: 600px;
  }

  /* 打印排版——加大预览 */
  .pdf-preview {
    max-width: 800px;
    margin: 0 auto;
  }
  .pdf-preview__preview {
    min-height: 400px;
  }

  /* 发现页卡片 */
  #discover-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    max-width: 1400px;
  }
  #discover-list > #quick-create-banner,
  #discover-list > #social-strip {
    grid-column: 1 / -1;
  }
  .gallery-card {
    max-width: 100%;
  }

  /* 对话面板——PC 端右侧栏预备 */
  .chat-container {
    max-width: 380px;
  }

  /* 管理后台——大屏全宽 */
  .admin-layout {
    max-width: 1400px;
    margin: 0 auto;
  }

  /* 编辑表单两栏 */
  .edit-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* ── 大屏 PC (>= 1440px) ── */
@media (min-width: 1440px) {
  /* 4 列网格 */
  .project-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 更宽敞 */
  .header,
  .home-tab-bar,
  .filter-bar,
  .project-grid {
    max-width: 1400px;
  }

  #detail-section #detail-content {
    max-width: 1300px;
  }

  /* 4 列发现页 */
  #project-list .gallery-card {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════
   A2 · PC 端导航与 Tab 压缩
   ═══════════════════════════════════════════ */

@media (min-width: 768px) {
  .home-tab-bar {
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
  }

  .home-tab-btn {
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 8px;
  }

  .home-tab-btn.active {
    font-weight: 600;
  }

  /* 排序选择器对齐 */
  #discover-sort-bar {
    margin-left: 12px;
  }
  #discover-sort-bar select {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
  }
}

@media (min-width: 1024px) {
  /* Header 更紧凑 */
  .header {
    padding: 8px 24px;
  }

  .header .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 28px;
    line-height: 1.2;
  }

  /* 搜索/分类栏压缩 */
  .filter-bar {
    padding: 8px 20px;
  }

  .filter-bar__tags {
    gap: 4px;
  }

  .tag {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
  }
}

/* ═══════════════════════════════════════════
   A3 · 详情页 / 编辑器宽屏适配
   ═══════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* 作品详情——大图 + 右侧信息栏 */
  #detail-section .detail-topbar {
    max-width: 1200px;
    margin: 0 auto 16px;
  }

  /* 大图限制高度 > 600px 撑满 */
  .detail-cover {
    max-height: 500px;
    aspect-ratio: auto;
  }
  .detail-cover img {
    object-fit: contain;
  }

  /* 多图展示——横向滚动 */
  .detail-images {
    justify-content: center;
    gap: 12px;
  }
  .detail-images img {
    width: 100px;
    height: 100px;
  }

  /* 互动栏——居中 */
  .detail-interactions {
    justify-content: center;
    gap: 24px;
  }
  .interact-btn {
    font-size: 20px;
    padding: 8px 18px;
  }

  /* 评论——居中 + 限宽 */
  .detail-comments {
    max-width: 600px;
    margin: 0 auto;
  }
  .comment-input-wrap {
    max-width: 600px;
    margin: 0 auto;
  }

  /* 创作卡——AI 面板更宽 */
  .creation-card {
    max-width: 960px;
  }

  /* 参考图区域更大 */
  #ai-ref-carousel {
    min-height: 320px;
  }

  /* 生成结果图——限制最大尺寸 */
  .result-img {
    max-width: 600px;
    margin: 0 auto;
    display: block;
  }
}

/* ═══════════════════════════════════════════
   A4 · 管理后台宽屏
   ═══════════════════════════════════════════ */

@media (min-width: 768px) {
  /* 管理 Tab——居中 */
  .admin-tabs {
    justify-content: center;
  }

  .admin-tab {
    font-size: 14px;
    padding: 10px 20px;
  }

  /* 审核/对话列表——更大预览 */
  .review-item {
    padding: 12px 16px;
  }
  .review-content {
    font-size: 14px;
  }

  /* 挑战赛管理——宽度 */
  .challenge-entries {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (min-width: 1024px) {
  /* 看板分段——3 行 */
  .admin-layout .stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .stat-card {
    padding: 20px;
  }

  /* 图表区左右双栏 */
  .admin-layout .chart-card {
    padding: 24px;
  }

  /* 审核队列——更宽的预览图 */
  .review-item img {
    max-width: 160px;
    max-height: 160px;
  }

  /* 对话监控——宽列表 */
  .conv-row {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════
   自定义滚动条 (PC 端才需要)
   ═══════════════════════════════════════════ */

@media (min-width: 768px) {
  /* 细滚动条 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #D4CFC0;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #B8B5A7;
  }
}

/* ═══════════════════════════════════════════
   打印样式 (PC 端打印时更优)
   ═══════════════════════════════════════════ */

@media print {
  .header,
  .home-tab-bar,
  .filter-bar,
  .btn,
  #home-tab-bar,
  #discover-sort-bar,
  #load-more-wrap,
  #load-more-sentinel,
  .detail-interactions,
  .comment-input-wrap {
    display: none !important;
  }

  .project-grid {
    display: block;
    max-width: 100%;
  }

  .project-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
    margin-bottom: 16px;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ═══════════════════════════════════════════
   通用原子 class（减少 inline style）
   ═══════════════════════════════════════════ */

/* 布局 */
.flex-1 { flex: 1; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.inline-flex { display: inline-flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.w-full { width: 100%; }

/* 颜色 */
.color-error { color: #c4786e; }
.color-muted { color: #8C8C8C; }
.color-green { color: #6B8E6B; }
.color-text { color: #3D3929; }
.bg-muted { background: #F5F5F0; }

/* 字体 */
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* 间距 */
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }

/* 圆角 */
.rounded-8 { border-radius: 8px; }
.rounded-12 { border-radius: 12px; }
.rounded-16 { border-radius: 16px; }

/* 空状态 */
.empty-state { text-align: center; padding: 48px; color: #888; }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state .empty-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.empty-state .empty-subtitle { font-size: 14px; color: #9E9B8D; }

/* ═══════════════════════════════════════════
   C1 · PC 端侧栏对话面板集成
   ═══════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* 侧栏默认打开时，主内容区右侧留空 */
  body.has-chat-sidebar #list-section,
  body.has-chat-sidebar #detail-section,
  body.has-chat-sidebar #pdf-section,
  body.has-chat-sidebar .admin-layout {
    margin-right: 420px;
    max-width: calc(100% - 420px);
  }

  /* 侧栏面板始终可见（不用 FAB 切换） */
  body.has-chat-sidebar .agent-overlay {
    transform: translateX(0);
    box-shadow: -2px 0 12px rgba(0,0,0,0.06);
  }

  /* FAB 按钮在侧栏可见时隐藏 */
  body.has-chat-sidebar .agent-fab {
    display: none;
  }

  /* 关闭按钮保留（可临时收起） */
  body.has-chat-sidebar .agent-header__close {
    display: flex;
  }
}

/* 小屏时 FAB 始终可见 */
@media (max-width: 1023px) {
  body:not(.has-chat-sidebar) .agent-fab {
    display: flex;
  }
}


/* ═══════════════════════════════════════════
   C3 · 骨架屏加载动画
   ═══════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg, #F0EDE4 25%, #E8E4D8 50%, #F0EDE4 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 卡片骨架屏 */
.skeleton-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E8E4D8;
}
.skeleton-card .skeleton-img {
  width: 100%;
  aspect-ratio: 1;
}
.skeleton-card .skeleton-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skeleton-card .skeleton-title {
  height: 18px;
  width: 70%;
}
.skeleton-card .skeleton-meta {
  height: 14px;
  width: 50%;
}
.skeleton-card .skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* 详情页骨架屏 */
.skeleton-detail {
  padding: 16px;
}
.skeleton-detail .skeleton-cover {
  width: 100%;
  height: 300px;
  margin-bottom: 16px;
}
.skeleton-detail .skeleton-h1 {
  height: 28px;
  width: 60%;
  margin-bottom: 12px;
}
.skeleton-detail .skeleton-p {
  height: 16px;
  width: 90%;
  margin-bottom: 8px;
}
.skeleton-detail .skeleton-p.short {
  width: 60%;
}

/* spinner 替换为骨架屏 */
@media (min-width: 768px) {
  .loading .spinner {
    display: none;
  }
  .loading::before {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #F0EDE4 25%, #E8E4D8 50%, #F0EDE4 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .loading::after {
    content: '加载中...';
    display: block;
    text-align: center;
    color: #B8B5A7;
    font-size: 13px;
  }
}