/* ==UserStyle==
@name         Facebook多欄化(Multi-Column)
@version      20250525.09
@namespace    http://tampermonkey.net/
@description  更多欄位總是更好，change column-count、max-post-height。搭配腳本，支持即時切換欄位數量、切換帖子放大、隱藏首頁動態，繁體中文自動按讚、展開留言。More columns always better. With script support, it enables instant switching of column count, toggling post zooming, hiding the home feed, auto-liking in Traditional Chinese, and expanding comments.。
@license      MIT
@downloadURL none
==/UserStyle== */

@-moz-document url("https://www.facebook.com/"), url("https://www.facebook.com/groups/feed/"), url("https://www.facebook.com/?filter=all&sk=h_chr"), url("https://www.facebook.com/?filter=favorites&sk=h_chr"), url("https://www.facebook.com/?filter=friends&sk=h_chr"), url("https://www.facebook.com/?filter=groups&sk=h_chr"), url("https://www.facebook.com/?filter=pages&sk=h_chr"),
regexp("https://www.facebook.com/.*/posts/.*"), regexp("https://www.facebook.com/reel/.*"), regexp("https://www.facebook.com/search/.*"), regexp("https://www.facebook.com/photo.*"), regexp("https://www.facebook.com/profile.php.*"), regexp("https://www.facebook.com/.*/videos/.*"), regexp("https://www.facebook.com/groups/.*"){

  /* === 個人化設定 === */
  :root {
    --column-count: 4; /*所需欄位*/
    --column-gap: 10px; /*彼此間隔*/
    --max-post-height: 75vh; /*所站視窗高度*/
    --sidebar-width: 60px /*左側寬度*/
  }

  /* 中央容器 */
  .x1ceravr.xq1tmr.xvue9z.x193iq5w /*動態、首頁*/,
  .x1xwk8fm.x193iq5w/*搜尋*/ {
    max-width: 100%;
    width: calc(110% - var(--sidebar-width)); /*放大填補縫隙*/
    margin-left: 0px; /*與下一項共同調整，外側無縫*/
    margin-right: -60px;
    padding: 0;
    contain: layout paint
  }
   /*首頁容器fix*/ .xornbnt.xylbxtu.x1q0g3np.xozqiw3.x1cy8zhl.x1qughib.xs83m0k.x1iyjqo2.x1r8uery{
    max-width: 100%;}
    
  /* 左側導航欄 */
  .x9f619.x1ja2u2z.xnp8db0.x112wk31.xnjgh8c.xxc7z9f.x1t2pt76.x1u2d2a2.x6ikm8r.x10wlt62.x1xzczws.x7wzq59.xxzkxad.x9e5oc1/*首頁左*/,
  .xojf56a.xh78kpn.xxzkxad.xcoz2nd.x1cvmir6.x1n2onr6.x1t2pt76.xdt5ytf.x78zum5.x1afcbsf.x2bj2ny/*動態消息左*/,
  .x1vjfegm.x1cvmir6.x1xzczws.x1t2pt76.x2lah0s.xeuugli.x193iq5w.xdt5ytf.x78zum5.x1n2onr6.x9f619/*動態消息左*/ {
    max-width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: transparent;
    position: absolute;
    z-index: 1;
  }

  /* 右側通訊欄 */
  .x1daaz14.xxzkxad.x7wzq59.x10wlt62.x6ikm8r.x1u2d2a2.x1t2pt76.xxc7z9f.xnjgh8c.x112wk31.xnp8db0.x1ja2u2z.x9f619 {
    width: 0%;
    min-width: 0%;
    background-color: transparent;
    position: absolute;
    right: 0;
  }

  /* 排列Post */
  .x1hc1fzr.x1unhpq9.x6o7n8i > div > div/*首頁 動態*/,
  .x1xwk8fm.x193iq5w/*搜尋*/ {
    display: flex;
    flex-wrap: wrap;
    gap: var(--column-gap);
    justify-content: flex-start;
    align-content: flex-start;
    contain: content; /* 限制重繪範圍 */
  }

  /* 控制post尺寸 */
  .x1hc1fzr.x1unhpq9.x6o7n8i > div > div > .x1lliihq,
  .x1xwk8fm.x193iq5w > div {
    width: calc((100% - (var(--column-gap) * (var(--column-count) - 1))) / var(--column-count));
    min-width: 100px;
    max-height: var(--max-post-height);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    box-sizing: border-box;
    flex: 0 0 auto; /* 合併flex-grow/shrink */
    position: relative;
    border-radius: 8px;
    margin-bottom: var(--column-gap);
  }

  /* === Post放大 === */
  @media (min-width: 1900px) {
    .xh8yej3.xrgej4m.xcatxm7.xryxfnj.x1plvlek.x78zum5.xfkwgsy.x1mh14rs.x58fqnu.xrjkcco.x1qjc9v5.x71s49j.x1a2a7pz.xdt5ytf.x1afcbsf.x1ja2u2z.x1n2onr6 {
      width: 50%; /* 固定寬度為50% */
      max-width: none; /* 移除最大寬度限制 */
      margin: 0 25%; /* 左右各25%的空白 */
      flex: 0 0 auto; /* 防止flex佈局影響寬度 */
    }
  }

  /* === 隱藏元素 === */
  footer,
  .x1ceravr.xq1tmr.xvue9z.x193iq5w > .x1yztbdb {
    display: none;
  }
}