/* =========================================================
   plaza-mobile.css — 手机适配（置于所有 plaza-task* 之后）
   重点：顶栏不再三列挤爆；频道可横滑；作品/主页可读
   ========================================================= */

:root {
  --plaza-mobile-gutter: 16px;
}

/* —— Header：≤900px 改为「品牌+账户 / 频道横滑」两行 —— */
@media (max-width: 900px) {
  #main-topbar.plaza-redesign-topbar {
    overflow: visible;
  }

  #main-topbar.plaza-redesign-topbar .plaza-redesign-topbar-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "channels channels" !important;
    align-items: center !important;
    width: calc(100% - (var(--plaza-mobile-gutter) * 2)) !important;
    max-width: none !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    gap: 0 8px !important;
    padding: 8px 0 0 !important;
  }

  #main-topbar.plaza-redesign-topbar .brand {
    grid-area: brand !important;
    justify-self: start !important;
    gap: 8px !important;
    max-width: 100%;
    overflow: hidden;
  }

  #main-topbar.plaza-redesign-topbar .brand small {
    display: none !important;
  }

  #main-topbar.plaza-redesign-topbar .brand strong {
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #main-topbar.plaza-redesign-topbar .brand-mark {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 12px !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channels {
    grid-area: channels !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
    border-top: 1px solid #eef1f6;
    margin-top: 6px;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channels-list {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding: 0 2px !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channels-list::-webkit-scrollbar {
    display: none;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channel {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channel-icon {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channel-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  #main-topbar.plaza-redesign-topbar .top-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-top-publish {
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-guest-login {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    box-shadow: none;
  }

  #main-topbar.plaza-redesign-topbar .account-copy,
  #main-topbar.plaza-redesign-topbar .role-chevron,
  #main-topbar.plaza-redesign-topbar #role-switch,
  #main-topbar.plaza-redesign-topbar .nav-pill,
  #main-topbar.plaza-redesign-topbar .kcs-fs-fab {
    display: none !important;
  }

  #main-topbar.plaza-redesign-topbar .account-btn {
    min-height: 32px !important;
  }

  #main-topbar.plaza-redesign-topbar .points-chip {
    min-height: 30px !important;
    padding: 0 6px !important;
  }

  /* 版心收窄 */
  #view-plaza,
  #view-forum .plaza-community-shell,
  #view-activities,
  #view-activity-detail,
  #view-about,
  #view-maker-profile,
  #view-maker-projects,
  #view-project-detail,
  #view-idea-detail {
    --plaza-shell-gutter: 28px;
  }
}

/* —— 更窄屏：频道只留文字，发布按钮缩成「＋」 —— */
@media (max-width: 640px) {
  #main-topbar.plaza-redesign-topbar .plaza-redesign-topbar-inner {
    width: calc(100% - 24px) !important;
    padding-top: 6px !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channel-icon {
    display: none !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channel {
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-channel[data-channel="about"] .plaza-channel-text {
    /* 仍显示完整「关于我们」，靠横滑容纳 */
  }

  #main-topbar.plaza-redesign-topbar .plaza-top-publish {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
  }

  #main-topbar.plaza-redesign-topbar .plaza-top-publish span[aria-hidden="true"] {
    font-size: 18px !important;
    line-height: 1;
  }

  #view-plaza,
  #view-forum .plaza-community-shell,
  #view-activities,
  #view-activity-detail,
  #view-about,
  #view-maker-profile,
  #view-maker-projects {
    --plaza-shell-gutter: 24px;
  }

  /* 作品页：避免多列卡片撑破 */
  #view-plaza #plaza-cards.card-grid,
  #view-plaza .card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #view-plaza .plaza-masthead,
  #view-plaza .plaza-hero,
  #view-plaza .plaza-channel-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #view-plaza .filter-row,
  #view-plaza .plaza-filters,
  #view-plaza .plaza-works-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 人才目录 */
  #view-plaza .maker-directory-row,
  #view-plaza .maker-card {
    grid-template-columns: 1fr !important;
  }

  /* 社区 home */
  #view-forum .plaza-home-hero {
    grid-template-columns: 1fr !important;
  }

  #view-forum .plaza-home-promo-grid {
    grid-template-columns: 1fr !important;
  }

  #view-activities .plaza-activity-stream-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #view-forum .plaza-home-hero-copy {
    max-width: 100% !important;
  }

  /* 个人主页 */
  #view-maker-profile .plaza-maker-profile-header {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #view-maker-profile .plaza-maker-profile-actions {
    flex-wrap: wrap;
  }

  #view-maker-profile .plaza-maker-profile-project,
  #view-maker-projects .plaza-maker-profile-project {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #view-maker-profile .plaza-maker-profile-row-arrow,
  #view-maker-projects .plaza-maker-profile-row-arrow {
    display: none !important;
  }
}

/* 安全区：刘海 / Home Indicator */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    #main-topbar.plaza-redesign-topbar {
      padding-top: env(safe-area-inset-top, 0px);
    }

    #main-topbar.plaza-redesign-topbar .plaza-redesign-topbar-inner {
      width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    }
  }
}

/* =========================================================
   Community detail / publish / account — 统一 900 / 640
   ========================================================= */

@media (max-width: 900px) {
  /* 覆盖 detail-refine ≤760 隐藏品牌与账户 */
  body:has(:is(
    #view-project-detail.active,
    #view-idea-detail.active,
    #view-forum-post.active,
    #view-maker-profile.active,
    #view-maker-projects.active
  )) #main-topbar.plaza-redesign-topbar .brand {
    display: flex !important;
  }

  body:has(:is(
    #view-project-detail.active,
    #view-idea-detail.active,
    #view-forum-post.active,
    #view-maker-profile.active,
    #view-maker-projects.active
  )) #main-topbar.plaza-redesign-topbar .top-actions {
    display: flex !important;
  }

  body:has(:is(
    #view-project-detail.active,
    #view-idea-detail.active,
    #view-forum-post.active,
    #view-maker-profile.active
  )) #main-topbar.plaza-redesign-topbar {
    top: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  #view-forum-post,
  #view-forum-compose,
  #view-publish-project,
  #view-publish-idea,
  #view-profile,
  #view-my-publish,
  #view-points,
  #view-points-ledger,
  #view-points-checkout {
    --plaza-shell-gutter: 28px;
  }

  /* 作品详情 */
  #view-project-detail .plaza-project-page,
  #view-project-detail.project-redesign {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  #view-project-detail .plaza-project-hero,
  #view-project-detail .detail-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #view-project-detail .plaza-project-body-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  #view-project-detail .plaza-project-sidebar,
  #view-project-detail .detail-side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    position: static !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  #view-project-detail .plaza-project-actions,
  #view-project-detail .engage-toolbar,
  #view-project-detail .detail-actions {
    flex-wrap: wrap !important;
    width: 100%;
    gap: 8px !important;
  }

  #view-project-detail .plaza-project-actions .btn,
  #view-project-detail .engage-toolbar .btn,
  #view-project-detail .detail-actions .btn {
    flex: 1 1 calc(50% - 8px);
  }

  #view-project-detail .engage-convert {
    grid-template-columns: 1fr !important;
  }

  /* 点子详情 */
  #view-idea-detail .detail-page,
  #view-idea-detail.idea-detail-redesign {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  #view-idea-detail .detail-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  #view-idea-detail .detail-side {
    grid-template-columns: 1fr !important;
    position: static !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  #view-idea-detail .detail-actions {
    flex-wrap: wrap !important;
    width: 100%;
    gap: 8px !important;
  }

  #view-idea-detail .detail-actions .btn {
    flex: 1 1 calc(50% - 8px);
  }

  /* 帖子详情 */
  #view-forum-post {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 18px 0 40px !important;
  }

  #view-forum-post .plaza-forum-post-layout,
  #view-forum-post .forum-post-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  #view-forum-post .plaza-forum-rail {
    display: none !important;
  }

  #view-forum-post .plaza-forum-sidebar {
    position: static !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-right: 0 !important;
  }

  #view-forum-post .plaza-forum-sidebar-title {
    display: none !important;
  }

  #view-forum-post .plaza-forum-sidebar .board-list {
    display: flex !important;
    overflow-x: auto !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
  }

  #view-forum-post .plaza-forum-sidebar .board-item {
    flex: 0 0 auto !important;
  }

  #view-forum-post .plaza-forum-post-page {
    max-width: none !important;
  }

  #view-forum-post .plaza-forum-post-actions {
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
  }

  #view-forum-post .plaza-forum-reply-compose {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }

  #view-forum-post .plaza-forum-reply-compose button {
    grid-column: 2;
    width: 100%;
  }

  /* 发帖 */
  #view-forum-compose {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 16px 0 48px !important;
  }

  #view-forum-compose .plaza-forum-compose-head {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #view-forum-compose .plaza-forum-compose-submit {
    width: 100%;
  }

  #view-forum-compose input,
  #view-forum-compose textarea,
  #view-forum-compose select {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  /* 活动详情 */
  #view-activity-detail .plaza-activity-detail-shell,
  #view-activity-detail {
    width: calc(100% - 28px);
    max-width: none;
    margin-inline: auto;
  }

  #view-activity-detail .plaza-activity-detail-cover {
    min-height: 160px;
    border-radius: 12px;
  }

  #view-activity-detail .plaza-activity-detail-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  #view-activity-detail .plaza-activity-detail-cta,
  #view-activity-detail .plaza-activity-detail-secondary {
    width: 100%;
  }

  /* 关于我们 */
  #view-about .plaza-about-shell {
    width: calc(100% - 28px);
    max-width: none;
    margin-inline: auto;
  }

  #view-about .plaza-about-card {
    grid-template-columns: 1fr !important;
    padding: 24px 18px !important;
    gap: 20px !important;
  }

  #view-about .plaza-about-founder-grid {
    grid-template-columns: 1fr !important;
  }

  /* 发布作品 / 点子 */
  #view-publish-project.plaza-publish-view,
  #view-publish-idea.plaza-publish-view {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  #view-publish-project .plaza-publish-page,
  #view-publish-idea .plaza-publish-page {
    width: 100% !important;
    max-width: none !important;
  }

  .plaza-publish-choice-grid,
  .plaza-publish-resource-grid,
  .plaza-publish-path-choices,
  .plaza-publish-conditional,
  #view-publish-idea #pi-points-wrap {
    grid-template-columns: 1fr !important;
  }

  .plaza-publish-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #view-publish-project .plaza-publish-actions .btn,
  #view-publish-idea .plaza-publish-actions .btn {
    width: 100% !important;
  }

  /* 我的资料 */
  #view-profile.plaza-profile {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  #view-profile .plaza-profile-summary {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #view-profile .profile-edit-grid.plaza-profile-form-grid,
  #view-profile .form-grid {
    grid-template-columns: 1fr !important;
  }

  #view-profile .identity-grid.plaza-profile-badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #view-profile .ability-meter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #view-profile .plaza-profile-works-grid,
  #view-profile .plaza-profile-ideas-preview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #view-profile .plaza-profile-save-row .btn {
    width: 100%;
  }

  /* 我的发布 */
  #view-my-publish .plaza-my-publish-shell,
  #view-my-publish {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  #view-my-publish .plaza-my-publish-row {
    grid-template-columns: 1fr !important;
  }

  #view-my-publish .plaza-my-publish-row-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* 积分 */
  .plaza-points-shell,
  .plaza-ledger-shell,
  .plaza-checkout-shell,
  #view-points,
  #view-points-ledger,
  #view-points-checkout {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .plaza-points-record,
  .plaza-points-info-row {
    grid-template-columns: 1fr !important;
  }

  .plaza-checkout-actions {
    flex-direction: column-reverse !important;
  }

  .plaza-checkout-actions .btn {
    width: 100% !important;
  }

  /* 人才主页补强 */
  #view-maker-profile .plaza-maker-profile-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #view-maker-profile .plaza-maker-profile-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #view-maker-profile .plaza-maker-profile-action {
    width: 100%;
    justify-content: center;
  }

  #view-maker-profile .plaza-maker-profile-section-tools {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

@media (max-width: 640px) {
  #view-forum-post,
  #view-forum-compose,
  #view-publish-project,
  #view-publish-idea,
  #view-profile,
  #view-my-publish,
  #view-points,
  #view-points-ledger,
  #view-points-checkout,
  #view-activity-detail,
  #view-about,
  #view-project-detail,
  #view-idea-detail,
  #view-maker-profile,
  #view-maker-projects {
    --plaza-shell-gutter: 24px;
  }

  #view-project-detail .plaza-project-page,
  #view-project-detail.project-redesign,
  #view-idea-detail .detail-page,
  #view-idea-detail.idea-detail-redesign,
  #view-forum-post,
  #view-forum-compose,
  #view-publish-project.plaza-publish-view,
  #view-publish-idea.plaza-publish-view,
  #view-profile.plaza-profile,
  #view-my-publish,
  #view-about .plaza-about-shell,
  #view-activity-detail,
  #view-points,
  #view-points-ledger,
  #view-points-checkout {
    width: calc(100% - 24px) !important;
  }

  #view-project-detail .plaza-project-actions .btn,
  #view-project-detail .detail-actions .btn,
  #view-idea-detail .detail-actions .btn {
    flex: 1 1 100%;
  }

  #view-project-detail .pd-comment-compose,
  #view-idea-detail .comment-compose {
    grid-template-columns: 1fr !important;
  }

  #view-project-detail .pd-comment-compose .btn {
    width: 100%;
  }

  #view-profile .plaza-profile-summary {
    grid-template-columns: 1fr !important;
  }

  #view-profile .identity-grid.plaza-profile-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #view-profile .ability-meter-grid,
  #view-profile .plaza-profile-works-grid,
  #view-profile .plaza-profile-ideas-preview-list {
    grid-template-columns: 1fr !important;
  }

  #view-my-publish .plaza-my-publish-row-actions,
  #view-maker-profile .plaza-maker-profile-actions {
    grid-template-columns: 1fr !important;
  }

  #view-maker-profile .plaza-maker-profile-header {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  #view-maker-profile .plaza-maker-profile-project,
  #view-maker-projects .plaza-maker-profile-project {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .plaza-review-modal,
  .maker-profile-edit-modal,
  .maker-showcase-modal {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 12px auto !important;
  }
}