/* ===========================================================================
 * mes789-system / assets/css/composer.css
 * ---------------------------------------------------------------------------
 * พอร์ต 1:1 จาก composer-core.css (612 บรรทัด) ของระบบเก่า
 *
 * ของเดิมยาวเพราะต้องเขียนสู้กับธีม WordPress + BuddyPress ที่คอยมาทับ
 * เต็มไปด้วย !important — ที่นี่ไม่มีใครมาแย่งสไตล์ จึงเขียนสั้นลงได้มาก
 * แต่คงชื่อ class เดิมทุกตัว เพื่อให้ HTML ที่ฉีดเข้าโพสต์แสดงผลเหมือนเดิมเป๊ะ
 * =========================================================================== */

/* 🔴🔴🔴 [แก้ถาวร 3 ก.ย. 2569 — รอบที่ 3 อ่านก่อนแตะเรื่อง z-index ของ
 * กล่องพิมพ์อีก] 🔴🔴🔴
 * ---------------------------------------------------------------------------
 * ประวัติ: เรื่องนี้พังมาแล้ว 3 รอบติดกันเพราะผมแก้แบบ "เขียนเลขตรง ๆ ทีละจุด"
 *   รอบ 1: ยก .composer-modal-overlay → ลืมยก #mes-tarot-modal ที่อยู่นอกกล่อง
 *   รอบ 2: ยก #mes-tarot-modal เป็นรายจุด → ลืมว่า #mes-placeholder-modal
 *          (ปุ่ม Beat) ใช้คลาสฐาน .mes-modal-overlay ร่วมกัน แต่ไม่เคยถูกแก้เลย
 *   ทั้งสองรอบพังเพราะ "แก้เฉพาะจุดที่มีคนแจ้ง" โดยไม่แก้ต้นตอที่ใช้ร่วมกัน
 *
 * ✅ ทางแก้ถาวรจริง ๆ รอบนี้: ตัวแปรกลาง 2 ตัว เป็นแหล่งความจริงเดียว
 *    ทุกอย่างที่เกี่ยวข้องต้องอ้างตัวแปรนี้ ห้ามเขียนตัวเลข z-index ตรง ๆ
 *    ให้กับ overlay/modal ของกล่องพิมพ์อีกต่อไปไม่ว่าจะเป็นจุดไหนก็ตาม
 *    ต่อให้ลืมแก้จุดใดจุดหนึ่ง ทุกจุดที่อ้างตัวแปรจะขยับตามกันเองอัตโนมัติ
 *    เป็นไปไม่ได้ที่จะหลุดไม่ซิงก์กันอีกแล้วโครงสร้างนี้
 *
 * ลำดับชั้นตามที่เจ้าของสั่งไว้ตรง ๆ (3 ก.ย. 2569):
 *   หน้าเว็บทั้งหมด  <  กล่องพิมพ์  <  แอพที่เปิดจากในกล่องพิมพ์
 * ------------------------------------------------------------------------- */
:root {
    --mes-z-composer: 200040;       /* กล่องพิมพ์ทั้งกล่อง (composer-modal-overlay) */
    --mes-z-composer-app: 200050;   /* ทุกแอพ/โมดัลที่เปิดจากในกล่องพิมพ์:
                                        Mes Studio, ทาโรต์มินิ, Beat (placeholder),
                                        และแอพใหม่ในอนาคตทุกตัว — ใช้ตัวนี้เสมอ
                                        ห้ามเขียนเลขเองแม้แต่ตัวเดียว */
}

/* ============================ ปุ่มเปิดกล่อง ============================ */
/* 🔧 [แก้บั๊กซ้ำ 28 ส.ค. 2569] เดิม .composer-trigger เป็น <button> ก้อนเดียว
   ห่อทั้งอวาตาร์+ข้อความ — ซ้อน <a> ข้างในไม่ได้ (HTML ไม่ยอม, เบราว์เซอร์กิน
   คลิกด้วยปุ่มชั้นนอกเสมอ) ทำให้ "กดรูปแล้วไม่เด้งโปรไฟล์" เกิดซ้ำทุกครั้งที่
   มีคนแก้ไฟล์นี้แล้วเผลอห่อกลับเป็นก้อนเดียว
   ⚠️ กันพลาดซ้ำ: ถ้าจะแก้ trigger นี้อีก **ห้ามเอา <a> (avatar) กลับไปไว้
   ข้างใน <button> (text) เด็ดขาด** ต้องเป็นพี่น้องกัน (sibling) ใน
   .composer-trigger-row เท่านั้น ดู app/partials/composer.php บรรทัด ~237
   ทางแก้ถาวรรอบนี้: แยกเป็น 2 element คนละระดับ
     .composer-trigger-row  = กรอบนอก (รับ .card มาด้วย ให้หน้าตาเหมือนเดิมเป๊ะ)
     .composer-trigger-avatar (<a>)   = อวาตาร์ กดแล้วไปหน้าโปรไฟล์
     .composer-trigger (<button>)     = ข้อความ กดแล้วเปิดกล่องโพสต์ (id เดิม
                                         composer.js ผูก event ไว้แล้ว ไม่ต้องแก้ JS) */
.composer-trigger-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
}
.composer-trigger-avatar {
    flex: 0 0 auto;
    display: flex;
    line-height: 0;
}
.composer-trigger {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-mute);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}
.composer-trigger-row:hover { border-color: var(--gold-dim); }
.composer-trigger-text { flex: 1; }

/* ============================ กล่องเต็มจอ ============================ */
/* 🔴 [แก้ถาวร 3 ก.ย. 2569] z-index ตัวนี้มีความหมายก็ต่อเมื่อ JS ย้าย
   (portal) องค์ประกอบนี้ไปไว้ที่ document.body แล้วเท่านั้น (ดูฟังก์ชัน
   MesComposerCore.open() ใน composer.js — คอมเมนต์อธิบายละเอียดอยู่ตรงนั้น)
   ตั้งไว้สูงสุดในเว็บโดยตั้งใจ (ค่าอื่นที่เคยสูงสุดคือ 200030 ของ
   link-guard.css) เพราะกล่องพิมพ์ต้องอยู่เหนือทุกอย่างเสมอ ไม่มีข้อยกเว้น
   ต่ำกว่า Mes Studio (200050) เล็กน้อยเพราะ Mes Studio เปิดซ้อนอยู่ข้างในอีกที
   ห้ามลดค่านี้ลงโดยไม่อ่านคอมเมนต์ใน composer.js ก่อน */
.composer-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mes-z-composer, 200040);
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.composer-modal {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.composer-modal-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.composer-modal-title {
    flex: 1;
    margin: 0;
    color: var(--gold);
    font-size: 1.15rem;
    text-align: center;
}
.composer-modal-back,
.composer-modal-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--gold);
    font-size: 1.2rem;
    cursor: pointer;
}
.composer-modal-back:hover,
.composer-modal-close:hover { background: var(--surface-2); }

.composer-step { padding-top: 14px; }

/* ============================ แถบผู้ใช้ ============================ */
.composer-user-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.composer-user-name { font-weight: 700; }

.composer-title {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
}

/* [เพิ่มใหม่ 4 ก.ย. 2569] ช่อง URL กำหนดเอง — เล็กกว่าช่องชื่อเรื่อง
   เพราะเป็นตัวเลือกเสริม ไม่บังคับ ไม่ควรแย่งความสนใจจากช่องชื่อเรื่อง */
.composer-slug-input {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-mute, #9a938d);
    font-family: inherit;
    font-size: .82rem;
}
.composer-slug-input:focus { color: var(--text); border-style: solid; }
.composer-slug-locked {
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: .82rem;
    color: var(--text-mute, #9a938d);
    word-break: break-all;
}
.composer-slug-hint { display: block; font-size: .74rem; opacity: .75; margin-top: 2px; }

/* ============================ ปุ่มยาแคปซูล ============================ */
.composer-toppills,
.composer-subtools {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.composer-subtools {
    padding: 8px;
    border-radius: 10px;
    background: #121214;
    border: 1px solid var(--gold-dim);
}
.composer-subtools.theme-cards { border-color: #f59e0b; background: #181716; }

.composer-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 36px คือความสูงต่ำสุดที่นิ้วโป้งกดไม่พลาดบนมือถือ
       หน้านี้คนเข้าจากมือถือเป็นหลัก จึงห้ามเล็กกว่านี้ */
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.composer-pill:hover:not(:disabled) { background: var(--surface-2); }
.composer-pill:disabled { opacity: .35; cursor: not-allowed; }
.composer-pill.active {
    border-color: var(--gold);
    background: var(--surface-2);
    color: var(--gold);
    font-weight: 700;
}
.composer-pill-accent { border-color: var(--gold); color: var(--gold); font-weight: 700; }
.composer-pill-file { position: relative; }

/* ============================ ถาดเครื่องมือ ============================ */
.composer-tray {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #121214;
    border: 1px solid var(--line);
}
.tray-warp   { border-color: #38bdf8; }
.tray-picker { border-color: #ea580c; background: #181716; }
.tray-gif    { border-color: #ec4899; }
.tray-myt    { border-color: #ef4444; }

.tray-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: .88rem;
}
.tray-loading {
    grid-column: 1 / -1;
    padding: 20px;
    color: var(--text-mute);
    text-align: center;
    font-size: .85rem;
}

.warp-input-row { display: flex; gap: 8px; }
.warp-input-row .input { flex: 1; }

/* ปุ่มลัดสำนักข่าว — เลื่อนแนวนอนได้บนมือถือ */
.warp-outlets {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 10px;
    scrollbar-width: none;
}
.warp-outlets::-webkit-scrollbar { display: none; }

.warp-outlet-chip {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: #3b82f6;
    color: #fff;
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
}
.warp-outlet-chip:hover { opacity: .85; }

/* ============================ ตะแกรงเลือกรูป ============================ */
.picker-grid,
/* [แก้ 12 ก.ย. 2569 — ข้อ 1 ที่เจ้าของแจ้ง "GIF ตัดจบด้านบน ข้างล่างว่างเยอะ"]
   เดิม max-height: 240px ตายตัว ตั้งไว้ตั้งแต่ตอนแผงยังเป็นถาดเตี้ย ๆ
   พอแผงกลายเป็นป็อปอัพเกือบเต็มจอ ตารางเลยยังสูงแค่ 240px เหมือนเดิม
   → เห็น GIF แค่ 2 แถว แล้วเหลือที่ว่างข้างล่างครึ่งจอ

   เปลี่ยนเป็นยืดตามจอ: 100vh ลบส่วนหัว/ช่องค้นหา/แท็บอารมณ์ (~260px)
   และกันไม่ให้เตี้ยกว่า 240px บนจอเล็กมาก (ไม่แย่ลงกว่าเดิมในทุกกรณี) */
.gif-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: max(240px, calc(100vh - 260px));
    overflow-y: auto;
    padding: 4px;
    /* เลื่อนลื่นบนมือถือ + ไม่ให้การเลื่อนทะลุไปหน้าข้างหลังเมื่อสุดขอบ */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.picker-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid var(--line);
    background: #000;
}
.picker-cell img { width: 100%; height: 100%; object-fit: cover; }
.mes-news-img-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    accent-color: #ea580c;
    cursor: pointer;
}

.gif-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 8px;
    scrollbar-width: none;
}
.gif-tabs::-webkit-scrollbar { display: none; }
.gif-tab-btn { flex: 0 0 auto; }

.gif-grid img.gif-cell {
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}
.gif-grid img.gif-cell:hover { outline: 2px solid var(--gold); }

/* ============================ ⭐ เวทีเลนส์ ============================ */
.lens-stage {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: #000;
    border: 1px solid var(--gold);
}
.lens-canvas-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #09090b;
    text-align: center;
}
.lens-canvas-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* เปลี่ยนฟิลเตอร์แบบนุ่ม ๆ ให้เห็นความต่างชัดตอนกดสลับ */
    transition: filter .2s ease;
}
.lens-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    /* เงาหนา — พื้นหลังเป็นรูปอะไรก็ได้ คุมความสว่างไม่ได้
       ถ้าไม่มีเงา ข้อความบนรูปสว่างจะอ่านไม่ออกทันที */
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
    word-break: break-word;
    pointer-events: none;
}

.lens-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lens-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lens-filters::-webkit-scrollbar { display: none; }
.lens-bright-row { display: flex; align-items: center; gap: 8px; }
.lens-label { color: var(--gold); font-size: .78rem; min-width: 64px; }
.lens-bright-row input[type="range"] { flex: 1; accent-color: var(--gold); }

.lens-confirm-btn {
    padding: 11px;
    border: 0;
    border-radius: 8px;
    background: #22c55e;
    color: #000;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
}

/* ============================ Magic Docs ============================ */
.magic-docs-card-wrapper { margin-top: 14px; margin-bottom: 12px; }

.magic-docs-tiptap-container {
    min-height: 140px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.75;
    outline: none;
}
.magic-docs-tiptap-container:focus { border-color: var(--gold-dim); }
.magic-docs-tiptap-container:empty::before {
    content: attr(data-placeholder);
    color: var(--text-mute);
    pointer-events: none;
}

/* ลิ้นชักตัวเลือก (ขนาด/สี) — [ข้อ 4] เปลี่ยนเป็นป็อปอัพลอยใกล้ปุ่ม
   ตำแหน่งจริง (top/left) คำนวณจาก JS ใน positionDrawerNear() เสมอ
   ไม่ใช่ CSS ตรงนี้ — ที่นี่กำหนดแค่หน้าตา/ขนาดสูงสุด/เงา */
.magic-docs-drawer {
    display: none;
    position: fixed;
    z-index: 9100;
    max-width: min(280px, calc(100vw - 16px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px;
    border-radius: 12px;
    background: #121214;
    border: 1px solid var(--gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.magic-docs-drawer.active { display: block; }
.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--gold);
    font-weight: 700;
    font-size: .9rem;
}
.drawer-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.drawer-color {
    width: 34px;
    height: 34px;
    border: 2px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}
.drawer-color:hover { border-color: var(--gold); }

/* ============================ ตารางเครื่องมือล่าง ============================ */
.composer-bottom-tools {
    display: grid;
    /* [แก้ 9 ก.ย. 2569 ตามที่สั่ง] แถวละ 4 ปุ่ม (เดิม 3) */
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 12px 0;
}
.composer-grid-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: .7rem;          /* [9 ก.ย.] ลดจาก .78 ให้พอดีช่อง 4 คอลัมน์ */
    line-height: 1.25;
    cursor: pointer;
    min-height: 62px;          /* ปุ่มสูงเท่ากันทุกใบ แม้ชื่อสั้น-ยาวไม่เท่ากัน */
    text-align: center;
    word-break: break-word;    /* ชื่อยาวตัดคำได้ ไม่ดันปุ่มบาน */
}
.composer-grid-btn:hover:not(:disabled) { background: var(--surface-2); }
.composer-grid-btn:disabled { opacity: .35; cursor: not-allowed; }
.composer-grid-btn .icon { font-size: 1.25rem; line-height: 1; }

.composer-next-btn,
.composer-to-preview-btn,
.composer-submit-btn { width: 100%; padding: 13px; font-size: 1rem; }

/* ============================ ขั้น 2 / 3 ============================ */
.composer-option-row { margin-bottom: 14px; }
.composer-option-label { display: block; margin-bottom: 6px; color: var(--text-mute); font-size: .85rem; }
.composer-visibility {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text);
    font-family: inherit;
}
.composer-cost { color: var(--text-mute); font-size: .85rem; }

.preview-devices {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.composer-preview-card { transition: max-width .25s ease; }
.composer-preview-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.composer-preview-author { font-weight: 700; }
.composer-preview-meta { color: var(--text-mute); font-size: .8rem; }
.composer-preview-body { line-height: 1.75; }

/* ===========================================================================
 * ⭐⭐ HTML ที่เครื่องมือฉีดเข้าโพสต์ — ต้องใช้ CSS ชุดเดียวกัน
 *     ทั้งในพรีวิวและในโพสต์จริง ไม่งั้นเห็นไม่ตรงกัน
 * =========================================================================== */

/* --- รูปพร้อมเลนส์ + ข้อความทับ --- */
.mes-inserted-media-card {
    position: relative;
    display: block;
    margin: 12px 0;
    text-align: center;
}
.mes-inserted-media-card img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .4);
}
.mes-media-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
    pointer-events: none;
}

/* --- สไลด์อัลบั้มข่าว --- */
.mes-news-slider-wrapper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 12px 0;
    padding-bottom: 8px;
}
.mes-news-slider-wrapper img {
    max-height: 260px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}

/* --- วิดีโอ MYT --- */
.mes-myt-frame {
    position: relative;
    margin: 12px 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}
.mes-myt-frame.myt-ratio-1-1 { aspect-ratio: 1 / 1; }
.mes-myt-frame.myt-ratio-4-5 { aspect-ratio: 4 / 5; }
.mes-myt-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* เอฟเฟกต์วิดีโอ — ทำด้วย CSS ล้วน ไม่แตะไฟล์วิดีโอเลย */
.myt-fx-vhs iframe          { filter: saturate(140%) contrast(115%) sepia(18%); }
.myt-fx-hue-cycle iframe    { animation: mytHue 8s linear infinite; }
.myt-fx-cyber-glitch iframe { filter: contrast(140%) saturate(160%) hue-rotate(8deg); }
.myt-fx-zoom-blur iframe    { animation: mytZoom 6s ease-in-out infinite; }
.myt-fx-shake iframe        { animation: mytShake 1.2s ease-in-out infinite; }
.myt-fx-strobe iframe       { animation: mytStrobe 1.4s steps(2) infinite; }

@keyframes mytHue    { to { filter: hue-rotate(360deg); } }
@keyframes mytZoom   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mytShake  { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes mytStrobe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }

/* ==========================================================================
   [เพิ่มใหม่] การ์ดวิดีโอ MYT ตัวจริง (.mes-myt-container)
   --------------------------------------------------------------------------
   🐞 CSS ชุดนี้ "ไม่เคยถูกเขียนเลย" ทั้งที่ YoutubeStudio::render() ฝั่ง PHP
   วาดชุดคลาสนี้ออกมาตั้งแต่ต้น — เพราะกล่องพิมพ์ไปสร้าง .mes-myt-frame ของ
   ตัวเองแทน โค้ดฝั่ง PHP จึงกลายเป็นของตายที่ไม่มีใครเรียก และไม่มีใครสังเกต
   ว่า CSS ขาด (ตรวจแล้ว: .mes-myt-container ปรากฏใน composer.css 0 ครั้ง)

   ตอนนี้กล่องพิมพ์เรียกเครื่องยนต์ตัวจริงผ่าน myt_render แล้ว จึงต้องมี CSS
   รองรับให้ครบ ไม่งั้นการ์ดจะกางออกมาไร้รูปทรง

   .mes-myt-frame ด้านบนยังคงไว้ — โพสต์เก่าที่แทรกไปแล้วก่อนแก้ยังใช้อยู่
   ========================================================================== */
.mes-myt-container {
    position: relative;
    margin: 12px 0;
    overflow: hidden;
    /* 🐞 [แก้ตามที่สั่ง] เดิมมี border-radius: 12px ที่นี่ — แถบดำบน-ล่างซึ่ง
       กางเต็มความกว้าง (left:0; right:0) โดนมุมโค้งของการ์ดตัดเข้ามาที่หัวมุม
       ซ้าย-ขวา ทำให้ดูเป็นรอยแหว่งโค้งมนแปลก ๆ ที่มุม — เอาออกให้เป็นเหลี่ยม
       ตรงล้วน ๆ ตามที่ขอ ("สีดำล้วนไปเลย ไม่ต้องเว้าโค้งมนแหว่ง") */
    background: #000;
    /* [เพิ่มใหม่] เปิดใช้หน่วย cqw (% ของความกว้างกล่องนี้) ให้เลเยอร์ตัวหนังสือ
       ที่ทับวิดีโออยู่ — ใช้แพทเทิร์นเดียวกับ .fx-frame ของเวทีเลนส์เป๊ะ
       ย่อ-ขยายตามขนาดการ์ดจริงเสมอ ไม่ว่าจะแสดงบนจอไหน */
    container-type: inline-size;
}
.mes-myt-container.ratio-1-1 { aspect-ratio: 1 / 1; }
.mes-myt-container.ratio-4-5 { aspect-ratio: 4 / 5; }

/* ฉากหลังเบลอ — เติมช่องว่างซ้าย-ขวาตอนบีบวิดีโอ 16:9 ลงกรอบจัตุรัส
   โดยไม่ต้องครอบตัดเนื้อวิดีโอทิ้ง (นี่คือเหตุผลที่ต้องมีเอนจินแยกจาก Embed) */
.mes-myt-ambient-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(150%) brightness(.55);
    transform: scale(1.15);   /* ขยายเกินกรอบ กันขอบเบลอโปร่งให้เห็นพื้นดำ */
}

/* แถบดำบน-ล่าง — ของเดิมฝัง #000 ตายตัวเสมอ (ดู docblock ในคลาส) */
.mes-myt-bar {
    position: absolute;
    left: 0; right: 0;
    height: 6%;
    background: #000;
    z-index: 2;
}
.mes-myt-bar-top { top: 0; }
.mes-myt-bar-bottom { bottom: 0; }

/* กล่องวิดีโอจริง — จัดกึ่งกลางแนวตั้ง คงสัดส่วน 16:9 ไว้เสมอ */
.mes-myt-video-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.mes-myt-lite-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}
.mes-myt-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mes-myt-lite-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ปุ่มเล่น — ไม่ฝัง iframe จริงจนกว่าจะกด (lite-embed ช่วยให้ฟีดโหลดเร็ว) */
.mes-myt-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: .9;
    transition: opacity .15s ease, transform .15s ease;
}
.mes-myt-play-btn:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

/* ฟิลเตอร์มีมของการ์ดตัวจริง — เล่นเฉพาะตอนอยู่กลางจอ (myt-viewer.js เติม
   .myt-active-focus ให้) ต่างจาก .myt-fx-* ด้านบนที่เล่นตลอดเวลา
   ใส่ที่ตัว player ทั้งก้อน จึงมีผลทั้งรูปปกและ iframe หลังกดเล่นแล้ว */
.mes-myt-container[data-filter] .mes-myt-lite-player { transition: filter .3s ease; }
.mes-myt-container[data-filter="vhs"].myt-active-focus .mes-myt-lite-player          { filter: saturate(140%) contrast(115%) sepia(18%); }
.mes-myt-container[data-filter="hue-cycle"].myt-active-focus .mes-myt-lite-player    { animation: mytHue 8s linear infinite; }
.mes-myt-container[data-filter="cyber-glitch"].myt-active-focus .mes-myt-lite-player { filter: contrast(140%) saturate(160%) hue-rotate(8deg); }
.mes-myt-container[data-filter="zoom-blur"].myt-active-focus .mes-myt-lite-player    { animation: mytZoom 6s ease-in-out infinite; }
.mes-myt-container[data-filter="shake"].myt-active-focus .mes-myt-lite-player        { animation: mytShake 1.2s ease-in-out infinite; }
.mes-myt-container[data-filter="strobe"].myt-active-focus .mes-myt-lite-player       { animation: mytStrobe 1.4s steps(2) infinite; }

/* --- ธีมการ์ด 6 แบบ — ตรงกับของเดิม --- */
.mes-theme-card-wrapper,
.magic-docs-card-wrapper[class*="mes-theme-"]:not(.mes-theme-default) {
    padding: 28px 22px;
    border-radius: 16px;
    /* สัดส่วนคุมจากที่นี่ที่เดียว แก้ทีหลังแล้วมีผลย้อนหลังกับโพสต์เก่าทันที
       (เหตุผลเดียวกับที่ระบบเก่าย้ายออกจาก inline style มาไว้ใน CSS) */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.7;
}
.mes-theme-black-gold { background: linear-gradient(160deg, #1a1408, #4a3a12); color: #f5e6c8; }
.mes-theme-crimson    { background: linear-gradient(160deg, #3b0d0d, #6b1414); color: #ffe8e8; }
.mes-theme-midnight   { background: linear-gradient(160deg, #0f172a, #1e293b); color: #e2e8f0; }
.mes-theme-emerald    { background: linear-gradient(160deg, #064e3b, #065f46); color: #d1fae5; }
.mes-theme-cyber      { background: linear-gradient(160deg, #4c1d95, #7c3aed); color: #ede9fe; }

@media (max-width: 480px) {
    /* [แก้ 9 ก.ย.] จอเล็กก็ 4 คอลัมน์ — บรรทัดนี้เดิมบังคับกลับเป็น 3
       ถ้าไม่แก้ตรงนี้ด้วย มือถือจะยังเห็น 3 คอลัมน์ทั้งที่แก้ด้านบนแล้ว */
    .composer-bottom-tools { grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .composer-grid-btn { font-size: .66rem; padding: 9px 2px; }
    .composer-grid-btn .icon { font-size: 1.15rem; }
    .lens-overlay-text, .mes-media-overlay-text { font-size: 18px; }
    .mes-theme-card-wrapper { padding: 22px 16px; font-size: 1.05rem; }
}

/* ==========================================================================
   วาร์ปสื่อ — แถวแหล่งรูปส่วนตัว (Google Photos / Drive / Flickr)
   เราเป็นแค่ "ประตูวาร์ป" เปิดแท็บใหม่ไปคลังรูปของผู้ใช้เอง
   ========================================================================== */
.warp-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.warp-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--surface-2);
    border: 1px solid var(--line);
    transition: filter .12s, transform .12s;
}
.warp-source-chip:hover { filter: brightness(1.18); transform: translateY(-1px); }
.warp-source-chip.src-gphotos   { background: #1a73e8; border-color: #1a73e8; }
.warp-source-chip.src-gdrive    { background: #0f9d58; border-color: #0f9d58; }
.warp-source-chip.src-flickr    { background: #ff0084; border-color: #ff0084; }
.warp-source-chip.src-pinterest { background: #e60023; border-color: #e60023; }
.warp-source-chip.src-unsplash  { background: #3f3f46; border-color: #52525b; }

.warp-hint {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-mute);
}
.warp-hint b { color: var(--gold-soft); }

/* ==========================================================================
   ⭐ เวทีเลนส์ v2 — แยกซ้าย(ภาพ)/ขวา(เครื่องมือ) + ฟิลเตอร์ 33 แบบ + เลเยอร์ซ้อน
   ========================================================================== */
.lens-stage-v2 { background: #0c0c0e; position: relative; }
/* [แก้ 3 ก.ย. 2569] ปุ่มปิดลอย — แผงนี้มีคอลัมน์ซ้าย-ขวาแน่นอยู่แล้ว
   ลอยไว้มุมขวาบนแทนการเบียดพื้นที่ด้วย tray-head แบบแผงอื่น */
.mes-lens-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    background: rgba(0, 0, 0, .55);
}
.lens-split {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
/* [แก้รอบ 3] คอลัมน์ซ้าย = รูป + แถบขนาดภาพ + ปุ่มยืนยัน
   ย้ายการคุมความกว้าง/sticky มาไว้ที่คอลัมน์แทนที่จะอยู่ที่กล่องรูป
   เพราะกล่องรูปถูก JS เขียน style ทับทั้งก้อนทุกครั้งที่ปรับค่า
   (buildWrapStyle) ถ้าปล่อยไว้ที่เดิม ค่า sticky/flex จะโดนล้างทิ้ง */
.lens-canvas-col {
    flex: 0 0 42%;
    min-width: 0;
    position: sticky;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lens-split .lens-canvas-wrap {
    width: 100%;
    min-width: 0;
}
.lens-tools-panel {
    flex: 1;
    min-width: 0;
    background: #141416;
    border: 1px solid #2a2a2e;
    border-radius: 10px;
    padding: 10px;
    max-height: 480px;
    overflow-y: auto;
}

/* จอเล็ก (มือถือ) — สลับเป็นรูปด้านบน เครื่องมือด้านล่าง แต่งง่ายด้วยนิ้วโป้ง */
/* [แก้ตามม็อบอัพ] เดิมบังคับจอเล็กกว่า 720px ให้สลับเป็นบน-ล่างเสมอ
   ซึ่งมือถือทุกรุ่นเข้าเงื่อนไขนี้ — เลยไม่เคยได้เห็นแบบ "รูปซ้าย เครื่องมือขวา"
   ตามที่ออกแบบไว้เลย ตอนนี้คงสองคอลัมน์ไว้บนมือถือด้วย (ตามม็อบอัพที่ส่งมา)
   เหลือสลับเป็นบน-ล่างเฉพาะจอแคบมากจริง ๆ (< 420px) ที่สองคอลัมน์จะแคบจนใช้ไม่ได้ */
@media (max-width: 419px) {
    .lens-split { flex-direction: column; }
    .lens-split .lens-canvas-wrap { flex: none; width: 100%; position: static; }
    .lens-tools-panel { width: 100%; max-height: none; }
}

/* ==========================================================================
   📱 [19 ก.ย. 2569 — ม็อคอัพ mockup-lens-studio-mobile-fixed-footer ผ่านแล้ว]
   มือถือ: แผงเดียวเลื่อนยาว + ปุ่มยืนยัน "ล็อกอยู่ล่างสุดของจอ" ตลอด
   ==========================================================================
   ⚠️ ประวัติที่ต้องไม่ทำซ้ำ (บันทึกไว้ในไฟล์นี้เอง 3 รอบ):
     รอบ 1  ปุ่มยืนยัน position:sticky "ข้างใน" แผงเครื่องมือที่เลื่อนได้
            → ลอยค้างทับแถบเลื่อนและการ์ดเลเยอร์
     รอบ 2  ย้ายไปล่างสุดเต็มความกว้างใต้ทั้งสองคอลัมน์ → ยังคาบเกี่ยวแผงขวา หาไม่เจอ
     รอบ 3  เลิก sticky ใช้ position:static ผูกกับคอลัมน์ซ้าย (ของเดิมก่อนรอบนี้)
   รอบนี้จึงไม่ใช้ sticky ซ้ำรอยเดิม แต่ทำเป็น footer ลอย "เทียบกับตัวแผงทั้งก้อน"
   (.lens-stage-v2 เป็น position:relative อยู่แล้ว) แยกชั้นจากพื้นที่ที่เลื่อน
   และกันที่ด้วย padding-bottom เท่าความสูงปุ่ม เนื้อหาท้ายสุดจึงไม่ถูกบัง
   ใช้ร่วมกันทั้งแผงครอบตัดรูปเดี่ยวและแผงจัดเรียงสไลด์หลายรูป (คลาสเดียวกัน)
   ========================================================================== */
@media (max-width: 720px) {
    /* ส่วนที่เลื่อนได้ = ทุกอย่างยกเว้นปุ่มยืนยัน */
    .lens-stage-v2 .lens-split {
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 76px;   /* กันที่ให้ปุ่ม ไม่ให้บังเนื้อหาบรรทัดสุดท้าย */
    }
    /* คอลัมน์ซ้ายเลิก sticky บนมือถือ — ไม่งั้นรูปลอยตามจนเครื่องมือไม่มีที่ */
    .lens-stage-v2 .lens-canvas-col { position: static; }

    /* ปุ่มยืนยัน — ลอยล็อกล่างสุดของแผง ไม่ขยับตามการเลื่อน */
    .lens-stage-v2 .lens-confirm-btn {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        z-index: 15;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
    }

    /* [ตามม็อคอัพที่เจ้าของอนุมัติ] เหลือแถบ "ขนาดภาพ" ชุดเดียวบนมือถือ
       เดิมมี 2 ชุด (ใต้รูป + ในแท็บ ✂️) เพราะแท็บฝั่งขวาเคยเลื่อนหลุดจอ
       ตอนนี้เลื่อนถึงกันหมดในแผงเดียวแล้ว ชุดซ้ำจึงทำให้ "ดูซ้อนกัน" ตามที่เจ้าของแจ้ง
       ⚠️ ซ่อนด้วย CSS เท่านั้น ไม่ลบออกจาก DOM — composer.js ผูก click กับ
       .lens-ratio-chip ทุกใบ และ setRatio() ไล่ทาสีสถานะ active ทุกชุด
       ถ้าลบ DOM ทิ้ง สถานะระหว่างสองชุดจะเพี้ยนทันที (บนจอใหญ่ยังใช้ทั้งสองชุดอยู่) */
    .lens-stage-v2 .lens-tab-panel[data-panel="crop"] > .lens-label:first-child,
    .lens-stage-v2 #mes-fx-ratio-grid { display: none; }
}

/* จอมือถือทั่วไป — สองคอลัมน์ แต่บีบสัดส่วนให้เครื่องมืออ่านออก */
@media (max-width: 720px) and (min-width: 420px) {
    .lens-split .lens-canvas-wrap { flex: 0 0 46%; }
    .lens-tools-panel { padding: 8px; max-height: 420px; }
    .lens-filter-grid { grid-template-columns: repeat(2, 1fr); }
    .lens-filter-chip { font-size: .66rem; padding: 7px 3px; }
    .lens-tab-btn { font-size: .7rem; padding: 7px 2px; }
    .lens-label { font-size: .7rem; }
}

.lens-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.lens-tab-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: .78rem;
    background: #1c1c20;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    color: var(--text, #ece5e0);
    cursor: pointer;
}
.lens-tab-btn.active { background: var(--gold, #d4af37); color: #1a1414; border-color: var(--gold, #d4af37); }
.lens-tab-panel { display: none; }
.lens-tab-panel.active { display: block; }

/* --- ตารางฟิลเตอร์ 33 แบบ --- */
.lens-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.lens-filter-chip {
    padding: 8px 4px;
    font-size: .72rem;
    text-align: center;
    background: #1c1c20;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    color: var(--text, #ece5e0);
    cursor: pointer;
    line-height: 1.3;
}
.lens-filter-chip:hover { border-color: var(--gold-dim, #8a7128); }
.lens-filter-chip.active { border-color: var(--gold, #d4af37); background: #262218; color: var(--gold-soft, #f0d98a); }

/* --- สไลเดอร์ปรับมือ --- */
.lens-slider-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lens-slider-row .lens-label { min-width: 76px; }
.lens-slider-row input[type="range"] { flex: 1; accent-color: var(--gold, #d4af37); }

/* --- เลเยอร์ --- */
.lens-add-layer-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.lens-layer-list { display: flex; flex-direction: column; gap: 8px; }
.lens-layer-card {
    background: #1c1c20;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    padding: 8px;
}
.lens-layer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: .8rem;
    color: var(--gold-soft, #f0d98a);
}
.lens-layer-remove {
    background: none;
    border: none;
    color: #e0434d;
    cursor: pointer;
    font-size: .9rem;
    padding: 2px 6px;
}
.lens-layer-row2 { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.lens-layer-row2 input[type="color"] { width: 32px; height: 30px; padding: 0; border: none; cursor: pointer; }
.lens-mini-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    color: var(--text-mute, #6f6360);
}
.lens-mini-label input[type="range"] { flex: 1; accent-color: var(--gold, #d4af37); }

/* --- เลเยอร์ที่แสดงบนพรีวิว --- */
/* [แก้บั๊ก 3 ก.ย. 2569] z-index:3 ต้องสูงกว่าโดมทึบ (z-index:2) เสมอ —
   โดมมีหน้าที่คลุมแค่รูปภาพ ตัวอักษร/คำคมต้องลอยอยู่เหนือโดมเสมอ
   ค่านี้ต้องตรงกับฝั่งเซิร์ฟเวอร์ใน LensFx::render() ไม่งั้นพรีวิวกับผลจริงไม่ตรงกัน */
#mes-studio-layers-preview { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fx-layer-text {
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    white-space: nowrap;
}
.fx-layer-gif { height: auto; }
.fx-layer-light { border-radius: 50%; }

/* ==========================================================================
   [เพิ่มใหม่] เครื่องมือ Quote — ภาพคำคม
   --------------------------------------------------------------------------
   ต้องตรงกับที่ LensFx::renderLayers() วาดฝั่งเซิร์ฟเวอร์เป๊ะ ไม่งั้นพรีวิว
   ตอนแต่งกับผลจริงในโพสต์จะไม่เหมือนกัน (บทเรียนเดิมจากตอนขนาดตัวอักษรเป็น px)
   ต่างจาก .fx-layer-text ตรง pre-wrap (ขึ้นบรรทัดใหม่ได้) ซึ่งเป็นหัวใจของ Quote
   ========================================================================== */
.fx-layer-quote {
    font-weight: 700;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
/* เครื่องหมายคำพูดที่เครื่องมือเติมให้เอง — จางกว่าเนื้อความเล็กน้อย
   ให้สายตาโฟกัสที่ข้อความ ไม่ใช่ที่เครื่องหมาย */
.fx-quote-mark {
    opacity: .65;
    font-size: 1.15em;
    line-height: 1;
}

/* ==========================================================================
   ⭐ เอฟเฟกต์เคลื่อนไหว — allow-list เดียวกับฝั่ง PHP (LensFx::ANIMATIONS)
   ทุกคลาสต้องประกาศไว้ล่วงหน้าที่นี่เท่านั้น ห้ามรับชื่อ animation จากผู้ใช้
   ========================================================================== */
@keyframes fxFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes fxPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.08); } }
@keyframes fxShake { 0%,100% { margin-left: 0; } 25% { margin-left: -3px; } 75% { margin-left: 3px; } }
@keyframes fxGlitch {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(-50%,-50%); }
    20% { clip-path: inset(10% 0 60% 0); transform: translate(calc(-50% + 2px), -50%); }
    40% { clip-path: inset(60% 0 10% 0); transform: translate(calc(-50% - 2px), -50%); }
    60% { clip-path: inset(30% 0 40% 0); transform: translate(-50%,-50%); }
}
@keyframes fxSpinSlow { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.fx-anim-float  { animation: fxFloat 2.4s ease-in-out infinite; }
.fx-anim-pulse  { animation: fxPulse 1.6s ease-in-out infinite; }
.fx-anim-shake  { animation: fxShake .4s ease-in-out infinite; }
.fx-anim-glitch { animation: fxGlitch 1.8s steps(1) infinite; }
.fx-anim-spin-slow { animation: fxSpinSlow 6s linear infinite; }

/* กรอบโพลารอยด์ (ครอบชั้นนอกสุด — ใช้ inline style จาก LensFx::FRAMES เป็นหลัก
   ที่นี่แค่กันเลย์เอาต์แปลกถ้า inline ไม่มาด้วยเหตุผลบางอย่าง) */
.fx-frame {
    display: block;
    /* [เพิ่มใหม่ — จุดที่ขาดไป] คอมเมนต์ของ .mes-myt-container บอกว่า "ใช้แพทเทิร์น
       เดียวกับ .fx-frame" แต่จริง ๆ .fx-frame เองไม่เคยมี container-type ตั้งไว้
       เลย — เป็นช่องโหว่ที่ทำให้หน่วย cqw ของเลเยอร์คำคมด้านในอาจไม่ผูกกับขนาด
       กล่องนี้โดยตรงตามที่ตั้งใจ เพิ่มให้ตรงกันแล้ว: position:relative จำเป็น
       เพราะเลเยอร์ลูกใช้ position:absolute อ้างอิงกล่องนี้เป็นจุดอ้างอิง */
    position: relative;
    container-type: inline-size;
}

/* ค่าตัวเลขข้างสไลเดอร์ความเข้มฟิลเตอร์ */
.lens-val {
    min-width: 42px;
    text-align: right;
    font-size: .75rem;
    color: var(--gold-soft, #f0d98a);
}
/* การ์ดเลเยอร์ฟิลเตอร์ — ทำสีต่างจากเลเยอร์ที่วาดทับ ให้แยกกลุ่มได้ด้วยตา */
.lens-layer-card[data-layer-type="filter"] { border-left: 3px solid var(--gold, #d4af37); }
.lens-layer-card[data-layer-type="light"]  { border-left: 3px solid #5aa9e6; }
.lens-layer-card[data-layer-type="text"]   { border-left: 3px solid #7bd88f; }
.lens-layer-card[data-layer-type="gif"]    { border-left: 3px solid #e86ab0; }
.lens-layer-preset { width: 100%; margin-bottom: 6px; }

/* [แก้บั๊กตำแหน่งไม่ตรง] ให้กล่องพรีวิวรัดรูปพอดีเหมือนผลลัพธ์จริงเป๊ะ
   line-height:0 กันช่องว่างใต้ <img> ที่เกิดจากระยะบรรทัด
   ถ้าไม่กัน ความสูงกล่องจะมากกว่ารูปนิดหน่อย → ตำแหน่ง Y ของเลเยอร์เพี้ยน */
.lens-stage-v2 .lens-canvas-wrap { line-height: 0; }
.lens-stage-v2 .lens-canvas-wrap img { width: 100%; height: auto; display: block; }

/* ปุ่ม "ใช้ค่านี้" / "รีเซ็ตชุดนี้" ในแท็บฟิลเตอร์และปรับมือ */
.lens-apply-row { display: flex; gap: 6px; margin-top: 12px; }
.lens-apply-btn {
    flex: 1;
    padding: 9px;
    border: 0;
    border-radius: 8px;
    background: var(--gold, #d4af37);
    color: #1a1414;
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}
.lens-apply-btn:hover { filter: brightness(1.1); }
/* ป้ายบอกว่าชั้นนี้ถูกอบค่าไว้แล้ว แก้พรีเซ็ตไม่ได้ (ลบทั้งชั้นได้) */
.lens-baked-tag {
    padding: 7px 10px;
    background: #262218;
    border: 1px dashed var(--gold-dim, #8a7128);
    border-radius: 6px;
    color: var(--gold-soft, #f0d98a);
    font-size: .76rem;
    margin-bottom: 6px;
}
/* คำใบ้ว่าลากได้ + สถานะขณะลาก */
.lens-drag-hint { font-size: .68rem; color: var(--text-mute, #6f6360); margin: 6px 0 0; }
.fx-layer-dragging { outline: 2px dashed var(--gold, #d4af37); outline-offset: 2px; }

/* [ตามที่ขอ] รายการเลเยอร์เยอะหลายชั้น -> ใส่แถบเลื่อนของตัวเอง
   ไม่ให้ดันแผงเครื่องมือยาวจนต้องเลื่อนทั้งหน้าไปหาปุ่มยืนยัน */
.lens-layer-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}
.lens-layer-list::-webkit-scrollbar { width: 6px; }
.lens-layer-list::-webkit-scrollbar-track { background: #141416; border-radius: 3px; }
.lens-layer-list::-webkit-scrollbar-thumb {
    background: var(--gold-dim, #8a7128);
    border-radius: 3px;
}
.lens-layer-list::-webkit-scrollbar-thumb:hover { background: var(--gold, #d4af37); }

/* จอมือถือ — ลดความสูงลงอีกเพราะพื้นที่จำกัด */
@media (max-width: 720px) {
    .lens-layer-list { max-height: 220px; }
}

/* ==========================================================================
   [แก้รอบ 2-3] ปุ่มยืนยัน — เลิกลอยทับเมนูอย่างถาวร
   ==========================================================================
   รอบแรก: position:sticky อยู่ "ข้างใน" แผงเครื่องมือที่เลื่อนได้
           -> ลอยค้างทับทุกอย่างที่อยู่ใต้มัน บังแถบเลื่อนและการ์ดเลเยอร์
   รอบสอง: ย้ายมาไว้ล่างสุดเต็มความกว้างใต้ทั้งสองคอลัมน์
           -> ยังคาบเกี่ยวกับแผงขวา และตกไปไกลจนหาไม่เจอเพราะแผงขวายาวมาก
   รอบสาม (ตอนนี้): ผูกไว้กับคอลัมน์ซ้าย ใต้รูปโดยตรง ตามที่เจ้าของวาดมา
           คอลัมน์ซ้ายสั้นและ sticky ปุ่มจึงอยู่ใต้รูปเสมอ
           และอยู่คนละคอลัมน์กับเมนู = ไม่มีทางทับกันได้อีกเลย
   ========================================================================== */
.lens-stage-v2 .lens-confirm-btn {
    position: static;
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px 10px;
    font-size: .95rem;
    line-height: 1.35;
}

/* ==========================================================================
   [เพิ่มรอบ 3] แถบเลือกขนาดภาพใต้รูป — เห็นตลอด ไม่ต้องเลื่อนหา
   ========================================================================== */
.lens-ratio-bar {
    background: #141416;
    border: 1px solid #2a2a2e;
    border-radius: 10px;
    padding: 8px;
}
.lens-ratio-bar-label {
    display: block;
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--gold-soft, #f0d98a);
}
/* แบบย่อ — ปุ่มเล็กลง เรียง 3 คอลัมน์ ให้พอดีคอลัมน์ซ้ายที่แคบ */
.lens-ratio-grid-compact {
    margin-top: 0;
    gap: 4px;
}
.lens-ratio-grid-compact .lens-ratio-chip {
    padding: 7px 2px;
    font-size: .66rem;
}
.lens-ratio-grid-compact .story-duration-chip {
    padding: 7px 2px;
    font-size: .66rem;
}

/* ==========================================================================
   [ข้อ 1] แถบร่างค้าง — แทนการเทร่างเก่าลงกล่องเองโดยไม่ถาม
   ==========================================================================
   ต้องอยู่บนสุดของขั้น 1 และเห็นชัด แต่ไม่ใหญ่จนบังเนื้อที่เขียน
   ========================================================================== */
.composer-draft-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--gold-dim, #8a7128);
    border-radius: 10px;
    background: rgba(212, 175, 55, .06);
}
.composer-draft-text {
    flex: 1;
    min-width: 140px;
    font-size: .82rem;
    color: var(--gold-soft, #f0d98a);
}
.composer-draft-drop { border-color: #e0434d; color: #e0434d; }

/* ==========================================================================
   [ข้อ 2] กล่องถามตอนกดปิด — 3 ทางเลือกจริง
   ==========================================================================
   ทำเองแทน confirm() ของเบราว์เซอร์ เพราะ confirm() มีปุ่มได้แค่ 2 ปุ่ม
   จึงไม่มีที่ว่างให้ "เริ่มใหม่" ตั้งแต่แรก
   z-index สูงกว่า overlay ของกล่องพิมพ์ (9000) เพื่อให้อยู่บนสุดจริง
   ========================================================================== */
.composer-ask-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .72);
}
.composer-ask-overlay[hidden] { display: none; }

.composer-ask-box {
    width: 100%;
    max-width: 380px;
    padding: 18px;
    border: 1px solid var(--gold-dim, #8a7128);
    border-radius: 16px;
    background: var(--surface, #16161a);
}
.composer-ask-title {
    margin: 0 0 4px;
    color: var(--gold, #d4af37);
    font-size: 1.05rem;
    text-align: center;
}
.composer-ask-note {
    margin: 0 0 14px;
    font-size: .78rem;
    color: var(--text-mute, #6f6360);
    text-align: center;
}

.composer-ask-btn {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line, #2a2a2e);
    border-radius: 10px;
    background: var(--surface-2, #1c1c20);
    color: var(--text, #ece5e0);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.composer-ask-btn small {
    display: block;
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 400;
    color: var(--text-mute, #6f6360);
}
.composer-ask-btn.ask-save:hover  { border-color: var(--gold, #d4af37); }
.composer-ask-btn.ask-fresh:hover { border-color: #5aa9e6; }
.composer-ask-btn.ask-drop        { border-color: rgba(224, 67, 77, .45); }
.composer-ask-btn.ask-drop:hover  { border-color: #e0434d; }

.composer-ask-cancel {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mute, #6f6360);
    font-family: inherit;
    font-size: .84rem;
    cursor: pointer;
}
.composer-ask-cancel:hover { color: var(--text, #ece5e0); }

/* ==========================================================================
   [ข้อ 1] กล่องพิมพ์ตอนถูกล็อกไม่ให้รับโฟกัส (กันแป้นพิมพ์เด้งเอง)
   ==========================================================================
   ⚠️ ต้องหน้าตาเหมือนตอนใช้งานได้ทุกประการ ห้ามทำให้ดูเป็นช่องที่ถูกปิด
   เพราะผู้ใช้ต้องรู้สึกว่าแตะแล้วพิมพ์ได้ทันทีตามปกติ (ซึ่งก็ได้จริง)
   มีแค่ cursor ที่บอกใบ้ว่าแตะได้ ไม่มีอะไรเปลี่ยนทางสายตาเลย
   ========================================================================== */
.magic-docs-tiptap-container.is-disarmed { cursor: text; }

/* ==========================================================================
   [ข้อ 4] แท็บขนาด/ครอบตัด
   ========================================================================== */
.lens-ratio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px;
}
.lens-ratio-chip {
    padding: 10px 4px;
    font-size: .72rem;
    text-align: center;
    background: #1c1c20;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    color: var(--text, #ece5e0);
    cursor: pointer;
    line-height: 1.3;
}
.lens-ratio-chip:hover { border-color: var(--gold-dim, #8a7128); }
.lens-ratio-chip.active {
    border-color: var(--gold, #d4af37);
    background: #262218;
    color: var(--gold-soft, #f0d98a);
    font-weight: 700;
}

/* ==========================================================================
   [เพิ่มใหม่] ปุ่มเลือกระยะเวลาสตอรี่ — หน้าตาเหมือน .lens-ratio-chip เป๊ะ
   แต่แยกคลาสต่างหากตั้งใจ (ดูคำอธิบายที่ composer.php) ห้ามรวมกลับเป็นคลาส
   เดียวกัน เพราะ .lens-ratio-chip มี click handler ผูกกับสัดส่วนภาพอยู่แล้ว
   ========================================================================== */
.story-duration-chip {
    padding: 10px 4px;
    font-size: .72rem;
    text-align: center;
    background: #1c1c20;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    color: var(--text, #ece5e0);
    cursor: pointer;
    line-height: 1.3;
}
.story-duration-chip:hover { border-color: var(--gold-dim, #8a7128); }
.story-duration-chip.active {
    border-color: var(--gold, #d4af37);
    background: #262218;
    color: var(--gold-soft, #f0d98a);
    font-weight: 700;
}

/* แถบเลื่อนตำแหน่งใช้ไม่ได้ตอนยังไม่เลือกสัดส่วน — บอกด้วยสายตาว่ายังไม่ถึงคิว */
.lens-slider-row input[type="range"]:disabled { opacity: .35; cursor: not-allowed; }

/* คำใบ้เปลี่ยนโทนตอนกำลังครอบอยู่จริง ให้รู้ว่าลากรูปได้แล้ว */
#mes-fx-crop-hint.is-cropping {
    color: var(--gold-soft, #f0d98a);
    border-left: 2px solid var(--gold-dim, #8a7128);
    padding-left: 8px;
}

/* ลากนิ้วบนรูปเพื่อเลือกแถบที่จะเก็บไว้
   touch-action:none ต้องอยู่ที่นี่ ไม่ใช่ใน JS เพราะ refreshLivePreview()
   เขียน style ของรูปทับทั้งก้อนทุกครั้งที่มีการปรับค่า ค่าใน JS จะหายทันที */
.lens-stage-v2 .lens-canvas-wrap img { touch-action: none; }

/* ==========================================================================
   [ข้อ 5] หูจับย่อ/ขยายเบลนด์เลเยอร์ด้วยมือ
   ==========================================================================
   วางที่มุมขวาล่างของแผ่นสี จับแล้วลากออก = ใหญ่ขึ้น ลากเข้า = เล็กลง
   ต้องไม่โดน filter:blur ของแผ่นสีเบลอตามไปด้วย จึงตั้ง filter:none คืน
   ========================================================================== */
.fx-layer-grip {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--gold, #d4af37);
    background: rgba(0, 0, 0, .72);
    color: var(--gold, #d4af37);
    font-size: .78rem;
    line-height: 1;
    cursor: nwse-resize;
    touch-action: none;
    pointer-events: auto;
    /* กันคุณสมบัติของแผ่นสีตกทอดมาถึงหูจับ ไม่งั้นหูจับจะเบลอ/ผสานสีจนมองไม่เห็น */
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
}

/* แผ่นสีต้องแตะได้เพื่อลากย้าย (เดิมตั้ง pointer-events:none จึงแตะไม่ได้เลย) */
.lens-stage-v2 .fx-layer-light { pointer-events: auto; }

/* ==========================================================================
   [เพิ่มใหม่] เอฟเฟกต์โดม — ครอบทั้งภาพ (รูป+ทุกเลเยอร์) เป็นชั้นสุดท้าย
   ==========================================================================
   ต่างจาก fx-anim-* (ผูกกับเลเยอร์เดี่ยว) ตรงที่โดมขยับทั้งก้อนไปพร้อมกัน
   ทุกตัวใช้ transform ล้วน ไม่แตะ margin/top/left เด็ดขาด
   เพราะกล่องที่โดมครอบใหญ่กว่าเลเยอร์เดี่ยวมาก ถ้าใช้ margin เบราว์เซอร์ต้อง
   คำนวณเลย์เอาต์ใหม่ทั้งการ์ดโพสต์ทุกเฟรม = ตัวการอาการกระตุกตัวจริง
   transform ทำงานบนชั้น compositor ของการ์ดจอ ไม่กระทบเลย์เอาต์เลย
   ========================================================================== */
.fx-dome { transform-origin: center center; }

@keyframes domeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes domeDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes domeShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
/* เต้นจังหวะหัวใจ — สองจังหวะถี่แล้วเว้นจังหวะยาว เลียนแบบเสียงหัวใจ "ตุบ-ตุบ...เว้น" */
@keyframes domePulse {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.045); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.045); }
    56%      { transform: scale(1); }
}
@keyframes domeZoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes domeTilt { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-1.2deg); } 75% { transform: rotate(1.2deg); } }

/* [เพิ่มตามที่ขอ] ไล่สีวนแบบมีม — เขียว/เหลือง/แดง/ฟ้า กระโดดทีละสี ไม่ไล่เนียน
   ใช้เทคนิคเดียวกับ myt-fx-hue-cycle ที่มีอยู่แล้ว (filter:hue-rotate ตัวเดียว
   พิสูจน์แล้วว่าเบา ใช้กับวิดีโอได้สบาย) เปลี่ยนแค่ timing จาก linear เป็น
   steps(6) ให้ผลลัพธ์เป็นขั้นบันได — ต้นทุนเครื่องเท่าเดิมเป๊ะ */
@keyframes domeHue { to { filter: hue-rotate(360deg); } }

.fx-dome-anim-dome-float { animation: domeFloat 2.6s ease-in-out infinite; }
.fx-dome-anim-dome-drift { animation: domeDrift 3.2s ease-in-out infinite; }
.fx-dome-anim-dome-shake { animation: domeShake .5s ease-in-out infinite; }
.fx-dome-anim-dome-pulse { animation: domePulse 1.8s ease-in-out infinite; }
.fx-dome-anim-dome-zoom  { animation: domeZoom 3.4s ease-in-out infinite; }
.fx-dome-anim-dome-tilt  { animation: domeTilt 3s ease-in-out infinite; }
.fx-dome-anim-dome-hue   { animation: domeHue 2.4s steps(6) infinite; }

/* ==========================================================================
   [เพิ่มใหม่] เล่นเอฟเฟกต์เฉพาะตอนอยู่ในสายตาเท่านั้น
   ==========================================================================
   ครอบคลุมทั้ง 3 ระดับที่มีอยู่: เลเยอร์เดี่ยว (fx-anim-*) เบลนด์เลเยอร์
   (ใช้คลาสร่วมกับเลเยอร์เดี่ยว) และโดม (fx-dome-anim-*)
   ใช้ selector แบบ attribute-match ตัวเดียวคุมทั้งหมด ไม่ต้องแก้ทีละคลาส

   ขอบเขตแค่ .post-body (ฟีดจริง) เท่านั้น — เวทีแต่งภาพ (#mes-studio-*)
   ไม่ถูกคุม เพราะตอนแต่งอยู่ ผู้ใช้ต้องเห็นเอฟเฟกต์ทำงานทันทีเพื่อดูตัวอย่าง
   ไม่ใช่รอ intersection observer ซึ่งไม่มีประโยชน์ในหน้าที่ไม่มีการเลื่อน

   ตัวคุมจริง (เพิ่ม/ลบคลาส fx-in-view) อยู่ที่ assets/js/viewport-fx.js
   ไฟล์นี้แค่กำหนดกฎ CSS ว่า "ไม่มีคลาสนี้ = หยุดนิ่ง" เท่านั้น
   ========================================================================== */
.post-body [class*="fx-anim-"],
.post-body [class*="fx-dome-anim-"] {
    animation-play-state: paused;
}
.post-body.fx-in-view [class*="fx-anim-"],
.post-body.fx-in-view [class*="fx-dome-anim-"] {
    animation-play-state: running;
}

/* เผื่อกรณีเบราว์เซอร์เก่ามาก ๆ ที่ไม่รู้จัก Intersection Observer เลย
   (ไฟล์ viewport-fx.js จะไม่เพิ่มคลาส fx-in-view ให้ในกรณีนี้)
   ให้เล่นตามปกติดีกว่าปล่อยภาพนิ่งสนิทตลอดไปทั้งเว็บ */
.post-body.fx-no-observer-support [class*="fx-anim-"],
.post-body.fx-no-observer-support [class*="fx-dome-anim-"] {
    animation-play-state: running;
}

/* ==========================================================================
   [เพิ่มใหม่] แผงเลือกเอฟเฟกต์โดมในเวทีเลนส์
   ========================================================================== */
.lens-dome-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #2a2a2e;
}
.lens-dome-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 6px;
}
.lens-dome-chip {
    padding: 9px 6px;
    font-size: .74rem;
    text-align: center;
    background: #1c1c20;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    color: var(--text, #ece5e0);
    cursor: pointer;
    line-height: 1.3;
}
.lens-dome-chip:hover { border-color: var(--gold-dim, #8a7128); }
.lens-dome-chip.active {
    border-color: var(--gold, #d4af37);
    background: #262218;
    color: var(--gold-soft, #f0d98a);
    font-weight: 700;
}

/* พรีวิวสด — กล่องที่ห่อรอบ #mes-studio-canvas-wrap ตอนเลือกโดม
   ต้องเห็นเอฟเฟกต์ทำงานทันทีตอนแต่ง (ไม่ผ่าน viewport gating เหมือนในฟีด) */
#mes-studio-canvas-wrap.fx-dome { display: block; }

/* ==========================================================================
   [แก้รอบ 6] รายการร่างหลายช่อง — เลือกทำต่อ/ลบทิ้งได้ทีละอัน
   ==========================================================================
   ของเดิมมีร่างเดียว ถ้าร่างนั้นเสียจะติดค้างลบไม่ออก เรียกไม่ขึ้น
   ตอนนี้แต่ละช่องเป็นอิสระ มีปุ่มของตัวเอง จึงไม่มีทางติดตายแบบเดิมอีก
   ========================================================================== */
.composer-draft-list {
    margin: -6px 0 12px;
    padding: 8px;
    border: 1px dashed var(--gold-dim, #8a7128);
    border-radius: 10px;
    background: rgba(212, 175, 55, .04);
}
.composer-draft-list[hidden] { display: none; }

.composer-draft-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    border-radius: 8px;
    background: var(--surface-2, #1c1c20);
}
.composer-draft-row + .composer-draft-row { margin-top: 6px; }

/* ช่องที่กำลังเขียนต่ออยู่ — ให้เห็นชัดว่าอันไหนที่ทำค้างไว้ */
.composer-draft-row.is-active {
    outline: 1px solid var(--gold, #d4af37);
    background: #262218;
}

.composer-draft-info {
    flex: 1;
    min-width: 150px;
}
.composer-draft-title {
    font-size: .8rem;
    color: var(--text, #ece5e0);
    /* ตัดบรรทัดเดียว กันร่างที่ข้อความยาวมากดันแถวสูงจนรก */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.composer-draft-time {
    margin-top: 2px;
    font-size: .7rem;
    color: var(--text-mute, #6f6360);
}

/* ==========================================================================
   [เพิ่มใหม่] แผงเพลงประกอบโพสต์ — ต่อท่อเข้าคลังเพลงจริง
   ========================================================================== */
.tray-music { border-color: #34d399; }

.music-mood-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.music-mood-chip.active {
    border-color: #34d399;
    background: #10241c;
    color: #6ee7b7;
    font-weight: 700;
}

.music-track-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}
.music-track-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1c1c20;
    border: 1px solid var(--line);
}
.music-track-info { min-width: 0; flex: 1; }
.music-track-title {
    font-size: .85rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-track-artist {
    font-size: .72rem;
    color: var(--text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ป้ายเพลงที่เลือกอยู่ — โผล่ใต้แถบเครื่องมือบน เห็นตลอดจนกว่าจะถอด */
.composer-music-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #10241c;
    border: 1px solid #34d399;
    color: #6ee7b7;
    font-size: .82rem;
}
.composer-music-chip span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.composer-music-chip button {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #6ee7b7;
    cursor: pointer;
    font-size: .95rem;
    padding: 0 2px;
}

/* ==========================================================================
   [เพิ่มใหม่] Gallery Sheet — หน้าต่างเลือกอัลบั้ม (โหมด 0 ไบต์)
   ==========================================================================
   ชิดขอบล่างโดยตั้งใจ ไม่ใช่กึ่งกลางจอ — บทเรียนจากระบบเก่า:
   แผงกึ่งกลาง + แป้นพิมพ์มือถือเด้ง = ช่องพิมพ์ชื่อกับปุ่มบันทึกถูกบังจนกดไม่ได้
   ========================================================================== */
.gallery-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: flex-end;          /* ⭐ ชิดล่าง ไม่ใช่ center */
    justify-content: center;
    background: rgba(0, 0, 0, .6);
}
.gallery-sheet-overlay[hidden] { display: none; }

.gallery-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 78vh;
    overflow-y: auto;
    padding: 14px;
    border-radius: 16px 16px 0 0;
    background: #141416;
    border: 1px solid var(--line);
    border-bottom: none;
}
.gallery-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--gold-soft, #f0d98a);
}

.gallery-album-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.gallery-album-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: #1c1c20;
    border: 1px solid var(--line);
    color: var(--text, #ece5e0);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.gallery-album-card:hover { border-color: var(--gold-dim, #8a7128); }
.gallery-album-card.is-default { border-color: var(--gold, #d4af37); }

.gallery-album-name {
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.gallery-album-count {
    flex-shrink: 0;
    font-size: .72rem;
    color: var(--text-mute, #6f6360);
}

.gallery-create-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.gallery-create-row .input { flex: 1; min-width: 0; }

/* ปุ่ม Gallery ตอนมีรูปรอบันทึกอยู่ — เด่นขึ้นแต่ไม่รบกวน (ไม่มีป็อปอัพเด้ง) */
#composer-gallery-btn.has-pending {
    border-color: var(--gold, #d4af37);
    background: #262218;
    color: var(--gold-soft, #f0d98a);
    font-weight: 700;
}

/* ==========================================================================
   [เพิ่มใหม่ ระยะ 14] ส่งไปที่ไหนอีก + แท็กเพื่อน
   ========================================================================== */
.composer-share-block { flex-direction: column; align-items: stretch; }

.share-target-list,
.tag-friend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.share-target-chip,
.tag-friend-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #1c1c20;
    border: 1px solid var(--line);
    font-size: .82rem;
    cursor: pointer;
    user-select: none;
}
.share-target-chip:has(input:checked),
.tag-friend-chip:has(input:checked),
.share-target-chip.is-checked,
.tag-friend-chip.is-checked {
    border-color: var(--gold, #d4af37);
    background: #262218;
    color: var(--gold-soft, #f0d98a);
}
.share-target-chip.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}
.share-target-chip input,
.tag-friend-chip input { accent-color: var(--gold, #d4af37); }

/* ==========================================================================
   [19 ก.ย. 2569 — เจ้าของแจ้ง "ควรเป็นรูปโปรไฟล์เพจ และควรมีป้ายกำกับ"]
   ชิปปลายทางแบบมีรูปจริง + ป้ายบอกชนิด (เพจ/กลุ่ม/ห้อง)
   ปรับ border-radius จากวงรีเป็นมุมมน เพราะมีรูปสี่เหลี่ยมอยู่ข้างใน วงรีจะดูบีบ
   ========================================================================== */
.share-target-chip { border-radius: 12px; padding: 6px 12px 6px 6px; }
.share-target-av {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    background: #26262c;
}
.share-target-av-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    line-height: 1;
}
.share-target-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.share-target-txt b {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 13ch;
}
.share-target-kind {
    font-size: .66rem;
    color: var(--text-mute, #948d88);
}

/* ==========================================================================
   [แก้บั๊กสำคัญ ข้อ 5] ป้ายเพลงที่เลือก — ซ่อนได้จริงเสียที
   ==========================================================================
   ต้นตอ: .composer-music-chip ตั้ง display:flex ไว้ ซึ่ง "ทับ" ค่า display:none
   ที่มากับแอตทริบิวต์ hidden ของ HTML (กฎ CSS ชนะเสมอ) ผลคือ:
     · ป้ายเพลงเขียวโชว์ตลอดเวลาแม้ยังไม่ได้เลือกเพลง (ป้ายว่างเปล่าน่างง)
     · กดกากบาท X แล้ว JS สั่ง hidden = true แต่หน้าจอไม่เปลี่ยน = "กดแล้วไม่มีอะไรเกิดขึ้น"
   บรรทัดนี้คืนอำนาจให้ hidden ตามที่ควรเป็น แก้ทั้งสองอาการพร้อมกัน
   ========================================================================== */
.composer-music-chip[hidden] { display: none !important; }

/* ปุ่มฟังตัวอย่างเพลง [ข้อ 4] */
.music-play-btn {
    flex-shrink: 0;
    min-width: 42px;
    text-align: center;
}
.music-play-btn.is-playing {
    border-color: #34d399;
    background: #10241c;
    color: #6ee7b7;
}

/* ==========================================================================
   [เพิ่มใหม่] เครื่องมือ Quote — ปุ่มเรียก + แผงเขียนคำคม
   ========================================================================== */
.composer-pill-quote {
    border-color: var(--gold, #d4af37);
    color: var(--gold-soft, #f0d98a);
    font-weight: 700;
}

/* กล่องพิมพ์คำคม — ใช้ contenteditable ไม่ใช่ textarea เพราะต้องระบายสี/
   ใส่เอฟเฟกต์เฉพาะบางตัวอักษรได้ (textarea เก็บได้แค่ข้อความล้วน) */
.quote-editor {
    min-height: 96px;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid #2a2a2e;
    border-radius: 10px;
    background: #1c1c20;
    color: var(--text, #ece5e0);
    font-size: .92rem;
    line-height: 1.6;
    white-space: pre-wrap;      /* ขึ้นบรรทัดใหม่ได้จริง — หัวใจของ Quote */
    word-break: break-word;
    outline: none;
}
.quote-editor:focus { border-color: var(--gold, #d4af37); }

/* ข้อความชี้แนะตอนยังไม่ได้พิมพ์อะไร (contenteditable ไม่มี placeholder ในตัว) */
.quote-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-mute, #6f6360);
    pointer-events: none;
}

.quote-sep {
    border: 0;
    border-top: 1px dashed #2a2a2e;
    margin: 12px 0 8px;
}

.quote-align-btn.active {
    border-color: var(--gold, #d4af37);
    background: #262218;
    color: var(--gold-soft, #f0d98a);
    font-weight: 700;
}

/* ==========================================================================
   [เพิ่มใหม่] โพลบนการ์ดโพสต์
   --------------------------------------------------------------------------
   แบบแสดงผล: แถบยาว + % (อ่านง่ายสุดบนมือถือ ตามที่แนะนำและตกลงกัน)
   แถบเป็นพื้นหลังที่ขยายตามสัดส่วน ข้อความอยู่ทับด้านบน — ไม่ใช้ 2 element
   ซ้อนกันแบบ progress bar ทั่วไป เพื่อให้แตะเลือกได้ทั้งแถวโดยไม่ต้องเล็งช่องเล็ก ๆ
   ========================================================================== */
.post-poll {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid #2a2a2e;
    border-radius: 12px;
    background: #141416;
}
.post-poll-q {
    font-weight: 700;
    font-size: .92rem;
    color: var(--text, #ece5e0);
    margin-bottom: 10px;
}
.post-poll-opts { display: flex; flex-direction: column; gap: 6px; }

.post-poll-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    background: #1c1c20;
    overflow: hidden;
    font-size: .84rem;
    cursor: pointer;
}
/* แถบสัดส่วนคะแนน — อยู่หลังข้อความ ไม่บังการอ่าน */
.post-poll-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(34, 197, 94, .18);
    transition: width .45s ease;
    pointer-events: none;
}
.post-poll-label { position: relative; flex: 1; color: var(--text, #ece5e0); }
.post-poll-pct {
    position: relative;
    font-size: .74rem;
    color: var(--text-mute, #9a938d);
    white-space: nowrap;
}
.post-poll-opt input { position: relative; accent-color: #22c55e; }

/* ข้อที่ตัวเองเลือก — ต้องเห็นชัดเพราะเปลี่ยนใจไม่ได้แล้ว */
.post-poll-opt.is-mine {
    border-color: #22c55e;
    background: rgba(34, 197, 94, .08);
}
.post-poll-opt.is-mine .post-poll-label { font-weight: 700; color: #86efac; }

.post-poll-submit { margin-top: 10px; }
.post-poll-note {
    margin: 8px 0 0;
    font-size: .72rem;
    color: var(--text-mute, #9a938d);
}

/* ถาดสร้างโพลในกล่องพิมพ์ */
.tray-poll .input { margin-bottom: 6px; }
.tray-poll #mes-poll-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

/* ==========================================================================
   [เพิ่มใหม่] หน้าจัดเรียงสไลด์สตอรี่หลายรูป
   ========================================================================== */
.slides-arranger-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--gold-soft, #f0d98a);
}

.slides-arranger-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

.slide-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #2a2a2e;
    border-radius: 10px;
    background: #1c1c20;
    cursor: grab;
}
.slide-row:active { cursor: grabbing; }

.slide-row-handle {
    color: var(--text-mute, #6f6360);
    font-size: 1.1rem;
    user-select: none;
}
.slide-row-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #000;
}
.slide-row-body { flex: 1; min-width: 0; }
.slide-row-body .lens-mini-label { display: flex; align-items: center; gap: 6px; }
.slide-row-body input[type="range"] { flex: 1; accent-color: var(--gold, #d4af37); }
.slide-row-sec { min-width: 1.6em; text-align: right; font-weight: 700; color: var(--gold-soft, #f0d98a); }

.slide-row-remove {
    background: none;
    border: 0;
    color: var(--text-mute, #6f6360);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
}
.slide-row-remove:hover { color: #ef4444; }

.slides-arranger-total {
    text-align: center;
    font-weight: 700;
    padding: 8px;
    border-radius: 8px;
    background: rgba(212, 175, 55, .08);
    color: var(--gold-soft, #f0d98a);
    margin-bottom: 4px;
}
.slides-arranger-total.is-over {
    background: rgba(239, 68, 68, .12);
    color: #f87171;
}

/* ==========================================================================
   [เพิ่มใหม่] แถวชิปโดมในแผงคำคม
   --------------------------------------------------------------------------
   ใช้คลาส .lens-dome-chip ตัวเดียวกับที่แท็บเลเยอร์ใช้อยู่ (สไตล์เดิมมีอยู่แล้ว)
   ตรงนี้แค่จัดแถวให้ห่อบรรทัดได้สวยในแผงที่แคบกว่า
   ========================================================================== */
.lens-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* ==========================================================================
   ⭐ [เพิ่มใหม่] วางลิงก์แล้วกลายเป็นเฟรม/รูป/การ์ดอัตโนมัติ
   --------------------------------------------------------------------------
   ก้อนที่แปลงแล้วจะ contenteditable=false ทั้งก้อน (ตั้งใน JS) เพื่อไม่ให้
   ผู้ใช้เผลอพิมพ์แทรกเข้าไปข้างในจนโครงพัง — แต่ยังลบทั้งก้อนได้ปกติ
   ========================================================================== */
.mes-embed-loading {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(212, 175, 55, .12);
    color: var(--gold-soft, #f0d98a);
    font-size: .82rem;
}

.mes-embed-block {
    position: relative;
    margin: 10px 0;
}

/* ปุ่มเลิกทำ — จางไว้ก่อน ชัดขึ้นเมื่อเอาเมาส์ไปโดน
   ต้องมีเสมอเพราะบางคนตั้งใจอยากได้ลิงก์เปล่าจริง ๆ */
.mes-embed-undo {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    font: inherit;
    font-size: .72rem;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .65);
    color: #fff;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s ease;
}
.mes-embed-block:hover .mes-embed-undo { opacity: 1; }

.mes-embed-img {
    display: block;
    max-width: 100%;
    border-radius: 10px;
}

/* ==========================================================================
   🐞 [แก้บั๊ก "ตัวอักษรด้านในเล่นเอฟเฟกต์ไม่ได้"]
   --------------------------------------------------------------------------
   สาเหตุจริง 2 ข้อ ซ้อนกัน:
   1. .fx-anim-* เดิมออกแบบมาให้ "ทั้งเลเยอร์" ซึ่งวางแบบ absolute และใช้
      transform: translate(-50%,-50%) เพื่อจัดกึ่งกลาง — พอเอาคลาสเดียวกันนี้
      ไปแปะที่ <span> ข้างในข้อความ ตัวอักษรจะกระเด็นออกไปนอกที่ทันที
   2. **transform ไม่มีผลกับ inline element เลย** ซึ่ง <span> เป็น inline
      โดยกำเนิด -> pulse/glitch/spin-slow จึงไม่ขยับแม้แต่นิดเดียว
      (นี่คือเหตุผลที่กดแล้วเหมือนไม่มีอะไรเกิดขึ้น ทั้งที่ค่าถูกบันทึกถูกต้อง)

   แก้: ทำชุดคลาสแยกสำหรับ "ท่อนข้อความ" โดยเฉพาะ
   · display:inline-block  -> ปลดล็อกให้ transform ทำงานได้
   · keyframes ไม่มี translate(-50%,-50%) -> ไม่กระเด็นออกนอกที่
   ========================================================================== */
@keyframes fxSegFloat  { 0%,100% { transform: translateY(0); }    50% { transform: translateY(-6px); } }
@keyframes fxSegPulse  { 0%,100% { transform: scale(1); }          50% { transform: scale(1.18); } }
@keyframes fxSegShake  { 0%,100% { transform: translateX(0); }     25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes fxSegSpin   { from { transform: rotate(0deg); }         to { transform: rotate(360deg); } }
@keyframes fxSegGlitch {
    0%, 100% { transform: translate(0, 0); opacity: 1; }
    20% { transform: translate(2px, -1px); opacity: .82; }
    40% { transform: translate(-2px, 1px); opacity: 1; }
    60% { transform: translate(1px, 1px); opacity: .9; }
}

/* inline-block คือหัวใจ — ถ้าไม่มีบรรทัดนี้ transform ทั้งหมดข้างบนไร้ผลทันที */
[class*="fx-seg-anim-"] { display: inline-block; }

.fx-seg-anim-float     { animation: fxSegFloat 2.4s ease-in-out infinite; }
.fx-seg-anim-pulse     { animation: fxSegPulse 1.6s ease-in-out infinite; }
.fx-seg-anim-shake     { animation: fxSegShake .4s ease-in-out infinite; }
.fx-seg-anim-glitch    { animation: fxSegGlitch 1.8s steps(1) infinite; }
.fx-seg-anim-spin-slow { animation: fxSegSpin 6s linear infinite; }

/* ==========================================================================
   [เพิ่มใหม่] แถวเลเยอร์ตัวหนังสือทับวิดีโอ (แผง MYT)
   ========================================================================== */
.myt-text-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.myt-text-row .myt-text-input { flex: 1; }
.myt-text-row .myt-text-pos { flex: 0 0 90px; }
.myt-text-row .myt-text-color {
    flex: 0 0 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--mes-line, #2a2a2e);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}
.myt-text-remove {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--mes-line, #2a2a2e);
    border-radius: 6px;
    color: var(--mes-text-mute, #9a938d);
    font: inherit;
    padding: 6px 10px;
    cursor: pointer;
}
.myt-text-remove:hover { color: #ef4444; border-color: #ef4444; }

/* ==========================================================================
   [เพิ่มใหม่ — ตามที่ขอ] ไฮไลต์ตัวอักษร + เลเยอร์ GIF ทับวิดีโอ (แผง MYT)
   ========================================================================== */
.myt-color-label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: .78rem;
    flex: 0 0 auto;
    color: var(--mes-text-mute, #9a938d);
}
.myt-color-label input[type="color"] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--mes-line, #2a2a2e);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}
.myt-hl-label input[type="checkbox"] { margin-right: 2px; cursor: pointer; }
.myt-hl-label input[type="color"]:disabled { opacity: .35; cursor: not-allowed; }

.myt-gif-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.myt-gif-row .myt-gif-url { flex: 1; }
.myt-gif-row .myt-gif-pos { flex: 0 0 90px; }
.myt-gif-remove {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--mes-line, #2a2a2e);
    border-radius: 6px;
    color: var(--mes-text-mute, #9a938d);
    font: inherit;
    padding: 6px 10px;
    cursor: pointer;
}
.myt-gif-remove:hover { color: #ef4444; border-color: #ef4444; }

/* ==========================================================================
   [เพิ่มใหม่] แถบสรุปก่อนกดแทรกวิดีโอ MYT
   ========================================================================== */
/* ==========================================================================
   [แก้ใหญ่] พรีวิวสดของ MYT — แทนที่แถบสรุปข้อความเดิม
   --------------------------------------------------------------------------
   เดิมเป็นแถบสรุปเป็นตัวหนังสือ ("จะแทรก: วิดีโอ + โดม + ...") ซึ่งยังเป็นการ
   ตกแต่งแบบตาบอดอยู่ดี — ตอนนี้เห็นของจริงเลย เหมือนวาร์ปสื่อ/เวทีเลนส์
   ========================================================================== */
.myt-preview-wrap {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-radius: 12px;
    background: #0d0d0f;
    border: 1px solid var(--line, #2a2a2e);
    margin-bottom: 6px;
}
/* จำกัดความกว้างพรีวิวไม่ให้ล้นถาดบนมือถือ — การ์ดจริงในโพสต์กว้างกว่านี้
   แต่สัดส่วนเท่ากันเป๊ะ (ใช้ aspect-ratio) จึงวางตำแหน่งได้แม่นเหมือนกัน */
#mes-myt-preview {
    width: 100%;
    max-width: 320px;
}
#mes-myt-preview .mes-myt-container { margin: 0; }
.myt-preview-note { text-align: center; margin-top: 0; }

/* ==========================================================================
   [เพิ่มตามที่ขอ] แกน X/Y + เลือก GIF จากคลัง (แผง MYT)
   ========================================================================== */
.myt-row-main { display: flex; align-items: center; gap: 6px; }
.myt-row-main .myt-text-input { flex: 1; }
.myt-row-main .myt-gif-pick { flex: 1; text-align: center; }

.myt-gif-thumb {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
    background: #1c1c20;
}

/* แถวแกน X/Y — อยู่ใต้แถวหลักของแต่ละเลเยอร์ */
.myt-xy-row {
    display: flex;
    gap: 10px;
    margin: 4px 0 10px;
    padding-left: 2px;
    flex-wrap: wrap;
}
.myt-xy-label {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 100px;
    font-size: .74rem;
    color: var(--text-mute, #9a938d);
}
.myt-xy-label input[type="range"] {
    flex: 1;
    min-width: 50px;
    accent-color: var(--gold, #d4af37);
}
.myt-xy-val {
    min-width: 2em;
    text-align: right;
    font-weight: 700;
    color: var(--gold-soft, #f0d98a);
}

.myt-text-row, .myt-gif-row {
    display: block;
    border-bottom: 1px dashed #2a2a2e;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* ==========================================================================
   🔨 [แก้มุมโค้งแถบดำ MYT — รอบ 4: เลิกไล่หาต้นเหตุ ใช้วิธีกวาดครอบ]
   --------------------------------------------------------------------------
   ไล่ตรวจมา 3 รอบแล้วยังหากฎต้นเหตุไม่เจอ:
     รอบ 1  .mes-myt-container       — ถูกส่วนหนึ่ง ไม่ใช่ตัวการ
     รอบ 2  app.css .post-body img   — ถูกกฎ แต่แพ้ลำดับโหลด
     รอบ 3  mpc-post-cards .mpc-image-only img — ก็ยังไม่หาย
     ตรวจแล้วทุกไฟล์ (app / mpc-post-cards / legacy-compat / trust-shield /
     attribute selector ทุกแบบ) ไม่พบกฎที่ใส่สีน้ำตาล+มุมโค้งให้แถบเลย

   เลิกไล่แล้ว — ใช้วิธีที่เจ้าของเสนอ (ปะทับหน้าไปเลย) แต่ทำด้วย CSS
   แทนการเพิ่ม element จริง เพราะได้ผลเหมือนกันแต่ไม่เพิ่มความซับซ้อนของ HTML

   หลักการ: กวาดครอบ "ทุกอย่างที่อยู่ในการ์ดวิดีโอ" ให้เป็นเหลี่ยมล้วน
   ไม่ว่าต้นเหตุจะมาจากกฎไหน ไฟล์ไหน โหลดตอนไหน ก็ชนะหมด
   (ขอบเขตจำกัดอยู่แค่ในการ์ด MYT เท่านั้น ไม่กระทบส่วนอื่นของเว็บเลย)

   ไฟล์นี้โหลดท้ายสุดในบรรดา CSS หลัก (layout-head บรรทัด 57) + !important
   = ชนะแน่นอน
   ========================================================================== */
.mes-myt-container,
.mes-myt-container * {
    border-radius: 0 !important;
}

/* แถบดำบน-ล่าง ต้องเป็นสีดำล้วนเสมอ ไม่ว่าจะมีกฎไหนมาเปลี่ยนสีให้ */
.mes-myt-container .mes-myt-bar,
.mes-myt-container .mes-myt-bar-top,
.mes-myt-container .mes-myt-bar-bottom {
    background: #000 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   [เพิ่มตามที่ถาม] คำแนะนำวิธีทำสไลด์ 90 วิ (โผล่เฉพาะโหมดสตอรี่)
   ========================================================================== */
.story-slide-hint {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(56, 189, 248, .08);
    border: 1px solid rgba(56, 189, 248, .3);
    color: #7dd3fc;
    font-size: .8rem;
    line-height: 1.7;
}
.story-slide-hint b { color: #bae6fd; }
.story-slide-hint .muted { color: var(--text-mute, #9a938d); font-size: .74rem; }

/* ==========================================================================
   ⭐ [เพิ่มตามที่ขอ] แผงหยิบรูปจากอัลบั้มของเราเองมาทำสไลด์
   ========================================================================== */
.story-album-pick { margin-bottom: 10px; }
.composer-pill.full, .btn-primary.full { width: 100%; }

/* ขั้นที่ 1 — รายชื่ออัลบั้ม */
.story-album-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 8px;
    max-height: 40vh;
    overflow-y: auto;
}
.story-album-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line, #2a2a2e);
    border-radius: 10px;
    background: #1c1c20;
    color: var(--text, #ece5e0);
    font: inherit;
    cursor: pointer;
}
.story-album-card:hover { border-color: var(--gold, #d4af37); }
.story-album-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 6px;
}
.story-album-nocover { font-size: 2rem; }
.story-album-name {
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
}
.story-album-count { font-size: .68rem; color: var(--text-mute, #9a938d); }

/* ขั้นที่ 2 — ตารางรูปให้ติ๊กเลือก */
.story-album-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0;
}
.story-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 10px;
}
.story-album-cell {
    position: relative;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    aspect-ratio: 1/1;
}
.story-album-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* เครื่องหมายถูกตอนเลือกแล้ว — ต้องเห็นชัดว่ารูปไหนถูกเลือกไปแล้วบ้าง */
.story-album-tick {
    position: absolute;
    top: 4px; right: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    background: rgba(0,0,0,.4);
}
.story-album-cell.is-picked { border-color: #22c55e; }
.story-album-cell.is-picked .story-album-tick {
    background: #22c55e;
    border-color: #22c55e;
}
.story-album-cell.is-picked .story-album-tick::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

/* ==========================================================================
   ⭐⭐ [แก้ใหญ่] การ์ดโพลที่วางลงกล่องพิมพ์จริง
   --------------------------------------------------------------------------
   เดิมโพลอยู่แต่ในถาดแยก กล่องพิมพ์ว่างเปล่า ระบบจึงไม่นับเป็นเนื้อหา
   ตอนนี้เห็นการ์ดจริงในกล่องพิมพ์ เหมือนรูป/วิดีโอ/คำคม ทุกประการ
   ========================================================================== */
.mes-poll-embed {
    position: relative;
    margin: 10px 0;
    padding: 12px 14px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, .4);
    background: rgba(34, 197, 94, .07);
}
.mes-poll-embed-head {
    font-size: .76rem;
    font-weight: 700;
    color: #4ade80;
    margin-bottom: 6px;
}
.mes-poll-embed-q {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text, #ece5e0);
}
.mes-poll-embed-opt {
    padding: 7px 10px;
    margin-bottom: 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line, #2a2a2e);
    font-size: .86rem;
}
.mes-poll-embed-note {
    font-size: .72rem;
    color: var(--text-mute, #9a938d);
    margin-top: 4px;
}
/* ปุ่มเอาโพลออก — จางไว้ก่อน ชัดขึ้นเมื่อเอาเมาส์ไปโดน (เหมือนปุ่มเลิกทำของลิงก์) */
.mes-poll-embed-remove {
    position: absolute;
    top: 8px; right: 8px;
    font: inherit;
    font-size: .7rem;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s ease;
}
.mes-poll-embed:hover .mes-poll-embed-remove { opacity: 1; }

/* ==========================================================================
   ⭐⭐ เวทีโพล — พรีวิวสด (โพลทับบนรูปจริง)
   ========================================================================== */
.poll-imgrow { display: flex; gap: 8px; margin-bottom: 8px; }
.poll-imgrow .input { flex: 1; }

.poll-preview-wrap { margin: 12px 0; }
.poll-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line, #2a2a2e);
    /* [แก้ตามม็อกอัพ] รูปมีความสูงจริง โพลไม่ยืดเต็มกรอบ
       ค่าเริ่มต้น 4:5 (แนวตั้งพอดีมือถือ) — ถ้าไม่มีรูปก็ยุบตามเนื้อหา */
    /* aspect-ratio / background-size / position ตั้งจาก JS ตามที่ผู้ใช้เลือก */
    background-repeat: no-repeat;
    padding: 0;
}
.poll-preview:not(.has-poll-image) {
    aspect-ratio: auto;
    background: #14100f;
}
/* โดมมืด — ความทึบมาจาก --dome ที่ JS ตั้งตามแถบเลื่อน (50-75%) */
.poll-preview.has-poll-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--dome, .6));
}
/* ⭐ กล่องโพล — เป็นแผงกะทัดรัดวางทับรูป ไม่ใช่ยืดเต็มกรอบ (ตามม็อกอัพ) */
/* ⭐ แผงโพลในพรีวิว — ใช้สูตรตำแหน่งเดียวกับผลลัพธ์จริงเป๊ะ
   (ถ้าคำนวณคนละแบบ จะเจอ "พรีวิวสวย แต่โพสต์ออกมาไม่ตรง") */
.poll-preview.has-poll-image .poll-preview-inner {
    position: absolute;
    left: var(--px, 50%);
    top: var(--py, 12%);
    transform: translateX(-50%);
    width: calc(100% - 28px);
    z-index: 1;
    background: rgba(0, 0, 0, .58);
    border-radius: 10px;
    padding: 12px;
}
.poll-preview:not(.has-poll-image) .poll-preview-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}
.poll-preview:not(.has-poll-image) .poll-preview-inner { background: none; padding: 0; }
.poll-preview-q {
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
    font-size: .9rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.poll-preview-opt {
    padding: 7px 11px;
    margin-bottom: 5px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #ece5e0;
    font-size: .8rem;
}

/* รูปที่สกัดได้ — เลือกเอง */
.poll-img-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
    max-height: 34vh;
    overflow-y: auto;
    margin: 8px 0;
}
.poll-img-cell {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #1c1c20;
    cursor: pointer;
    aspect-ratio: 1/1;
}
.poll-img-cell:hover { border-color: var(--gold, #d4af37); }
.poll-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* การ์ดโพลในกล่องพิมพ์ — โชว์รูปพื้นหลังด้วย ให้ตรงกับผลลัพธ์จริง */
.mes-poll-embed.has-poll-image {
    background-size: cover;
    background-position: center;
    border-color: rgba(255, 255, 255, .25);
}
.mes-poll-embed.has-poll-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--dome, .6));
    border-radius: 12px;
}
.mes-poll-embed.has-poll-image > * { position: relative; z-index: 1; }
.mes-poll-embed.has-poll-image .mes-poll-embed-q { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.mes-poll-embed.has-poll-image .mes-poll-embed-opt { background: rgba(0,0,0,.45); }

/* ⭐ [เพิ่ม] พรีวิวต้องมีครบเหมือนของจริง — ปุ่มลงคะแนน + คำเตือน
   ถ้าพรีวิวสูงไม่เท่าของจริง ตำแหน่งกล่องที่คิดเป็น % จะคลาดเคลื่อนตามไปด้วย
   สไตล์ตรงกับ .post-poll-submit / .post-poll-note ของจริง */
.poll-preview-submit {
    display: inline-block;
    margin: 8px auto 0;
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .45);
    color: #ece5e0;
    font-size: .8rem;
    pointer-events: none;   /* เป็นภาพจำลอง กดไม่ได้ */
}
.poll-preview-note {
    margin-top: 8px;
    font-size: .7rem;
    color: rgba(236, 229, 224, .75);
    line-height: 1.5;
}

/* ==========================================================================
   ⭐ [เพิ่มตามที่ขอ] เลือกฉากรูปปก MYT + โดมทึบของ Quote
   ========================================================================== */
.myt-cover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
    margin: 8px 0;
}
.myt-cover-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #1c1c20;
    color: var(--text-mute, #9a938d);
    font: inherit;
    font-size: .66rem;
    cursor: pointer;
}
.myt-cover-cell img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.myt-cover-cell span { padding: 0 4px 5px; }
.myt-cover-cell.is-picked {
    border-color: var(--gold, #d4af37);
    color: var(--gold-soft, #f0d98a);
}

/* ===========================================================================
   [ข้อ 5 — เพิ่มใหม่] แผงใหญ่ (วาร์ปสื่อ/เวทีเลนส์/GIF/โพล/MYT) เป็นป็อปอัพ
   เกือบเต็มจอ — เปิด/ปิดจับจาก attribute hidden ของเดิมอัตโนมัติ ไม่ต้อง
   เปลี่ยนโค้ด JS ที่ show()/hide() แผงเหล่านี้อยู่แล้วแม้แต่บรรทัดเดียว
   =========================================================================== */
.mes-tool-modal-target:not([hidden]) {
    position: fixed !important;
    inset: 12px;
    z-index: 9050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    background: var(--surface, #16181d);
    border: 1px solid var(--gold);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
#mes-tool-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9040;
    background: rgba(0, 0, 0, .6);
}
#mes-tool-modal-backdrop[hidden] { display: none; }

/* กล่องตั้งค่าโดมทึบ — แยกออกจากแถบปรับสีอื่นให้เห็นชัดว่าเป็นคนละชนิด */
.lens-scrim-box {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed rgba(212, 175, 55, .35);
    background: rgba(212, 175, 55, .05);
}

/* ===========================================================================
   [ข้อ 7 — เพิ่มใหม่] โมดัล Mes Studio + โมดัลสถานะกลาง (ทาโรต์มินิ/สร้างดนตรี)
   ยังไม่ต่อสายเปิดเครื่องมือจริง — เตรียมโครงไว้ก่อนตามที่สั่ง
   =========================================================================== */
.mes-modal-overlay {
    /* 🔴 จุดที่พลาดมาแล้ว 1 รอบ (ลืมแก้ #mes-placeholder-modal / ปุ่ม Beat)
       เพราะคลาสนี้ใช้ร่วมกัน 3 จุด แต่เดิมมีคนไปเขียน z-index เฉพาะจุดแยก
       ทำให้จุดที่เหลือหลุดไม่ซิงก์ — ตอนนี้แก้ตรงนี้ที่เดียว ครอบคลุมทั้ง 3 */
    position: fixed;
    inset: 0;
    z-index: var(--mes-z-composer-app, 200050);
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mes-modal-box {
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--surface, #16181d);
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 14px;
    padding: 14px;
}
.mes-modal-box-sm { max-width: 340px; }
.mes-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--gold, #e5c07b);
    margin-bottom: 12px;
}
.mes-studio-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 14px;
}
.mes-studio-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-mute, #9a938d);
    padding: 10px 4px;
    font-size: .85rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.mes-studio-tab.active {
    color: var(--gold, #e5c07b);
    border-bottom-color: var(--gold, #e5c07b);
}
.mes-studio-tab-body, .mes-modal-body {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--text-mute, #c9c3ba);
    text-align: center;
    padding: 20px 8px;
}

/* ---------------------------------------------------------------------------
   [รอบ 3 ก.ย.] โมดัล Mes Studio ตอนใส่เครื่องมือจริงแล้ว
   กล่องเดิม (max-width 420px) เล็กเกินไปมากสำหรับเครื่องมือวาดรูป
   จึงให้ตัวนี้กินเกือบเต็มจอแทน แต่ยังใช้โครง .mes-modal-overlay เดิมร่วมกัน
   --------------------------------------------------------------------------- */
/* [ปรับ 3 ก.ย. 2569 รอบที่ 3] เอา z-index ออกจากตรงนี้แล้ว — ย้ายไปรวมที่
   คลาสฐาน .mes-modal-overlay ด้านบนแทน (ผ่านตัวแปร --mes-z-composer-app)
   ที่นี่เหลือแค่ padding ที่เฉพาะกับสตูดิโอจริง ๆ */
#mes-studio-modal { padding: 0; }
.mes-modal-box-studio {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px;
}
.mes-modal-box-studio .mes-studio-tabs { flex: 0 0 auto; }
.mes-studio-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;          /* สำคัญ: ไม่ใส่ iframe จะดันกล่องจนล้นจอ */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #0d0d10;
}
.mes-studio-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.mes-studio-frame-wrap iframe[hidden] { display: none; }
.mes-studio-locked-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--text-mute, #c9c3ba);
}
.mes-studio-locked-msg[hidden] { display: none; }
.mes-studio-tab.is-locked { opacity: .55; }

/* ===========================================================================
   [เพิ่ม 10 ก.ย. 2569] 🎞️ สไลด์โชว์ — ส่วนแก้ไขรายการในกล่องพิมพ์
   โครงยืมจากวาร์ปสื่อ/สตอรี่ (composer-tray + story-album-grid) เกือบทั้งหมด
   ที่นี่มีแค่แถวรายการสไลด์ซึ่งของเดิมไม่มี
   =========================================================================== */
.ss-edit-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ss-edit-row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg-soft);
}
.ss-edit-row img { width: 40px; height: 50px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
.ss-edit-no { font-size: .72rem; color: var(--text-mute, #9a938d); min-width: 16px; }
.ss-edit-dur {
    width: 52px; padding: 4px; text-align: center; font-size: .75rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
    color: var(--text); flex: 0 0 auto;
}
.ss-edit-row .composer-pill { padding: 3px 7px; font-size: .7rem; }

/* ===========================================================================
   [เพิ่ม 12 ก.ย. 2569] ไทม์ไลน์สไลด์โชว์ + เครื่องมือเก็บรูป
   =========================================================================== */

/* ── ไทม์ไลน์: คลิปกว้างตามเวลาจริง ลากขอบขวาปรับได้ ── */
.ss-tl {
    display: flex; gap: 4px; overflow-x: auto; padding: 8px 4px 10px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.ss-clip {
    position: relative; flex: 0 0 auto; height: 66px; border-radius: 6px;
    overflow: hidden; background: #000; border: 2px solid transparent;
    cursor: pointer; touch-action: pan-x;   /* ให้เลื่อนไทม์ไลน์ได้ แต่ลากขอบไม่หลุด */
}
.ss-clip.is-sel { border-color: var(--gold); }
.ss-clip img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ss-clip-no {
    position: absolute; top: 2px; left: 3px; background: rgba(0,0,0,.68);
    color: #fff; font-size: 10px; padding: 0 5px; border-radius: 999px;
}
.ss-clip-sec {
    position: absolute; bottom: 2px; left: 3px; background: rgba(0,0,0,.68);
    color: #fff; font-size: 10px; padding: 0 5px; border-radius: 999px;
}
/* แถบลากขอบขวา — กว้างพอให้นิ้วจับติดบนมือถือ */
.ss-clip-grip {
    position: absolute; top: 0; right: 0; width: 14px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.85));
    cursor: ew-resize; touch-action: none;
}
.ss-clip-grip::after {
    content: ''; position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 2px; height: 18px; background: #fff; border-radius: 2px;
}
.ss-clip-tools {
    display: flex; align-items: center; gap: 5px; margin-top: 7px; flex-wrap: wrap;
}
.ss-clip-tools .composer-pill { padding: 4px 9px; font-size: .72rem; }

/* ── เครื่องมือเก็บรูป: กรอบเลื่อนรับได้หลายสิบรูป ── */
.pb-grid {
    max-height: max(260px, calc(100vh - 340px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* [เพิ่ม 13 ก.ย. 2569] ผังใหม่สไลด์โชว์ — นำเข้าย่อได้ · ขอบเขตเอฟเฟกต์ · ปุ่ม + ในไทม์ไลน์ */
.ss-import {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 9px; background: var(--bg-soft);
}
.ss-import > summary {
    cursor: pointer; font-size: .8rem; color: var(--text-mute, #9a938d);
    list-style: none;
}
.ss-import > summary::-webkit-details-marker { display: none; }
.ss-import[open] > summary { color: var(--gold); margin-bottom: 2px; }

.ss-scope {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 8px; padding: 7px 9px;
    border: 1px solid rgba(212,175,55,.35); border-radius: 8px;
    background: var(--bg-soft);
}
.ss-scope-t { font-size: .78rem; color: var(--gold); white-space: nowrap; }
.ss-scope .seg { display: flex; gap: 4px; }
.ss-scope .seg button {
    padding: 4px 10px; font-size: .74rem; border-radius: 999px;
    border: 1px solid var(--line); background: transparent;
    color: var(--text); cursor: pointer;
}
.ss-scope .seg button.active {
    background: var(--gold); border-color: transparent; color: #111; font-weight: 600;
}

/* ปุ่ม ＋ ท้ายไทม์ไลน์ */
.ss-clip-add {
    flex: 0 0 auto; width: 42px; height: 66px; border-radius: 6px;
    border: 1.5px dashed var(--line); background: var(--bg-soft);
    color: var(--gold); font-size: 20px; cursor: pointer;
}

/* ===========================================================================
   [แก้ 13 ก.ย. 2569 — ข้อ 1.2] กล่องพิมพ์ถูกแถบเมนูบังตอนเลื่อนไปหา
   ---------------------------------------------------------------------------
   แถบบนสุดเป็น position: sticky สูง --shell-topbar-h ลอยค้างอยู่เสมอ
   แต่ไม่เคยมี scroll-margin-top ที่ไหนเลย → เวลา scrollIntoView() เลื่อนไปหา
   กล่องพิมพ์ เบราว์เซอร์จอดให้ "ขอบบนของกล่อง = ขอบบนจอ" พอดี
   ซึ่งตรงนั้นมีแถบเมนูลอยทับอยู่ → กล่องโดนบังครึ่งบนทุกครั้ง

   scroll-margin-top บอกเบราว์เซอร์ให้เผื่อที่ไว้ด้านบนตอนเลื่อนมาหา
   (ไม่ใช่ margin จริง ไม่ดันเลย์เอาต์ มีผลเฉพาะตอนเลื่อน)
   บวก gap อีกนิดให้ไม่ชิดแถบจนอึดอัด
   =========================================================================== */
.composer-trigger-row,
.composer-article-host,
#mes-composer,
.composer-tray,
.mes-slideshow-embed {
    scroll-margin-top: calc(var(--shell-topbar-h, 56px) + var(--shell-gap, 8px) + 8px);
}

/* [เพิ่ม 14 ก.ย. 2569] ขั้นยืนยันรูป+สัดส่วน และปุ่มแต่งรูปทั้งชุด */
.ratio-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.ratio-grid button.active {
    background: var(--gold); border-color: transparent; color: #111; font-weight: 600;
}
#mes-ss-edit-all { border-color: var(--gold); color: var(--gold); font-weight: 600; }

/* ===== [17 ก.ย. 2569 — ซิป 110 · เลน anim] 💫 อนิเมชัน Lottie: ถาดในกล่องพิมพ์ + ก้อนในโพสต์ (ธีมมืด-ทองเดิม สีปุ่ม amber ตามม็อคอัพ) ===== */
.composer-pill.on { background: rgba(251, 191, 36, .15); }
.anim-tray { border: 1px solid #fbbf24; border-radius: 12px; background: #161112; margin: 8px 0 12px; overflow: hidden; }
.anim-tray[hidden] { display: none; }
.anim-tray-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #3a2f2a; font-size: 14px; color: #fbbf24; font-weight: 700; }
.anim-tray-head button { margin-left: auto; background: none; border: 0; color: #a1938c; font-size: 19px; cursor: pointer; }
.anim-tray-body { padding: 9px 10px 11px; }
.anim-q { width: 100%; background: #1c1c20; border: 1px solid #3a2f2a; color: #ece5e0; border-radius: 9px; padding: 9px 11px; font-size: 14px; margin-bottom: 8px; outline: none; }
.anim-q:focus { border-color: #fbbf24; }
.anim-seg { display: flex; gap: 6px; margin-bottom: 8px; }
.anim-seg button { flex: 1; background: #1c1c20; border: 1px solid #3a2f2a; color: #a1938c; border-radius: 8px; padding: 6px 4px; font-size: 12.5px; cursor: pointer; }
.anim-seg button.on { background: #fbbf24; color: #1a1405; border-color: #fbbf24; font-weight: 700; }
.anim-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 7px; }
.anim-tab { flex: 0 0 auto; background: #1c1c20; border: 1px solid #3a2f2a; color: #a1938c; border-radius: 999px; padding: 5px 13px; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.anim-tab.on { background: #fbbf24; color: #1a1405; border-color: #fbbf24; font-weight: 700; }
.anim-cnt { font-size: 11px; color: #6f6360; margin-top: 6px; }
.anim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; max-height: 300px; overflow-y: auto; }
.anim-cell { background: #1c1c20; border: 1px solid #3a2f2a; border-radius: 10px; padding: 6px 4px; text-align: center; cursor: pointer; }
.anim-cell:hover, .anim-cell:focus { border-color: #fbbf24; outline: none; }
.anim-cell-a { width: 52px; height: 52px; margin: 0 auto; position: relative; }
.anim-cell-n { font-size: 11px; color: #a1938c; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-empty { grid-column: 1 / -1; color: #6f6360; font-size: 13px; text-align: center; padding: 18px; }
.anim-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid #3a2f2a; }
.anim-edit[hidden] { display: none; }
.anim-k { font-size: 12px; color: #a1938c; margin-right: 2px; }
.anim-mini { background: #1c1c20; border: 1px solid #3a2f2a; color: #a1938c; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.anim-mini.on { background: #fbbf24; color: #1a1405; border-color: #fbbf24; }
.anim-del { margin-left: auto; color: #e0434d; }
.anim-sws { display: inline-flex; gap: 5px; }
.anim-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.anim-sw.on { border-color: #fff; }
.anim-warn { margin: 0 10px 10px; padding: 8px 10px; border-radius: 9px; background: rgba(251, 146, 60, .15); border: 1px solid #fb923c; color: #fdba74; font-size: 12.5px; }
.anim-warn[hidden] { display: none; }
/* ก้อนในกล่องพิมพ์และในโพสต์ — position:relative จำเป็น (ป้ายคำซ้อนอยู่ข้างใน; บั๊กที่เลนเคยเจอ) */
span.mes-anim { display: inline-block; vertical-align: middle; position: relative; width: 86px; height: 86px; margin: 0 2px; }
span.mes-anim svg { width: 100% !important; height: 100% !important; }
span.mes-anim.is-sel { outline: 2px solid #fbbf24; border-radius: 8px; }
span.mes-anim.is-missing::after { content: "💫"; position: absolute; inset: 0; display: grid; place-items: center; color: #6f6360; }
.mes-anim-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-weight: 800; color: #1a1405; font-size: .9em; pointer-events: none; animation: mes-anim-float 1.8s ease-in-out infinite; }
@keyframes mes-anim-float { 0%, 100% { transform: translateY(-50%); opacity: 1; } 50% { transform: translateY(calc(-50% - 4px)); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mes-anim-label { animation: none; } }

/* =============================================================================
 * 🎬 ฉาก 3 มิติเล่นได้แนบโพสต์ — [16 ต.ค. 2569 · schema/238 · MES Studio เว็บขั้น 7 รอบ ①]
 * (1) .mes-scene3d-chip = ชิปใต้กล่องพิมพ์ (composer.js วาด) · (2) .post-scene3d = การ์ดในโพสต์
 * (app/partials/post-card.php) — สโคปด้วยคลาสเฉพาะทั้งหมด ไม่กวาดกว้าง
 * =========================================================================== */
.mes-scene3d-chip { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px; background: var(--surface-2, #221a1a); border: 1px solid var(--gold-dim, #8a7128); border-radius: var(--radius-sm, 9px); }
.mes-scene3d-chip[hidden] { display: none; }
.mes-scene3d-chip .s3dc-cover { width: 84px; height: 48px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; background: #0f1418; }
.mes-scene3d-chip .s3dc-cover-empty { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.mes-scene3d-chip .s3dc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mes-scene3d-chip .s3dc-label { font-size: .78rem; font-weight: 700; color: var(--gold-soft, #f0d98a); }
.mes-scene3d-chip .s3dc-title { width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; padding: 6px 8px; background: var(--bg-soft, #141010); color: var(--text, #ece5e0); border: 1px solid var(--line, #2e2323); border-radius: 7px; }
.mes-scene3d-chip .s3dc-meta { font-size: .72rem; color: var(--text-mute, #6f6360); }
.mes-scene3d-chip .s3dc-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line, #2e2323); background: transparent; color: var(--text-dim, #a1938c); font: inherit; cursor: pointer; }

.post-scene3d { position: relative; margin: .5rem 0 .25rem; border: 1px solid var(--line, #2e2323); border-radius: var(--radius-sm, 9px); overflow: hidden; background: #0f1418; aspect-ratio: 16 / 9; }
.post-scene3d .ps3-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.post-scene3d .ps3-cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: radial-gradient(ellipse at 50% 70%, #2b3e2a 0%, #16232e 55%, #0b0f14 100%); }
.post-scene3d .ps3-badge { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0,0,0,.58); color: var(--gold-soft, #f0d98a); font-size: .72rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--gold-dim, #8a7128); }
.post-scene3d .ps3-len { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.58); color: var(--text, #ece5e0); font-size: .72rem; padding: 2px 7px; border-radius: 999px; }
.post-scene3d .ps3-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; border: 0; background: rgba(212,175,55,.92); color: #1a1200; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.5); }
.post-scene3d .ps3-play:hover { background: var(--gold-soft, #f0d98a); }
.post-scene3d .ps3-play[disabled] { opacity: .55; cursor: default; }
.post-scene3d-foot { font-size: .76rem; color: var(--text-mute, #6f6360); margin: 0 0 .4rem; }
.post-scene3d { cursor: pointer; }
.post-scene3d .ps3-remix-count { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.58); color: var(--gold-soft, #f0d98a); font-size: .72rem; padding: 2px 7px; border-radius: 999px; }
.post-scene3d-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.post-scene3d-foot .ps3-credit a { color: var(--gold-soft, #f0d98a); }
.post-scene3d-foot .ps3-remix-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mes-scene3d-chip .s3dc-opt { font-size: .74rem; color: var(--text-dim, #a1938c); display: flex; align-items: center; gap: 5px; }
.mes-scene3d-chip .s3dc-remix { color: var(--gold-soft, #f0d98a); }

/* 🎬 เครื่องเล่นลอย (assets/js/scene3d-player.js) */
.scene3d-player { position: fixed; inset: 0; z-index: 2147482000; background: #000; display: flex; flex-direction: column; color: var(--text, #ece5e0); }
.scene3d-player[hidden] { display: none; }
body.scene3d-player-open { overflow: hidden; }
.scene3d-player .s3dp-head, .scene3d-player .s3dp-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0b0b0e; font-size: .85rem; flex: 0 0 auto; }
.scene3d-player .s3dp-head { border-bottom: 1px solid #222; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.scene3d-player .s3dp-foot { border-top: 1px solid #222; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.scene3d-player .s3dp-head b { color: var(--gold-soft, #f0d98a); white-space: nowrap; }
.scene3d-player .s3dp-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene3d-player .s3dp-close, .scene3d-player .s3dp-full { background: transparent; border: 1px solid #444; color: #ddd; border-radius: 999px; min-width: 36px; height: 36px; font: inherit; cursor: pointer; }
.scene3d-player .s3dp-close { margin-left: auto; }
.scene3d-player .s3dp-stage { position: relative; flex: 1 1 auto; min-height: 0; background: #000; }
.scene3d-player .s3dp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.scene3d-player .s3dp-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gold-soft, #f0d98a); background: rgba(0,0,0,.65); font-size: .9rem; padding: 16px; text-align: center; }
.scene3d-player .s3dp-loading[hidden] { display: none; }
.scene3d-player .s3dp-meta { flex: 1; color: var(--text-mute, #6f6360); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene3d-player .s3dp-remix { background: #2a2217; color: var(--gold-soft, #f0d98a); border: 1px solid var(--gold-dim, #8a7128); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .8rem; cursor: pointer; }
.scene3d-player .s3dp-remix[hidden] { display: none; }
/* 🔁 [17 ต.ค. 2569 · มติ "ก แบบติ๊กต๊อก"] ดัดแปลงได้เฉพาะโพสต์สาธารณะ/สมาชิก — สวิตช์ล็อก · เหตุผล · ป้ายทีมงานบนเครดิต */
.post-scene3d-foot .ps3-remix-locked { opacity: .5; cursor: not-allowed; }
.post-scene3d-foot .ps3-remix-why, .mes-scene3d-chip .s3dc-remix-why { color: var(--warn, #d98a1f); }
.post-scene3d-foot .ps3-staff-tag { font-size: .68rem; color: #7fc0e8; border: 1px solid #1f4a63; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.scene3d-player .s3dp-remix-why { font-size: .78rem; color: var(--text-mute, #6f6360); }

/* 🧱 [19 ต.ค. 2569 · แม่บท 5-2] กล่องสื่อในกล่องพิมพ์เป็นก้อนเดียว — Backspace ครั้งแรกเลือก (ขอบทอง) ครั้งที่สองลบ */
.magic-docs-tiptap-container [data-mes-atom="1"].mes-atom-armed { outline: 3px solid var(--gold, #d4af37); outline-offset: 2px; }

/* ⑤⑥ [19 ต.ค. 2569] แถบเหนือกล่องพิมพ์บทความ: สวิตช์ตรวจคำสะกด + ตัวนับคำ (ติดขอบบนตอนเลื่อน) */
.mae-typebar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; background: var(--bg, #0c0a0a); }
.mae-spell-sw { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--text-dim, #a1938c); font: inherit; cursor: pointer; padding: 2px 0; }
.mae-spell-sw i { width: 34px; height: 18px; border-radius: 999px; background: var(--line, #2e2323); position: relative; display: inline-block; }
.mae-spell-sw i::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim, #a1938c); top: 2px; left: 2px; }
.mae-spell-sw[aria-checked="true"] i { background: var(--gold-dim, #8a7128); }
.mae-spell-sw[aria-checked="true"] i::after { left: 18px; background: var(--gold, #d4af37); }
.mae-wcount { background: var(--surface-2, #221a1a); border: 1px solid var(--line, #2e2323); border-radius: 999px; padding: 2px 10px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.mae-wcount.is-met { border-color: var(--ok, #2f9e5c); color: #7fd6a2; }
.mae-wcount.is-over { border-color: var(--warn, #d98a1f); color: #f0b35c; }

/* 📍 [23 ต.ค. 2569 · ชุด 1 ข้อ 1.7] เช็คอินจากกล่องโพสต์ — แผ่นเลือกเพจ + ชิป */
.composer-grid-btn.is-on { background: rgba(212,175,55,.14); }
.cci-sheet { margin: 8px 0 0; border: 1px solid var(--gold-dim, #8a7128); border-radius: 12px; background: var(--bg-soft, #141010); padding: 10px; }
.cci-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cci-close { background: none; border: 0; color: var(--text-dim, #a1938c); font-size: 1rem; cursor: pointer; padding: 2px 6px; }
.cci-q { width: 100%; box-sizing: border-box; background: var(--bg, #0c0a0a); border: 1px solid var(--line, #2e2323); border-radius: 10px; padding: 8px 10px; color: var(--text, #ece5e0); font: inherit; }
.cci-sec-t { font-size: .8rem; color: var(--gold, #d4af37); margin: 10px 0 2px; }
.cci-list { display: flex; flex-direction: column; }
.cci-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line, #2e2323); padding: 8px 4px; color: inherit; font: inherit; cursor: pointer; }
.cci-row:last-child { border-bottom: 0; }
.cci-row:hover, .cci-row:focus-visible { background: rgba(212,175,55,.08); }
.cci-ic { font-size: 1.2rem; width: 1.6rem; text-align: center; }
.cci-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cci-main small { color: var(--text-dim, #a1938c); }
.cci-today { color: var(--gold-soft, #f0d98a); }
.cci-go { color: var(--text-dim, #a1938c); font-size: .85rem; white-space: nowrap; }
.cci-empty { color: var(--text-dim, #a1938c); font-size: .85rem; padding: 6px 4px; }
.cci-note { font-size: .78rem; margin: 8px 0 0; }
.cci-chip { display: inline-flex; align-items: center; gap: 6px; background: #2a1f12; border: 1px solid var(--gold-dim, #8a7128); color: var(--gold-soft, #f0d98a); border-radius: 999px; padding: 3px 10px; font-size: .88rem; }
.cci-chip-x { background: none; border: 0; color: var(--text-dim, #a1938c); cursor: pointer; font-size: .9rem; padding: 0 2px; }
.composer-pill.is-on { background: rgba(212,175,55,.18); border-color: var(--gold, #d4af37); }
/* ⚡ [23 ต.ค. 2569] ป้ายขนาด/พร้อมเล่น บนการ์ดฉาก 3 มิติ */
.post-scene3d .ps3-size { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #e8e0d6; font-size: .72rem; border-radius: 999px; padding: 2px 8px; pointer-events: none; }
.post-scene3d .ps3-size.is-ready { background: rgba(46,125,50,.75); color: #e6ffe8; }

/* 🎞️ [27 ต.ค. 2569 · ชุด B · กันหน้ากระโดด] ตัวนับคำบนจอแคบ: ข้อความยาวขึ้นหลังสคริปต์อ่านเกณฑ์คำ ("0 / 300–3,000 คำ · …")
   → เดิมดันแถบจาก 1 เป็น 2 แถวหลังวาดหน้าแล้ว · จอแคบให้อยู่แถวของตัวเองตั้งแต่เฟรมแรก (ความสูงคงที่) */
@media (max-width: 600px) {
  .mae-typebar .mae-wcount { flex-basis: 100%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}