/* ==========================================
       1. PROFILE HIGHLIGHTS ROW (แถบโชว์ไฮไลต์หน้าโปรไฟล์)
    ========================================== */
    .hl-profile-container {
        width: 100%; max-width: 600px; margin: 20px auto 0;
        padding: 0 16px; display: none;
    }
    /* 🖥️ คอม (≥768px): ชิดซ้ายเต็มหน้าต่าง ขอบ 32px ตรงกับส่วนหัว/กริดโพสต์ในโปรไฟล์ (profile.html, posts.html) */
    @media (min-width: 768px) {
        .hl-profile-container { max-width: 1040px; padding: 0 32px; }
    }
    /* 🖥️ คอม + หน้าต่างแนวนอน: แถวไฮไลต์อยู่ในกรอบเดียวกับส่วนบนของโปรไฟล์ (935px กึ่งกลาง) ไม่ชิดขอบซ้ายจอ
       ยังไม่มีไฮไลต์ (มีแค่ปุ่มสร้าง) → ปุ่มสร้างอยู่ตรงกลาง */
    @media (hover: hover) and (pointer: fine) and (min-width: 900px) {   /* คอม (เมาส์) จอแนวนอนหรือตั้งแนวตั้งก็ได้ */
        .hl-profile-container { max-width: 1040px; padding: 0 32px; }
        /* ไฮไลต์อยู่กึ่งกลางเหมือนส่วนบน (รวมกรณีมีแค่ปุ่มสร้าง) — ใช้ margin auto ที่ตัวแรก/ตัวสุดท้าย:
           พอดีกรอบ = อยู่กลาง · เยอะเกินกรอบ = เลื่อนดูได้ตามปกติ ไม่โดนตัดหัว (ต่างจาก justify-content:center) */
        .hl-profile-scroll > :first-child { margin-left: auto; }
        .hl-profile-scroll::after { content: ''; flex: 0 0 0; margin-right: auto; }   /* ปิดท้าย (ไม่นับปุ่ม + ที่ซ่อนอยู่) */
        /* ปุ่ม + สร้างไฮไลต์ย้ายไปมุมขวาบนของหน้าโปรไฟล์แล้ว (profile.html .hl-nav-btn) · ไม่มีไฮไลต์เลย = ซ่อนทั้งแถว */
        .hl-profile-scroll > .hl-add-btn { display: none !important; }
        .hl-profile-container:has(.hl-profile-scroll > .hl-add-btn:only-child) { display: none !important; }
    }
    .hl-profile-scroll {
        display: flex; gap: 8.1px; overflow-x: auto;   /* ชิดขึ้นอีก 40% จากเดิม 13.5px (เดิมชิดขึ้น 25% จาก 18px มาก่อนแล้ว) */
        padding-bottom: 20px; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hl-profile-scroll::-webkit-scrollbar { display: none; }
    
    .hl-item {
        position: relative;
        width: 135px; height: 135px;
        border-radius: 36px; flex-shrink: 0; cursor: pointer;
        overflow: hidden; transition: transform 0.2s, border-color 0.35s ease;
        /* ขอบปรับตามธีม: ธีมเข้ม → ขอบอ่อน, ธีมอ่อน → ขอบเข้ม (ตั้งค่าใน profile.html) */
        border: 2px solid var(--profile-theme-ring, var(--profile-theme-dark, rgba(255,255,255,0.15)));
        background: rgba(255,255,255,0.05);
    }
    .hl-item:active { transform: scale(0.95); }
    .hl-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.35s ease, transform 0.35s ease; }

    /* Progressive loading shimmer */
    .hl-item.hl-img-loading::before {
        content: ''; position: absolute; inset: 0; z-index: 5;
        background: rgba(255,255,255,0.06); border-radius: inherit;
        animation: asyncPulseBg 1.5s infinite ease-in-out;
        transition: opacity 0.25s ease;
    }
    .hl-item.hl-img-done::before { opacity: 0 !important; animation: none !important; pointer-events: none; }
    
    .hl-item::after {
        content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
        pointer-events: none;
    }
    
    .hl-item.hl-add-btn {
        border: none; background: transparent;
        /* เส้นจุด SVG — dash สั้นมาก + linecap round = จุดกลม, pathLength=100 + sum=5 → 20 จุดเท่ากันทุกช่อง */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='135' height='135'%3E%3Crect x='2' y='2' width='131' height='131' rx='34' ry='34' pathLength='100' fill='none' stroke='white' stroke-opacity='0.35' stroke-width='3' stroke-dasharray='0.1 4.9' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
        display: flex; align-items: center; justify-content: center;
    }
    .hl-item.hl-add-btn::after { display: none; }

    /* สถานะกำลังอัปโหลดไฮไลต์ (จางกระพริบ + แถบโหลดขาว) เหมือนโพสต์ */
    .hl-item.hl-uploading img { animation: hlBlink 1.1s ease-in-out infinite; }
    @keyframes hlBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
    .hl-item .hl-upload-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; }
    .hl-item .hl-upload-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: hlBar 1.1s ease-in-out infinite; }
    @keyframes hlBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }
    
    .hl-title {
        position: absolute; bottom: 12px; left: 10px; right: 10px;
        color: #fff; font-size: 13px; font-weight: 600;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
        text-align: center; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }

    /* ── HIGHLIGHT SKELETON ── */
    .hl-skeleton-scroll {
        display: flex; gap: 18px; overflow-x: auto; padding: 0 16px 20px;
        scrollbar-width: none;
    }
    .hl-skeleton-scroll::-webkit-scrollbar { display: none; }
    
    .hl-skeleton-item {
        width: 135px; height: 135px; border-radius: 36px; flex-shrink: 0;
        /* 🐞 เดิมพื้นขาว 5% + จางเหลือ 20% — แทบมองไม่เห็น ดูเป็นช่องว่างเหนือกริดโพสต์ระหว่างโหลด
           ตอนนี้ใช้การ์ดโหลดกระพริบแบบเดียวกับทุกที่ (สี/อนิเมชันจากกฎกลางใน index.html) */
        border: none;
    }
    @keyframes asyncPulseBg { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.7; } }

    .loading-text-dots::after {
        content: '';
        animation: loading-dots-anim 1.5s infinite;
    }
    @keyframes loading-dots-anim {
        0% { content: ''; }
        25% { content: '.'; }
        50% { content: '..'; }
        75% { content: '...'; }
        100% { content: ''; }
    }

    /* ==========================================
       2. HIGHLIGHTS MANAGE MODAL (สร้าง & แก้ไข)
    ========================================== */
    .hl-manage-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);
    }
    .hl-manage-modal.active { display: flex; }

    /* 🌟 เดิมล็อกความสูงรวมไว้แล้วให้กริดเลือกสตอรี่เลื่อนอยู่ภายในกล่องย่อยของตัวเอง (nested scroll)
       ผู้ใช้แจ้งว่าไม่ต้องการแบบนั้น อยากให้เลื่อนทั้งหน้าเป็นก้อนเดียวเหมือนหน้ากริดไฮไลต์ปกติ — เปลี่ยน
       ให้กล่องนี้เป็นตัวเลื่อน (overflow-y:auto) เดียวของทั้งโมดัล ลูกๆ ข้างในไหลตามเนื้อหาปกติ ไม่มีใคร
       ถูกตัด/บีบให้เลื่อนซ้อนกันอีกที 🌟 */
    .hl-m-content-wrapper {
        width: 100%; max-width: 460px; display: flex; flex-direction: column;
        padding: 20px 0; margin: auto; height: 100%; max-height: 94vh;
        overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        /* 🐞 เดิมไม่มีบรรทัดนี้ — บนมือถือ (โดยเฉพาะ iOS Safari) สะบัดเลื่อนถึงขอบบน/ล่างสุดของกล่องนี้
           แรงๆ จะเกิด scroll chaining ทะลุไปให้ body/html ข้างนอกรับช่วง rubber-band/bounce ต่อ ทั้งที่
           body ถูกล็อกด้วย overflow:hidden ไว้แล้ว (ดู openManageHighlight()) — บน iOS overflow:hidden
           อย่างเดียวป้องกันไม่ได้ 100% เจ้าตัวเบราว์เซอร์ "แย่ง" ท่าทางสัมผัสไปจาก touch scroll ปกติของ
           กล่องนี้ระหว่างกลาง ทำให้ผู้ใช้รู้สึกว่าเลื่อนไม่ได้/ค้าง ทั้งที่จริงๆ แค่โดนแย่ง gesture ไป กันไว้
           แบบเดียวกับที่ .app-view (index.html) ใช้อยู่แล้วสำหรับปัญหาคล้ายกัน 🌟 */
        overscroll-behavior-y: contain;
    }
    .hl-m-content-wrapper::-webkit-scrollbar { display: none; }
    /* กล่องเลื่อนกว้างเต็มหน้าต่าง (กริดสตอรี่เต็มจอ) — ส่วนหัว/ปก/ช่องชื่อยังกว้างไม่เกิน 460px กึ่งกลาง */
    .hl-manage-modal .hl-m-content-wrapper { max-width: none; }
    .hl-manage-modal .hl-m-header, .hl-manage-modal .hl-m-cover-area, .hl-manage-modal .hl-m-inputs, .hl-manage-modal .hl-m-story-header {
        max-width: 460px; margin-left: auto; margin-right: auto; width: 100%;
    }
    /* 🐞 มือถือ (หน้าเว็บเลื่อนเอง): ชั้น position:fixed ถูกตัดสั้นกว่าจอ (โดยเฉพาะแอปหน้าจอหลัก) เห็นแถบดำตัดด้านล่าง
       → ตอนเปิด JS ย้ายโมดัลนี้เป็น absolute ตรงตำแหน่งที่เลื่อนอยู่ (hlModalPin) สูงเต็มจอจริง เนื้อหาเลื่อนได้ถึงขอบล่าง */
    html.hq-root-scroll .hl-manage-modal.hl-pinned { position: absolute !important; inset: auto !important; left: 0 !important; right: 0 !important; }
    html:has(.hl-manage-modal.hl-pinned.active) #bottom-nav-container { visibility: hidden; }   /* เมนูบาร์ไม่ลอยทับหน้าสร้างไฮไลต์ */
    /* แอปหน้าจอหลัก: ส่วนหัวห่างขอบบนเท่าหน้าสร้างโพสต์ (ใต้แถบสถานะ + 3% ของจอ) — เบราว์เซอร์เหมือนเดิม */
    html.hq-standalone .hl-manage-modal .hl-m-header { margin-top: calc(6px + 3vh); }
    html.hq-root-scroll .hl-manage-modal.hl-pinned .hl-m-content-wrapper {
        max-height: none; height: 100%; margin: 0;
        padding: max(20px, env(safe-area-inset-top)) 0 calc(env(safe-area-inset-bottom) + 24px);
    }

    .hl-m-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0 20px; margin-bottom: 24px; z-index: 10; width: 100%;
    }
    /* 🌟 ตามที่แจ้ง — ไม่ต้องมีข้อความ "สร้างไฮไลต์"/"แก้ไขไฮไลต์" ในหัวโมดัลอีกแล้ว เข้ากับปุ่มปิด/
       ยืนยันแบบไอคอนล้วนๆ ที่ทำไปแล้ว (เหมือนหัวโมดัลอัปโหลดโพสต์/สตอรี่ที่ไม่มีข้อความหัวข้อเช่นกัน)
       ซ่อนด้วย display:none แทนการลบ element ออกจาก HTML เพราะโค้ด JS ยังตั้งค่าข้อความนี้อยู่
       (ตอนสลับโหมดสร้าง/แก้ไข) ลบ element ทิ้งจริงจะพัง .innerText ตรงนั้น — เป็น display:none ไม่มี
       ผลอะไรก็พอ 🌟 */
    .hl-m-title { display: none; }
    .hl-m-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); -webkit-backdrop-filter: blur(10px); transition: 0.2s; z-index: 2;
    }
    .hl-m-close-btn:active { transform: scale(0.85); background: rgba(255,255,255,0.2); }

    .hl-m-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; z-index: 2;
    }
    .hl-m-submit-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .hl-m-submit-btn:active:not(:disabled) { transform: scale(0.95); }

    /* ── Cover Upload — กลับไปเป็นเลย์เอาต์เดิมก่อนหน้านี้ (การ์ดใหญ่ 240px แยกแถวกับช่องชื่อ) ──
       🌟 เส้นขอบเดิมเป็น CSS dashed ธรรมดา เปลี่ยนเป็นเส้นประจุดกลมแบบเดียวกับปุ่ม "+" เพิ่มไฮไลต์ใหม่
       ในหน้าโปรไฟล์ (.hl-item.hl-add-btn ใช้ SVG พื้นหลังวาดเส้นจุดเอง ไม่ใช่ border ปกติ เพราะ CSS
       border-style:dotted ธรรมดาวาดเป็นวงรี/สี่เหลี่ยมเล็กๆ ไม่กลมเนียนพอ) ก็อปสูตร SVG เดียวกันมาปรับ
       ขนาดให้ตรงกับกรอบนี้ (240px, มุมโค้ง 56px) แทน 🌟 */
    .hl-m-cover-area {
        width: 100%; display: flex; justify-content: center; align-items: center;
        padding: 0 20px; margin-bottom: 16px; flex-shrink: 0;
    }
    .hl-m-cover-card {
        width: 240px; height: 240px;
        flex-shrink: 0; border-radius: 56px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Crect x='2' y='2' width='236' height='236' rx='54' ry='54' pathLength='100' fill='none' stroke='white' stroke-opacity='0.35' stroke-width='3' stroke-dasharray='0.1 4.9' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        color: rgba(255,255,255,0.6); cursor: pointer; transition: 0.2s;
        position: relative; overflow: hidden;
    }
    .hl-m-cover-card.has-img { background-image: none; background-color: transparent; }
    .hl-m-cover-card:active { transform: scale(0.98); background-color: rgba(255,255,255,0.1); }

    .hl-m-cover-img { width: 100%; height: 100%; object-fit: cover; display: none; position: absolute; inset: 0; z-index: 1;}
    /* 🌟 ไอคอนเปลี่ยนจาก bx-image-add เป็น bx-plus (ตัวบวกเปล่าๆ) — ไอคอนเดียวกับปุ่มเพิ่มรูปในโพสต์
       ตามที่แจ้ง 🌟 */
    .hl-m-cover-icon { font-size: 64px; z-index: 2;}
    .hl-m-cover-text { display: none; }

    /* 🌟 ย้ายจากบนขวาลงมาล่างขวา เข้าธีมเดียวกับปุ่มลบรูปที่อัปโหลดแล้วในโพสต์ (.pu-delete-img) ตามที่แจ้ง 🌟 */
    .hl-m-delete-cover {
        position: absolute; bottom: 16px; right: 16px; width: 40px; height: 40px;
        border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
        display: none; align-items: center; justify-content: center; font-size: 24px;
        cursor: pointer; z-index: 10; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2);
    }

    /* ── Title Input ── */
    .hl-m-inputs { padding: 0 30px; margin-bottom: 24px; flex-shrink: 0; }
    .hl-m-caption {
        width: 100%; background: transparent; border: none;
        color: #fff; font-size: 20px; font-weight: 700; outline: none; text-align: center;
        padding: 10px 0; font-family: inherit; transition: 0.2s;
    }
    .hl-m-caption::placeholder { color: rgba(255,255,255,0.4); }

    /* ── Story Track ──
       🌟 ตามที่แจ้ง — ไม่ต้องการให้กริดเลื่อนอยู่ในกล่องย่อยของตัวเอง (nested scroll) อยากให้เป็นส่วน
       หนึ่งของหน้าที่เลื่อนไปพร้อมกับทั้งโมดัล (.hl-m-content-wrapper ด้านบนเป็นคนเลื่อนแทน) เอา
       flex:1/min-height:0/overflow-y:auto ที่เคยผูกไว้กับกล่องนี้และกล่องแม่ (.hl-m-story-section)
       ออกทั้งหมด ปล่อยให้สูงตามเนื้อหาจริงตามปกติ 🌟 */
    .hl-m-story-section {
        display: flex; flex-direction: column; padding-bottom: 20px;
    }
    .hl-m-story-header {
        font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.6);
        padding: 0 20px; margin-bottom: 16px;
    }
    /* กริดเลือกสตอรี่ขนาดเดียวกับกริดสตอรี่ในไฮไลต์ (.sg-grid ใน stories.html) — มือถือ 2 คอลัมน์ ช่องห่าง 8px
       ขอบข้าง 8px · จอกว้างหลายคอลัมน์ (ช่องละ ≥ 200px) เต็มหน้าต่าง */
    .hl-m-story-track {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
        padding: 10px 8px 20px;
    }
    @media (min-width: 768px) {
        .hl-m-story-track { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 12px 24px 24px; }
    }

    .hl-m-story-item {
        width: 100%; aspect-ratio: 4 / 5;
        position: relative; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        transition: transform 0.16s cubic-bezier(0.1, 0.8, 0.3, 1);
        border-radius: 24px; background: transparent;
    }
    .hl-m-story-img-wrapper {
        position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
        background: #111; display: flex; align-items: center; justify-content: center;
    }
    .hl-m-story-img-wrapper img { 
        width: 100%; height: 100%; object-fit: cover; 
        opacity: 0; transition: opacity 0.3s; position: absolute; inset: 0; z-index: 2;
    }
    .hl-m-story-img-wrapper img.loaded { opacity: 1; }
    /* วิดีโอที่ยังไม่มีปก — โชว์เฟรมแรกของวิดีโอเองเลย (ไม่ต้องรอสร้างปก ซึ่งช้า/ทำไม่ได้ถ้าไฟล์ไม่เปิด CORS) */
    .hl-m-story-img-wrapper video.hl-m-story-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; background: #111; }
    /* 🌟 ปกความละเอียดต่ำ — ขึ้นทันทีระหว่างรอภาพชัดของช่องนั้น ๆ 🌟 */
    .hl-m-story-img-wrapper img.hl-m-story-ph { opacity: 1; z-index: 1; filter: blur(10px); transform: scale(1.08); }

    /* สไตล์เมื่อสตอรี่ถูกเลือก */
    .hl-m-story-item.selected { transform: scale(0.92); }
    .hl-m-story-item.selected::after {
        content: ''; position: absolute; 
        top: -6px; left: -6px; right: -6px; bottom: -6px; 
        border: 3px dashed #fff; border-radius: 28px;
        pointer-events: none; z-index: 5;
    }

    /* ── CROP MODAL ── */
    #hl-crop-modal { z-index: 2000000 !important; }