/* ==========================================
       CHAT (chat.html) — แชท 1:1 แบบเทเลแกรม: ลื่น ส่งทันที (ขึ้นก่อนเซิร์ฟเวอร์ตอบ) โพลข้อความใหม่ระหว่างเปิดห้อง
       ข้อความ/ลิงก์ (มีตัวอย่างเว็บแบบไอจี) · รูป/ไฟล์ ≤ 8MB (ลบทิ้งเมื่อครบ 3 วัน) · จุดสถานะ + อ่านแล้ว
    ========================================== */
    #chat-screen {
        --ch-bg: #000; --ch-me: #fff; --ch-me-txt: #000; --ch-them: #1d1d1f; --ch-them-txt: #fff;
        --ch-ext: 0px; --ch-under: 0px;   /* มือถือ: ส่วนที่ยื่นขึ้นใต้แถบสถานะ/Dynamic Island และลงใต้แถบล่างของ Safari (ตั้งจาก JS: fit) */
        display: none; position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 1000030;
        background: var(--ch-bg); color: #fff; flex-direction: column;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
    }
    /* 🐞 เปิดแชทแล้วพิมพ์ เห็นหน้าเว็บข้างหลังทะลุ (คีย์บอร์ดดันหน้าเลื่อน) → ซ่อนเนื้อหาข้างหลัง + พื้นดำทั้งหน้า (ใต้แถบ Safari ด้วย) */
    html.hq-chat-open:not(.hq-chat-float), html.hq-chat-open:not(.hq-chat-float) body { background: #000 !important; }
    html.hq-chat-open:not(.hq-chat-float) #app-container, html.hq-chat-open:not(.hq-chat-float) #bottom-nav-container, html.hq-chat-open:not(.hq-chat-float):not(.hq-chat-peek) #peek-modal,
    html.hq-chat-open:not(.hq-chat-float) #top-search-bar { visibility: hidden !important; }
    /* 💻 คอมจอแนวนอนใหญ่: หน้าต่างแชทลอยมุมขวาล่างแบบ Messenger (หน้าเว็บข้างหลังใช้งานต่อได้) */
    html.hq-chat-float #chat-screen { left: auto; top: auto; right: 24px; bottom: 16px; width: 380px; height: min(620px, calc(100vh - 32px)) !important;
        border-radius: 20px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.14); }
    html.hq-chat-float #chat-screen.open { animation: chFloatIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1); transform-origin: 100% 100%; }
    html.hq-chat-float #chat-screen.closing { animation: chFloatOut 0.18s ease forwards; transform-origin: 100% 100%; }
    @keyframes chFloatIn { from { opacity: 0; transform: translateY(20px) scale(0.94); } to { opacity: 1; transform: none; } }
    @keyframes chFloatOut { to { opacity: 0; transform: translateY(14px) scale(0.96); } }
    html.hq-chat-float .ch-head { padding-top: 10px; }
    html.hq-chat-float .ch-scroll { padding-top: 70px; }
    html.hq-chat-float #chat-screen:has(#ch-pinbar:not([hidden])) .ch-scroll { padding-top: 116px; }
    html.hq-chat-float .ch-pinbar { top: 64px; }
    html.hq-chat-float .ch-bar { padding-bottom: 10px; }
    .ch-head .ch-x-ic { display: none; }
    html.hq-chat-float .ch-head .ch-back-ic { display: none; }
    html.hq-chat-float .ch-head .ch-x-ic { display: block; margin: 0; }
    /* 📱 มือถือ (หน้าเว็บเลื่อนทั้งหน้า): แชทเป็นส่วนหนึ่งของหน้าเว็บ (absolute) ไม่ใช่ชั้น fixed — Safari 26 ตัดชั้น fixed ไว้แค่ระหว่างแถบ
       ข้อความเลยไม่ลอดใต้ Dynamic Island/แถบล่าง (ดู [[project_hqux_safari26_fullscreen]]) · ตำแหน่ง/ความสูงตามพื้นที่ที่มองเห็นจริง (คีย์บอร์ด) */
    html.hq-chat-doc #chat-screen { position: absolute; bottom: auto; }
    /* ⌨️ ระหว่างพิมพ์ (คีย์บอร์ดขึ้น) กลับเป็นชั้น fixed เท่าพื้นที่ที่มองเห็น — แบบ absolute iPhone เลื่อนหน้าเว็บเองซ้ำกับที่เราเลื่อน
       หน้าแชทเลยไปอยู่ครึ่งล่างแล้วดิ้นไม่จบ (บันทึกจอ 12-16-09) */
    html.hq-chat-doc #chat-screen.kbfix { position: fixed; }
    html.hq-chat-open.hq-chat-doc { overflow: hidden !important; }
    /* 🐞 สีธีมโปรไฟล์โผล่ที่แถบบน/ล่างของ Safari ตอนเปิดแชท (IMG_3863): visibility:hidden ยังนับเป็นชั้นที่ Safari เอาสีไปถมแถบ
       → ซ่อนหน้าเดิมด้วย display:none (จำตำแหน่งเลื่อนไว้ คืนตอนปิด) */
    html.hq-chat-doc #app-container, html.hq-chat-doc #bottom-nav-container, html.hq-chat-doc #top-search-bar,
    html.hq-chat-doc:not(.hq-chat-peek) #peek-modal, html.hq-chat-doc #login-prompt-capsule { display: none !important; }
    #chat-screen.open { display: flex; animation: chIn 0.26s cubic-bezier(0.2, 0.9, 0.3, 1); }
    @keyframes chIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
    #chat-screen.closing { animation: chOut 0.2s ease forwards; }
    @keyframes chOut { to { opacity: 0; transform: translateX(28px); } }

    /* ส่วนบน: ไม่มีแถบทึบ — ปุ่มย้อนกลับ + แคปซูลโปรไฟล์ใสเบลอแบบปุ่มย้อนกลับ ลอยอยู่ ข้อความเลื่อนลอดใต้ได้ */
    .ch-head {
        position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; z-index: 3;
        padding: calc(var(--ch-ext) + env(safe-area-inset-top) + 10px) 14px 10px; pointer-events: none;
        background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0));
    }
    .ch-head > * { pointer-events: auto; }
    .ch-who { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer;
        padding: 4px 16px 4px 4px; border-radius: 26px;
        background: rgba(20,20,22,0.42); border: 0.5px solid rgba(255,255,255,0.16);
        backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
        box-shadow: 0 4px 16px rgba(0,0,0,0.22); }
    .ch-who > div:last-child { min-width: 0; }
    .ch-av { position: relative; width: 40px; height: 40px; flex: none; }
    .ch-av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #222; display: block; }
    .ch-pring { position: absolute; right: -2px; bottom: -2px; padding: 2.5px; border-radius: 50%; background: #0b0b0b; display: flex; }
    .ch-pring .hq-pdot { border: none !important; width: 11px; height: 11px; display: block; }
    .ch-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
    .ch-name .hq-badges { margin: 0; }
    .ch-status { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-status.on, .ch-status.stream { color: rgba(255,255,255,0.5); }

    .ch-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding: calc(var(--ch-ext) + env(safe-area-inset-top) + 74px) 10px 6px; display: flex; flex-direction: column; }
    #chat-screen:has(#ch-pinbar:not([hidden])) .ch-scroll { padding-top: calc(var(--ch-ext) + env(safe-area-inset-top) + 120px); }
    .ch-list { margin-top: auto; display: flex; flex-direction: column; }
    .ch-list:has(> .ch-empty) { flex: 1; justify-content: center; }   /* ห้องว่าง: ข้อความอยู่กลางจอ */
    .ch-more { text-align: center; padding: 6px 0 12px; font-size: 12px; color: rgba(255,255,255,0.35); min-height: 18px; }
    .ch-day { align-self: center; margin: 14px 0 10px; padding: 4px 11px; border-radius: 12px; font-size: 12px; font-weight: 600;
        color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
    .ch-row { display: flex; margin-top: 2px; max-width: 100%; position: relative; }
    .ch-col { display: flex; flex-direction: column; max-width: min(78%, 520px); min-width: 0; }
    .ch-col { align-items: flex-start; }   /* ฟองกว้างตามข้อความของตัวเอง (ไม่ยืดตามฟองข้อความที่ตอบกลับ) */
    .ch-row.me .ch-col { align-items: flex-end; }
    .ch-col > .ch-b { max-width: 100%; }
    /* ⏱ เวลาแต่ละข้อความ: ซ่อนอยู่ขอบขวา ลากรายการไปทางซ้ายเพื่อดู (แบบไอจี) */
    .ch-list { transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; }
    .ch-list.dragging { transition: none; }
    .ch-tm { position: absolute; right: -72px; top: 50%; transform: translateY(-50%); width: 56px; text-align: left;
        font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
    .ch-list.reveal .ch-tm { opacity: 1; }   /* เห็นเฉพาะตอนลากไปทางซ้าย (เดิมโผล่ขอบจอให้เห็นเป็นเส้นขาว ๆ) */
    /* ↩️ ข้อความที่ตอบกลับ — ฟองเล็กจาง ๆ เหนือข้อความ */
    .ch-q { max-width: 100%; margin: 6px 0 -6px; padding: 7px 12px 13px; border-radius: 16px; font-size: 13px; line-height: 1.3;
        background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .ch-q small { display: block; font-size: 11px; opacity: 0.75; margin-bottom: 2px; }
    .ch-row.flash .ch-b { animation: chFlash 1.1s ease; }
    @keyframes chFlash { 0%, 100% { filter: none; } 25%, 60% { filter: brightness(1.6); } }
    /* สถานะใต้ข้อความล่าสุดของเรา: กำลังส่ง… / ส่งแล้ว / อ่านแล้ว */
    .ch-seen.sending { color: rgba(255,255,255,0.4); }
    /* 📌 แถบข้อความที่ปักหมุด (ใต้หัวแชท) */
    .ch-pinbar { position: absolute; left: 12px; right: 12px; top: calc(var(--ch-ext) + env(safe-area-inset-top) + 68px); display: flex; align-items: center; gap: 10px;
        padding: 9px 14px; cursor: pointer; z-index: 3; border-radius: 18px; font-size: 13.5px;
        background: rgba(20,20,22,0.42); border: 0.5px solid rgba(255,255,255,0.16);
        backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
    .ch-pinbar[hidden] { display: none; }
    .ch-pinbar i { font-size: 17px; opacity: 0.8; flex: none; }
    .ch-pinbar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,0.85); }
    .ch-pinbar small { opacity: 0.5; flex: none; }
    /* ↩️ แถบ "กำลังตอบกลับ" เหนือช่องพิมพ์ */
    .ch-replybar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px;
        background: rgba(20,20,22,0.9); border-top: 0.5px solid rgba(255,255,255,0.08); animation: chFade 0.15s; }
    .ch-replybar[hidden] { display: none; }
    .ch-replybar div { flex: 1; min-width: 0; }
    .ch-replybar b { display: block; font-size: 12.5px; }
    .ch-replybar span { display: block; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-replybar button { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
    .ch-row.me { justify-content: flex-end; }
    .ch-row.gap { margin-top: 10px; }
    .ch-b {
        max-width: min(78%, 520px); padding: 8px 12px 7px; border-radius: 20px; font-size: 15.5px; line-height: 1.38;
        word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; position: relative;
        background: var(--ch-them); color: var(--ch-them-txt); transition: opacity 0.35s ease;
    }
    @keyframes chPop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
    .ch-row.me .ch-b { background: var(--ch-me); color: var(--ch-me-txt); }
    .ch-row:not(.me).first .ch-b { border-top-left-radius: 20px; }
    .ch-row:not(.me):not(.last) .ch-b { border-bottom-left-radius: 6px; }
    .ch-row:not(.me):not(.first) .ch-b { border-top-left-radius: 6px; }
    .ch-row.me:not(.last) .ch-b { border-bottom-right-radius: 6px; }
    .ch-row.me:not(.first) .ch-b { border-top-right-radius: 6px; }
    .ch-b a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .ch-row.new .ch-col { animation: chPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
    /* ⌨️ อีกฝ่ายกำลังพิมพ์ */
    .ch-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; border-radius: 20px; background: var(--ch-them); margin-top: 8px; align-self: flex-start; animation: chPop 0.22s ease; }
    .ch-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); animation: chDot 1.2s infinite ease-in-out; }
    .ch-typing i:nth-child(2) { animation-delay: 0.15s; } .ch-typing i:nth-child(3) { animation-delay: 0.3s; }
    @keyframes chDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
    .ch-row.failed .ch-b { box-shadow: inset 0 0 0 1.5px #ff453a; }
    .ch-b.media { padding: 4px; background: transparent !important; }
    .ch-b.media img { display: block; max-width: 100%; width: 260px; border-radius: 17px; background: #1d1d1f; object-fit: cover; cursor: zoom-in; }
    .ch-b.media .ch-cap { padding: 6px 8px 2px; color: #fff; }
    .ch-file { display: flex; align-items: center; gap: 10px; min-width: 200px; text-decoration: none !important; color: inherit; }
    .ch-file-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex: none;
        background: rgba(127,127,127,0.18); }
    .ch-file b { display: block; font-size: 14px; font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-file span { font-size: 12px; opacity: 0.55; }
    .ch-file.expired { opacity: 0.5; }
    .ch-link { display: block; margin: 7px -4px -1px; border-radius: 14px; overflow: hidden; text-decoration: none !important; color: inherit;
        background: rgba(127,127,127,0.14); }
    .ch-link img { display: block; width: 100%; max-height: 180px; object-fit: cover; background: rgba(127,127,127,0.2); }
    .ch-link div { padding: 8px 10px 9px; }
    .ch-link small { display: block; font-size: 11.5px; opacity: 0.55; margin-bottom: 2px; }
    .ch-link b { display: block; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ch-link p { margin: 3px 0 0; font-size: 12.5px; opacity: 0.65; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
    .ch-seen { align-self: flex-end; font-size: 11.5px; color: rgba(255,255,255,0.4); margin: 4px 6px 0; }
    .ch-empty { margin: auto; text-align: center; color: rgba(255,255,255,0.45); font-size: 14px; padding: 40px 20px; }
    .ch-empty img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 12px; }
    .ch-empty b { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }

    .ch-bar { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(env(safe-area-inset-bottom) + var(--ch-under) + 8px);
        background: rgba(0,0,0,0.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-top: 0.5px solid rgba(255,255,255,0.06); }
    #chat-screen.kb .ch-bar { padding-bottom: 8px; }
    .ch-ibtn { width: 40px; height: 40px; border-radius: 50%; border: none; flex: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.1); color: #fff; font-size: 22px; transition: transform 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; }
    .ch-ibtn:active { transform: scale(0.88); }
    .ch-send { background: #fff; color: #000; }
    .ch-send:disabled { opacity: 0; transform: scale(0.6); pointer-events: none; width: 0; margin-left: -8px; }
    .ch-send { transition: transform 0.18s, opacity 0.18s, width 0.18s, margin 0.18s; }
    .ch-input { flex: 1; min-width: 0; min-height: 40px; max-height: 140px; resize: none; box-sizing: border-box; border: none; outline: none;
        border-radius: 20px; padding: 10px 15px; font: inherit; font-size: 16px; line-height: 1.3; color: #fff; background: rgba(255,255,255,0.1); }
    .ch-input::placeholder { color: rgba(255,255,255,0.4); }

    /* ไฟล์/รูปหมดเวลา (เก็บไว้ 3 วัน) */
    .ch-expired { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; max-width: 100%; box-sizing: border-box;
        border: 1px dashed rgba(127,127,127,0.45); font-size: 13.5px; opacity: 0.8; }
    .ch-expired span { min-width: 0; overflow-wrap: anywhere; }
    .ch-expired i { font-size: 18px; }
    .ch-b.media .ch-expired { color: #fff; }
    /* กดค้างข้อความ → เมนู */
    .ch-row.pressing .ch-b { transform: scale(0.96); transition: transform 0.18s ease; }
    /* เมนูกดค้างแบบไอจี: พื้นหลังเบลอ · ข้อความที่เลือกลอยเด่นที่เดิม · เมนูเล็กใต้/เหนือข้อความ */
    .ch-menu-bg { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,0.5);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: chFade 0.18s; }
    .ch-menu-msg { position: absolute; z-index: 7; pointer-events: none; animation: chLift 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
    @keyframes chLift { from { transform: scale(0.96); } to { transform: scale(1.02); } }
    .ch-menu-msg .ch-row, .ch-menu-msg .ch-col { max-width: none; width: auto; }
    .ch-menu-msg .ch-b { max-width: none !important; box-sizing: border-box; }
    .ch-menu-msg.single .ch-b { white-space: nowrap; }   /* ข้อความบรรทัดเดียว: สำเนาต้องบรรทัดเดียวเหมือนเดิม (กันขึ้นบรรทัดใหม่เพราะเศษพิกเซล) */
    .ch-menu { position: absolute; z-index: 7; width: 220px; border-radius: 16px; overflow: hidden; background: rgba(40,40,42,0.97);
        box-shadow: 0 12px 40px rgba(0,0,0,0.5); animation: chUp 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); transform-origin: top center; }
    @keyframes chUp { from { transform: scale(0.85); opacity: 0; } }
    .ch-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: none; background: none;
        color: #fff; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
    .ch-menu button + button { border-top: 0.5px solid rgba(255,255,255,0.08); }
    .ch-menu button i { font-size: 20px; opacity: 0.85; }
    .ch-menu button.danger { color: #ff6b6b; }
    .ch-menu button:active { background: rgba(255,255,255,0.06); }
    .ch-lightbox { position: absolute; inset: var(--ch-ext) 0 var(--ch-under); z-index: 5; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; animation: chFade 0.2s; }
    .ch-lightbox img { max-width: 96%; max-height: 90%; border-radius: 14px; }
    @keyframes chFade { from { opacity: 0; } }

    /* 🟢 จุดสถานะ (ใช้ร่วมทั้งเว็บ) */
    .hq-pdot { width: 12px; height: 12px; border-radius: 50%; box-sizing: content-box; border: 2.5px solid var(--pdot-ring, #000); background: #8e8e93; display: inline-block; cursor: pointer; }
    /* ไอคอนสถานะของ hQ — "หยดโครมกลม" เข้ากับธีมโครมขาวดำของ hQ: วงกลมทุกสถานะ ผิวมันวาวมีแสงสะท้อนมุมซ้ายบน
       แยกด้วยสี + สัญลักษณ์ขาวเล็ก ๆ กลางหยด:
       ออนไลน์ = เขียวล้วน · พักผ่อน = อำพันมีประกาย ✦ (สัญลักษณ์ของ hQ) · ห้ามรบกวน = แดงมีสี่เหลี่ยมหยุด ■
       สตรีม = ม่วงมีวงคลื่นแผ่ออกเป็นจังหวะ (ออนแอร์) · ออฟไลน์ = หยดเทาเล็กด้าน ไม่มีเงา */
    .hq-pdot.online { background: radial-gradient(circle at 34% 30%, #f2fff7 0 9%, #5ee6a0 27%, #1fb866 60%, #0d7040 100%); }
    .hq-pdot.quiet { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M10 0C11.3 5.6 14.4 8.7 20 10C14.4 11.3 11.3 14.4 10 20C8.7 14.4 5.6 11.3 0 10C5.6 8.7 8.7 5.6 10 0z'/%3E%3C/svg%3E") 50% 52% / 58% 58% no-repeat, radial-gradient(circle at 34% 30%, #fff8e6 0 8%, #ffd27a 26%, #f5a41c 60%, #a86400 100%); }
    .hq-pdot.dnd { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M5 1h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V5a4 4 0 0 1 4-4z'/%3E%3C/svg%3E") center / 38% 38% no-repeat, radial-gradient(circle at 34% 30%, #ffecef 0 8%, #ff7f8d 26%, #f0364c 60%, #9a1027 100%); }
    /* 🤖 สตรีม (บัญชี VoX) */
    .hq-pdot.stream { background: radial-gradient(circle at 34% 30%, #f4edff 0 9%, #bb97ff 27%, #8a55f6 60%, #4f1eb0 100%);
        animation: hqPdotLive 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) infinite; }
    @keyframes hqPdotLive { 0% { box-shadow: 0 0 0 0 rgba(160, 110, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 5px rgba(160, 110, 255, 0); } }
    .hq-pdot.offline { background: radial-gradient(circle at 40% 36%, #9da1a9 0 12%, #6c7078 55%, #474b52 100%);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.4a6.6 6.6 0 1 1 0 13.2a6.6 6.6 0 0 1 0-13.2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.4a6.6 6.6 0 1 1 0 13.2a6.6 6.6 0 0 1 0-13.2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
    @media (prefers-reduced-motion: reduce) { .hq-pdot.stream { animation: none; } }

    /* ==========================================
       💬 ธีมแบบเทเลแกรม: วอลเปเปอร์ลวดลาย · ฟองโปร่งแสง (ของเราม่วง ของอีกฝ่ายกระจกเข้ม) มีหาง · เวลา+✓ ในฟอง
       ส่วนบน/ช่องพิมพ์เป็นกระจก · อนิเมชันเด้งแบบสปริง
    ========================================== */
    #chat-screen {
        --tg-me: rgba(255, 255, 255, 0.96);
        --tg-them: rgba(62, 62, 66, 0.86);
        --tg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        background: #000;   /* พื้นเรียบ ไม่มีลาย — สีเดียวกับพื้นหน้าเว็บ (ใต้แถบ Safari ต่อกันเนียน) */
    }
    .ch-scroll, .ch-bar, .ch-replybar { position: relative; z-index: 1; }
    /* ช่องพิมพ์ลอยทับด้านล่าง — ข้อความเลื่อนลอดใต้ช่องพิมพ์และแถบล่างของ Safari ได้ (เต็มจอถึงขอบล่าง) */
    .ch-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; pointer-events: none; }
    .ch-foot > * { pointer-events: auto; }
    .ch-scroll { padding-bottom: calc(var(--ch-foot, 64px) + 6px) !important; }
    .ch-head { background: none; justify-content: space-between; }
    .ch-who { flex: 0 1 auto; max-width: calc(100% - 130px); margin: 0 auto; flex-direction: column; align-items: center; gap: 0;
        padding: 6px 18px; border-radius: 22px; text-align: center; }
    .ch-who .ch-name { justify-content: center; font-size: 15.5px; }
    .ch-who .ch-status { font-size: 12px; text-align: center; }
    #ch-av-btn { width: 40px; height: 40px; flex: none; cursor: pointer; }
    #ch-av-btn img { border: 0.5px solid rgba(255,255,255,0.16); }
    .ch-day { background: rgba(30, 30, 36, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255,255,255,0.85); }
    /* ฟองข้อความโปร่งแสง */
    /* ไม่มีเบลอสดในฟอง (iPhone ลากแล้วกระตุก) — สีโปร่งนิด ๆ แทน · ของเราขาว ตัวหนังสือดำ · อีกฝ่ายเทา */
    .ch-b { background: var(--tg-them) !important; color: #fff !important; border-radius: 18px; padding: 8px 12px; font-size: 16px;
        -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    .ch-row.me .ch-b { background: var(--tg-me) !important; color: #000 !important; }
    .ch-row.me .ch-b a { color: #000; }
    .ch-row:not(.me):not(.last) .ch-b { border-bottom-left-radius: 6px; }
    .ch-row:not(.me):not(.first) .ch-b { border-top-left-radius: 6px; }
    .ch-row.me:not(.last) .ch-b { border-bottom-right-radius: 6px; }
    .ch-row.me:not(.first) .ch-b { border-top-right-radius: 6px; }
    .ch-row.me .ch-b.media, .ch-b.media { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; position: relative; }
    .ch-b.media img { border-radius: 16px; width: 250px; }
    /* เวลา + ✓ ในฟอง (มีช่องว่างล่องหนท้ายข้อความกันชน) */
    .ch-meta { display: none !important; float: right; position: relative; top: 6px; margin-left: 8px; font-size: 11px; line-height: 1; white-space: nowrap;
        color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 2px; user-select: none; }
    .ch-row.me .ch-meta { color: rgba(255,255,255,0.75); }
    .ch-meta i { font-size: 15px; line-height: 1; }
    .ch-meta .tick-read { color: #fff; }
    .ch-meta .tick-fail { color: #ff6b6b; }
    .ch-b.media .ch-meta { position: absolute; right: 8px; bottom: 8px; top: auto; float: none; margin: 0; padding: 3px 7px; border-radius: 10px;
        background: rgba(0,0,0,0.45); color: #fff; }
    .ch-b.media .ch-cap { padding: 6px 10px 6px; }
    .ch-seen.failed { color: #ff6b6b; }
    /* อนิเมชันแบบสปริง: ข้อความใหม่เด้งขึ้นจากด้านล่าง · กดค้างฟองยุบ */
    .ch-row.new .ch-col { animation: tgIn 0.42s var(--tg-spring) both; }
    .ch-row.me.new .ch-col { animation-name: tgInMe; }
    @keyframes tgIn { from { opacity: 0; transform: translate(-10px, 14px) scale(0.92); } to { opacity: 1; transform: none; } }
    @keyframes tgInMe { from { opacity: 0; transform: translate(10px, 18px) scale(0.92); } to { opacity: 1; transform: none; } }
    .ch-row .ch-col { transition: transform 0.35s var(--tg-spring); }
    .ch-row.pressing .ch-col { transform: scale(0.94); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .ch-row.pressing .ch-b { transform: none; }
    /* ปัดซ้ายเพื่อตอบกลับ */
    .ch-row .ch-swipe-ic { position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; background: rgba(40,40,46,0.7); color: #fff; font-size: 17px;
        opacity: 0; transform: scale(0.5); transition: opacity 0.15s, transform 0.2s var(--tg-spring); pointer-events: none; }
    .ch-row.swiping .ch-swipe-ic { opacity: 1; }
    .ch-row.swipe-ok .ch-swipe-ic { transform: scale(1.1); }
    .ch-row.swiping .ch-col { transition: none; }
    /* ↩️ ตอบกลับแบบ Messenger: บรรทัด "คุณตอบกลับ …" + ข้อความต้นทางเป็นฟองจาง ๆ ที่ฟองตอบกลับซ้อนทับขอบล่าง */
    .ch-q-lbl { display: flex; align-items: center; gap: 4px; max-width: 100%; margin: 10px 4px 4px; font-size: 12px; color: rgba(255,255,255,0.5);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .ch-q-lbl svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .ch-q { max-width: 100%; box-sizing: border-box; margin: 0 0 -12px; padding: 8px 13px 19px; border: none; border-radius: 18px;
        background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); font-size: 14.5px; line-height: 1.32; white-space: normal;
        overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .ch-col > .ch-q + .ch-b { z-index: 1; }
    .ch-row.me .ch-q-lbl { justify-content: flex-end; }
    /* ช่องพิมพ์แบบกระจก */
    .ch-bar { background: transparent; border-top: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 6px; }
    .ch-input, .ch-ibtn:not(.ch-send) { background: rgba(30, 30, 36, 0.62) !important; border: 0.5px solid rgba(255,255,255,0.14);
        backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
    .ch-send { background: #fff !important; color: #000 !important; }
    /* แถบ "กำลังตอบกลับ" เหนือช่องพิมพ์ แบบ Messenger: แคปซูลจาง ๆ ชื่อ + ข้อความต้นทาง + ปุ่มปิด */
    .ch-replybar { background: rgba(38, 38, 42, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: none;
        margin: 0 10px 2px; padding: 9px 10px 9px 15px; border-radius: 20px; }
    .ch-replybar b { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); }
    .ch-replybar span { font-size: 13.5px; color: rgba(255,255,255,0.5); margin-top: 1px; }
    .ch-replybar button { background: transparent; color: rgba(255,255,255,0.7); font-size: 20px; }
    .ch-typing { background: var(--tg-them); }
    /* เมนูกดค้างแบบเทเลแกรม: พื้นมืดเบลอ · ฟองเด้งเด่น · เมนูกระจกเด้งออกจากมุมข้อความ */
    .ch-menu-bg { background: rgba(0,0,0,0.38); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); animation: chFade 0.22s ease; }
    .ch-menu-msg { animation: tgLift 0.45s var(--tg-spring) both; }
    @keyframes tgLift { from { transform: scale(0.94); } to { transform: scale(1); } }
    .ch-menu { width: 230px; border-radius: 16px; background: rgba(36, 36, 42, 0.78); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
        border: 0.5px solid rgba(255,255,255,0.1); box-shadow: 0 18px 50px rgba(0,0,0,0.45); animation: tgMenu 0.42s var(--tg-spring) both; }
    @keyframes tgMenu { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
    .ch-menu button { padding: 11px 16px; font-size: 15.5px; gap: 14px; }
    .ch-menu button + button { border-top: none; }
    .ch-menu button.sep { border-top: 6px solid rgba(0,0,0,0.25) !important; }
    .ch-menu button:active { background: rgba(255,255,255,0.08); }
    .ch-menu.closing { animation: tgMenuOut 0.18s ease both; }
    @keyframes tgMenuOut { to { opacity: 0; transform: scale(0.8); } }
    .ch-menu-bg.closing { animation: chFadeOut 0.18s ease both; }
    .ch-menu-msg.closing { animation: chFadeOut 0.18s ease both; }
    @keyframes chFadeOut { to { opacity: 0; } }
    /* ⏳ รูปในแชทกำลังโหลด — กล่องกระพริบจาง ๆ แบบโพสต์ แล้วรูปค่อย ๆ ปรากฏ */
    @keyframes chImgPulse { 0%, 100% { background-color: #1b1b1e; } 50% { background-color: #2f2f34; } }
    .ch-b.media img:not(.ld), .ch-post-m:has(img:not(.ld)) { animation: chImgPulse 1.3s ease-in-out infinite; }
    .ch-b.media img, .ch-post-m img { transition: opacity 0.25s ease; }
    .ch-post-m img:not(.ld) { opacity: 0; }


    /* ⚙️ หน้ารายละเอียดแชท (แตะส่วนบน) แบบไอจี — สไลด์เข้าจากขวา */
    .ch-info { position: absolute; inset: 0; z-index: 8; background: #000; display: flex; flex-direction: column; overflow-y: auto;
        transform: translateX(100%); transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1); overscroll-behavior: contain; }
    .ch-info.open { transform: none; }
    .ch-info[hidden] { display: none; }
    .ch-info-head { display: flex; align-items: center; gap: 10px; padding: calc(var(--ch-ext) + env(safe-area-inset-top) + 10px) 14px 10px; flex: none; }
    html.hq-chat-float .ch-info-head { padding-top: 10px; }
    .ch-info-head b { font-size: 16.5px; font-weight: 700; }
    .ch-info-body { padding: 10px 16px calc(var(--ch-under) + env(safe-area-inset-bottom) + 30px); display: flex; flex-direction: column; align-items: stretch; }
    .ch-info-av { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: #1c1c1e; align-self: center; margin-top: 6px; }
    .ch-info-name { align-self: center; margin-top: 12px; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 5px; text-align: center; }
    .ch-info-user { align-self: center; margin-top: 2px; font-size: 14px; color: rgba(255,255,255,0.5); }
    .ch-info-btn { align-self: center; margin: 16px 0 22px; border: none; border-radius: 22px; padding: 10px 22px; background: #fff; color: #000;
        font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
    .ch-info-btn:active, .ch-info-row:active { transform: scale(0.98); }
    .ch-info-card { background: #141416; border-radius: 18px; overflow: hidden; margin-bottom: 14px; }
    .ch-info-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 15.5px; cursor: pointer; border: none; background: none;
        color: #fff; font-family: inherit; width: 100%; text-align: left; transition: transform 0.15s; }
    .ch-info-row + .ch-info-row { border-top: 0.5px solid rgba(255,255,255,0.08); }
    .ch-info-row i { font-size: 22px; opacity: 0.85; flex: none; }
    .ch-info-row > span:not(.ch-sw) { flex: 1; min-width: 0; }
    .ch-info-row small { display: block; font-size: 12.5px; color: rgba(255,255,255,0.45); margin-top: 2px; }
    .ch-info-row.danger { color: #ff5f57; }
    .ch-info-row > .ch-sw { position: relative; width: 50px; height: 30px; flex: none; display: block; }
    .ch-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
    .ch-sw i { position: absolute; inset: 0; border-radius: 15px; background: rgba(255,255,255,0.18); transition: background 0.2s; opacity: 1 !important; font-size: 0; }
    .ch-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); }
    .ch-sw input:checked + i { background: #fff; }
    .ch-sw input:checked + i::after { transform: translateX(20px); background: #000; }
    .ch-confirm { position: absolute; inset: 0; z-index: 9; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center; animation: chFade 0.18s; }
    .ch-confirm > div { width: 100%; max-width: 440px; margin: 0 10px calc(var(--ch-under) + env(safe-area-inset-bottom) + 10px); animation: chSheetUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
    .ch-confirm-box { background: #1c1c1e; border-radius: 18px; overflow: hidden; text-align: center; margin-bottom: 8px; }
    .ch-confirm-box p { margin: 0; padding: 18px 18px 14px; font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.45; }
    .ch-confirm-box p b { display: block; color: #fff; font-size: 16px; margin-bottom: 4px; }
    .ch-confirm button { display: block; width: 100%; border: none; background: #1c1c1e; color: #fff; font: inherit; font-size: 16.5px; padding: 15px; cursor: pointer; }
    .ch-confirm-box button { border-top: 0.5px solid rgba(255,255,255,0.1); color: #ff5f57; font-weight: 700; }
    .ch-confirm > div > button { border-radius: 18px; font-weight: 700; }
    /* 📞 ปุ่มโทร/วิดีโอคอล (ส่วนบน) + บันทึกการโทรในแชท */
    .ch-calls { display: flex; flex: none; border-radius: 22px; overflow: hidden; background: rgba(20,20,22,0.42); border: 0.5px solid rgba(255,255,255,0.16);
        backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
    .ch-calls button { width: 40px; height: 40px; border: none; background: none; color: #fff; font-size: 21px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .ch-calls button:active { background: rgba(255,255,255,0.1); }
    /* ชื่อยาว/จอแคบ: แคปซูลชื่อหดเอง (ตัด …) ปุ่มโทร + รูปไม่ถูกบังกัน */
    .ch-who { flex: 0 1 auto !important; min-width: 0; max-width: calc(100% - 196px) !important; }
    .ch-head > .hq-back, .ch-calls, #ch-av-btn { flex: none; }
    .ch-who .ch-name, .ch-who .ch-status { max-width: 100%; min-width: 0; box-sizing: border-box; }
    .ch-who #ch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ch-who .ch-name .hq-badges { flex: none; }
    .ch-b.ch-call { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px !important; cursor: pointer; }
    .ch-b.ch-call .ic { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(127,127,127,0.22); flex: none; }
    .ch-b.ch-call.missed .ic { color: #ff5f57; }
    .ch-b.ch-call b { display: block; font-size: 14.5px; font-weight: 700; }
    .ch-b.ch-call small { font-size: 12.5px; opacity: 0.6; }
    /* 🦴 โครงกระดูกแชท (Messenger) */
    .ch-skel-wrap { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
    .ch-skel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    .ch-skel.me { align-items: flex-end; }
    .ch-skel i { display: block; width: var(--w); height: 36px; border-radius: 18px; background: #1c1c1f;
        animation: chSkel 1.5s ease-in-out var(--d) infinite; }
    .ch-skel i.s { width: calc(var(--w) * 0.6); }
    @keyframes chSkel { 0%, 100% { background: #1a1a1d; } 50% { background: #2c2c31; } }
    .ch-more:has(.ch-skel-wrap) { padding: 0; }
    /* 🤖 ข้อความที่ระบบตอบแทน (ตอบโดย AI / ข้อความอัตโนมัติ) — ป้ายเล็กใต้ฟอง */
    .ch-auto { display: inline-flex; align-items: center; gap: 4px; margin: 3px 6px 0; font-size: 11px; color: rgba(255,255,255,0.42); }
    .ch-auto i { font-size: 12px; }
    /* ✉️ คำขอข้อความ: แถบบอกเหนือช่องพิมพ์ */
    .ch-reqbar { margin: 0 10px 6px; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.75);
        background: rgba(38,38,42,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-align: center; }
    .ch-reqbar[hidden] { display: none; }
    #chat-screen.req-wait .ch-bar { opacity: 0.45; pointer-events: none; }

    /* 📮 โพสต์ที่ส่งในแชท — การ์ดโพสต์ขนาดย่อแบบไอจี (แตะ = pop up โพสต์ทับหน้าแชท) */
    .ch-b.ch-post, .ch-row.me .ch-b.ch-post { width: 236px; max-width: 100%; padding: 0 !important; overflow: hidden; border-radius: 18px !important; cursor: pointer;
        background: #1f1f23 !important; color: #fff !important; border: 0.5px solid rgba(255,255,255,0.1); white-space: normal; }
    .ch-post-h { display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: 13.5px; min-width: 0; }
    .ch-post-h img, .ch-post-h i.av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: #333; display: block; }
    .ch-post-h b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-post-m { position: relative; aspect-ratio: 4 / 5; background: #2a2a2e center / cover no-repeat; }
    .ch-post-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .ch-post-m .ic { position: absolute; top: 8px; right: 8px; font-size: 19px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
    .ch-post-c { padding: 8px 11px 10px; font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,0.85);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ch-post-c b { color: #fff; font-weight: 600; margin-right: 4px; }
    .ch-post-t { padding: 4px 13px 14px; font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
    .ch-b.ch-post.na { cursor: default; }
    .ch-post-na { display: flex; align-items: center; gap: 10px; padding: 14px; font-size: 13.5px; color: rgba(255,255,255,0.6); }
    .ch-post-na i { font-size: 22px; }
    .ch-row.pressing .ch-b.ch-post { transform: none; }
    /* pop up โพสต์ที่เปิดจากแชท อยู่เหนือหน้าแชท */
    html.hq-chat-peek #peek-modal { z-index: 1000040 !important; }

    /* 📮 ส่งโพสต์ในแชท — แผ่นเลือกคนส่ง */
    .ch-share { position: fixed; inset: 0; z-index: 1000060; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center;
        animation: chFade 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; }
    .ch-share.closing { animation: chFadeOut 0.2s ease forwards; }
    .ch-share-sheet { width: 100%; max-width: 520px; height: min(72vh, 620px); display: flex; flex-direction: column; color: #fff;
        background: #1c1c1e; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
        animation: chSheetUp 0.32s cubic-bezier(0.2, 0.9, 0.3, 1); }
    .ch-share.closing .ch-share-sheet { animation: chSheetDown 0.2s ease forwards; }
    @keyframes chSheetUp { from { transform: translateY(100%); } }
    @keyframes chSheetDown { to { transform: translateY(100%); } }
    .ch-share-grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); margin: 8px auto 4px; flex: none; }
    .ch-share-title { text-align: center; font-weight: 700; font-size: 16px; padding: 6px 0 10px; flex: none; }
    .ch-share-q { margin: 0 14px 8px; flex: none; height: 38px; border-radius: 12px; border: none; outline: none; padding: 0 14px; font: inherit; font-size: 15.5px;
        background: rgba(255,255,255,0.08); color: #fff; }
    .ch-share-q::placeholder { color: rgba(255,255,255,0.4); }
    .ch-share-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 0 10px; }
    .ch-share-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
    .ch-share-row img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #333; flex: none; }
    .ch-share-row div { flex: 1; min-width: 0; }
    .ch-share-row b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-share-row span { display: block; font-size: 13px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-share-row button { flex: none; min-width: 72px; height: 32px; border-radius: 16px; border: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
        background: #fff; color: #000; transition: transform 0.15s, background 0.2s, color 0.2s; }
    .ch-share-row button:active { transform: scale(0.92); }
    .ch-share-row button.sent { background: rgba(255,255,255,0.12); color: #fff; padding: 0 14px; }
    .ch-share-row button:disabled { opacity: 0.6; }
    /* 👥 กลุ่ม: ชื่อ+รูปคนส่ง (แบบเทเลแกรม) · ข้อความระบบกลางจอ · แถบการโทรกลุ่ม */
    .ch-row.grp:not(.me) { padding-left: 36px; }
    .ch-gav { position: absolute; left: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #222; display: none; cursor: pointer; }
    .ch-row.grp.last .ch-gav { display: block; }
    .ch-gname { display: none; font-size: 12.5px; font-weight: 700; margin: 0 0 3px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .ch-row.grp.first .ch-gname { display: block; }
    .ch-row.sys { justify-content: center; margin: 10px 0 6px; padding: 0 !important; }
    .ch-sys { max-width: 86%; padding: 5px 12px; border-radius: 13px; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: center;
        color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.08); }
    .ch-gcallbar { position: absolute; left: 12px; right: 12px; top: calc(var(--ch-ext) + env(safe-area-inset-top) + 68px); z-index: 3; display: flex; align-items: center; gap: 10px;
        padding: 8px 8px 8px 14px; border-radius: 18px; font-size: 13.5px; background: rgba(30,120,60,0.55); border: 0.5px solid rgba(255,255,255,0.18);
        backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
    .ch-gcallbar[hidden] { display: none; }
    .ch-gcallbar i { font-size: 18px; flex: none; }
    .ch-gcallbar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
    .ch-gcallbar button { flex: none; height: 30px; padding: 0 14px; border-radius: 15px; border: none; background: #fff; color: #000; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
    #chat-screen:has(#ch-gcallbar:not([hidden])) .ch-scroll { padding-top: calc(var(--ch-ext) + env(safe-area-inset-top) + 120px); }
    #chat-screen:has(#ch-gcallbar:not([hidden])) .ch-pinbar { top: calc(var(--ch-ext) + env(safe-area-inset-top) + 116px); }
    #chat-screen:has(#ch-gcallbar:not([hidden])):has(#ch-pinbar:not([hidden])) .ch-scroll { padding-top: calc(var(--ch-ext) + env(safe-area-inset-top) + 168px); }
    html.hq-chat-float .ch-gcallbar { top: 64px; }
    html.hq-chat-float #chat-screen:has(#ch-gcallbar:not([hidden])) .ch-scroll { padding-top: 116px; }
    html.hq-chat-float #chat-screen:has(#ch-gcallbar:not([hidden])) .ch-pinbar { top: 112px; }
    html.hq-chat-float #chat-screen:has(#ch-gcallbar:not([hidden])):has(#ch-pinbar:not([hidden])) .ch-scroll { padding-top: 164px; }
    #ch-call-a { display: none; }
    #chat-screen.is-group #ch-call-a { display: flex; }
    #chat-screen.is-group #ch-pring { display: none !important; }
    .ch-gletter { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; text-transform: uppercase; flex: none; }
    .ch-share-empty { text-align: center; color: rgba(255,255,255,0.45); font-size: 14px; padding: 30px 20px; }