/* 🧊 กรอบ 3D ทับโพสต์ — ลายล้นออกนอกขอบการ์ด (ไม่ถูกตัดอยู่ในรูป): การ์ดที่มีกรอบเลิกตัดขอบ (overflow)
       แล้วตัดมุมโค้งที่ตัวรูป/ชั้นรูปเบลอแทน · การ์ดมีกรอบลอยเหนือการ์ดข้าง ๆ (z-index) ลายจะได้พาดทับได้ */
    :is(.v2-grid-thumb, .grid-thumb, .pm-item, .svd-item, .arc-item, .actv-grid-thumb, .peek-media-wrapper, .hqf-thumb, .pu-frame-host):has(> .hqf) {
        overflow: visible !important; content-visibility: visible !important; contain: none !important;
        z-index: auto !important; will-change: auto !important;   /* ไม่สร้างชั้นซ้อนของตัวเอง — กรอบ (z 5) จะได้อยู่เหนือการ์ดข้าง ๆ ทุกใบ */
    }
    :is(.v2-grid-thumb, .grid-thumb, .pm-item, .svd-item, .arc-item, .actv-grid-thumb, .peek-media-wrapper, .hqf-thumb):has(> .hqf)
        > :is(img, video, .v2-grid-ph-wrap, .grid-ph-wrap, .peek-slider-container, .v2-skeleton, .arc-text-only) { border-radius: inherit; overflow: hidden; }
    /* ไอคอนบนการ์ด (หัวใจ/หลายรูป/แท็ก/เสียง ฯลฯ) อยู่เหนือกรอบเสมอ */
    :is(.v2-grid-thumb, .grid-thumb, .pm-item, .svd-item, .arc-item, .actv-grid-thumb, .peek-media-wrapper):has(> .hqf) > :not(.hqf):not(img):not(video):not(.v2-grid-ph-wrap):not(.grid-ph-wrap):not(.peek-slider-container):not(.v2-skeleton) { z-index: 6 !important; }
    /* --hqf-s = ขนาดชิ้นมุม · --hqf-k = ยื่นออกนอกโพสต์แค่ไหน (1 = เต็มที่ตามที่วาด)
       กริด (ฟีด/โปรไฟล์ ฯลฯ): ชิ้นเล็กลง + ยื่นแค่ ~5px ไม่เกินครึ่งช่องว่างระหว่างโพสต์ — ไม่บังโพสต์ข้าง ๆ
       หน้าโพสต์เต็ม/หน้าอัปโหลด: ที่ว่างรอบรูปเยอะกว่า ยื่นได้มากขึ้นนิดหน่อย */
    /* 🐞 โพสต์มีกรอบตอนกำลังโหลดเป็นมุมเหลี่ยม: การ์ดมีกรอบเลิกตัดขอบ (overflow) → ชั้นโหลดที่เคยอาศัยการ์ดตัดมุมให้โผล่เหลี่ยม
       · ชั้นกระพริบ ::before ของกริดโปรไฟล์ → มุมโค้งตามการ์ด
       · รูปเบลอระหว่างโหลดที่ขยาย (scale) + เบลอ ล้นออกนอกการ์ด → ตัดด้วย clip-path ในพิกัดของรูปเอง
         (ขอบตัด = ขอบการ์ดหลังขยาย: inset (1 - 1/scale)/2 · มุมโค้ง = มุมการ์ด ÷ scale) */
    :is(.v2-grid-thumb, .grid-thumb, .pm-item, .svd-item, .arc-item, .actv-grid-thumb):has(> .hqf)::before,
    :is(.v2-grid-thumb, .grid-thumb, .pm-item, .svd-item, .arc-item, .actv-grid-thumb):has(> .hqf)::after { border-radius: inherit; }
    .pm-item:has(> .hqf) > .pm-ph { clip-path: inset(11.54% round calc(20px / 1.3)); }
    .svd-item:has(> .hqf) > .svd-ph { clip-path: inset(11.54% round calc(18px / 1.3)); }
    .arc-item:has(> .hqf) > .arc-ph { clip-path: inset(3.7% round calc(24px / 1.08)); }
    .actv-grid-thumb:has(> .hqf) > .actv-grid-ph { clip-path: inset(3.7% round calc(24px / 1.08)); }
    .hqf { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; --hqf-s: 0.78; --hqf-k: 0.25; }
    .peek-media-wrapper > .hqf, .pu-frame-host > .hqf { --hqf-s: 0.92; --hqf-k: 0.32; }
    /* img[class] / img.p-* — ชนะกฎรูปในการ์ดต่าง ๆ (.pm-item img, .svd-item img ฯลฯ ที่ตั้งเต็มกรอบ/ซ่อนรอโหลด) */
    .hqf > img[class] { position: absolute; display: block; max-width: none; height: auto; margin: 0; opacity: 1; transition: none;
        object-fit: fill; border-radius: 0; clip-path: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
    .hqf > img.p-tl, .hqf > img.p-t { top: 0; left: 0; }
    .hqf > img.p-tr { top: 0; right: 0; }
    .hqf > img.p-bl, .hqf > img.p-b { bottom: 0; left: 0; }
    .hqf > img.p-br { bottom: 0; right: 0; }
    .hqf > img.p-l { top: 0; left: 0; width: auto; }
    .hqf > img.p-r { top: 0; right: 0; width: auto; }
    /* กรอบเพิ่งเปลี่ยน (ตัวเลือก/หน้าอัปโหลด) — ค่อย ๆ ขึ้น */
    .hqf.hqf-in { animation: hqfIn 0.35s cubic-bezier(0.19, 1, 0.22, 1); }
    @keyframes hqfIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
    /* ระหว่างการ์ดยังกระพริบรอรูป ไม่ต้องโชว์กรอบลอยบนพื้นเปล่า */
    .v2-grid-thumb:has(> .v2-grid-img:not(.loaded)) > .hqf,
    .grid-thumb:has(> .grid-main-img:not(.loaded)) > .hqf { opacity: 0; }
    .v2-grid-thumb > .hqf, .grid-thumb > .hqf { transition: opacity 0.3s ease; }

    /* ปุ่ม/ไอคอนที่ต้องอยู่เหนือกรอบ */
    .arc-checkbox, .pu-delete-img { z-index: 3; }
    /* หน้าอัปโหลด: กล่องเท่ากรอบรูป (สูตรเดียวกับ .pu-carousel) ครอบตัวเลื่อนรูป */
    .pu-frame-host { position: relative; width: min(100%, calc(46vh * var(--pu-ratio))); max-height: 46vh; margin: 0 auto; border-radius: 32px; transition: width 0.3s ease; }
    .pu-frame-host > .pu-carousel { width: 100%; }
    .pu-frame-host > .hqf { z-index: 3; }

    /* ปุ่ม "กรอบรูป" ในหน้าอัปโหลด/แก้ไขโพสต์ — แคปซูลเส้นประแบบเดียวกับปุ่มเพิ่มเสียง/แท็กผู้คน */
    .pu-frame-row { display: flex; width: 100%; justify-content: center; }
    .pu-frame-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-frame-btn:active { background: rgba(255,255,255,0.1); transform: scale(0.96); }
    .pu-frame-btn > i { font-size: 16px; flex: none; }
    .pu-frame-btn > .bx-plus { font-size: inherit; }
    .pu-frame-btn.on { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 6px 8px 6px 14px; }
    .pu-frame-btn .pfb-x { flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: 0.7; margin-left: 2px; }

    /* แผ่นเลือกกรอบ — ตัวอย่างวางทับรูปของโพสต์นี้จริง ๆ */
    .hqf-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; }
    .hqf-sheet-bg.open { opacity: 1; }
    .hqf-sheet { width: 100%; max-width: 480px; max-height: min(78vh, 680px); 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.19, 1, 0.22, 1); }
    .hqf-sheet-bg.open .hqf-sheet { transform: none; }
    @media (min-width: 700px) { .hqf-sheet-bg { align-items: center; } .hqf-sheet { border-radius: 22px; padding-bottom: 0; } }
    .hqf-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; flex: none; }
    .hqf-head b { font-size: 16px; }
    .hqf-head button { background: none; border: none; color: rgba(255,255,255,0.6); font: inherit; font-size: 14px; cursor: pointer; padding: 6px 8px; min-height: 44px; }
    .hqf-grid { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 16px 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; touch-action: pan-y; }
    .hqf-opt[hidden] { display: none; }
    .hqf-th { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
    /* หมวดลาย — แคปซูลเลื่อนแนวนอน */
    .hqf-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 12px; flex: none; -webkit-overflow-scrolling: touch; }
    .hqf-chips::-webkit-scrollbar { display: none; }
    .hqf-chip { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.75); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
    .hqf-chip.on { background: #fff; color: #000; border-color: #fff; }
    .hqf-opt { display: flex; flex-direction: column; gap: 6px; background: none; border: none; padding: 0; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .hqf-thumb { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #0d0d0d center / cover no-repeat;
        outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.2s, transform 0.15s; }
    .hqf-opt:active .hqf-thumb { transform: scale(0.95); }
    .hqf-opt.sel .hqf-thumb { outline-color: #fff; }
    .hqf-thumb .hqf-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(255,255,255,0.4); }
    .hqf-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hqf-opt.sel .hqf-name { color: #fff; }

    /* ✨ กรอบเคลื่อนไหว (frame.anim) — ตัวกรอบ "อยู่นิ่ง" ไม่ขยาย/หด/เด้ง · ความเคลื่อนไหวมาจากแสงและอนุภาคที่เข้ากับลายนั้น
       วางตามพิกัดที่วิเคราะห์จากภาพชิ้นจริง (pfx: จุดสะท้อนแสง g · ปลายหยด t · ปลายเปลว u — tools/frame_fx.py)
       แต่ละชิ้นห่อด้วย .hqf-pc (ขนาด/ตำแหน่งเดียวกับรูปชิ้น) เอฟเฟกต์จึงอ้างพิกัด % ของชิ้นได้ตรง
         shine  เงาวิ่ง — แถบแสงไล่ผ่านผิวโลหะ ไล่ต่อกันจากมุมบนซ้ายไปล่างขวาเหมือนแสงไฟเคลื่อนผ่าน แล้วพักยาว · ประกายวาบนาน ๆ ครั้ง
         glint  ระยิบ — ประกายแฉก (star filter) วาบตรงจุดสะท้อนจริงทีละจุด ไม่พร้อมกัน
         iris   สีรุ้ง — แสงสีรุ้งบาง ๆ ไล่ผ่านผิวแบบปีกผีเสื้อ/มุก + ประกายวาบ
         drip   หยดไหล — หยดก่อตัวที่ปลาย ค่อย ๆ อุ้มน้ำหนักแล้วร่วงเร่งตามแรงโน้มถ่วง
         flame  ไฟลุก — ไอร้อนบิดภาพ (SVG turbulence) + สะเก็ดไฟลอยขึ้นจากปลายเปลวแบบส่าย ๆ
         bolt   ไฟฟ้า — กระแสไฟแลบ 2-3 ทีติดกันเป็นจังหวะไม่สม่ำเสมอ พร้อมแสงเรืองรอบลาย
         bubble ฟองลอย — ฟองใส ๆ ลอยขึ้นจากกลุ่มฟองแล้วจางหาย + เงาวิ่ง
       วัสดุโฮโล: สีรุ้งของผิวไล่ช้า ๆ ทั้งกรอบ · นอกจอหยุด (.hqf-off) · ตั้ง "ลดการเคลื่อนไหว" = กรอบนิ่ง */
    .hqf > .hqf-pc { position: absolute; display: block; pointer-events: none; }
    .hqf > .hqf-pc.p-tl, .hqf > .hqf-pc.p-t { top: 0; left: 0; }
    .hqf > .hqf-pc.p-tr { top: 0; right: 0; }
    .hqf > .hqf-pc.p-bl, .hqf > .hqf-pc.p-b { bottom: 0; left: 0; }
    .hqf > .hqf-pc.p-br { bottom: 0; right: 0; }
    .hqf .hqf-pc > img.hqf-pi { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important;
        margin: 0 !important; opacity: 1 !important; transform: none !important; transition: none !important; object-fit: fill !important;
        border-radius: 0 !important; clip-path: none !important; display: block !important; pointer-events: none; user-select: none; -webkit-user-drag: none; }
    .hqf-pc > i, .hqaf > i { position: absolute; display: block; pointer-events: none; }
    /* แถบแสงไล่ผ่านผิว (ตัดด้วยรูปชิ้นเป็น mask · dodge = โลหะสว่างวาบ เงาดำยังดำ) */
    .hqf-sw { inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: color-dodge;
        background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.18) 55%, transparent 60%) no-repeat;
        background-size: 260% 100%; background-position: 100% 0; animation: hqfSweep 7.5s cubic-bezier(0.45, 0.05, 0.3, 1) infinite; }
    .hqf-sw.hqf-sw-iris { animation-duration: 8.5s;
        background-image: linear-gradient(115deg, transparent 36%, rgba(255,150,225,0.42) 43%, rgba(150,205,255,0.55) 50%, rgba(165,255,215,0.42) 57%, transparent 64%); }
    @keyframes hqfSweep { 0% { background-position: 100% 0; } 24%, 100% { background-position: 0 0; } }
    /* ประกายแฉก — โผล่ หมุนนิด ๆ แล้วหาย (ขนาด --s = % ของชิ้น) */
    .hqf-gt { width: calc(var(--s) * 1%); aspect-ratio: 1; margin: calc(var(--s) * -0.5%) 0 0 calc(var(--s) * -0.5%); opacity: 0; mix-blend-mode: screen;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='24' fill='url(%23g)'/%3E%3Cpath d='M50 0L51.6 48.4L100 50L51.6 51.6L50 100L48.4 51.6L0 50L48.4 48.4Z' fill='%23fff'/%3E%3Cpath d='M50 26L50.9 49.1L74 50L50.9 50.9L50 74L49.1 50.9L26 50L49.1 49.1Z' transform='rotate(45 50 50)' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
        animation: hqfGlint 5s ease-out infinite; }
    @keyframes hqfGlint { 0% { opacity: 0; transform: scale(0.2) rotate(-25deg); } 5% { opacity: 1; transform: scale(1) rotate(0deg); }
        13% { opacity: 0; transform: scale(0.35) rotate(30deg); } 100% { opacity: 0; transform: scale(0.2) rotate(30deg); } }
    /* หยด — ก่อตัว → อุ้มน้ำหนัก (ยืดลง) → ร่วงเร่ง แล้วจางก่อนถึงกลางรูป */
    .hqf-dp { width: 1.6%; aspect-ratio: 0.78; margin-left: -0.8%; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; transform-origin: 50% 0; opacity: 0;
        background: radial-gradient(circle at 34% 30%, #fff 0 14%, var(--dp1, #d6dbe2) 34%, var(--dp2, #4b5058) 82%);
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)); animation: hqfDrop 6s linear infinite; }
    @keyframes hqfDrop {
        0% { opacity: 0; transform: translateY(-30%) scale(0.35); }
        16% { opacity: 1; transform: translateY(0) scale(0.95, 0.9); animation-timing-function: ease-in-out; }
        42% { transform: translateY(18%) scale(0.92, 1.16); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.55); }
        62% { opacity: 1; transform: translateY(1500%) scale(0.74, 1.38); }
        67%, 100% { opacity: 0; transform: translateY(1750%) scale(0.7, 1.3); } }
    .hqf-m-ink .hqf-dp { --dp1: #3b3b3e; --dp2: #050505; }
    .hqf-m-pearl .hqf-dp { --dp1: #f1ebe4; --dp2: #9b928a; }
    .hqf-m-gunmetal .hqf-dp { --dp1: #9aa1a9; --dp2: #24282d; }
    .hqf-m-holo .hqf-dp { --dp1: #e6d6ff; --dp2: #5f73a1; }
    /* ไฟ — ไอร้อนบิดภาพ + สะเก็ดไฟ (จุดแสงเล็ก ๆ ลอยส่ายขึ้นแล้วมอด) */
    .hqf-a-flame .hqf-pc > img.hqf-pi, .hqaf.hqf-a-flame > img.af-img { filter: url(#hqf-heat) !important; }
    .hqf-em { width: 1.1%; aspect-ratio: 1; margin: -0.55% 0 0 -0.55%; border-radius: 50%; opacity: 0;
        background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 72%);
        filter: drop-shadow(0 0 2px rgba(255,255,255,0.95)); animation: hqfEmber 3s ease-out infinite; }
    @keyframes hqfEmber { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 12% { opacity: 1; }
        55% { opacity: 0.9; transform: translate(var(--dx1), -950%) scale(0.85); } 100% { opacity: 0; transform: translate(var(--dx2), -1900%) scale(0.3); } }
    /* ไฟฟ้า — แลบ 2-3 ทีติดกันแล้วเงียบ (แต่ละชิ้นจังหวะไม่ตรงกัน) */
    .hqf-a-bolt .hqf-pc > img.hqf-pi, .hqaf.hqf-a-bolt > img.af-img { animation: hqfZap 4.6s linear infinite; }
    .hqf-a-bolt .hqf-pc:nth-of-type(2) > img.hqf-pi { animation-duration: 5.3s; animation-delay: -1.9s; }
    .hqf-a-bolt .hqf-pc:nth-of-type(3) > img.hqf-pi { animation-duration: 3.9s; animation-delay: -0.8s; }
    .hqf-a-bolt .hqf-pc:nth-of-type(4) > img.hqf-pi { animation-duration: 6.1s; animation-delay: -3.2s; }
    @keyframes hqfZap { 0%, 70%, 100% { filter: none; }
        71% { filter: brightness(1.9) drop-shadow(0 0 3px rgba(200,225,255,0.95)); } 72.5% { filter: brightness(1.1); }
        74% { filter: brightness(2.3) drop-shadow(0 0 5px rgba(200,225,255,1)); } 76% { filter: brightness(1.05); }
        79% { filter: brightness(1.5) drop-shadow(0 0 3px rgba(200,225,255,0.8)); } 82% { filter: none; } }
    /* ฟอง — ฟองใสลอยขึ้น ส่ายนิด ๆ แล้วจาง */
    .hqf-bb { width: 2.4%; aspect-ratio: 1; margin: -1.2% 0 0 -1.2%; border-radius: 50%; opacity: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
        background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.95) 0 9%, rgba(255,255,255,0.12) 34%, rgba(255,255,255,0.02) 62%);
        animation: hqfBubble 6s ease-in-out infinite; }
    @keyframes hqfBubble { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 12% { opacity: 0.95; transform: translate(0, -80%) scale(1); }
        55% { transform: translate(var(--dx1), -600%) scale(1); } 100% { opacity: 0; transform: translate(var(--dx2), -1250%) scale(1.08); } }
    /* โฮโล — สีรุ้งของผิวไล่ช้า ๆ */
    .hqf.hqf-holo { animation: hqfHolo 14s linear infinite; }
    @keyframes hqfHolo { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
    .hqf-off, .hqf-off * { animation-play-state: paused !important; }
    /* ตัวเลือกกรอบ: ป้ายบอกว่าเคลื่อนไหว */
    .hqf-opt[data-anim] .hqf-thumb::after { content: '✦'; position: absolute; z-index: 7; top: 6px; right: 7px; font-size: 11px; line-height: 18px; width: 18px; text-align: center;
        border-radius: 9px; background: rgba(0,0,0,0.55); color: #fff; }
    @media (prefers-reduced-motion: reduce) {
        .hqf.hqf-in { animation: none; }
        .hqf.hqf-holo, .hqf-anim img { animation: none !important; filter: none !important; }
        .hqf-pc > i, .hqaf > i { display: none !important; }
        .hqf-sheet, .hqf-sheet-bg { transition: none; }
    }