/* ============================================================
   rwd.css — 桌面版兩欄布局
   768px+ : 左欄表單 / 右欄結果
   480px- : 手機版，本檔完全不干預（所有覆寫在 min-width:768px 以上）
   ============================================================ */

/* ──────────────────────────────────────────────
   768px – 1023px（平板 / 小桌面）
────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* body：拉開 padding，水平置中 */
  body {
    padding: 24px;
    align-items: flex-start;
    min-height: 100vh;
  }

  /* ── .card：拉寬，移除頂層 padding（交給子區塊管） ── */
  .card {
    max-width: 1100px;
    padding: 0;
    border-radius: 20px;
  }

  /* ── card-header：全寬 header，flex column 置中 ── */
  .card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 32px 14px;
    border-bottom: 1px solid #f0f0f0;
  }

  .card-header .logo-header       { margin-bottom: 0; }
  .card-header .logo-header img   { width: 136px; }
  .card-header h2                 { font-size: 20px; margin: 6px 0 4px; }
  .card-header .intro             { margin-bottom: 6px; }
  .card-header .user-status       { margin-bottom: 6px; }

  /* profile-banner & chip：限寬置中 */
  .card-header .profile-banner {
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
  }
  .card-header .profile-chip { margin-bottom: 0; }

  /* ── card-body：左右兩欄 ── */
  .card-body {
    display: flex;
    align-items: flex-start;
    min-height: 560px;
  }

  /* ── 左欄：表單 ── */
  #form-panel {
    width: 320px;
    flex-shrink: 0;
    padding: 20px 22px 28px;
    border-right: 1px solid #f0f0f0;
    /* 左欄在桌面版稍微貼頂部 */
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* ── 右欄：結果 ── */
  #result-panel {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 32px;
  }

  /* ── 空白 Placeholder（右欄無結果時）── */
  #result-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    color: #ccc;
    text-align: center;
    user-select: none;
    gap: 10px;
  }
  #result-placeholder .ph-icon {
    font-size: 54px;
    opacity: 0.3;
  }
  #result-placeholder .ph-text {
    font-size: 15px;
    font-weight: 600;
    color: #ccc;
    line-height: 1.9;
  }

  /* 一旦 JS 加上 has-results，隱藏 placeholder */
  #result-panel.has-results #result-placeholder { display: none; }

  /* ── #result：在桌面版去除卡片外框樣式 ── */
  #result {
    display: none; /* 仍由 JS 控制，clearResultUI 設為 block */
    margin-top: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  /* ── Tab：桌面版移除 tab 切換列，兩個 content 同時顯示 ── */
  .pulsar-tabs   { display: none; }
  .tab-content   { display: block !important; }

  /* 兩個 tab 區塊之間加分隔線 */
  #tab-strategy {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #f0f0f0;
  }

  /* ── 右欄微調 ── */
  .ai-response-box    { max-height: 560px; }
  .carb-target-card   { margin-bottom: 16px; }

  /* 右欄結果區的 margin-top 已清掉，#result 直接用 padding 撐開 */
  #result.visible { display: block; } /* backup: 萬一 JS 加 class */

}

/* ──────────────────────────────────────────────
   1024px+（標準桌面）：左欄加寬
────────────────────────────────────────────── */
@media (min-width: 1024px) {
  #form-panel { width: 360px; }
  .card-header { padding: 22px 40px 16px; }
}

/* ──────────────────────────────────────────────
   767px 以下：新加的包裹層在手機版「透明化」
   規則：wrapper 本身無額外視覺，由 .card 的
         padding:25px 統一控制留白，保持現有手機外觀
────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* 新 wrapper 全部設為 block（預設值），不加 padding / border */
  .card-header,
  .card-body,
  #form-panel,
  #result-panel {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* Placeholder 手機版完全隱藏 */
  #result-placeholder { display: none !important; }

  /* 手機版 #result：還原 result.css 原有的卡片外觀
     （覆蓋掉 768px+ 區塊對 margin/padding/bg/border 的清零）*/
  #result {
    margin-top: 25px !important;
    padding: 25px !important;
    background: #fffaf8 !important;
    border: 1px solid #ffe0d0 !important;
    border-radius: 15px !important;
  }

  /* 手機版維持原 tab 切換機制 */
  .pulsar-tabs        { display: flex !important; }
  .tab-content        { display: none !important; }
  .tab-content.active { display: block !important; }

  /* #tab-strategy 在手機版不需要桌面版的分隔線 */
  #tab-strategy {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}