/* ===========================================================================
 * mes789-system / assets/css/fullbleed.css
 * ---------------------------------------------------------------------------
 * [พาร์ท B] ทำให้โพสต์ "เต็มจอจริง" ตกขอบออกไปเลยแบบเฟซบุ๊ก
 * โหลดหลัง topbar.css เสมอ — ตั้งใจทับค่าของไฟล์ก่อนหน้า
 *
 * ===========================================================================
 * ทำไมรอบก่อนยังไม่เต็มจอ ทั้งที่เอา padding ออกไปแล้ว
 * ===========================================================================
 * รอบที่แล้วผมเอา padding ของ .card ออก แต่ยังเหลืออีก 4 ชั้นที่บีบอยู่:
 *
 *   1. .shell-grid  padding 0 16px      ← ขอบซ้ายขวาของทั้งหน้า
 *   2. .shell-center max-width 680px    ← จำกัดความกว้างคอลัมน์
 *   3. .card.post   border ซ้ายขวา      ← เส้นขอบยังอยู่
 *   4. .post-body   max-width 46ch      ← จำกัดความกว้างข้อความ
 *
 * ชั้นที่ 4 คือตัวที่ผมเพิ่มเข้าไปเองเพื่อคุมความยาวบรรทัดให้อ่านง่าย
 * ซึ่งขัดกับที่ต้องการ "ให้มันยาวออกนอกจอ" โดยตรง
 *
 * ⭐ ทางออกที่เลือก: แยกกติกาตามขนาดจอ
 *
 *   โหมดมือถือ (ต่ำกว่า 1200px)       → เต็มจอสุด ไม่มีขอบใด ๆ ทั้งสิ้น
 *   โหมดเดสก์ท็อป (ตั้งแต่ 1200px)     → คงคอลัมน์กลางไว้ เพราะบนจอ 27 นิ้ว
 *                                        ถ้าปล่อยเต็มจอ บรรทัดจะยาวเกิน
 *                                        200 ตัวอักษร ตาจะหลงบรรทัดตอน
 *                                        ขึ้นบรรทัดใหม่จนอ่านไม่ไหว
 *
 * [ปรับตามที่สั่ง] เดิมเส้นแบ่งอยู่ที่ 1024/1025 — ขยับเป็น 1199/1200 ให้ตรง
 * กับ shell.css เป๊ะ เพราะกติกาใหม่คือ "แท็บเล็ตทุกแนว = รูปแบบมือถือล้วน"
 * (iPad Pro 11" แนวนอน 1194px ก็ยังนับเป็นมือถือ) — สองไฟล์นี้ต้องใช้เลข
 * เดียวกันเสมอ ไม่งั้นช่วง 1025-1199 จะได้หน้าลูกครึ่ง: คอลัมน์เดียวแบบมือถือ
 * แต่การ์ดมีกรอบแบบเดสก์ท็อป ดูแปลกตาแบบที่เคยเป็นอยู่
 * =========================================================================== */

/* ===========================================================================
   โหมดมือถือ (มือถือ + แท็บเล็ตทุกแนว) — เต็มจอสุด ตกขอบออกไปเลย
   =========================================================================== */
@media (max-width: 1199px) {

    /* ชั้นที่ 1 — ขอบของทั้งหน้า */
    .shell-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0;
    }

    /* ชั้นที่ 2 — ความกว้างคอลัมน์ */
    .shell-center {
        max-width: 100% !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* ชั้นที่ 3 — เส้นขอบการ์ด
       เหลือแค่เส้นคั่นบาง ๆ ระหว่างโพสต์ ไม่มีกรอบล้อมอีกต่อไป */
    .shell-center .card.post {
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 0 10px !important;
        background: transparent;
        border-bottom: 8px solid rgba(255, 255, 255, .028) !important;
        padding-bottom: 2px;
    }

    /* ชั้นที่ 4 — ปลดล็อกความกว้างข้อความ ให้ยาวเต็มจอตามที่ต้องการ */
    .shell-center .post-body,
    .shell-center .post-title,
    .mpc-compose-preview {
        max-width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    /* ข้อความยังต้องมีระยะขอบเล็กน้อย ไม่งั้นตัวอักษรจะชนขอบจอจนอ่านยาก
       12px คือระยะที่เฟซบุ๊กใช้ — พอให้หายใจ แต่ไม่เสียพื้นที่ */
    .shell-center .post-head,
    .shell-center .post-title,
    .shell-center .post-body,
    .shell-center .post-actions {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ⭐ รูปภาพ — ชนขอบจอทั้งสองข้าง ไม่มีระยะเว้นเลย
       นี่คือจุดที่ทำให้ "ดูใหญ่และสวยงาม" ตามที่ต้องการ */
    .shell-center .post-media {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        width: 100%;
    }
    .shell-center .post-media img,
    .shell-center .post-media video,
    .post-body .csb-locked-image-wrap,
    .post-body .mes-inserted-media-card,
    .post-body .mes-embed {
        border-radius: 0 !important;
        width: 100% !important;
    }

    /* การ์ดธีมก็เต็มจอเช่นกัน — เดิมถูกจำกัดไว้ที่ 480px */
    .post-body .mpc-theme-card,
    .post-body .mes-theme-card-wrapper,
    .post-body.mpc-plain-boxed,
    .post-body.mpc-cover-mode,
    .post-body.mpc-image-only {
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    /* กล่องเขียนโพสต์ยังคงกรอบไว้ เพราะเป็น "ที่ให้ทำอะไรบางอย่าง"
       ต่างจากการ์ดโพสต์ที่เป็นแค่เนื้อหาให้อ่าน */
    .shell-center .composer.card {
        margin: 0 0 10px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }
}

/* ===========================================================================
   โหมดเดสก์ท็อป — ขยายคอลัมน์กลางขึ้นอีกนิด แต่ยังคงกรอบไว้
   ([ปรับตามที่สั่ง] 1025 → 1200 ให้ตรงกับ shell.css — ดูเหตุผลตรงหัวไฟล์)
   =========================================================================== */
@media (min-width: 1200px) {
    :root { --shell-center-max: 720px; }

    .shell-center .post-body,
    .shell-center .post-title {
        max-width: 100%;   /* ปลดล็อก 46ch — ให้เต็มความกว้างคอลัมน์ */
    }
    .shell-center .post-media {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
}

/* ===========================================================================
   ตัวอักษรใหญ่ขึ้นตามที่ขอ ("ให้ดูใหญ่และสวยงาม")
   ---------------------------------------------------------------------------
   ใช้ clamp() แทนค่าตายตัว = ขนาดไล่ตามความกว้างจอเอง
   จอเล็กไม่ล้น จอใหญ่ไม่จิ๋ว โดยไม่ต้องเขียน media query หลายชั้น
   =========================================================================== */
.shell-center .post-body {
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.12rem);
    line-height: 1.85;
}
.shell-center .post-title {
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    line-height: 1.45;
}

/* ชื่อผู้โพสต์กับเวลา — ให้อ่านง่ายขึ้นเล็กน้อย */
.shell-center .post-head .author { font-size: .95rem; }
.shell-center .post-head .sub { font-size: .78rem; }

/* ===========================================================================
   กติกา 2 ทรง — จัดกึ่งกลางแนวตั้งเสมอ
   ---------------------------------------------------------------------------
   สำคัญมากกับกรณีที่ 2 (ข้อความเกิน 3:2 นิดเดียวแล้วกระโดดเป็น 1:1)
   ถ้าไม่จัดกึ่งกลาง ข้อความจะลอยอยู่ด้านบนแล้วเหลือที่ว่างข้างล่างเยอะ
   ดูเหมือนการ์ดพัง — จัดกึ่งกลางแล้วที่ว่างกระจายบน-ล่างเท่ากัน ดูตั้งใจ
   =========================================================================== */
.shell-center .post-body.mpc-plain-boxed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: height .22s ease;
}
@media (prefers-reduced-motion: reduce) {
    .shell-center .post-body.mpc-plain-boxed { transition: none; }
}

.post-body .mpc-theme-card,
.post-body .mes-theme-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative;
}

/* เงาไล่ระดับตรงขอบล่างตอนถูกครอบ — บอกเป็นนัยว่า "ยังมีต่อ" */
.shell-center .post-body.mpc-truncated::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 96px;
    background: linear-gradient(to bottom, transparent, rgba(12, 10, 10, .96) 82%);
    pointer-events: none;
}

/* ===========================================================================
   เลื่อนยาวไม่มีแบ่งหน้า (infinite-scroll.js)
   =========================================================================== */
.inf-status {
    text-align: center;
    padding: 18px 12px;
    font-size: .86rem;
    color: var(--text-mute, #6f6360);
    min-height: 8px;
}
.inf-status.loading::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(212, 175, 55, .25);
    border-top-color: var(--gold, #d4af37);
    border-radius: 50%;
    animation: infSpin .7s linear infinite;
}
@keyframes infSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .inf-status.loading::before { animation-duration: 2.4s; }
}
.inf-status.done { color: var(--text-mute, #6f6360); font-size: .8rem; }
.inf-status.error { color: var(--red-soft, #e0434d); cursor: pointer; text-decoration: underline; }
.inf-sentinel { height: 1px; }