/* ==========================================
       POSTS GRID & PROGRESSIVE SLIDESHOW
    ========================================== */
    .portfolio { width: 100%; }
    /* 🌟 masonry เรียงโพสต์ซ้าย→ขวา (row-major) คงสัดส่วนรูปเดิม — ความสูง row-span คำนวณด้วย JS 🌟 */
    .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1px; column-gap: 8px; align-items: start; padding: 0 8px; width: 100%; max-width: 600px; margin: 0 auto; }

    .grid-thumb {
        border-radius: 24px;
        background: var(--bg3); position: relative; cursor: pointer; overflow: hidden;
        display: block; width: 100%; min-height: 150px;
        opacity: 0; transform: translateY(30px) scale(0.9);
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    }
    
    .grid-thumb:active { transform: scale(0.96); }
    .grid-thumb.focusing { transform: scale(0.92); opacity: 0.8; }
    
    .grid-thumb::before {
        content: ''; position: absolute; inset: 0; background: var(--bg3);
        animation: pulse 1.5s infinite; z-index: 0; transition: opacity 0.3s ease;
    }
    .grid-thumb.loaded::before { opacity: 0 !important; pointer-events: none; animation: none !important; }

    .grid-main-img { width: 100%; display: block; height: 100%; min-height: 150px; object-fit: cover; transition: opacity 0.4s ease; position: relative; z-index: 1; opacity: 0; }
    .grid-main-img.loaded { opacity: 1; } 
    /* ไอคอนบนการ์ด (อัลบั้ม/แท็ก/รีโพสต์/ถูกใจ) ขึ้นพร้อมรูปเท่านั้น — ไม่โผล่ทับกล่องที่ยังกระพริบโหลด */
    .grid-thumb > div:not(.grid-ph-wrap):not(.pu-loading-bar):not(.grid-select-indicator) { transition: opacity 0.3s ease; }
    .grid-thumb:not(.loaded):not(.uploading) > div:not(.grid-ph-wrap):not(.pu-loading-bar):not(.grid-select-indicator) { opacity: 0; }

    /* 🌟 เอฟเฟกต์โหลดแบบเดียวกับหน้าฟีด (feed.html .v2-grid-*): การ์ดอยู่ในที่ทันที ไม่เด้งเข้ามา
       รูปตัวอย่างความละเอียดต่ำ (ph_mini) เบลอเป็นชั้นล่าง → รูปจริงเฟดทับ 0.4s แล้วชั้นเบลอจางหาย
       ชั้นคลิปมุมโค้ง (.grid-ph-wrap) แยกจากตัวรูปเบลอ กัน Safari ไม่คลิปมุมตอนมี filter — ดูคอมเมนต์ใน feed.html */
    .grid-thumb, .grid-thumb.show { opacity: 1; transform: none; animation: none; }
    .grid-thumb::before { animation: none; }
    .grid-ph-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; transition: opacity 0.3s ease; }
    .grid-ph { width: 100%; height: 100%; object-fit: cover; filter: blur(20px); transform: scale(1.35); display: block; }   /* 🐞 เบลอทำขอบภาพจางโปร่ง — ขยายพอ (×1.35) ไม่งั้นการ์ดเล็กเห็นเป็นวงรีเทามุมมืดตอนรูปจริงยังโหลด */
    
    .grid-slide-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; z-index: 2; pointer-events: none; }
    .grid-slide-img.active-slide { opacity: 1; }
    /* 🎞️ ปกเคลื่อนไหวของโพสต์วิดีโอ — อยู่เหนือภาพปกนิ่ง ใต้ไอคอน/กรอบ (จางขึ้นเมื่อโหลดเสร็จ) */
    .hq-vanim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; pointer-events: none;
        border-radius: inherit; opacity: 0; transition: opacity .35s ease; }
    .hq-vanim.on { opacity: 1; }
    /* 🐞 ตอนรูปสไลด์เฟดเปลี่ยน เห็นเส้นขอบขาว ๆ ไม่เต็มการ์ดแวบ ๆ: ชั้นรูประหว่างเฟดถูกแยกไปวาดเอง ขอบเศษพิกเซล/มุมโค้งไม่ตรงกับการ์ด
       → ขยายรูปเกินขอบ 1px ทุกด้าน + มุมโค้งตามการ์ด */
    /* 🐞 รอบก่อนขยายรูปสไลด์เกินขอบ 1px → รูปสไลด์ใหญ่กว่ารูปปกนิดเดียว เปลี่ยนรูปแล้วเห็นโพสต์ "ขยับ" → กลับมาขนาดเท่ารูปปกเป๊ะ
       ขอบขาวแก้ด้วยพื้นการ์ดสีดำระหว่างเฟดแทน (ขอบเศษพิกเซลที่เล็ดลอดเห็นเป็นดำ กลืนกับรูป ไม่ใช่สีพื้นสว่าง) */
    .grid-slide-img, .pm-item .pm-slide { border-radius: inherit; }
    /* 🐞 จังหวะเปลี่ยนรูป การ์ดทั้งใบ (กรอบ+ไอคอน) ขยับ ~1px แล้วเด้งกลับตอนเฟดจบ (วัดจากคลิป 12-21-47):
       ระหว่างเฟด เบราว์เซอร์ยกการ์ดไปวาดเป็นชั้นแยกชั่วคราว ชั้นนั้นถูกปัดตำแหน่งให้ลงพิกเซลเต็ม (การ์ดในกริดอยู่ตำแหน่งเศษพิกเซล)
       → การ์ดที่มีหลายรูป (มีสไลด์) เป็นชั้นแยก "ถาวร" ตำแหน่งจึงเท่าเดิมตลอด ก่อน/ระหว่าง/หลังเฟด */
    .grid-thumb:has(> .grid-slide-img), .pm-item:has(> .pm-slide), .v2-grid-thumb:has(> .v2-slide-img) { will-change: transform; }
    .grid-thumb.loaded, .pm-item.ready { background-color: #000; }

    @keyframes waterDrop { 0% { opacity: 0; transform: translateY(30px) scale(0.9) stretch(1.05, 0.95); border-radius: 30px; } 50% { opacity: 1; transform: translateY(-5px) scale(1.02) stretch(0.98, 1.02); border-radius: 20px; } 100% { opacity: 1; transform: translateY(0) scale(1); border-radius: 24px; } }
    .grid-thumb.show { animation: waterDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

    /* 🌟 สถานะกำลังอัปโหลด: รูปจางกระพริบ + แถบโหลดสีขาวด้านบนในกรอบ 🌟 */
    .grid-thumb.uploading .grid-main-img, .grid-thumb.uploading .grid-slide-img { animation: puBlink 1.1s ease-in-out infinite; }
    @keyframes puBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
    .pu-loading-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 6; background: rgba(255,255,255,0.25); overflow: hidden; pointer-events: none; }
    .pu-loading-bar::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8); animation: puBar 1.1s ease-in-out infinite; }
    @keyframes puBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }
    
    /* 🌟 ไอคอนสีขาวล้วน 🌟 */
    .grid-multi-icon { position: absolute; top: 10px; left: 10px; color: #fff; font-size: 20px; font-weight: 300; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8)); pointer-events: none; z-index: 3;}
    .grid-like-icon { position: absolute; top: 10px; right: 10px; color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8)); pointer-events: none; z-index: 3;}
    .grid-tag-info { position: absolute; bottom: 10px; left: 10px; font-size: 22px; color: #fff; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8)); pointer-events: none; z-index: 3;}
    
    /* 🌟 โครงกระดูกโพสต์ในโปรไฟล์ — ใช้หน้าตาเดียวกับ "โพสต์สำรวจ" ในหน้าฟีดเป๊ะ ๆ
       คือ 2 ชิ้น (4:5 กับ 1:1) พร้อมอนิเมชันปาดแสงวิ่งผ่าน ไม่ใช่กะพริบทึบ ๆ 🌟 */
    .profile-grid-skeleton { display: none; column-count: 2; column-gap: 8px; padding: 0 8px; max-width: 600px; margin: 0 auto; }
    .profile-grid-skeleton.active { display: block; }
    /* 🐞 โครงกระดูกโหลดครั้งแรกค้างโชว์ต่อท้ายโพสต์จริง (บางเส้นทาง return ก่อนสั่งปิด เช่นโปรไฟล์ถูกวาดซ้ำระหว่างโหลด)
       → มีการ์ดโพสต์จริงในกริดแล้ว ห้ามโชว์โครงกระดูกโหลดครั้งแรกเด็ดขาด (JS ปิดด้วยที่ pgHideFirstSkeleton) */
    :root:has(#ui-grid > .grid-thumb) #profile-grid-skeleton { display: none !important; }   /* กริดถูกย้ายไป #profile-posts-section — ใช้ :root */
    /* 🖥️ คอม (≥768px): กริดโพสต์เต็มหน้าต่าง เพิ่มคอลัมน์ตามความกว้าง (การ์ด ~240px ขึ้นไป)
       masonry ยังทำงานเหมือนเดิม เพราะ relayoutProfileMasonry คำนวณแค่ row-span ไม่สนจำนวนคอลัมน์ */
    @media (min-width: 768px) {
        .photo-grid { max-width: none; padding: 0 32px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
        .profile-grid-skeleton { max-width: none; padding: 0 32px; column-count: auto; column-width: 240px; }
    }
    .pg-skel-item {
        break-inside: avoid; margin-bottom: 8px; border-radius: 20px; width: 100%;
        overflow: hidden;
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%);
        background-size: 200% 100%;
        animation: pgShimmer 1.5s infinite linear;
    }
    @keyframes pgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    /* สัดส่วนสุ่มแยกทุกใบ (fillProfileGridSkeleton) — ค่าเริ่มต้น 4:5 เผื่อยังไม่ได้เติม */
    .pg-skel-item { aspect-ratio: 4 / 5; }
    /* 🦴 โพสต์รอรูป — โครงกระดูก 1 ใบต่อ 1 โพสต์จริง ขนาดเท่าโพสต์นั้น อยู่ในกริดจริง (#ui-grid) แล้วถูกแทนที่ด้วยการ์ดจริง */
    .pg-pending { margin: 0; border-radius: 24px; min-height: 150px; pointer-events: none; }
    /* จุดเฝ้าเลื่อนสุดเพื่อโหลดหน้าถัดไป (ไม่มีโครงกระดูกในตัวแล้ว) */
    #profile-load-more { display: none; padding: 12px 0 80px; width: 100%; }
    #profile-load-more.active { display: block; }

    /* 🌟 การ์ดโครงกระดูก pop up post — โชว์ระหว่างลากไปโพสต์ถัดไปที่ "รู้แน่ๆ ว่ามีต่อ" (กำลังโหลด
       จาก limit/skip) แต่ข้อมูลจริงยังมาไม่ถึง ใช้ shimmer เดียวกับ pg-skel-item ให้ดูสอดคล้องกัน 🌟 */
    .peek-skel-block {
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%);
        background-size: 200% 100%; animation: pgShimmer 1.5s infinite linear; border-radius: var(--sys-radius, 12px);
    }
    /* 🌟 สถานะการ์ดจริงตอนโชว์โครงกระดูกเต็มจอ (showPeekLoadingSkeleton) — ยังไม่รู้ข้อมูลจริงของโพสต์
       ถัดไปเลย (ไลก์/รีโพสต์/เซฟ/ตัวเลือก/ช่องคอมเมนต์) เอาออกให้หมด เหลือแค่สิ่งที่พอจะ "คาดเดารูปทรง"
       ได้ล่วงหน้าจริงๆ เท่านั้น: กรอบรูป 4:5, แถวผู้เขียน (รูปโปรไฟล์+ชื่อ), แคปชั่น 🌟 */
    .ios-peek-card.peek-loading-skeleton:not(.peek-loading-real) .ios-peek-actions,
    .ios-peek-card.peek-loading-skeleton:not(.peek-loading-real) .peek-middle-bar,
    .ios-peek-card.peek-loading-skeleton:not(.peek-loading-real) #inline-cmt-wrap {
        display: none;
    }
    /* 🌟 เปิดจากแจ้งเตือน (openPeekLoading พร้อมข้อมูลตั้งต้น) — รู้ข้อมูลโพสต์บางส่วนอยู่แล้ว (รูปจริง ผู้เขียน
       แคปชัน) โครงเลยหน้าตาเหมือนของจริงทุกส่วน: แถวไลก์/รีโพสต์/เซฟ + ปุ่มสามจุด + ช่องคอมเมนต์ แสดงครบ
       แค่จางลงและกดไม่ได้จนกว่าจะโหลดเสร็จ ตัวเลขที่ยังไม่รู้เป็นแท่งชิมเมอร์ 🌟 */
    .ios-peek-card.peek-loading-real .ios-peek-actions,
    .ios-peek-card.peek-loading-real .peek-middle-bar,
    .ios-peek-card.peek-loading-real #inline-cmt-wrap { opacity: 0.45; pointer-events: none; }
    .ios-peek-card.peek-loading-real .ipa-btn span {
        color: transparent; display: inline-block; min-width: 16px; height: 12px; border-radius: 4px;
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%); background-size: 200% 100%;
        animation: pgShimmer 1.5s infinite linear;
    }
    .ios-peek-card.peek-loading-real .peek-slide img.peek-hint-img {
        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s;
    }
    .ios-peek-card.peek-loading-real .peek-slide img.peek-hint-img.ready { opacity: 1; }

    /* ==========================================
       IOS HAPTIC POPUP (PEEK MODAL)
    ========================================== */
    .peek-modal { 
        display: none; position: fixed !important; inset: 0 !important; z-index: 1000000 !important; 
        background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
        justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; 
    }

    /* 🌟 ปุ่มเลื่อนโพสต์ (Next/Prev Post) - นำออกตามความต้องการใหม่ 🌟 */
    .peek-nav-btn { display: none !important; }
    
    .ios-peek-card {
        width: 100%; max-width: 350px; display: flex; flex-direction: column; gap: 8px;
        background: transparent;
        /* ปัดแนวนอน = เลื่อนรูปในโพสต์ (เบราว์เซอร์จัดการเอง)
           ส่วนปัดแนวตั้ง ยกให้ JS ใช้เลื่อนไปโพสต์อื่น — ไม่งั้นมือถือจะกินเป็นการสกอลล์หน้า
           แล้วหยุดส่ง touchmove ให้เรา การ์ดเลยไม่ขยับตามนิ้ว */
        touch-action: pan-x;
        /* 🐞 บั๊กโพสต์ที่มีคอมเมนต์แสดงรูปเป็น 1:1 แทน 4:5: เพดาน calc(50vh + 180px) เดิมคำนวณจาก
           ผลรวมของ "โพสต์ไม่มีคอมเมนต์" ล้วนๆ (ไม่ได้เผื่อที่ให้ .floating-comments-area เลย) พอโพสต์
           มีคอมเมนต์แม้แค่แถวเดียว ความสูงรวมก็ชนเพดานทันทีทุกครั้ง บังคับ flexbox หด .peek-media-wrapper
           (ตัวเดียวที่ยอมหด) จนสัดส่วนเพี้ยนจาก 4:5 กลายเป็นเกือบ 1:1 ตามที่แจ้ง (ไม่ใช่แค่โพสต์คอมเมนต์
           เยอะๆ แต่เกิดกับทุกโพสต์ที่มีคอมเมนต์อย่างน้อย 1 อัน) — เผื่อเพดานเพิ่มอีก ~110px ให้พอดีกับ
           พื้นที่คอมเมนต์สูงสุด (.f-block โหมด 1-2 แถว: 32px*2 + row-gap 16px = 80px, บวก padding/margin
           ของ .floating-comments-area เองอีก ~22px) ความสูงของพื้นที่คอมเมนต์คงที่เสมอไม่ว่าจะมีกี่คอมเมนต์
           (เลื่อนแนวนอนแทนการเพิ่มแถวไม่จำกัด) โพสต์มีคอมเมนต์จึงไม่ชนเพดานอีกต่อไป รูปเลยคงสัดส่วน 4:5
           ไว้ได้เสมอ ไม่ต้องหดแล้ว 🌟 */
        max-height: calc(50vh + 290px); min-height: 0;
    }
    /* 🌟 ทุกแถวยกเว้นรูป ห้ามหดตอน .ios-peek-card ชนเพดาน max-height (ด้านบน) — ให้ .peek-media-wrapper
       (ไม่มี flex-shrink:0 กำกับไว้ ยังเป็นค่าเริ่มต้น shrinkable) เป็นตัวเดียวที่หดแทน กันตัวหนังสือ/
       ปุ่มต่างๆ โดนบีบจนดูแปลกๆ ไปด้วยตอนพื้นที่ไม่พอ (เช่น โพสต์ที่มีทั้งแคปชั่นยาว+คอมเมนต์) 🌟 */
    .peek-middle-bar, .ios-peek-author, .ios-peek-caption, .ios-peek-actions,
    .f-reply-chip, .ios-inline-comment, .floating-comments-area { flex-shrink: 0; }
    /* เด้งตอนเปิด pop up ครั้งแรกเท่านั้น — ระหว่างเลื่อนไปโพสต์อื่นไม่ต้องเด้ง
       (ของเดิมใส่ animation ไว้ที่ตัวการ์ดเลย พอถอดคลาส peek-sliding ออก
        แอนิเมชันจะถูกรันใหม่ทุกครั้งที่สลับโพสต์ กลายเป็นเด้งทุกรอบ) */
    .ios-peek-card.peek-open { animation: iosPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); }
    @keyframes iosPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    /* 🌟 แก้ไขใหม่ทั้งหมด: แสดงรูปในกรอบตามสัดส่วนจริง 🌟
       🐞 บั๊กภาพขยับตอนเปิดโพสต์: ค่า width เริ่มต้นนี้ต้องตรงกับสูตรที่ peekMediaWrapWidth() (JS)
          คำนวณเป๊ะๆ ตั้งแต่แรก — เดิมตั้ง width:100% (เทียบกับ .ios-peek-card ที่ max-width:350px
          ก็ประมาณ 350px) แล้ว JS ค่อยเขียนทับเป็น min(100%, 50vh*4/5) ทีหลัง (มักได้ค่าน้อยกว่า เช่น
          ~320px บนจอสูง 800px) เห็นเป็นกรอบรูปขยาย/หดตัวหนึ่งจังหวะให้เห็นชัดๆ ตอน paint ครั้งแรก
          ก่อน JS จะรันทัน ใช้สูตรเดียวกันตั้งแต่ CSS เริ่มต้นเลย ไม่ต้องรอ JS มาแก้ไขซ้ำ 🌟 */
    .peek-media-wrapper {
        position: relative; width: min(100%, calc(50vh * 4 / 5)); aspect-ratio: 4 / 5;
        max-height: 50vh; margin: 0 auto;
        overflow: hidden; background: transparent; 
        display: flex; align-items: center; justify-content: center;
        box-shadow: none; border-radius: var(--sys-radius, 12px);
        pointer-events: auto; /* ให้รับ Event การเลื่อนได้ */
    }
    .peek-slider-container { width: 100%; height: 100%; display: flex; overflow: hidden; position: relative; }
    .peek-slider-track {
        display: flex; width: 100%; height: 100%;
        position: relative; align-items: center;
        overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        touch-action: pan-x;   /* ปัดแนวตั้งบนรูป = เลื่อนโพสต์ ไม่ใช่สกอลล์ตัวราง */
        gap: var(--peek-slide-gap, 14px);   /* 🌟 ระยะห่างระหว่างรูปตอนเลื่อน (รูปยังล็อกกลางเหมือนเดิม) */
    }
    .peek-slider-track::-webkit-scrollbar { display: none; }

    .peek-slide {
        min-width: 100%; width: 100%; height: 100%;
        flex-shrink: 0; display: flex; justify-content: center;
        align-items: center; position: relative; overflow: hidden;
        scroll-snap-align: center; scroll-snap-stop: always;
    }
    .peek-slide img {
        width: 100%; height: 100%;
        max-width: 100%; max-height: 100%;
        /* 🌟 กรอบ .peek-media-wrapper ตั้ง aspect-ratio ตามที่โพสต์เลือกครอปไว้ตอนอัปโหลด (post.aspect_ratio
           เช่น 1:1, 4:5, 9:16, 1.91:1 — ไม่ใช่ 4:5 ตายตัวเหมือนก่อนหน้านี้) รูปต้นฉบับที่เก็บไว้จริงยังเป็น
           สัดส่วนดิบไม่ได้ครอปมา ต้องใช้ object-fit:cover ครอปให้เต็มกรอบตามที่เลือกไว้เสมอ (ไม่ใช่ contain
           ซึ่งจะโชว์รูปดิบทั้งใบมีขอบว่างเทาๆ ถ้าสัดส่วนไม่ตรงกรอบพอดี) แตะที่รูปเพื่อขยาย → ดูสัดส่วนจริง
           ของรูปดิบแบบไม่ครอปเลย 🌟 */
        object-fit: cover; display: block; pointer-events: none;
        border-radius: var(--sys-radius, 12px);
        transform-origin: center center;
        will-change: transform;
    }
    /* 🌟 แตะครั้งเดียว = ขยายรูปเต็มจอ (มุมโค้งเท่าเดิม) / ขยายแล้วเลื่อนขึ้นลงดูรูปอื่นในโพสต์ได้
           และแตะ 2 ครั้งเพื่อปิด 🌟 */
    /* พื้นหลังเบลอค่อย ๆ เข้ม เหมือนเมนูกดค้างของไอโฟน (ไม่ทึบดำสนิท จะได้เห็นว่าเบลอ) */
    #peek-expand-layer {
        position: fixed; inset: 0; z-index: 1000003;
        display: flex; align-items: center; justify-content: center;
        background: rgba(0,0,0,0);
        backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
        transition: background 0.32s ease, backdrop-filter 0.32s ease, -webkit-backdrop-filter 0.32s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: none;   /* จับการลากขึ้นลงเอง ไม่ให้เบราว์เซอร์แย่งไปซูม/เลื่อนหน้า */
        overflow: hidden;
    }
    /* กรอบของรูปแต่ละใบในโพสต์ ซ้อนกันตามแนวตั้ง แล้วเลื่อนสลับกันเหมือน pop up สตอรี่ */
    #peek-expand-layer .pex-frame {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        will-change: transform;
    }
    #peek-expand-layer .pex-frame.sliding {
        transition: transform 0.34s cubic-bezier(0.25, 0.9, 0.3, 1);
    }
    #peek-expand-layer.shown {
        background: rgba(0,0,0,0.72);
        backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    }
    /* มือถือ: พื้นเบลอย้ายไปแผ่นในเนื้อหน้าเว็บ (.pex-doc-veil) ให้ลอดใต้ Dynamic Island/แถบล่างได้ */
    #peek-expand-layer.pex-doc, #peek-expand-layer.pex-doc.shown {
        background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .pex-doc-veil {
        position: absolute; left: 0; right: 0; z-index: 1000002; pointer-events: none;
        background: rgba(0,0,0,0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
        transition: background 0.32s ease, backdrop-filter 0.32s ease, -webkit-backdrop-filter 0.32s ease;
    }
    .pex-doc-veil.shown {
        background: rgba(0,0,0,0.72);
        backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    }
    #peek-expand-layer :is(img, video) {
        /* มือถือ: กว้างเต็มขอบจอ สูงตามสัดส่วนจริง (ไม่ยืด) — สูงเกินจอค่อยย่อลงมา */
        width: 100%; height: auto;
        max-width: 100%; max-height: 100%;
        object-fit: contain; display: block;
        border-radius: 47px;   /* ขยายแล้วมนกว่าตอนอยู่ในโพสต์ */
        transform-origin: center center; will-change: transform, border-radius;
        /* clip-path ทำให้ "ขอบรูปค่อย ๆ กางออก" จากกรอบ 4:5 ไปเป็นสัดส่วนจริง
           🌟 border-radius ต้องวิ่งไปพร้อมกันด้วยจังหวะและเส้นโค้งเดียวกัน
              ไม่งั้นตอนหุบจะเห็นมุมโค้งใหญ่ค้างไว้ แล้วค่อยหด "หลัง" หุบเสร็จ 🌟 */
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.4s ease;
        box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    }
    /* ตอนย่อกลับไม่ต้องเด้ง ให้ไหลกลับเนียน ๆ — ทุกคุณสมบัติต้องจบพร้อมกันเป๊ะ */
    #peek-expand-layer.closing :is(img, video) {
        transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.3, 1),
                    clip-path 0.34s cubic-bezier(0.32, 0.72, 0.3, 1),
                    border-radius 0.34s cubic-bezier(0.32, 0.72, 0.3, 1),
                    box-shadow 0.34s ease;
    }
    /* จอกว้าง (แท็บเล็ต/คอม) ไม่ต้องดันเต็มความกว้าง เดี๋ยวรูปใหญ่เกินตา */
    @media (min-width: 700px) {
        #peek-expand-layer :is(img, video) { width: auto; max-width: 92%; max-height: 92%; }
    }
    /* 🖥️ คอมจอกว้าง: ขยายแล้วเรียงทุกรูปในโพสต์เป็นแถวเดียว (เลื่อนแนวนอนได้) แทนขึ้นทีละรูป */
    #peek-expand-layer .pex-strip {
        position: absolute; inset: 0; display: flex; align-items: center; gap: 18px;
        overflow-x: auto; overflow-y: hidden; padding: 0 4vw; box-sizing: border-box;
        scrollbar-width: none; overscroll-behavior: contain;
    }
    #peek-expand-layer .pex-strip::-webkit-scrollbar { display: none; }
    #peek-expand-layer .pex-strip > :is(img, video) { flex: none; }
    #peek-expand-layer .pex-strip > :is(img, video):first-child { margin-left: auto; }
    #peek-expand-layer .pex-strip > :is(img, video):last-child { margin-right: auto; }
    #peek-expand-layer .pex-strip > :is(img, video).pex-side { opacity: 0; transition: opacity 0.32s ease; }
    #peek-expand-layer.shown .pex-strip > :is(img, video).pex-side { opacity: 1; }
    #peek-expand-layer.closing .pex-strip > :is(img, video).pex-side { opacity: 0; transition: opacity 0.2s ease; }

    /* 🌟 กางนิ้วซูมรูป — ยกรูปขึ้นมาไว้ชั้นบนสุดจะได้ไม่โดนกรอบโพสต์ตัด แล้วเด้งกลับตอนปล่อย 🌟 */
    #peek-zoom-layer { position: fixed; inset: 0; z-index: 1000002; pointer-events: none; }
    #peek-zoom-layer img {
        position: absolute; object-fit: contain; transform-origin: center center;
        will-change: transform; border-radius: var(--sys-radius, 12px);
    }
    #peek-zoom-layer img.peek-zoom-reset { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }

    /* 🌟 เลื่อนขึ้น/ลงเพื่อไปโพสต์อื่น — ทั้งการ์ดเลื่อนตามนิ้วแบบสตอรี่ 🌟 */
    /* ปิดแอนิเมชันเปิดการ์ด (iosPop) ระหว่างลาก/เลื่อน — CSS animation มีลำดับสูงกว่า inline style
       ถ้าไม่ปิด transform ที่เราตั้งจะถูกทับ การ์ดเลยไม่ขยับตามนิ้วเลย */
    .ios-peek-card.peek-dragging,
    .ios-peek-card.peek-sliding { animation: none !important; }
    /* เลื่อนพ้นขอบจอไปเลยแบบสตอรี่ — ไม่จางหาย รูปจึงไม่กะพริบตอนสลับโพสต์
       จังหวะ 0.34s (เร็วขึ้นอีก 30% จาก 0.48s) ยังไหลนุ่มเหมือน pop up สตอรี่ */
    /* 🌟 เลื่อนเปลี่ยนโพสต์: การ์ดเดิมออก → การ์ดใหม่เข้า เป็นสองจังหวะต่อกัน
       เดิมจังหวะละ 0.34s รวมแล้วกว่าโพสต์ถัดไปจะโผล่ใช้เวลา ~0.72s ซึ่งนานเกินไป
       ลดเหลือจังหวะละ 0.2s (รวม ~0.42s) เร็วขึ้นเกือบเท่าตัวแต่ยังเห็นการ์ดเดิมออกจนสุดก่อน 🌟 */
    .ios-peek-card.peek-sliding { transition: transform 0.2s cubic-bezier(0.32, 0.86, 0.36, 1); }

    /* 🌟 การ์ดพรีวิวโพสต์ถัดไป/ก่อนหน้า — สร้างขึ้นตอนเริ่มลากแนวตั้ง แล้วเลื่อนตามนิ้วไปพร้อมกับ
       การ์ดจริงทันที ให้เห็นโพสต์ถัดไป "ตามติดมา" ระหว่างลากเลย ไม่ใช่ต้องปล่อยนิ้วก่อนถึงจะโผล่มา
       (เหมือน pop up สตอรี่ที่ตัวถัดไปเลื่อนตามมาติด ๆ) — เป็นแค่ภาพตัวอย่างเบา ๆ (ปกโพสต์ + คนโพสต์)
       ไม่ผูกปุ่มไลก์/คอมเมนต์ เพราะจะถูกแทนที่ด้วยการ์ดจริงทันทีที่สลับโพสต์เสร็จ 🌟 */
    .peek-preview-card { margin: 0 !important; pointer-events: none; z-index: 1; }

    .peek-middle-bar { display: flex; align-items: center; justify-content: center; padding: 8px 4px 4px; position: relative; background: transparent;}
    .peek-dots { display: flex; gap: 5px; justify-content: center; background: transparent; border: none; padding: 0; margin: 0; }
    .peek-dot { width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,0.4); transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
    .peek-dot.active { background: #fff; width: 16px; border-radius: 6px; }

    .peek-options-btn { 
        background: transparent; color: #fff; font-size: 24px; border: none; cursor: pointer; 
        display: flex; align-items: center; justify-content: center; transition: 0.2s; position: absolute; right: 4px; top: 0px;
    }
    .peek-options-btn:active { transform: scale(0.85); opacity: 0.7; }

    .ios-peek-caption {
        font-size: 14px; font-weight: 400; color: #fff; line-height: 1.4;
        padding: 0 12px; margin-bottom: 4px; word-wrap: break-word; text-align: left;
    }

    .ios-peek-author { display: flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer; transition: 0.2s; }
    .ios-peek-author { -webkit-tap-highlight-color: transparent; }
    
.ios-peek-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg4); border: 1.5px solid rgba(255,255,255,0.2);}
    /* รีโพสต์: รูปคนที่รีโพสต์ซ้อนทับรูปเจ้าของโพสต์ (แบบรายชื่อผู้ชมสตอรี่) — ชื่อยังเป็นเจ้าของโพสต์ */
    .ios-peek-av-stack { position: relative; width: 52px; height: 36px; flex-shrink: 0; }
    .ios-peek-av-stack .ios-peek-avatar { position: absolute; top: 0; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,0.2); }
    /* "a รีโพสต์ b" / "a แท็ก c กับ m และ b" — ชื่อแตะได้ทุกคน */
    .pk-names { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
    /* แตะชื่อ/รูปไหน เด้งเฉพาะชิ้นนั้น (ไม่มีเส้นใต้ ไม่เด้งทั้งแถว) */
    .pk-names .pk-u { cursor: pointer; display: inline-block; transition: transform 0.15s ease, opacity 0.15s ease; -webkit-tap-highlight-color: transparent; }
    .pk-names .pk-u:active, .ios-peek-author .ios-peek-avatar:active { transform: scale(0.9); opacity: 0.7; }
    .ios-peek-author .ios-peek-avatar { transition: transform 0.15s ease, opacity 0.15s ease; }
    .pk-names .pk-v { font-weight: 500; color: rgba(255,255,255,0.6); }
    .ios-peek-rp-name { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; white-space: nowrap; }
    .ios-peek-rp-name .rp-ic { font-size: 12px; color: rgba(255,255,255,0.55); flex-shrink: 0; }
    .ios-peek-rp-name .rp-a { color: rgba(255,255,255,0.75); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
    .ios-peek-info { display: flex; flex-direction: column; flex: 1; text-align: left; }
    .ios-peek-name { font-weight: 700; font-size: 14px; color: #fff;}
    .ios-peek-time { font-weight: 500; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: -2px;}

    .ios-peek-actions { display: flex; justify-content: space-between; align-items: center; padding: 4px 12px; margin-top: 4px; }
    .ipa-group { display: flex; gap: 20px; align-items: center; }
    .ipa-btn { 
        display: flex; align-items: center; gap: 6px; background: transparent; border: none; 
        color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s;
    }
    .ipa-btn i { font-size: 26px; transition: 0.2s;}
    /* 📮 ปุ่มส่งถึง — ไอคอนแชร์ (จุดสามจุดต่อเส้น) มินิมอล เล็กกว่าไอคอนข้าง ๆ นิดหน่อย */
    .ipa-btn .ipa-send-ic { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; display: block; }
    .ipa-btn.send { padding: 0; font-family: inherit; }
    .ipa-btn:active { transform: scale(0.85); }
    
    .ipa-btn.active i { color: #fff; }
    .ipa-btn.like.active i { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.3); } 
    
    .sv-big-heart { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; font-size: 100px; color: #fff; z-index: 25; opacity: 0; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); }
    .sv-big-heart.pop { animation: heartPop 0.8s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }
    @keyframes heartPop { 0% { opacity: 0; transform: scale(0.5); } 20% { opacity: 1; transform: scale(1.2); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

    .ios-inline-comment { 
        display: flex; align-items: center; gap: 10px; 
        background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.1); 
        border-radius: 50px; padding: 4px 6px 4px 16px; margin: 4px 0 0 0;
        transition: background-color 0.2s, border-color 0.2s; 
        backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    }
    .ios-inline-comment:focus-within { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.3); }
    .ios-inline-comment input { 
        flex: 1; background-color: transparent !important; border: none; color: #fff !important; 
        font-size: 14px; outline: none; padding: 10px 0; font-weight: 400;
        -webkit-appearance: none; border-radius: 0; box-shadow: none;
    }
    .ios-inline-comment input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        -webkit-text-fill-color: white !important;
        transition: background-color 5000s ease-in-out 0s;
    }
    .ios-inline-comment input::placeholder { color: rgba(255,255,255,0.5); }
    
    /* ปุ่มส่งคอมเมนต์ = ไอคอนส่งสีดำบนวงกลมขาว */
    .ios-inline-send {
        background: #fff; color: #000; border: none; border-radius: 50%;
        width: 32px; height: 32px; padding: 0; flex-shrink: 0; cursor: pointer; transition: 0.2s;
        display: flex; align-items: center; justify-content: center; font-size: 17px;
        touch-action: manipulation;
    }
    /* ⚡ การ์ดโพสต์: ไม่รอเช็กแตะสองครั้งเพื่อซูม — แตะแล้วเปิดทันที */
    .v2-grid-thumb, #ui-grid .grid-thumb, .pm-item, .svd-item { touch-action: manipulation; }
    .ios-inline-send:disabled { opacity: 0; pointer-events: none; width: 0; padding: 0; overflow: hidden; }
    .ios-inline-send:active { transform: scale(0.9); }

    .floating-comments-area {
        position: relative; width: 100%; margin-top: 8px;
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        padding: 4px 12px 10px 12px;
        /* ปัด/ลากในแถบนี้ = เลื่อนคอมเมนต์เท่านั้น ไม่ไปเลื่อนโพสต์ */
        touch-action: pan-x; overscroll-behavior: contain;
    }
    .floating-comments-area::-webkit-scrollbar { display: none; }

    /* พื้นที่จัดวางแคปซูล + เส้นโยง (เธรด) */
    .f-flow { position: relative; width: max-content; min-width: 100%; flex: 0 0 auto; }
    /* ตาราง 2 แถว: คอลัมน์เรียงต่อกันไปทางขวา (ระยะห่างมาจาก .f-link ทุกช่องเท่ากันหมด) */
    .f-grid { position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 0; width: max-content; min-width: max-content; }
    /* บล็อก = ช่วงหนึ่งของแถบ สูงได้ 1-2 แถว (แถวสูง 32px + ช่องไฟ 16px)
       บล็อกที่มีเส้นแนวตั้งจะมีแค่คอลัมน์เดียว สองแถวจึงตรงกันพอดีเสมอ */
    /* flex-shrink: 0 สำคัญมาก — บนจอแคบ (มือถือ) ถ้าปล่อยให้บล็อกหดตามความกว้างที่เหลือ
       เนื้อในจะล้นออกนอกบล็อกแล้วไปทับแคปซูลของบล็อกข้าง ๆ (บนจอกว้างไม่หดเลยไม่เจอปัญหา) */
    .f-block { position: relative; display: grid; grid-auto-rows: 32px; row-gap: 16px; flex: 0 0 auto; }
    /* แต่ละแถวในบล็อกไหลอิสระ — แคปซูลกว้างเท่าข้อความจริง ระยะห่างคงที่ ไม่ยึดความกว้างของอีกแถว */
    .f-track { display: flex; align-items: center; min-width: max-content; }
    /* เส้นแนวนอน: กว้างรวม 28px แต่ยื่นซุกใต้แคปซูลข้างละ 6px → ที่มองเห็นจริงคือ 16px
       (ที่ซุกไว้ทำให้เวลากดแคปซูลแล้วมันย่อ เส้นยังต่อถึงกัน ไม่เห็นเป็นเส้นขาด) */
    /* 🐞 Safari: ความกว้างของเส้นมาจาก flex-basis อย่างเดียว ตอนคำนวณขนาดแถว (max-content) WebKit นับเป็น 0
       แคปซูลถัดไปเลยเลื่อนมาทับแคปซูลก่อนหน้า (จอกว้าง) → ระบุ width/min-width ให้ตรงกันด้วย */
    .f-link { flex: 0 0 28px; width: 28px; min-width: 28px; height: 2px; margin: 0 -6px; border-radius: 2px; background: rgba(255,255,255,0.9); }
    .f-link.grow { flex: 1 0 28px; }   /* เฉพาะเส้นท้ายแถวของบล็อก ไว้ดูดช่องว่างที่เหลือ เส้นจะได้ไม่ขาด */
    .f-link.blank { background: transparent; }   /* ช่องไฟกว้างเท่ากันเมื่อไม่ได้ต่อกัน */
    /* เส้นแนวตั้ง: x=16px (กึ่งกลางอวาตาร์) สูงรวม 28px ซุกใต้แคปซูลบน-ล่างข้างละ 6px → เห็นจริง 16px เท่าเส้นนอน */
    .f-vlink { position: absolute; left: 16px; top: 26px; height: 28px; width: 2px; border-radius: 2px; background: rgba(255,255,255,0.9); }

    .f-comment {
        /* ความสูงคงที่ 32px — แถวของ .f-block และเส้นแนวตั้ง .f-vlink อ้างอิงค่านี้ */
        height: 32px; box-sizing: border-box;
        display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
        max-width: 286px;   /* 24 อวาตาร์ + 80 ชื่อ + 150 ข้อความ + ช่องไฟ/ขอบ — กันแคปซูลบานเกินที่คำนวณไว้ */
        /* ทึบสนิท ไม่งั้นจะเห็นเส้นโยงที่ซุกอยู่ใต้แคปซูลทะลุออกมา */
        background: #e7e7ea; color: #000; padding: 4px 12px 4px 4px;   /* เทาอ่อน (เดิมขาว) */
        border-radius: 50px; pointer-events: auto; cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.15s, opacity 0.15s;
        -webkit-user-select: none; user-select: none;
        /* อยู่เหนือเส้นเสมอ เพื่อบังส่วนที่เส้นยื่นซุกเข้ามาใต้แคปซูล */
        position: relative; z-index: 1;
    }
    /* ย่อเบาๆ ตอนกด (0.97) — ถ้าย่อแรงกว่านี้ขอบแคปซูลจะร่นจนเห็นเส้นโผล่เป็นช่องขาด */
    .f-comment:active { transform: scale(0.97); opacity: 0.92; }
    .f-comment img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #ddd; flex: 0 0 auto; }
    /* 🌟 min-width:0 + max-width จำกัดความกว้าง "ที่ใช้คำนวณ" ของแคปซูลด้วย
       ไม่ใช่แค่ตัดตอนวาด — บนมือถือ (WebKit) ถ้าไม่ใส่ ตัวเลขความกว้างที่ตารางใช้จัดวาง
       กับความกว้างจริงของแคปซูลจะไม่ตรงกัน แคปซูลตัวถัดไปเลยไปทับตัวก่อนหน้า 🌟 */
    .f-comment .name { font-weight: 700; font-size: 11px; color: #333; min-width: 0; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .f-comment .text { font-size: 12px; font-weight: 500; color: #000; min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* แคปซูลที่เป็นการตอบกลับ — ใช้สีขาวทึบเท่าเม้นเดี่ยว
       (ของเดิมหม่นเป็น #e8e8e8 ทำให้ดูจาง/มืดกว่าปกติ ความเป็นลูกของต้นฉบับ
        ดูจากเส้นโยงกับตำแหน่งในเธรดอยู่แล้ว ไม่ต้องพึ่งสีพื้น) */
    .f-comment.is-reply { background: #e7e7ea; }

    /* แถบแสดงสถานะกำลังตอบกลับ */
    .f-reply-chip {
        display: flex; align-items: center; gap: 8px; margin: 6px 2px 0 2px;
        background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.14);
        border-radius: 40px; padding: 6px 8px 6px 14px; color: rgba(255,255,255,0.9); font-size: 12.5px;
        animation: fReplyIn 0.2s ease;
    }
    @keyframes fReplyIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .f-reply-chip i.bx-reply { font-size: 16px; opacity: 0.8; }
    .f-reply-chip b { font-weight: 700; color: #fff; }
    .f-reply-chip button {
        margin-left: auto; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
        background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 18px;
        display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.15s;
    }
    .f-reply-chip button:active { transform: scale(0.88); background: rgba(255,255,255,0.3); }

    #sys-select-modal, .sys-overlay { z-index: 1000010 !important; }

    /* ==========================================
       POST UPLOAD & EDIT MODAL 
    ========================================== */
    .pu-modal {
        position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        z-index: 1000005 !important; display: none; flex-direction: column; align-items: center; justify-content: center;
        animation: puFadeIn 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);
    }
    .pu-modal.active { display: flex; }
    @keyframes puFadeIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }

    /* 🌟 แก้ไขให้พื้นที่แสดงผลยืดหยุ่นในมือถือ 🌟 */
    .pu-content-wrapper { 
        width: 100%; max-width: 400px; max-height: 100vh; height: 100%;
        display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 20px;
    }
    
    .pu-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 16px; width: 100%; position: sticky; top: 0; z-index: 10; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);}
    /* แอปหน้าจอหลัก: แถบสถานะ/Dynamic Island ทับหัวหน้าสร้างโพสต์ (ชิดบนเกินไป) → เว้นตามขอบปลอดภัย (ในเบราว์เซอร์ไม่เปลี่ยน) */
    html.hq-standalone .pu-header { padding-top: calc(max(20px, calc(env(safe-area-inset-top) + 6px)) + 3vh); }   /* ห่างขอบบนเพิ่มอีก 3% ของจอ */
    html.hq-standalone .pu-content-wrapper { padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
    .pu-close-btn { background: rgba(255,255,255,0.1); width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 26px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); transition: 0.2s; }
    .pu-close-btn:active { transform: scale(0.85); background: rgba(255,255,255,0.2); }
    /* 🌟 เดิมเป็นปุ่มข้อความทรงแคปซูล เปลี่ยนเป็นไอคอนสีขาวเปล่าๆ ไม่มีพื้นหลังวงกลม (ตามที่ผู้ใช้แจ้งแก้) 🌟 */
    .pu-submit-btn { background: transparent; color: #fff; border: none; width: 44px; height: 44px; font-size: 24px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
    .pu-submit-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .pu-submit-btn:active:not(:disabled) { transform: scale(0.95); }

    /* 🌟 แจ้งเตือนเปอร์เซ็นต์อัปโหลดโพสต์แบบเรียลไทม์ — ค้างโชว์ตั้งแต่กดอัปโหลด (popup ปิดไปแล้ว)
       จนกว่าจะอัปโหลดเสร็จจริง ไม่ใช้ #toast ตัวเดิมเพราะตัวนั้นซ่อนอัตโนมัติหลัง 3 วิ (ดู showToast()
       ใน index.html) ตัวนี้ต้องค้างได้นานเท่าที่อัปโหลดจริงใช้เวลา 🌟 */
    #upload-progress-toast {
        position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
        background: rgba(28,28,30,0.95); color: #fff; backdrop-filter: blur(10px);
        padding: 10px 18px; border-radius: 30px; font-size: 13px; font-weight: 600;
        border: 1px solid rgba(255,255,255,0.12); z-index: 2147483647;
        transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        white-space: nowrap; display: flex; align-items: center; gap: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }
    #upload-progress-toast.show { top: max(20px, env(safe-area-inset-top)); }
    #upload-progress-toast .upt-spinner {
        width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
        border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff;
        animation: uptSpin 0.7s linear infinite;
    }
    @keyframes uptSpin { to { transform: rotate(360deg); } }

    /* 🌟 padding ซ้าย-ขวาเดิมอยู่บน .pu-carousel เอง (กล่องเดียวกับที่ตั้ง aspect-ratio ไว้) — พอ
       box-sizing:border-box หัก padding ออกจากความกว้างที่แสดงจริงแต่ไม่หักออกจากความสูง (ไม่มี
       padding แนวตั้ง) สัดส่วนที่เห็นจริงในกรอบเลย "แคบกว่า" ค่าที่ตั้งไว้เสมอ (ยิ่งกรอบแคบเช่น 9:16
       ยิ่งเพี้ยนชัด เพราะ 40px คงที่กินสัดส่วนของความกว้างทั้งหมดมากกว่า) ย้าย padding มาไว้ที่กล่องแม่
       (.pu-card-area) แทน ให้ .pu-carousel ที่ตั้ง aspect-ratio ไม่มี padding มากวนคำนวณเลย 🌟 */
    .pu-card-area { width: 100%; display: flex; flex-direction: column; align-items: center; --pu-ratio: 0.8; flex-shrink: 0; padding: 0 20px; box-sizing: border-box; } /* Default 4:5 (0.8) */
    /* 🌟 เดิม width:100% แล้วให้ aspect-ratio คำนวณความสูงตาม — สัดส่วนสูง (เช่น 9:16) ความสูงเลยเกินจอ
       จนพื้นที่ด้านล่าง (ปุ่มแท็กเพื่อน ฯลฯ) ตกขอบจอ ต้องเลื่อนดู เปลี่ยนมาจำกัดด้วยความสูงจอแทน
       (min(100%, calc(vh * ratio)) เหมือนกรอบรูปใน pop up post) กันพื้นที่รูปตัวเดียวใหญ่จนดันของ
       อื่นล้นจอ ไม่ว่าจะเลือกสัดส่วนไหนก็ตาม
       🐞 ลองใช้ 38vh รอบแรกแล้วรูปดูเล็ก/ผอมเกินไป (โดยเฉพาะ 9:16) คำนวณงบพื้นที่ที่เหลือใหม่ให้ละเอียด
       ขึ้น (header ~80 + จุด/ปุ่มครอป ~80 + วงล้อความเร็ว ~90 (ถ้าโชว์) + inputs ~140 + padding ~20
       รวม ~410px) เผื่อพื้นที่ครบแล้วยังเหลือให้รูปได้มากขึ้นเป็น 46vh 🌟 */
    .pu-carousel { width: min(100%, calc(46vh * var(--pu-ratio))); aspect-ratio: var(--pu-ratio); max-height: 46vh; margin: 0 auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; -webkit-overflow-scrolling: touch; pointer-events: auto; transition: aspect-ratio 0.3s ease, width 0.3s ease; }
    .pu-carousel::-webkit-scrollbar { display: none; }
    
    /* 🌟 ให้รูปภาพและกรอบประปรับยืดตาม Aspect Ratio 🌟 */
    .pu-image-card { min-width: 100%; height: 100%; border-radius: 32px; background: transparent; scroll-snap-align: center; position: relative; overflow: hidden; box-shadow: none; border: 1px solid rgba(255,255,255,0.05); }
    .pu-image-card img { width: 100%; height: 100%; object-fit: cover; }
    /* 🌟 ย้ายจากบนขวาลงมาล่างขวา + เปลี่ยนไอคอนกากบาทเป็นถังขยะ (สื่อความหมาย "ลบ" ชัดกว่า) ตามที่แจ้ง
       เข้าธีมเดียวกับปุ่มลบรูปสตอรี่ 🌟 */
    .pu-delete-img { position: absolute; bottom: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; backdrop-filter: blur(5px); transition: 0.2s; }
    .pu-delete-img:active { transform: scale(0.85); background: rgba(237, 73, 86, 0.8); border-color: transparent;}
    
    .pu-add-card { min-width: 100%; height: 100%; border-radius: 32px; background: rgba(255,255,255,0.05); border: 2px dashed rgba(255,255,255,0.2); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); cursor: pointer; transition: 0.2s; }
    .pu-add-card:active { background: rgba(255,255,255,0.1); }
    .pu-add-card i { font-size: 48px; }
    
    .pu-dots { display: flex; gap: 6px; margin-top: 16px; justify-content: center; }
    .pu-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: 0.3s; }
    .pu-dot.active { background: #fff; transform: scale(1.3); }

    .pu-crop-selector { display: flex; gap: 12px; justify-content: center; margin-top: 16px; width: 100%; transition: 0.3s ease;}
    .pu-crop-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; display: none; } /* ซ่อนไว้ก่อน */
    .pu-crop-btn.active { background: #fff; color: #000; transform: scale(1.1); border-color: #fff; display: flex;} /* โชว์เฉพาะตัวที่ถูกเลือก */
    
    /* โหมดให้เลือก (เมื่อยังไม่ได้อัปโหลดรูป) */
    .pu-crop-selector.selecting .pu-crop-btn { display: flex; }
    #pu-modal.pu-edit .pu-crop-selector { display: none; }   /* แก้ไขโพสต์: ไม่มีตัวเลือกสัดส่วน */

    /* ⏱️ วงล้อเลือกเวลาเปลี่ยนรูป (โพสต์หลายรูป) — หมุนเลือกหรือกดเลือกก็ได้ */
    /* 🎵 เสียงประกอบโพสต์ */
    /* 🎵 เสียงประกอบโพสต์: แคปซูลเล็กในแถวโปรไฟล์ (ชิดขวา) · ชื่อเพลงวิ่งในแคปซูลเมื่อยาวเกิน · ไม่มีคลื่นเสียง */
    .peek-sound { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; max-width: 46%; min-width: 0; height: 26px; margin-left: auto;
        padding: 0 9px 0 8px; border: none; border-radius: 13px; background: rgba(255,255,255,0.1); color: #fff; font: inherit; font-size: 11.5px;
        cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s, opacity 0.2s; box-sizing: border-box; }
    .peek-sound[hidden] { display: none; }
    .peek-sound:active { transform: scale(0.94); }
    .peek-sound > i { font-size: 13px; flex: none; opacity: 0.85; }
    .peek-sound .ps-name { flex: 1 1 auto; min-width: 0; max-width: 130px; overflow: hidden; white-space: nowrap; font-weight: 600;
        -webkit-mask: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 8px), transparent 100%);
                mask: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 8px), transparent 100%); }
    .peek-sound .ps-run { display: inline-block; padding: 0 6px; }
    .peek-sound .ps-name.run .ps-run { animation: psRun var(--ps-dur, 8s) linear infinite; }
    @keyframes psRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .peek-sound.muted, .peek-sound.paused { opacity: 0.7; }
    /* แค่ไอคอนลำโพงเปิด/ปิดเสียง มุมขวาล่างของรูปโพสต์แบบไอจี — ไม่มีพื้นรอง (เงานิด ๆ ให้เห็นบนรูปสว่าง) */
    .peek-sound { position: absolute; right: 10px; bottom: 10px; z-index: 6; width: 32px; height: 32px; padding: 0; margin: 0; border-radius: 50%;
        justify-content: center; max-width: none; flex: none; background: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7)); }
    .peek-sound > i#peek-sound-ic { font-size: 20px; }
    .peek-sound.muted, .peek-sound.paused { opacity: 0.85; }
    .peek-sound > .bx-music, .peek-sound .ps-name { display: none; }
    .peek-sound.muted .ps-name.run .ps-run, .peek-sound.paused .ps-name.run .ps-run { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .peek-sound .ps-name.run .ps-run { animation: none; } }
    /* 🎵 แถวเพิ่มเสียง (ใต้คำบรรยาย) — การ์ดแถวเต็มความกว้าง แยกจากปุ่มแท็ก (แคปซูลเส้นประ) ให้ไม่ซ้ำกัน */
    /* 🎵 เพิ่มเสียง (ใต้คำบรรยาย) — แบบเดียวกับปุ่มแท็กผู้คน (.pu-tag-add-btn: แคปซูลเส้นประ + ไอคอนบวก) · เลือกแล้ว = แคปซูลแบบแท็กที่เลือก */
    .pu-sound-row { display: none; width: 100%; justify-content: center; }
    .pu-sound-row.active { display: flex; }
    .pu-sound-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 86%; background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.3);
        padding: 8px 16px; border-radius: 50px; color: #fff; cursor: pointer; font: inherit; font-size: 13px; transition: 0.2s; -webkit-tap-highlight-color: transparent; }
    .pu-sound-btn:active { background: rgba(255,255,255,0.1); transform: scale(0.96); }
    .pu-sound-btn > i { font-size: 16px; flex: none; }
    .pu-sound-btn > .bx-plus { font-size: inherit; }   /* ขนาดเดียวกับไอคอนบวกของปุ่มแท็ก */
    .pu-sound-btn .psb-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pu-sound-btn.on { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 6px 8px 6px 14px; }
    .pu-sound-btn .psb-x { flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: 0.7; margin-left: 2px; }
    /* แผ่นเลือกเสียง — เลื่อนดูได้ · ▶ ฟังตัวอย่างเสียงจริงก่อน · แตะแถว = ใช้เสียงนี้ */
    .snd-sheet-bg { position: fixed; inset: 0; z-index: 1000010; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center;
        opacity: 0; transition: opacity 0.2s; }
    .snd-sheet-bg.open { opacity: 1; }
    .snd-sheet { width: 100%; max-width: 440px; max-height: min(72vh, 620px); display: flex; flex-direction: column; background: #161616; color: #fff;
        border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(24px); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .snd-sheet-bg.open .snd-sheet { transform: none; }
    @media (min-width: 700px) { .snd-sheet-bg { align-items: center; } .snd-sheet { border-radius: 22px; padding-bottom: 0; } }
    .snd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; flex: none; }
    .snd-head b { font-size: 16px; }
    .snd-head button { background: none; border: none; color: rgba(255,255,255,0.6); font: inherit; font-size: 14px; cursor: pointer; padding: 6px; }
    .snd-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 8px 12px; touch-action: pan-y; }
    .snd-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .snd-row:hover { background: rgba(255,255,255,0.05); }
    .snd-row.sel { background: rgba(255,255,255,0.09); }
    .snd-play { width: 40px; height: 40px; flex: none; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 20px;
        display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.12s, background 0.2s; }
    .snd-play:active { transform: scale(0.9); }
    .snd-row.snd-skel { pointer-events: none; }
    .snd-row.playing .snd-play { background: #fff; color: #000; }
    .snd-txt { flex: 1; min-width: 0; }
    .snd-t { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .snd-a { font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
    .snd-chk { flex: none; font-size: 22px; color: #fff; opacity: 0; }
    .snd-row.sel .snd-chk { opacity: 1; }
    .pu-speed-selector { display: none; width: 100%; margin-top: 14px; flex-direction: column; align-items: center; gap: 6px; }
    .pu-speed-selector.active { display: flex; }
    .pu-speed-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; }
    .pu-speed-wheel {
        display: flex; align-items: center; gap: 14px; width: 100%; max-width: 320px; position: relative;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        padding: 4px 0; -webkit-overflow-scrolling: touch;
    }
    /* 🐞 เดิมเว้นขอบด้วย padding: calc(50% - 24px) — % ของ padding คิดจากกล่องแม่ (ไม่ใช่วงล้อที่กว้างไม่เกิน 320px)
       ตัวเลือกแรก/สุดท้ายเลยมาไม่ถึงกลาง และตัวที่เลือกไม่อยู่ตรงกลาง → ใช้ตัวเว้นหัว-ท้ายแบบ flex (% คิดจากวงล้อเอง) */
    .pu-speed-wheel::before, .pu-speed-wheel::after { content: ''; flex: 0 0 calc(50% - 24px - 14px); height: 1px; }
    .pu-speed-wheel::-webkit-scrollbar { display: none; }
    .pu-speed-opt {
        flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; scroll-snap-align: center;
        background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.65);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform: scale(0.82); opacity: 0.55;
    }
    .pu-speed-opt.active { background: #fff; color: #000; border-color: #fff; transform: scale(1); opacity: 1; }

    .pu-inputs { width: 100%; padding: 0 20px; margin-top: 20px; display: flex; flex-direction: column; gap: 16px; flex-shrink: 0;}
    /* 🌟 เดิมเป็น <textarea rows="2"> พิมพ์ยาวได้ไม่จำกัดและขึ้นบรรทัดใหม่ได้ (กด Enter) — เปลี่ยนเป็น
       <input type="text"> เดียว เพราะ input ตัดคุณสมบัติหลายบรรทัดออกไปเองโดยธรรมชาติ (กด Enter ไม่มี
       ผล, วางข้อความที่มีตัวขึ้นบรรทัดใหม่เบราว์เซอร์จะตัดออกให้เองอัตโนมัติ) ไม่ต้องดักจับคีย์บอร์ดเอง
       เลย ใช้ maxlength="30" ในแท็ก HTML คุมจำนวนตัวอักษรแทนด้วยเหตุผลเดียวกัน (ของ่ายกว่าดัก JS เอง) 🌟 */
    .pu-caption { width: 100%; background: transparent; border: none; color: #fff; font-size: 16px; outline: none; text-align: center; font-family: inherit; padding: 10px 0; }
    .pu-caption::placeholder { color: rgba(255,255,255,0.4); text-align: center; }
    .pu-tools { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 10px; }
    
    .pu-tag-capsule { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 4px 10px 4px 4px; border-radius: 50px; font-size: 13px; color: #fff; }
    .pu-tag-capsule img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #333; }
    .pu-tag-capsule i { cursor: pointer; color: #aaa; transition: 0.2s; font-size: 16px; }
    .pu-tag-capsule i:active { color: #fff; transform: scale(0.8); }
    .pu-tag-add-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.3); padding: 8px 16px; border-radius: 50px; color: #fff; cursor: pointer; font-size: 13px; transition: 0.2s; }
    .pu-tag-add-btn:active { background: rgba(255,255,255,0.1); transform: scale(0.96); }
    /* 🌟 MULTI-SELECT SYSTEM 🌟 */
    .grid-thumb.selecting-mode { transform: scale(0.95); opacity: 0.8; }
    .grid-thumb.selected { transform: scale(0.9); opacity: 1; border: 2px dashed #fff !important; box-shadow: none !important; }
    .grid-select-indicator { 
        position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; 
        border-radius: 50%; background: rgba(0,0,0,0.5); border: 2px solid #fff; 
        display: none; align-items: center; justify-content: center; z-index: 10;
        color: #fff; font-size: 14px;
    }
    .grid-thumb.selecting-mode .grid-select-indicator { display: flex; }
    .grid-thumb.selected .grid-select-indicator { background: #fff; color: #000; }

    .multi-select-bar {
        position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
        width: auto; min-width: 200px; background: rgba(255,255,255,0.98); 
        backdrop-filter: blur(20px); border-radius: 50px; padding: 6px 10px 6px 16px;
        display: flex; gap: 12px; justify-content: space-between; align-items: center;
        z-index: 10000; transition: top 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.05);
    }
    .multi-select-bar.active { top: 20px; }
    .ms-info { color: #000; font-weight: 900; font-size: 12px; white-space: nowrap; }
    .ms-actions { display: flex; gap: 6px; align-items: center; }
    .ms-btn { 
        background: #000; border: none; color: #fff; font-size: 16px; 
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 50%; transition: 0.2s;
    }
    .ms-btn:active { transform: scale(0.85); }
    .ms-btn.delete { background: #fee2e2; color: #ef4444; }
    .ms-btn.archive { background: #f3f4f6; color: #374151; }
    .ms-btn.repost { background: #f0fdf4; color: #16a34a; }
    .ms-btn.tag { background: #eff6ff; color: #2563eb; }
    .ms-btn.close { background: transparent; color: #9ca3af; font-size: 20px; width: 28px; }

    /* ==========================================
       POST PAGE — แตะโพสต์ = เปิดเต็มหน้าจอแบบ Pinterest (กดค้าง = pop up แบบเดิม)
       ใช้ #peek-modal ตัวเดิม (ปุ่ม/ช่องคอมเมนต์/ระบบเดิมทั้งหมด) แค่ใส่คลาส .peek-page
       คอม (แนวนอน): รูปซ้าย ข้อมูลขวา · มือถือ (แนวตั้ง): เรียงลงมา · ด้านล่างเป็นโพสต์อื่นต่อ ๆ กัน
    ========================================== */
    .peek-info-col { display: contents; }   /* pop up ปกติ: ไม่มีผลกับเลย์เอาต์เลย */
    /* ✨ รูปลอยตอนเปิดหน้าโพสต์ (_ppFlyIn) + เนื้อหาอื่นจางเข้าระหว่างรูปลอย */
    .pp-fly { position: fixed; z-index: 4; object-fit: cover; pointer-events: none; will-change: left, top, width, height; box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
    .peek-modal.peek-page.pp-flying .peek-info-col,
    .peek-modal.peek-page.pp-flying .peek-more { animation: ppContentIn 0.42s ease both; }
    /* เปิดแบบการ์ดแปลงร่าง (_ppMorphIn): พื้นหลังจางเข้า · ข้อมูลในการ์ดจางเข้าหลังรูปเริ่มกาง · โพสต์อื่นด้านล่างตามมา */
    .peek-modal.peek-page.pp-morph { animation: ppBgIn 0.36s ease both; }
    .peek-modal.peek-page.pp-settled:not(.pp-morph) { animation: none; }
    /* สลับโพสต์: การ์ดแปลงร่างเหมือนเปิดครั้งแรก แต่ไม่จางพื้นหลัง/โพสต์อื่น (กันแสบตา) — ข้อมูลในการ์ดจางเข้าตาม */
    /* ข้อมูล/ช่องเขียนความคิดเห็นในการ์ด: เริ่มจางเข้า "หลังการ์ดกางเกือบสุดแล้ว" — เดิมเริ่มเร็ว ขอบการ์ดที่กำลังกาง
       ค่อย ๆ เผยช่องคอมเมนต์ทีละส่วน ดูเหมือนสไลด์โผล่มา · ตอนนี้โผล่ทั้งชิ้นพร้อมกัน */
    /* ข้อมูล/ช่องเขียนความคิดเห็นจางเข้าพร้อมรูปตั้งแต่เริ่ม (การ์ดไม่ถูกตัดขอบระหว่างกางแล้ว จึงไม่เห็นเป็นสไลด์โผล่) */
    .peek-modal.peek-page.pp-morph-sw .peek-info-col > * { animation: ppFadeOnly 0.22s ease both; }
    .peek-modal.peek-page.pp-morph .peek-info-col > * { animation: ppFadeOnly 0.24s ease 0.03s both; }
    .peek-modal.peek-page.pp-morph .peek-more { animation: ppContentIn 0.5s ease 0.12s both; }
    .peek-modal.peek-page.pp-morph .pp-bg.on { animation: ppFadeOnly 0.36s ease both; }
    .peek-modal.peek-page.pp-morph .peek-page-back { animation: ppFadeOnly 0.25s ease 0.2s both; }
    .peek-modal.peek-page.pp-flying { animation: ppBgIn 0.34s ease both; }
    .peek-modal.peek-page.pp-flying .ios-peek-card { animation: ppFadeOnly 0.3s ease both; }
    .peek-modal.peek-page.pp-flying .pp-bg.on { animation: ppFadeOnly 0.34s ease both; }
    @keyframes ppBgIn { from { background-color: transparent; } }
    @keyframes ppFadeOnly { from { opacity: 0; } to { opacity: 1; } }
    /* สลับไปโพสต์อื่นในหน้าเดิม: การ์ดจางเข้า + ลอยขึ้นนิด ๆ (ปุ่มย้อนกลับอยู่นอกการ์ด ไม่ขยับ) */
    .peek-modal.peek-page.pp-switch .ios-peek-card { animation: ppSwitchIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .peek-modal.peek-page.pp-switch .peek-more { animation: ppFadeOnly 0.42s ease both; }
    @keyframes ppSwitchIn { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
    @keyframes ppContentIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    /* โครงกระดูกแคปซูลคอมเมนต์ (renderCommentSkeleton) */
    /* โหมดผังจริง: แคปซูลจริงทุกตัว (ขนาด/ตำแหน่งเดียวกับตอนขึ้นจริง) แต่ซ่อนเนื้อใน + เส้นโยง แล้วกระพริบ */
    /* แท็กโหลดสีขาวแบบเดียวกับแคปซูลจริง (วงรูปโปรไฟล์ + แถบชื่อ/ข้อความ) กระพริบเบา ๆ */
    /* html body … = ชนะกฎการ์ดโหลดส่วนกลาง (index.html, พื้นเข้ม !important) แม้ไฟล์นั้นยังเป็นรุ่นเก่าในแคช */
    html body .f-skel-mode .f-comment, html body .f-comment.f-skel-cap {
        pointer-events: none; background: #e7e7ea !important; background-image: none !important; animation: none !important; filter: none !important; }
    .f-skel-mode .f-comment > * { visibility: hidden; }
    .f-skel-mode .f-comment::before, .f-skel-mode .f-comment::after, .f-skel-cap.f-comment::before, .f-skel-cap.f-comment::after {
        content: ''; position: absolute; top: 50%; transform: translateY(-50%); background: #cfcfd4; animation: fSkelPulse 1.3s ease-in-out infinite; }
    .f-skel-mode .f-comment::before, .f-skel-cap.f-comment::before { left: 4px; width: 24px; height: 24px; border-radius: 50%; }
    .f-skel-mode .f-comment::after, .f-skel-cap.f-comment::after { left: 36px; right: 14px; height: 9px; border-radius: 5px; }
    @keyframes fSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }   /* กระพริบแค่วงรูป/แถบข้อความ — พื้นแคปซูลขาวทึบตลอด */
    @media (prefers-reduced-motion: reduce) { .f-skel-mode .f-comment::before, .f-skel-mode .f-comment::after, .f-skel-cap.f-comment::before, .f-skel-cap.f-comment::after { animation: none; } }
    /* 🌳 ต้นไม้คอมเมนต์ (จอกว้าง): คอมเมนต์หลักเรียงต่อกันเต็มแผง · คำตอบห้อยใต้ต้นทาง
       เส้นโยงวาดเป็น SVG ชิ้นเดียวจากตำแหน่งจริงของแคปซูล (_drawTreeLines) — ต่อเนื่องไม่ขาด ไม่เหลื่อม */
    .f-tree-wrap { position: relative; display: block; width: 100%; }   /* ตำแหน่งเธรดจัดด้วย _packTree (ก่ออิฐ) */
    .f-tree-wrap > .f-tnode { position: absolute; left: 0; top: 0; }
    .f-tnode { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
    .f-tkids { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 10px 0 0 34px; }
    .f-tree-svg { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
    .f-tree-svg path { fill: none; stroke: rgba(255,255,255,0.32); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; shape-rendering: crispEdges; }
    .f-skel-mode .f-tree-svg path, .f-skel-tree .f-tree-svg path { stroke: rgba(255,255,255,0.2); }
    .f-skel-mode .f-link, .f-skel-mode .f-vlink { opacity: 0; }
    .f-skel-grid { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; row-gap: 16px; column-gap: 16px; align-content: start; }
    .f-skel-cap { box-shadow: none; }
    /* คอมเมนต์ที่เพิ่งเข้ามาแบบเรียลไทม์ — ค่อย ๆ ปรากฏ + ขอบสว่างแวบหนึ่ง */
    .f-comment.f-new { animation: fNewIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, fNewGlow 1.6s ease-out 0.2s; }
    /* แตะแจ้งเตือนคอมเมนต์ → เลื่อนมาที่คอมเมนต์นั้น แล้วเรืองแสงให้เห็นว่าอันไหน */
    .f-comment.f-focus { animation: fNewGlow 1.3s ease-out 0.15s 2; }
    @keyframes fNewIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
    @keyframes fNewGlow { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }   /* ขนาด/สี/ทรงเดียวกับแคปซูลจริง (.f-comment) */
    /* พื้นหลังโปรไฟล์ (สำเนาของ #profile-bg-layer) — ติดจอตอนเลื่อน แบบเดียวกับหน้าโปรไฟล์ */
    .pp-bg { display: none; }
    .peek-modal.peek-page .pp-bg.on {
        display: block; position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
        z-index: 0; pointer-events: none; overflow: hidden;
    }
    html.hq-pp-open .peek-modal.peek-page .pp-bg.on { height: 100lvh; margin-bottom: -100lvh; }
    .peek-modal.peek-page .pp-bg > div { position: absolute !important; inset: 0 !important; }
    .peek-modal.peek-page .ios-peek-card, .peek-modal.peek-page .peek-more { position: relative; z-index: 1; }
    /* 📱 มือถือ: หน้าโพสต์เป็นส่วนหนึ่งของหน้าเว็บ (เลื่อนทั้งหน้า) เต็มจอใต้ Dynamic Island/แถบล่าง
       ซ่อนหน้าเดิมไว้ระหว่างดู แล้วคืนตำแหน่งเลื่อนตอนปิด (_ppLeaveDoc) */
    html.hq-pp-open #app-container, html.hq-pp-open #bottom-nav-container,
    html.hq-pp-open #top-search-bar, html.hq-pp-open #login-prompt-capsule { display: none !important; }
    /* 🧭 เมนูบาร์ล่าง: แสดงเหนือหน้าโพสต์เต็มเฉพาะแบบโพสต์ใหญ่บนคอม (pp-wide) — มือถือไม่แสดง
       แตะเมนู = ปิดหน้าโพสต์แล้วไปหน้านั้น */
    html:has(#peek-modal.peek-page.pp-wide) #bottom-nav-container { z-index: 1000001 !important; }
    html.hq-pp-open .peek-modal.peek-page {
        position: relative !important; inset: auto !important; min-height: 100lvh;
        overflow: visible; overscroll-behavior: auto;
    }
    .peek-page-back, .peek-more { display: none; }
    /* ไม่ยึดตำแหน่งเลื่อนตามเนื้อหาที่เปลี่ยน (กริดโพสต์อื่น ๆ วาดใหม่) — กันโพสต์เต็มเลื่อนพ้นขอบบนเหลือครึ่งเดียว */
    .peek-modal.peek-page, html.hq-pp-open, html.hq-pp-open body { overflow-anchor: none; }
    .peek-modal.peek-page {
        display: block !important; padding: 0; background: var(--pp-bg, #000);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        animation: ppFadeIn 0.22s ease;
    }
    @keyframes ppFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .peek-modal.peek-page .ios-peek-card {
        max-width: 600px; max-height: none; margin: 0 auto; gap: 10px;
        padding: calc(env(safe-area-inset-top) + 8px) 8px 0; box-sizing: border-box;
        touch-action: auto;   /* เลื่อนหน้าขึ้นลงได้ตามปกติ (pop up จองแนวตั้งไว้เลื่อนโพสต์) */
    }
    .peek-modal.peek-page .ios-peek-card.peek-open { animation: none; }
    .peek-modal.peek-page .peek-slider-track,
    .peek-modal.peek-page .floating-comments-area { touch-action: pan-x pan-y; }
    .peek-modal.peek-page .peek-media-wrapper {
        width: min(100%, calc(78svh * var(--pp-r, 0.8))) !important; max-height: none;
        border-radius: 28px;
    }
    .peek-modal.peek-page .peek-slide img { border-radius: 28px; }
    /* รูปในหน้าโพสต์เต็มที่ยังโหลดไม่เสร็จ — พื้นกระพริบจาง ๆ ให้รู้ว่ากำลังโหลด */
    .peek-modal.peek-page .peek-slide:not(.pp-held):has(> img.peek-real:not(.ld)) { animation: hqSkPulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; border-radius: 28px; }   /* pp-held = มีสำเนารูปจากการ์ดที่แตะรองอยู่แล้ว ไม่ต้องกระพริบ */
    .peek-slide .peek-video { border-radius: var(--sys-radius, 12px); pointer-events: none; }
    /* ⏳ สื่อในโพสต์ที่ยังโหลดไม่เสร็จ (วิดีโอ/รูป · รวมช่วงรอเพลงโพสต์): แสดงปก (ปกเคลื่อนไหวถ้ามี) กระพริบ + แถบโหลดสีขาววิ่งด้านบน
       แบบเดียวกับการ์ดโพสต์ที่กำลังอัปโหลด — ไม่ใช่กรอบดำว่าง */
    .peek-slide > .peek-cov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; pointer-events: none; }
    .peek-slide > .pu-loading-bar { display: none; z-index: 7; }
    .peek-slide.pk-wait:not(.pp-held), .peek-media-wrapper.hq-snd-wait .peek-slide { background-color: var(--bg3, #1c1c1e); }
    .peek-slide.pk-wait:not(.pp-held) > .peek-cov, .peek-media-wrapper.hq-snd-wait .peek-slide > .peek-cov { opacity: 1; animation: puBlink 1.1s ease-in-out infinite; }
    .peek-slide.pk-wait:not(.pp-held) > .pu-loading-bar, .peek-media-wrapper.hq-snd-wait .peek-slide > .pu-loading-bar { display: block; }
    .peek-slide.pk-wait > .peek-video { opacity: 0; }
    .peek-slide.vpaused { cursor: pointer; }
    /* 🎞️ ปุ่มเสียงวิดีโอ (มุมซ้ายล่างของวิดีโอ — แยกจากปุ่มเพลงโพสต์มุมขวา) */
    .peek-vsnd { position: absolute; left: 10px; bottom: 10px; z-index: 6; width: 32px; height: 32px; border-radius: 50%; border: none; padding: 0;
        display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); color: #fff; font-size: 18px; cursor: pointer;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-tap-highlight-color: transparent; transition: transform .15s; }
    .peek-vsnd:active { transform: scale(0.9); }
    /* ปุ่มเล่นกลางวิดีโอ — ขึ้นเฉพาะตอนวิดีโอหยุดอยู่ (เล่นอัตโนมัติไม่ได้ เช่นโหมดประหยัดแบตบน iPhone / ผู้ใช้แตะหยุด) */
    .peek-vplay { position: absolute; left: 50%; top: 50%; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: none;
        display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); color: #fff; font-size: 38px; cursor: pointer;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-tap-highlight-color: transparent; }
    .peek-slide.vpaused .peek-vplay { display: flex; }
    .peek-modal.peek-page .peek-slide .peek-video { border-radius: 28px; }
    .peek-modal.peek-page .peek-page-back {
        display: flex; position: fixed; z-index: 5;
        top: calc(env(safe-area-inset-top) + 16px); left: 16px;
        width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
        background: rgba(20,20,22,0.42); border: 0.5px solid rgba(255,255,255,0.16);
        backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
        box-shadow: 0 4px 16px rgba(0,0,0,0.22);
        color: #fff; align-items: center; justify-content: center; padding: 0;
        -webkit-tap-highlight-color: transparent; transition: transform 0.15s;
    }
    .peek-modal.peek-page .peek-page-back:active { transform: scale(0.9); }
    /* ขอบสัมผัสล่องหนรอบปุ่ม — เดิมแตะพลาดนิดเดียวไปโดนรูป (เปิดขยายรูปแทน) เลยเหมือนกดไม่ติด */
    .peek-modal.peek-page .peek-page-back::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; }
    .peek-page-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-left: -1px; }
    .peek-modal.peek-page .peek-page-back { transition: transform 0.15s, opacity 0.2s ease; }
    html.pex-open .peek-modal.peek-page .peek-page-back { opacity: 0; pointer-events: none; }

    .peek-modal.peek-page .peek-more {
        display: block; margin: 28px auto 0; max-width: 1480px;
        padding: 0 8px calc(env(safe-area-inset-bottom) + 48px); box-sizing: border-box;
    }
    /* หัวข้อ "โพสต์เพิ่มเติม" = จุดวงกลมสีขาว 3 จุดเรียงแนวนอน ขนาดเท่ากัน */
    .peek-more-title { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 0 0 16px; }
    .peek-more-title i { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: block; }
    .peek-more-grid { display: flex; align-items: flex-start; }
    .pm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
    .pm-item {
        position: relative; width: 100%; border-radius: 20px; overflow: hidden; cursor: pointer;
        background: #181818; -webkit-tap-highlight-color: transparent; transition: transform 0.15s;
    }
    .pm-item:active { transform: scale(0.97); }
    .pm-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .pm-meta { --v2-text: #fff; --v2-subtext: rgba(255,255,255,0.6); min-height: 32px; }
    .pm-meta .v2-meta-user { flex: 0 1 auto; transition: transform 0.15s, opacity 0.15s; }
    .pm-meta .v2-meta-user:active { transform: scale(0.95); opacity: 0.7; }
    .pm-meta .v2-meta-more { margin-left: auto; }
    .pm-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s ease; }
    .pm-item img.loaded { opacity: 1; }
    .pm-item:not(.ready) {
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%);
        background-size: 200% 100%; animation: pgShimmer 1.5s infinite linear;
    }
    .pm-item .pm-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.3); opacity: 0; transition: opacity 0.25s ease; }
    .pm-item .pm-ph.on { opacity: 1; }
    /* 🎵 โพสต์ที่มีเพลง: ยังเป็นการ์ดโหลดจนกว่าเพลงจะโหลดเสร็จ (รูปซ่อน · รูปเบลอ/พื้นกระพริบต่อ) — ดู hqSndMark */
    .grid-thumb.hq-snd-wait > .grid-main-img, .grid-thumb.hq-snd-wait > .grid-slide-img,
    .v2-grid-thumb.hq-snd-wait > .v2-grid-img, .v2-grid-thumb.hq-snd-wait > .v2-slide-img,
    .pm-item.hq-snd-wait > img:not(.pm-ph), .svd-item.hq-snd-wait > img:not(.svd-ph),
    .peek-media-wrapper.hq-snd-wait .peek-real, .peek-media-wrapper.hq-snd-wait .peek-video { opacity: 0 !important; }
    .grid-thumb.hq-snd-wait > div:not(.grid-ph-wrap):not(.pu-loading-bar):not(.grid-select-indicator), .v2-grid-thumb.hq-snd-wait > .v2-icon, .pm-item.hq-snd-wait > :not(img) { opacity: 0 !important; }
    .grid-thumb.hq-snd-wait > .grid-ph-wrap, .v2-grid-thumb.hq-snd-wait > .v2-grid-ph-wrap { opacity: 1 !important; visibility: visible !important; }
    /* 🐞 การ์ดที่รูปโหลดแล้วพื้นเป็นดำ (.loaded) → ระหว่างรอเพลงเห็นเป็นกล่องดำ · ให้เป็นการ์ดโหลดสีเทากระพริบเหมือนโพสต์อื่น */
    .grid-thumb.hq-snd-wait, .v2-grid-thumb.hq-snd-wait, .pm-item.hq-snd-wait, .svd-item.hq-snd-wait { background-color: var(--bg3, #1c1c1e) !important; }
    .grid-thumb.hq-snd-wait, .v2-grid-thumb.hq-snd-wait, .pm-item.hq-snd-wait, .svd-item.hq-snd-wait,
    .peek-modal .peek-media-wrapper.hq-snd-wait .peek-slide { animation: hqSkPulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
    /* ⚡ รูปเบลอรองโหลดที่จางหายแล้ว = ไม่ต้องวาดอีก (จอใหญ่โพสต์เยอะ เบลอค้างทุกใบทำให้กระตุก) */
    .pm-item .pm-ph:not(.on) { visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.3s; }
    /* 🐞 เคยใช้ content-visibility: auto กับการ์ดนอกจอ — เลื่อนกลับมาการ์ดที่โหลดแล้วว่างวูบหนึ่งก่อนวาดใหม่
       (รูปถอดรหัสใหม่ + แอนิเมชันข้างในเริ่มใหม่) จึงเอาออก ให้การ์ดที่โหลดแล้วอยู่คงที่ตลอดการเลื่อน */
    .pm-item > img:not(.pm-ph):not(.pm-slide) { position: relative; z-index: 1; }
    .pm-item .pm-slide {
        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;
        opacity: 0; transition: opacity 0.8s ease; pointer-events: none;
    }
    .pm-item .pm-slide.active-slide { opacity: 1; }
    .pm-item .pm-multi { z-index: 3; }
    .pm-item.pm-skel {
        cursor: default; pointer-events: none;
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%);
        background-size: 200% 100%; animation: pgShimmer 1.5s infinite linear;
    }
    .pm-item .pm-multi { position: absolute; top: 10px; left: 10px; color: #fff; font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); pointer-events: none; }
    .peek-more-loading { height: 56px; display: none; align-items: center; justify-content: center; }
    .peek-more-loading.active { display: flex; }
    .peek-more-loading::after {
        content: ''; width: 22px; height: 22px; border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.2); border-top-color: #fff; animation: uptSpin 0.7s linear infinite;
    }

    @media (min-width: 768px) {
        .peek-modal.peek-page .peek-more { padding-left: 32px; padding-right: 32px; }
    }
    /* 🖥️ คอม/จอนอน (แบบ Pinterest): การ์ดโพสต์อยู่ "ในกริด" มุมซ้ายบน กว้างหลายคอลัมน์ (JS ตั้ง left/width
       ให้ตรงคอลัมน์ใน renderPeekMore) คอลัมน์ขวาสุดมีโพสต์อื่นเรียงข้าง ๆ แล้วต่อเต็มทุกคอลัมน์ใต้การ์ด
       ในการ์ด: รูปชิดขอบซ้าย · ขวา = ปุ่มไลก์/ผู้โพสต์/แคปชัน/คอมเมนต์ · ช่องพิมพ์คอมเมนต์ชิดล่าง */
    /* จอใหญ่ = แนวนอน หรือคอม (เมาส์) แม้จอตั้งแนวตั้ง — ตรงกับ window.HQ_WIDE_Q */
    @media (min-width: 900px) and (orientation: landscape), (min-width: 900px) and (hover: hover) and (pointer: fine) {
        .peek-modal.peek-page .ios-peek-card {
            flex-direction: row; align-items: stretch; gap: 0;
            width: calc(100% - 176px); max-width: 1100px; margin: 24px auto 0; padding: 0;
            background: #121212; border-radius: 32px; overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
        }
        .peek-modal.peek-page.pp-wide .ios-peek-card { position: absolute; top: 24px; margin: 0; max-width: none; z-index: 2; }
        .peek-modal.peek-page .peek-media-wrapper {
            flex: 0 0 auto; margin: 0; align-self: flex-start; border-radius: 0;
            width: min(50%, calc((100vh - 48px) * var(--pp-r, 0.8))) !important;
        }
        .peek-modal.peek-page .peek-slide img, .peek-modal.peek-page .peek-slide .peek-video { border-radius: 0; }
        .peek-modal.peek-page .peek-slider-track { --peek-slide-gap: 0px; }   /* เลื่อนรูปแล้วรูปชิดติดกัน */
        .peek-modal.peek-page .peek-info-col {
            display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-width: 0;
            padding: 20px 20px 20px 16px; box-sizing: border-box;
        }
        .peek-modal.peek-page .peek-middle-bar { order: 1; justify-content: flex-start; padding: 0 4px 2px 12px; min-height: 30px; }
        .peek-modal.peek-page .ios-peek-actions { order: 0; margin-top: 0; padding-right: 48px; }
        .peek-modal.peek-page .peek-middle-bar .peek-options-btn { top: -40px; }
        .peek-modal.peek-page #peek-author-row { order: 2; }
        .peek-modal.peek-page #peek-caption-row { order: 3; font-size: 16px; }
        .peek-modal.peek-page #floating-comments-area { order: 4; }
        /* 🗨️ จอกว้าง: คอมเมนต์กระจายเต็มแผงขวา (พับหลายบรรทัด เลื่อนขึ้นลงในแผง) — การ์ดสูงเท่ารูป (JS) */
        .peek-modal.peek-page.pp-wide .peek-info-col { min-height: 0; overflow: hidden; }
        .peek-modal.peek-page.pp-wide #floating-comments-area {
            flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
            touch-action: pan-y; align-content: flex-start; padding-top: 6px;
        }
        .peek-modal.peek-page.pp-wide #floating-comments-area .f-flow { width: 100%; min-width: 0; }
        .peek-modal.peek-page.pp-wide #floating-comments-area .f-grid { flex-wrap: wrap; row-gap: 16px; width: 100%; min-width: 0; }
        .peek-modal.peek-page.pp-wide #floating-comments-area .f-link.grow.f-wrap-cut { background: transparent; }
        /* เส้นท้ายบล็อกยื่นซุกใต้แคปซูลของบล็อกถัดไป (ขอบลบ) — เดิมเว้น margin 22px ระหว่างบล็อก เส้นโยงตอบกลับเลยขาดช่วง */
        .peek-modal.peek-page.pp-wide #floating-comments-area .f-track > .f-link.grow { flex: 0 0 28px; margin: 0 -6px; }
        .peek-modal.peek-page.pp-wide #floating-comments-area .f-grid > .f-block { margin-right: 0; }
        /* 🌳 คอมเมนต์แบบต้นไม้ (จอกว้าง): เรียงต่อกันเต็มแผง · คำตอบห้อยใต้ต้นทาง เส้นโยงแตกกิ่งโค้งแบบรากไม้
           ลำต้นอยู่ตรงกึ่งกลางรูปโปรไฟล์ของต้นทาง (ขอบแคปซูล 4 + รูป 24/2 = 16px) · กิ่งเลี้ยวโค้งเข้ากลางแคปซูลลูก (สูง 32 → 16) */
        .peek-modal.peek-page.pp-wide #floating-comments-area .f-flow { width: 100%; }
        .peek-modal.peek-page #f-reply-chip { order: 5; margin-top: auto; }
        .peek-modal.peek-page #inline-cmt-wrap { order: 6; }
        .peek-modal.peek-page #f-reply-chip[style*="none"] ~ #inline-cmt-wrap { margin-top: auto; }
        .peek-modal.peek-page .peek-page-back { top: 24px; left: 24px; width: 44px; height: 44px; }
        .peek-modal.peek-page.pp-wide .peek-page-back { position: absolute; top: 40px; left: calc(var(--pp-left, 32px) + 16px); }
        .peek-modal.peek-page.pp-wide .peek-more { margin-top: 24px; max-width: none; }
        .peek-modal.peek-page.pp-wide .peek-more-title { display: none; }
    }