/* ==========================================
       💬 CHATS (chats.html) — หน้ารายการแชท + กลุ่ม + โทรกลุ่ม แบบเทเลแกรม
       • #view-chats: รายการแชททั้งหมด (1:1 + กลุ่ม) ค้นหา · ยังไม่อ่าน · ปิดเสียง · กำลังโทร
       • สร้างแชทใหม่ / สร้างกลุ่ม (เลือกสมาชิก → ตั้งชื่อ+รูป)
       • ข้อมูลกลุ่ม (อยู่ในหน้าห้องแชท chat.html): สมาชิก บทบาท เพิ่ม/เอาออก แอดมิน แก้ชื่อ/รูป ออกจากกลุ่ม
       • โทรกลุ่ม (เสียง/วิดีโอ): ห้องโทรของกลุ่ม เข้า-ออกได้ตลอด (WebRTC ตาข่าย · utils/gcalls.py)
    ========================================== */
    #view-chats { background: #000; color: #fff; min-height: 100vh; min-height: 100dvh;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", 'Noto Sans Thai', system-ui, sans-serif; }
    .cl-page { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 0 calc(env(safe-area-inset-bottom) + 120px); box-sizing: border-box; }
    .cl-head { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 16px) 16px 10px; }
    .cl-title { flex: 1; min-width: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.4px; }
    .cl-hbtns { display: flex; flex: none; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.14); }
    .cl-hbtns button { width: 44px; height: 42px; border: none; background: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .cl-hbtns button:active { background: rgba(255,255,255,0.12); }
    .cl-hbtns svg, .cl-ic { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .cl-search { margin: 4px 16px 8px; position: relative; }
    .cl-search input { width: 100%; box-sizing: border-box; height: 40px; border-radius: 20px; border: none; outline: none; background: #18181a; color: #fff; font: inherit; font-size: 15.5px; padding: 0 16px 0 40px; -webkit-appearance: none; }
    .cl-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 19px; color: rgba(255,255,255,0.45); pointer-events: none; }
    .cl-sec { padding: 14px 20px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; color: rgba(255,255,255,0.45); text-transform: uppercase; }
    .cl-row { display: flex; align-items: center; gap: 13px; padding: 9px 16px; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    .cl-row:active, .cl-row.pressing { background: rgba(255,255,255,0.06); }
    @media (hover: hover) { .cl-row:hover { background: rgba(255,255,255,0.045); } }
    .cl-av { position: relative; width: 56px; height: 56px; flex: none; }
    .cl-av img, .cl-av .cl-letter { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #1c1c1e; display: block; }
    .cl-letter { display: flex !important; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 23px; text-transform: uppercase; }
    .cl-av .cl-on { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: #34c759; border: 2.5px solid #000; }
    .cl-av .cl-gtag { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; }
    .cl-av .cl-gtag span { width: 18px; height: 18px; border-radius: 50%; background: #2c2c2e; display: flex; align-items: center; justify-content: center; }
    .cl-av .cl-gtag svg { width: 12px; height: 12px; fill: #fff; }
    .cl-main { flex: 1; min-width: 0; border-bottom: 0.5px solid rgba(255,255,255,0.07); padding: 7px 0 9px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
    .cl-row:last-child .cl-main { border-bottom: none; }
    .cl-l1 { display: flex; align-items: center; gap: 6px; }
    .cl-name { flex: 0 1 auto; min-width: 0; font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
    .cl-name .hq-badges { margin: 0; }
    .cl-mute { font-size: 15px; color: rgba(255,255,255,0.35); flex: none; }
    .cl-time { margin-left: auto; flex: none; font-size: 12.5px; color: rgba(255,255,255,0.42); padding-left: 8px; font-variant-numeric: tabular-nums; }
    .cl-row.unread .cl-time { color: #fff; }
    .cl-l2 { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
    .cl-last { flex: 1; min-width: 0; font-size: 14.5px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cl-last b { font-weight: 600; color: rgba(255,255,255,0.78); }
    .cl-last.call { color: #34c759; font-weight: 600; }
    .cl-row.unread .cl-last { color: rgba(255,255,255,0.86); }
    .cl-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; background: #fff; color: #000; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
    .cl-badge.muted { background: rgba(255,255,255,0.22); color: #fff; }
    .cl-empty { text-align: center; padding: 70px 30px 30px; color: rgba(255,255,255,0.45); font-size: 15px; line-height: 1.5; }
    .cl-empty b { display: block; color: #fff; font-size: 19px; margin-bottom: 6px; }
    .cl-empty button { margin-top: 18px; border: none; border-radius: 22px; padding: 11px 22px; background: #fff; color: #000; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
    .cl-skel { display: flex; align-items: center; gap: 13px; padding: 9px 16px; }
    .cl-skel i { display: block; }

    /* แผ่นเลือกคน / สร้างกลุ่ม / เมนูการกระทำ — ทับทุกอย่างรวมหน้าห้องแชท */
    .cl-sheet-bg { position: fixed; inset: 0; z-index: 1000050; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; justify-content: center; animation: clFade 0.2s; color: #fff;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, 'Noto Sans Thai', system-ui, sans-serif; }
    .cl-sheet-bg.closing { animation: clFade 0.18s reverse forwards; }
    @keyframes clFade { from { opacity: 0; } }
    .cl-sheet { width: 100%; max-width: 520px; height: min(88vh, 760px); height: min(88dvh, 760px); background: #121214; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden;
        animation: clUp 0.32s cubic-bezier(0.2, 0.9, 0.3, 1); box-shadow: 0 -10px 50px rgba(0,0,0,0.5); }
    @keyframes clUp { from { transform: translateY(40px); opacity: 0.4; } }
    @media (min-width: 700px) { .cl-sheet-bg { align-items: center; } .cl-sheet { border-radius: 22px; height: min(80vh, 720px); } }
    .cl-sh-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; flex: none; }
    .cl-sh-head b { flex: 1; text-align: center; font-size: 17px; font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cl-sh-head button { border: none; background: none; color: #fff; font: inherit; font-size: 15.5px; cursor: pointer; padding: 6px 8px; min-width: 64px; -webkit-tap-highlight-color: transparent; }
    .cl-sh-head button.ok { font-weight: 800; text-align: right; }
    .cl-sh-head button:first-child { text-align: left; color: rgba(255,255,255,0.7); }
    .cl-sh-head button:disabled { opacity: 0.3; }
    .cl-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 8px; flex: none; scrollbar-width: none; }
    .cl-chips::-webkit-scrollbar { display: none; }
    .cl-chips:empty { display: none; }
    .cl-row, .cl-prow, .cl-chip, .cl-sheet button, .cl-act button, .gc-btn { touch-action: manipulation; }   /* แตะรัว ๆ ไม่ถูกตีเป็นแตะสองครั้ง */
    .cl-chips.multi { min-height: 34px; align-items: center; }   /* จองที่ไว้ตั้งแต่แรก — เลือกคนแรกแล้วรายชื่อไม่กระโดดลงใต้นิ้ว */
    .cl-chips-hint { font-size: 13px; color: rgba(255,255,255,0.4); padding-left: 4px; }
    .cl-chip { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 18px; background: rgba(255,255,255,0.1); font-size: 13.5px; font-weight: 600; cursor: pointer; animation: clFade 0.2s; }
    .cl-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #222; }
    .cl-chip i { font-size: 15px; opacity: 0.6; }
    .cl-sh-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
    .cl-prow { display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .cl-prow:active { background: rgba(255,255,255,0.06); }
    .cl-prow img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #222; flex: none; }
    .cl-prow > div { flex: 1; min-width: 0; }
    .cl-prow b { display: flex; align-items: center; gap: 4px; font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cl-prow span { display: block; font-size: 13px; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cl-prow .cl-chk { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.8px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; }
    .cl-prow .cl-chk i { font-size: 17px; color: #000; opacity: 0; }
    .cl-prow.sel .cl-chk { background: #fff; border-color: #fff; }
    .cl-prow.sel .cl-chk i { opacity: 1; }
    .cl-prow.dis { opacity: 0.4; pointer-events: none; }
    .cl-prow .cl-role { flex: none; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); }
    .cl-prow .cl-pon { position: relative; flex: none; }
    .cl-prow .cl-pon::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #34c759; border: 2px solid #121214; display: none; }
    .cl-prow .cl-pon.on::after { display: block; }
    .cl-gform { padding: 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .cl-gpic { width: 104px; height: 104px; border-radius: 50%; background: #1e1e21 center / cover no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; border: none; color: rgba(255,255,255,0.6); font-size: 34px; }
    .cl-gpic.has i { display: none; }
    .cl-gname { width: 100%; box-sizing: border-box; height: 48px; border-radius: 14px; border: none; outline: none; background: #1c1c1f; color: #fff; font: inherit; font-size: 17px; font-weight: 600; padding: 0 16px; text-align: center; -webkit-appearance: none; }
    .cl-gnote { font-size: 13px; color: rgba(255,255,255,0.45); text-align: center; }
    /* เมนูการกระทำ (แผ่นล่าง) */
    .cl-act { width: 100%; max-width: 440px; margin: 0 10px calc(env(safe-area-inset-bottom) + 10px); animation: clUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
    @media (min-width: 700px) { .cl-act { margin-bottom: 0; } }
    .cl-act-box { background: #1c1c1e; border-radius: 18px; overflow: hidden; margin-bottom: 8px; }
    .cl-act-box p { margin: 0; padding: 16px 18px 13px; font-size: 13.5px; color: rgba(255,255,255,0.55); text-align: center; line-height: 1.45; }
    .cl-act-box p b { display: block; color: #fff; font-size: 16px; margin-bottom: 3px; }
    .cl-act button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: none; background: #1c1c1e; color: #fff; font: inherit; font-size: 16.5px; padding: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .cl-act button:active { background: #2a2a2d; }
    .cl-act-box button + button, .cl-act-box p + button { border-top: 0.5px solid rgba(255,255,255,0.1); }
    .cl-act button.danger { color: #ff5f57; }
    .cl-act button i { font-size: 21px; }
    .cl-act > button { border-radius: 18px; font-weight: 700; }

    /* 👥 ข้อมูลกลุ่ม (ในหน้าห้องแชท — ใช้โครง .ch-info ของ chat.html) */
    .gi-avwrap { align-self: center; position: relative; margin-top: 6px; width: 96px; height: 96px; }
    .gi-avwrap img, .gi-avwrap .cl-letter { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #1c1c1e; font-size: 38px; }
    .gi-avwrap button { position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #000; background: #fff; color: #000; font-size: 17px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .gi-name { align-self: center; margin-top: 12px; font-size: 21px; font-weight: 800; text-align: center; display: flex; align-items: center; gap: 8px; max-width: 100%; }
    .gi-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .gi-name button { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .gi-sub { align-self: center; margin-top: 3px; font-size: 14px; color: rgba(255,255,255,0.5); }
    .gi-acts { display: flex; justify-content: center; gap: 12px; margin: 18px 0 20px; }
    .gi-acts button { width: 76px; padding: 11px 0 9px; border-radius: 16px; border: none; background: #141416; color: #fff; font: inherit; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
    .gi-acts button:active { transform: scale(0.96); }
    .gi-acts button i { font-size: 23px; }
    .gi-acts button.on { background: #fff; color: #000; }
    .gi-mtitle { padding: 6px 6px 8px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5); display: flex; justify-content: space-between; }
    .ch-info-card .cl-prow { padding: 9px 14px; }
    .ch-info-card .cl-prow + .cl-prow { border-top: 0.5px solid rgba(255,255,255,0.07); }
    .ch-info-card .cl-prow .cl-pon::after { border-color: #141416; }

    /* 📞 โทรกลุ่ม */
    #gcall-screen { position: fixed; inset: 0; z-index: 1000070; display: none; flex-direction: column; background: #0a0a0c; color: #fff; overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, 'Noto Sans Thai', system-ui, sans-serif; }
    #gcall-screen.open { display: flex; animation: gcIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
    @keyframes gcIn { from { opacity: 0; transform: scale(1.03); } }
    .gc-head { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 12px) 14px 10px; }
    .gc-head > div { flex: 1; min-width: 0; }
    .gc-title { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gc-sub { font-size: 13px; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; margin-top: 1px; }
    .gc-hbtn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .gc-grid { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 6px 10px; grid-template-columns: repeat(var(--gc-cols, 1), 1fr); grid-auto-rows: 1fr; }
    .gc-tile { position: relative; border-radius: 20px; overflow: hidden; background: #17171a; min-height: 0; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.15s; }
    .gc-tile.talk { box-shadow: inset 0 0 0 3px #34c759; }
    .gc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; background: #000; }
    .gc-tile.vid video { opacity: 1; }
    .gc-tile.me video { transform: scaleX(-1); }
    .gc-tile.me.back video { transform: none; }
    .gc-tav { width: min(38%, 104px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #222; }
    .gc-tile.vid .gc-tav { opacity: 0; }
    .gc-tname { position: absolute; left: 10px; bottom: 9px; max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 10px; background: rgba(0,0,0,0.5); font-size: 12.5px; font-weight: 600;
        display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .gc-tname i { font-size: 14px; color: #ff6b63; display: none; }
    .gc-tile.muted .gc-tname i { display: block; }
    .gc-tile.wait::after { content: ''; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: gcSpin 0.9s linear infinite; }
    @keyframes gcSpin { to { transform: rotate(360deg); } }
    .gc-solo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; text-align: center; color: rgba(255,255,255,0.5); font-size: 14.5px; padding: 0 30px; }
    .gc-ctrl { flex: none; display: flex; justify-content: center; gap: 16px; padding: 14px 16px calc(env(safe-area-inset-bottom) + 22px); }
    .gc-btn { width: 60px; height: 60px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.14); color: #fff; font-size: 26px;
        transition: transform 0.15s, background 0.2s; -webkit-tap-highlight-color: transparent; }
    .gc-btn:active { transform: scale(0.9); }
    .gc-btn.on { background: #fff; color: #000; }
    .gc-btn.end { background: #ff3b30; }
    .gc-btn[hidden] { display: none; }
    /* ย่อเป็นแคปซูลลอย (คุยแชทไปด้วยได้) */
    #gcall-pill { position: fixed; z-index: 1000071; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
        border-radius: 22px; border: none; background: #1f8f47; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,0.45); font-variant-numeric: tabular-nums; }
    #gcall-pill i { font-size: 18px; }
    #gcall-pill.show { display: flex; animation: clFade 0.25s; }