/* ==========================================
       STORY GRID VIEWER
    ========================================== */
    .story-grid-modal {
        position: fixed; inset: 0; 
        background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        z-index: 99999; display: none; flex-direction: column;
        animation: svFadeIn 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);
    }
    .story-grid-modal.active { display: flex; }
    
    .sg-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: max(16px, env(safe-area-inset-top)) 16px 16px;
        background: transparent; border-bottom: none;
        position: sticky; top: 0; z-index: 10;
        transition: opacity 0.2s;
    }
    .sg-title { color: #fff; font-size: 16px; font-weight: 700; flex: 1; text-align: center; }
    .sg-close-btn { background: transparent; color: #fff; font-size: 32px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px;}
    .sg-close-btn:active { opacity: 0.7; transform: scale(0.9); }
    .sg-placeholder-btn { width: 40px; height: 40px; }

    .sg-content { flex: 1; overflow-y: auto; padding: 10px 8px; transition: opacity 0.2s; }
    .sg-grid {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
        width: 100%; max-width: 600px; margin: 0 auto;
    }
    /* 🖥️ หน้าต่างคอมแนวนอน — เดิมตีกรอบกว้างแค่ 600px (2 คอลัมน์) พื้นที่ด้านข้างว่างเปล่า
       ขยายเต็มหน้าต่างแบบเดียวกับกริดโพสต์: จำนวนคอลัมน์ตามความกว้าง (ช่องละ ≥ 200px) */
    @media (min-width: 768px) {
        .sg-content { padding: 12px 24px 24px; }
        .sg-grid { max-width: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    }
    /* 🌟 ไม่มีอนิเมชันโผล่แล้ว — ช่องอยู่ตรงนั้นตั้งแต่แรก ภาพมาถึงเมื่อไหร่ก็ทับลงไปเนียน ๆ
          (ของเดิมค่อย ๆ เลื่อนขึ้นมาทีละช่อง ทำให้เปิดไฮไลต์ซ้ำแล้วรู้สึกเหมือนโหลดใหม่ทุกครั้ง) 🌟 */
    .sg-item {
        position: relative; aspect-ratio: 4 / 5; background: #262626; cursor: pointer; overflow: hidden;
        border-radius: 24px;
        opacity: 1; transform: none;
    }

    .sg-item img, .sg-item video {
        width: 100%; height: 100%; object-fit: cover; opacity: 1;
        border-radius: inherit;
    }
    /* 🌟 ปกเบลอต้องอยู่ในกล่องที่ตัดขอบมนเอง — filter: blur() ทำให้ภาพหลุดกรอบ
          overflow:hidden ของช่อง มุมเลยกลายเป็นเหลี่ยม 🌟 */
    .sg-ph-wrap {
        position: absolute; inset: 0; z-index: 1;
        border-radius: inherit; overflow: hidden; pointer-events: none;
    }
    .sg-ph-wrap img.sg-ph { opacity: 1; filter: blur(15px); transform: scale(1.3); border-radius: 0; }

    /* ==========================================
       STORY VIEWER UI
    ========================================== */
    .story-viewer-modal {
        position: fixed; inset: 0; background: #000;
        z-index: 100060; display: none; flex-direction: column; align-items: center; justify-content: center;
        animation: svFadeIn 0.4s cubic-bezier(0.1, 0.8, 0.3, 1); user-select: none;
    }
    .story-viewer-modal.active { display: flex; }
    @keyframes svFadeIn { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1); } }
    /* 🐞 iPhone: หน้าเว็บเด้งรีโหลด ("ถูกโหลดใหม่เนื่องจากเกิดปัญหา") ~1-2 วิหลังกดเปิดสตอรี่ — แอนิเมชันย่อ/ขยาย (transform)
       ทั้งตัวเล่นทำให้ Safari ต้องวาดทั้งตัวเล่น (สตอรี่ทุกหน้า) เป็นภาพเดียวระหว่างแอนิเมชัน แรมพุ่ง → มือถือใช้แค่จางเข้า */
    @keyframes svFadeInLite { from { opacity: 0; } to { opacity: 1; } }
    @media (pointer: coarse) {
        .story-viewer-modal { animation: svFadeInLite 0.25s ease-out; }
        /* หัวใจ/สามจุด/การ์ดหน้าใหม่วาดช้าตอนเลื่อน (Safari วาดไม่ทัน) — ตัดส่วนที่วาดหนักบนมือถือ:
           เงา 80px รอบการ์ด (บนพื้นดำมองไม่เห็นอยู่แล้ว) และ filter blur ของปก (ใช้ปกความละเอียดต่ำซึ่งเบลออยู่แล้วแทน) */
        .sv-card-box { box-shadow: none; }
        .sv-cover-blur { filter: none; transform: none; }
    }

    .sv-scroll-container {
        width: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory;
        scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column;
        padding-top: env(safe-area-inset-top);
        /* 🌟 กันรีเฟรชหน้าเว็บทั้งหน้าจากการเลื่อนสตอรี่รัว/สะบัดแรงๆ — ตัวที่เลื่อนจริงคือ div นี้
           (ไม่ใช่ .app-view เพราะ story-viewer-modal อยู่นอก #app-container) เดิมไม่มี
           overscroll-behavior ป้องกันไว้เลย พอสะบัดเร็วมากๆ เบราว์เซอร์มือถือบางรุ่นเลยส่ง
           overscroll ทะลุขึ้นไปเรียก pull-to-refresh ของเบราว์เซอร์เอง กลายเป็นรีเฟรชหน้าเว็บทั้งหน้า 🌟 */
        overscroll-behavior-y: contain;
    }
    .sv-scroll-container::-webkit-scrollbar { display: none; }
    /* สตอรี่เดี่ยวจากแจ้งเตือน — ไม่มีอะไรให้เลื่อน ห้ามเลื่อนขึ้นลง (เดิมเลื่อนแล้วโดนตัวตรวจท้ายสุด ปิดสตอรี่ไปเลย) */
    .sv-scroll-container.sv-single { overflow-y: hidden; touch-action: none; }

    .sv-story-page {
        min-height: 100dvh; width: 100%; display: flex; flex-direction: column; align-items: center;
        justify-content: flex-start; gap: 12px;
        scroll-snap-align: start;
        /* 🌟 บังคับให้เลื่อนสตอรี่ทีละอันเสมอ ห้ามสะบัดแรงแล้วข้ามหลายอันรวดเดียว (เหมือนโพสต์ในฟีด)
           เดิมไม่มีตัวนี้เลยพึ่งพาโมเมนตัมเบราว์เซอร์ล้วนๆ สะบัดแรงๆ ทีเดียวข้ามได้หลายสตอรี่
           ส่วนตอนเปิดไฮไลท์ที่ต้อง "กระโดด" ไปหน้ากลางๆ ตรงๆ (ไม่ใช่ไล่ทีละอัน) จะปิด snap ชั่วคราว
           ผ่าน svJumpToIndex() แทนการเรียก scrollIntoView ตรงๆ กันไม่ให้ scroll-snap-stop ขวางการกระโดด 🌟 */
        scroll-snap-stop: always;
        position: relative;
        padding: calc(55px + 5dvh) 20px max(80px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    .sv-page-user {
        display: flex; align-items: center; gap: 12px; cursor: pointer; pointer-events: auto;
        width: 100%; max-width: 420px; align-self: center;
    }
    .sv-page-avatar { width: 38px; height: 38px; border-radius: 50%; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
    .sv-page-info { display: flex; flex-direction: column; }
    .sv-page-name { color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
    .sv-page-time { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; margin-top: -1px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

    .sv-card-box {
        width: 100%; max-width: 420px; position: relative; aspect-ratio: 4 / 5;
        max-height: calc(95dvh - 210px);
        border-radius: 48px; overflow: hidden; background: #111;
        box-shadow: 0 40px 80px rgba(0,0,0,0.8);
        transition: transform 0.4s cubic-bezier(0.1, 0.8, 0.3, 1);
        border: none;
    }
    .sv-cover-blur {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; filter: blur(20px); transform: scale(1.05);
        z-index: 2; pointer-events: none;
        /* ไม่ต้องมีทรานสิชัน — พอไฟล์จริงพร้อมก็เอาปกออกทันที (ภาพเดียวกันอยู่แล้ว จึงเนียนกว่าเฟด
           การเฟดทำให้เห็นสองชั้นซ้อนกันวูบ ๆ เหมือนวิดีโอเด้ง) */
    }
    /* 🌟 ปกความละเอียดชัด (เฟรมแรกของวิดีโอ) — โชว์คั่นระหว่างรอวิดีโอ/รูปจริงโหลด 🌟 */
    .sv-cover-full {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; pointer-events: none;
    }
    .sv-card-box:active { transform: scale(0.98); }

    /* 🌟 สตอรี่ที่กำลังอัปโหลด — ภาพจางๆ + โครงกระดูกวาววับ + แถบเปอร์เซ็นต์จริงบนขอบบนการ์ด 🌟 */
    .sv-uploading .sv-page-img, .sv-uploading .sv-cover-blur, .sv-uploading .sv-cover-full { opacity: 0.35; filter: saturate(0.6); }
    .sv-uploading .sv-bottom-bar { visibility: hidden; }
    .sv-uploading .sv-card-box:active { transform: none; }
    .sv-up-overlay { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
    .sv-up-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
        background-size: 250% 100%; animation: svUpShimmer 1.6s ease-in-out infinite; }
    @keyframes svUpShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
    .sv-up-status { position: absolute; top: 0; left: 0; right: 0; }
    .sv-up-track { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,0.25); overflow: hidden; }
    .sv-up-fill { height: 100%; width: 0; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8); transition: width 0.25s ease; }
    .sv-up-text { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap;
        padding: 6px 14px; border-radius: 30px; background: rgba(0,0,0,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        color: #fff; font-size: 13px; font-weight: 600; }

    /* 🌟 แถบกำลังโหลดวิดีโอ — วางบนขอบในบนสุดของปกสตอรี่ แบบเดียวกับตอนอัปโหลดโพสต์ 🌟 */
    .sv-load-bar {
        /* 🌟 ยาวเต็มชิดขอบในบนสุดของการ์ดจริงๆ (left:0/right:0/top:0) ไม่เว้นระยะซ้าย-ขวาอีกต่อไป —
           ปล่อยให้ overflow:hidden + border-radius:48px ของ .sv-card-box ครอบตัดปลายแถบให้โค้งขนาน
           ไปกับมุมการ์ดเองเลย (เดิมเว้น 22px หนีมุมโค้งไว้ กลายเป็นแถบลอยไม่ชิดขอบจริง) 🌟 */
        position: absolute; top: 0; left: 0; right: 0; height: 4px;
        z-index: 12; pointer-events: none; overflow: hidden;
        background: rgba(255,255,255,0.25);
    }
    .sv-load-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: svLoadBar 1.1s ease-in-out infinite;
    }
    @keyframes svLoadBar {
        0% { transform: translateX(-110%); }
        100% { transform: translateX(300%); }
    }

    .sv-page-img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

    .sv-page-overlay {
        position: absolute; inset: 0; pointer-events: none; z-index: 10;
        display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
        background: linear-gradient(to bottom, transparent 80%, rgba(0,0,0,0.4) 100%);
    }

    .sv-bottom-bar {
        width: 100%; max-width: 420px; margin-top: 16px;
        display: flex; justify-content: space-between; align-items: center;
        pointer-events: auto; position: relative; z-index: 110;
        /* 🌟 แยกเลเยอร์คอมโพสิตของแถบนี้ออกจากวิดีโอใน .sv-card-box เอง — สตอรี่วิดีโอที่โหลด/ถอดรหัส
           หนักๆ (เพิ่งเปิด/บัฟช้า) ทำให้เบราว์เซอร์มือถือบางรุ่นหน่วงการ "วาด" ของ DOM ที่เพิ่งแทรกใหม่
           ในเฟรมเดียวกัน (แม้เป็น SVG ล้วนไม่ต้องรอโหลดไฟล์ก็ตาม) ไอคอนหัวใจ/สามจุดเลยโผล่ช้าตามวิดีโอ
           ไปด้วย บังคับให้ browser promote ชั้นนี้แยกเป็นเลเยอร์ของตัวเอง จะได้วาดไม่ต้องรอคิวเดียวกับวิดีโอ 🌟 */
        transform: translateZ(0); will-change: transform;
    }

    .sv-visitor-stack {
        display: flex; align-items: center; gap: 8px; cursor: pointer;
        background: transparent; padding: 6px 0; border: none;
        transition: 0.2s;
    }
    .sv-visitor-stack:active { transform: scale(0.95); opacity: 0.7; }
    
    .sv-avatar-group { display: flex; align-items: center; position: relative; margin-right: 8px; }
    .sv-stacked-avatar-wrap { position: relative; margin-left: -12px; }
    .sv-stacked-avatar-wrap:first-child { margin-left: 0; }
    
    .sv-stacked-avatar {
        width: 32px; height: 32px; border-radius: 50%; border: 2px solid #000;
        background: #111; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    }
    
    .sv-stacked-heart {
        position: absolute; top: -2px; left: -2px; background: #ED4956; color: #fff;
        width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 8px; border: 1.5px solid #000; z-index: 5;
    }
    
    .sv-avatar-more-blur {
        position: relative; width: 32px; height: 32px; border-radius: 50%;
        overflow: hidden; border: 2px solid #000; box-shadow: 0 4px 8px rgba(0,0,0,0.5);
        background: #000; flex-shrink: 0;   /* พื้นรองสีดำ (แทนภาพเบลอ) */
    }
    /* ซ่อนภาพเบลอด้านหลัง — ใช้พื้นดำล้วนแทน */
    .sv-avatar-more-blur img { display: none; }
    .sv-avatar-more-overlay {
        position: absolute; inset: 0; background: #000;
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 900; color: #fff; letter-spacing: -0.3px;
    }

    /* 💖 IG-STYLE HEART POP EFFECT 💖 */
    .sv-floating-heart {
        position: absolute; pointer-events: none; color: #ED4956; z-index: 1000;
        animation: svHeartFly 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
        text-shadow: 0 4px 15px rgba(237, 73, 86, 0.4);
    }
    @keyframes svHeartFly {
        0% { transform: scale(0.5) translateY(0) rotate(0deg); opacity: 0; }
        20% { transform: scale(1.2) translateY(-20px) rotate(-10deg); opacity: 1; }
        100% { transform: scale(0.8) translateY(-120px) rotate(15deg); opacity: 0; }
    }

    .sv-btn-like-center {
        background: transparent; border: none; color: #fff; font-size: 42px; cursor: pointer;
        transition: transform 0.2s cubic-bezier(0.17, 0.89, 0.32, 1.49), color 0.2s;
        display: flex; align-items: center; justify-content: center;
        padding: 0; margin: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    }
    .sv-btn-like-center.liked { color: #ED4956; transform: scale(1.1); }
    .sv-btn-like-center:active { transform: scale(0.85); }

    /* 🌟 ไอคอนหัวใจ/สามจุด ในแถบล่างของ pop up สตอรี่ วาดเป็น SVG ในหน้าเลย
       ไม่ผูกกับฟอนต์ไอคอน (boxicons) ที่ต้องรอโหลดจาก CDN — ตอนดูสตอรี่วิดีโอ
       เบราว์เซอร์ยุ่งกับการโหลด/ถอดรหัสวิดีโอ ไอคอนแบบฟอนต์เลยโผล่ช้า
       แบบ SVG ขึ้นพร้อมหน้าทันทีเสมอ 🌟 */
    .sv-ic { width: 1em; height: 1em; display: block; flex-shrink: 0; }
    .sv-ic-heart { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
    .sv-btn-like-center.liked .sv-ic-heart { fill: currentColor; }
    .sv-ic-dots { fill: currentColor; }

    .sv-like-badge {
        position: absolute; bottom: -2px; right: -6px;
        background: #ED4956; color: #fff; width: 16px; height: 16px; border-radius: 50%;
        display: none; align-items: center; justify-content: center; font-size: 10px;
        border: 2px solid #000; z-index: 5; animation: svHeartPop 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.49);
    }
    @keyframes svHeartPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

    /* 🌟 หน้า skeleton ท้ายสุด — ล็อกโครงสร้างแถบล่าง (หัวใจ/สามจุด) ไว้ตลอด ระหว่างรอสตอรี่ชุดถัดไปโหลด 🌟 */
    .sv-skeleton-block {
        background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 75%);
        background-size: 200% 100%; animation: svSkeletonShimmer 1.5s infinite linear;
    }
    @keyframes svSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    .sv-visitor-text { color: #fff; font-size: 13px; font-weight: 700; margin-left: 4px; opacity: 0.95; }

    .sv-scroll-hint-wrapper {
        position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); left: 0; right: 0;
        display: flex; justify-content: center; pointer-events: none; z-index: 1000;
        transition: opacity 0.5s ease;
    }
    .sv-scroll-hint {
        color: #fff; font-size: 19px; cursor: pointer; pointer-events: auto;
        opacity: 0.3; animation: svHintBreathe 2.5s ease-in-out infinite;
        transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        text-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    .sv-scroll-hint:active { transform: scale(0.8); opacity: 0.1; }
    
    @keyframes svHintBreathe {
        0%, 100% { opacity: 0.2; transform: translateY(0); }
        50% { opacity: 0.5; transform: translateY(8px); }
    }
    .sv-page-btn {
        width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.5); backdrop-filter: blur(20px);
        display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
        transition: 0.2s;
    }
    .sv-page-btn:active { transform: scale(0.9); }
    .sv-page-btn.liked { color: #ED4956; background: rgba(237, 73, 86, 0.1); border-color: rgba(237, 73, 86, 0.2); }

    .sg-loading-msg {
        grid-column: 1 / -1;
        text-align: center; padding: 40px 0; color: #888; font-weight: 600; font-size: 14px; animation: pulse 1.5s infinite;
    }

    @keyframes sg-shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
    .sg-sk-item {
        aspect-ratio: 4 / 5; border-radius: 24px;
        background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
        background-size: 400px 100%;
        animation: sg-shimmer 1.5s linear infinite;
    }

    .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: ''; }
    }

    .ep-modal { 
        display: none; position: fixed !important; inset: 0 !important; z-index: 1000000 !important; 
        background: rgba(0,0,0,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; 
    }
    .ep-content { 
        width: 100%; max-width: 400px; background: rgba(18,18,18,0.8); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
        border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; animation: popIn 0.3s ease; 
        display: flex; flex-direction: column; box-shadow: none;
    }
    .ep-header { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; font-weight: 700; font-size: 16px; position: relative; flex-shrink: 0; color: #fff;}
    .ep-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border-radius: 50%; width: 30px; height: 30px; border: none; color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .ep-body { padding: 10px; display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
    
    @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    .sv-viewers-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; padding-bottom: 10px; }
    .sv-viewer-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: 0.2s; position: relative; }
    .sv-viewer-item:active { background: rgba(255,255,255,0.05); }
    .sv-viewer-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0; }
    .sv-viewer-name { font-weight: 600; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sv-viewer-username { color: #888; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sv-viewer-like { 
        position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
        color: #ED4956; font-size: 20px; display: flex; align-items: center; justify-content: center;
        background: rgba(237, 73, 86, 0.1); padding: 8px; border-radius: 50%;
    }

    /* ==========================================
       STORY UPLOAD UI
    ========================================== */
    .su-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); 
    }
    .su-modal.active { display: flex; }
    .su-content-wrapper { 
        width: 100%; max-width: 380px; display: flex; flex-direction: column; 
        padding: 20px; margin: auto; box-sizing: border-box; 
    }
    
    .su-header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 12px 0; width: 100%; }
    /* 🌟 เดิมเป็นไอคอนลอยเปล่าๆ ไม่มีพื้นหลัง ขนาด/ตำแหน่งไม่ตรงกับปุ่มปิดของ pop up อัปโหลดโพสต์
       (.pu-close-btn) เปลี่ยนให้เป็นสูตรเดียวกัน (วงกลมโปร่งแสงเบลอหลัง) ให้เข้าธีมเดียวกันทั้งสองที่ 🌟 */
    .su-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; }
    .su-close-btn:active { transform: scale(0.85); background: rgba(255,255,255,0.2); }
    /* 🌟 เดิมเป็นปุ่มข้อความทรงแคปซูล เปลี่ยนเป็นไอคอนสีขาวเปล่าๆ ไม่มีพื้นหลังวงกลม เหมือนปุ่มอัปโหลดโพสต์ 🌟 */
    .su-submit-btn { background: transparent; color: #fff; border: none; width: 40px; height: 40px; font-size: 22px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
    .su-submit-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    .su-card-area { width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; }
    
    .su-camera-card {
        width: 100%; aspect-ratio: 4 / 5;
        border-radius: 28px; background: rgba(255,255,255,0.05); 
        position: relative; overflow: hidden; 
        border: 2px dashed rgba(255,255,255,0.3); transition: 0.2s;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }
    .su-camera-card.active-media {
        border: 1px solid rgba(255,255,255,0.05);
        background: #111;
    }
    
    .su-video { width: 100%; height: 100%; object-fit: cover; }
    /* 🌟 เดิมไม่มี CSS ให้ #su-preview-img เลย รูปเลยโชว์ที่ขนาดจริง (native pixel) แล้วโดน
       overflow:hidden ของการ์ดตัดออก เห็นเป็นรูปซูมเข้าไปดูแค่มุมเดียว ไม่เต็มรูปเหมือนตอน
       เผยแพร่จริง (ที่ผ่าน .sv-page-img ซึ่ง object-fit:cover เต็มกรอบ) ให้ตรงกับ .su-preview-video
       เป๊ะ ๆ ทั้ง sizing และตำแหน่ง จะได้เฟรมเดียวกับตอนอัปโหลดจริง 🌟 */
    .su-preview-img { width: 100%; height: 100%; object-fit: cover; display: none; position: absolute; top: 0; left: 0; z-index: 2; }
    .su-preview-video { width: 100%; height: 100%; object-fit: cover; display: none; position: absolute; top: 0; left: 0; z-index: 2; }
    
    /* 🌟 Force 4:5 for video preview 🌟 */
    #su-video {
        width: 100%; height: 100%; object-fit: cover;
    }

    .su-cam-error { 
        position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; 
        text-align: center; padding: 20px; color: rgba(255,255,255,0.6); z-index: 1; background: transparent;
    }
    
    /* 🌟 min-height กันไว้ — ตอนโชว์พรีวิวรูป/วิดีโอ ปุ่มลูกทั้งหมดใน .su-controls กลายเป็น
       display:none (ชัตเตอร์/สลับกล้อง) หรือ position:absolute (เลือกรูป/ลบรูป) หมด ไม่เหลือ
       ลูกที่อยู่ใน flow เลยสักตัว แถวนี้เลยเสี่ยงยุบความสูงเหลือ 0 ทำให้ปุ่มลอย (absolute, อ้างอิง
       ตำแหน่งจากกล่องนี้) ไปโป่งอยู่ผิดที่ผิดตำแหน่งได้ — ล็อกความสูงเท่ากับแถวปกติ (ปุ่มชัตเตอร์
       70px + padding บน 20px) ไว้เสมอ กันเคสนี้ 🌟 */
    .su-controls { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px 0 0 0; position: relative; min-height: 90px; box-sizing: border-box; }
    .su-shutter-btn { 
        width: 70px; height: 70px; border-radius: 50%; background: transparent; 
        border: 4px solid rgba(255,255,255,0.8); padding: 4px; cursor: pointer; transition: 0.2s; 
        display: flex; align-items: center; justify-content: center; position: relative;
    }
    .su-shutter-inner { width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: 0.2s; }
    .su-shutter-btn:active .su-shutter-inner { transform: scale(0.85); }
    
    .su-recording-ring {
        position: absolute; inset: -8px; border: 4px solid #ED4956; border-radius: 50%;
        border-top-color: transparent; animation: ringRotate 2s linear infinite;
        display: none; pointer-events: none;
    }
    @keyframes ringRotate { 100% { transform: rotate(360deg); } }

    .su-shutter-btn.recording .su-recording-ring { display: block; }
    .su-shutter-btn.recording .su-shutter-inner { background: #ED4956 !important; transform: scale(0.6); border-radius: 4px; }

    /* 🌟 ปุ่มเลือกรูป/สลับกล้อง — ไอคอนลอยเปล่าๆ บนพื้นโปร่งใส ไม่มีพื้นหลังวงกลมรอง 🌟 */
    .su-gallery-btn, .su-flip-cam-btn {
        position: absolute; top: 50%; width: 44px; height: 44px; transform: translateY(-50%);
        background: transparent; border: none;
        display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px;
        cursor: pointer; transition: 0.2s;
    }
    .su-gallery-btn:active, .su-flip-cam-btn:active { transform: translateY(-50%) scale(0.85); opacity: 0.7; }
    .su-gallery-btn { left: 4px; }
    .su-flip-cam-btn { right: 4px; }

    /* 🌟 ปุ่มถังขยะ (ลบรูปที่เลือก) — แยกเป็นกฎเดี่ยวของตัวเองล้วนๆ ไม่ใช้ selector รวมกับปุ่มอื่นอีกต่อไป
       (กันปัญหาลำดับ/ความชัดเจนของ CSS แล้วปุ่มไปเด้งอยู่กลางจอผิดตำแหน่ง) ทุกคุณสมบัติกำหนดไว้ในกฎ
       เดียวจบครบชัดเจน ไม่มีอะไรพึ่งพากฎอื่นเลย 🌟 */
    .su-retake-btn {
        position: absolute; top: 50%; right: 4px; left: auto; bottom: auto;
        width: 35px; height: 35px; transform: translateY(-50%);
        background: transparent; border: none;
        display: none; align-items: center; justify-content: center; color: #fff; font-size: 21px;
        cursor: pointer; transition: 0.2s;
    }
    .su-retake-btn:active { transform: translateY(-50%) scale(0.85); opacity: 0.7; }
    /* 🖥️ คอม (เมาส์) — สตอรี่ใหญ่ตามขนาดหน้าต่าง (เดิมกว้างได้แค่ 420px จอใหญ่/จอตั้งเลยเล็กนิดเดียว)
       การ์ด 4:5 สูงเต็มพื้นที่ที่เหลือ (หักหัวชื่อ + แถบปุ่มล่าง) · แถวชื่อ/แถบปุ่มกว้างเท่าการ์ดเสมอ */
    @media (hover: hover) and (pointer: fine) and (min-width: 768px) {
        .story-viewer-modal { --sv-card-w: min(calc(100vw - 40px), calc((100dvh - 230px) * 0.8)); }
        .sv-card-box { max-width: var(--sv-card-w); width: var(--sv-card-w); max-height: none; }   /* มุมโค้งคงที่ 48px เท่าเดิม ไม่ขยายตามขนาดหน้าต่าง */
        .sv-page-user, .sv-bottom-bar { max-width: var(--sv-card-w); }
        .sv-story-page { padding-top: calc(40px + 2dvh); }
    }