/* ====================================================================
   CooverBox Portfolio — responsive overrides
   Tablet (≤1024px): filters → off-canvas drawer, grid → 2 cols
   Mobile (≤600px): single column, fixed chat composer, compact header
   ==================================================================== */

/* ============================ TABLET ============================ */
@media (max-width:1024px){
  .pf-body{grid-template-columns:1fr;padding:22px 24px 70px}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  .pf-header .inner{padding:0 24px}
  .pf-subtabs{padding:14px 24px 0}

  /* off-canvas filter drawer */
  .pf-filters{position:fixed;top:0;left:0;bottom:0;z-index:60;width:340px;max-width:86vw;max-height:none;
    border-radius:0 20px 20px 0;border-left:none;transform:translateX(-104%);transition:transform .28s ease}
  .pf-filters.is-open{transform:none}
  .pf-filters-scroll{max-height:100vh;height:100%}
  .pf-filterbtn{display:inline-flex}
  .pf-fclose{display:flex;margin-left:auto}
  .pf-filters-head{align-items:center}
  .pf-filters-head .pf-reset{margin-left:auto}
  .pf-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,17,13,.4);opacity:0;
    pointer-events:none;transition:opacity .25s ease}
  .pf-scrim.is-open{opacity:1;pointer-events:auto}

  /* project detail two-col → single col */
  .pf-detail{grid-template-columns:1fr;padding:22px 24px 60px;gap:22px}
  .pf-detail-hero{min-height:320px}

  /* chat takes full width */
  .pf-chat{padding:0 18px}
}

/* ============================ MOBILE ============================ */
@media (max-width:600px){
  /* allow header to wrap so we can put nav as a second row */
  .pf-header .inner{height:auto;min-height:64px;padding:8px 16px;gap:12px;flex-wrap:wrap}
  .pf-logo .mk,.pf-logo .mk img{height:40px}
  .pf-logo .nm{font-size:16px}
  /* nav becomes a horizontal strip under logo+avatar — works for all roles */
  .pf-nav{display:flex;order:99;flex:1 0 100%;justify-content:space-around;
    gap:0;margin:6px -16px 0;padding:8px 16px 0;
    border-top:1px solid rgba(100,70,51,.2)}
  .pf-tab{font-size:13px;padding:8px 10px;gap:6px;line-height:1.1}
  .pf-tab .ic{width:14px;height:14px}
  .pf-head-right{gap:14px;margin-left:auto}
  .pf-refresh span{display:none}
  .pf-refresh{font-size:0}
  .pf-refresh .ic{width:20px;height:20px}
  .pf-user{display:none}
  .pf-avatar{width:38px;height:38px;font-size:16px}

  .pf-subtabs{gap:20px;padding:10px 16px 0}
  .pf-subtab{font-size:16px;padding:6px 2px 12px}

  .pf-body{padding:16px 16px 60px;gap:18px}
  .pf-toolbar{flex-wrap:wrap;padding:12px;gap:10px;border-radius:14px}
  .pf-filterbtn{order:1;height:48px;flex:1}
  .pf-sort{order:2;flex:1;height:48px;font-size:15px}
  .pf-search{order:3;flex:1 0 100%}
  .pf-search input{height:48px;font-size:16px}
  .pf-btn-primary,.pf-ai{order:4;flex:1 0 100%;height:48px;justify-content:center}

  .pf-resultcount{font-size:19px;margin-bottom:16px}
  .pf-viewbar{display:flex}             /* show list/grid toggle (mobile only) */
  .pf-grid{grid-template-columns:1fr;gap:16px}
  .pf-ctitle{font-size:18px}
  .pf-empty img{width:220px}

  /* project detail */
  .pf-detail{padding:16px 16px 60px}
  .pf-detail-info{padding:20px 18px}
  .pf-detail-info h1{font-size:24px}
  .pf-detail-row{flex-wrap:wrap}
  .pf-detail-k{width:100%}

  /* chat — fixed composer at bottom */
  .pf-chat{padding:0 12px;height:calc(100vh - 64px)}
  .pf-chat-messages{padding:18px 0}
  .pf-bubble{max-width:90%;font-size:14px}
  .pf-mini-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .pf-composer-wrap{padding:10px 0 14px}
  .pf-composer-presets{gap:6px}
  .pf-chip{font-size:13px;padding:6px 12px}
}