/* กฎที่ v3 ไม่มี แต่แอปจริงต้องใช้ — โหลดหลัง v3.css เท่านั้น ห้ามแก้ v3.css (ต้องเท่าต้นฉบับไบต์ต่อไบต์เสมอ) */ /* ── ธีม "auto" ────────────────────────────────────────────────────────────── v3.css รู้จักแค่ค่าเริ่มต้น (มืด) กับ `[data-theme="light"]` — ไม่มี `prefers-color-scheme` อยู่ในไฟล์เลย (เกรปแล้ว: เจอ `data-theme` บรรทัดเดียว คือบรรทัด 49). แต่ index.html ตั้ง `data-theme="auto"` เป็นค่าตั้งต้น และ main.js เขียนค่า "auto" ลง localStorage ได้ ⇒ ผู้ใช้ที่เครื่องเป็นโหมดสว่าง และไม่เคยกดสลับเอง จะโดนโหมดมืดตลอด. บล็อกนี้ทำให้ "auto" แปลว่า auto จริง โดยสำเนาค่าโทเคนชุดสว่างจาก v3.css บรรทัด 49–65 มาตรง ๆ (ห้ามแก้ที่นั่น) — ค่าใดเปลี่ยนที่ต้นฉบับ ต้องตามมาแก้ที่นี่ด้วย. */ @media (prefers-color-scheme: light) { [data-theme="auto"] { color-scheme: light; --bg-app: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F8FAFC; --bg-input: #F8FAFC; --bg-input-focus: #F1F5F9; --bg-rail: #FFFFFF; --bg-header: rgba(255, 255, 255, 0.96); --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --text-main: #0F172A; --text-muted: #475569; --text-dim: #64748B; --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.1); --modal-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.25); } /* v3's scrollbar thumb is white-on-dark; invisible on a white page. */ [data-theme="auto"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); } [data-theme="auto"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.32); } } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.32); } /* ── โครงหน้า ─────────────────────────────────────────────────────────────── v3 วาง `.app-shell` เป็นลูกของ ตรง ๆ ส่วนที่นี่มี `#root` คั่นอยู่. `#root` ไม่ใช่ต้นเหตุของตะแกรงพัง — `.app-shell` เป็น `display:grid` ในตัวเอง จึงสร้างคอนเทกซ์ของมันเองไม่ว่าพ่อจะเป็นอะไร และ `max-width` + `margin:0 auto` ทำงานในบล็อกธรรมดาอยู่แล้ว. บรรทัดนี้มีไว้กันเรื่องเดียว: `#root` สูงไม่เต็มจอ เมื่อเนื้อหาสั้น. ห้ามใช้ `display: contents` ที่นี่ — `#root` มี `hidden` อยู่ ตอนบูต และ `display` ของผู้เขียนชนะ `[hidden]` ของเบราว์เซอร์ ⇒ จะเห็นเชลล์ โผล่ก่อนเวลา. */ #root { min-height: 100%; } /* ── หน้าบูต / toast / dialog ─────────────────────────────────────────────── ทั้งสามอย่างเคยอยู่ใน app.css ที่ถูกตัดทิ้ง และ v3.css ไม่มีคลาสพวกนี้เลย (ไม่มีแม้แต่ `.btn`) ⇒ ถ้าไม่เขียนที่นี่ หน้าจอบูตจะเป็นข้อความลอย ๆ มุมซ้ายบน และกล่องยืนยัน "ออกจากระบบ" จะไหลไปต่อท้ายหน้าแทนที่จะทับหน้าจอ. */ .boot { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 20px; } .boot-mark { width: 54px; height: 54px; border-radius: 14px; background: url("/logo.png") center / cover no-repeat, var(--brand-gradient); box-shadow: var(--brand-glow); animation: koratBootPulse 1.4s ease-in-out infinite; } .boot-text { color: var(--text-dim); font-size: 14px; margin: 0; } @keyframes koratBootPulse { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } } .toast-host { position: fixed; inset-inline: 0; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 9998; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 16px; } .toast { max-width: 420px; padding: 10px 16px; border-radius: var(--radius-md); font-size: 14px; background: var(--bg-card-hover); color: var(--text-main); border: 1px solid var(--border-strong); box-shadow: var(--modal-shadow); word-break: break-word; backdrop-filter: blur(16px); } /* สีสถานะเป็นค่าคงที่ ไม่ผูกกับ accent */ .toast.bad { border-color: #EF4444; } .toast.good { border-color: #22C55E; } .toast.warn { border-color: #F59E0B; } /* ========================================================================== Korat Frosted Glass & Translucent Modals (Glassmorphism Next-Gen) ========================================================================== */ /* ── 1. Backdrop / Scrim Overlays ── */ .scrim, .sheet-scrim, .compose-scrim, .sheetwrap, .mobile-drawer-overlay, .call-modal-scrim, [data-console="business"] .scrim, .bz-backdrop { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 24px; background: rgba(4, 5, 12, 0.58) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; } [data-theme="light"] .scrim, [data-theme="light"] .sheet-scrim, [data-theme="light"] .compose-scrim, [data-theme="light"] .sheetwrap, [data-theme="light"] .mobile-drawer-overlay, .theme-light .scrim, .theme-light .sheet-scrim, .theme-light .compose-scrim, .theme-light .sheetwrap, .theme-light .mobile-drawer-overlay { background: rgba(15, 23, 42, 0.28) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; } @media (prefers-color-scheme: light) { [data-theme="auto"] .scrim, [data-theme="auto"] .sheet-scrim, [data-theme="auto"] .compose-scrim, [data-theme="auto"] .sheetwrap, [data-theme="auto"] .mobile-drawer-overlay { background: rgba(15, 23, 42, 0.28) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; } } .lightbox-modal, .story-modal { position: fixed; inset: 0; z-index: 100; background: rgba(4, 5, 12, 0.72) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; display: none; place-items: center; padding: 16px; } .lightbox-modal.open, .story-modal.open { display: grid !important; } /* ── 2. Modal Surfaces & Cards (Frosted Glass Translucency) ── */ .dialog, .sheet-modal, .sheet, .compose-modal-content, .story-dialog, .story-studio-modal, .story-viewers-sheet, .quick-chat-popup, .mobile-drawer, .lightbox-shell, .lightbox-side, .plan-sheet .sheet-modal, .receipt-sheet .sheet-modal, .compose-scrim .sheet-modal, [data-console="business"] .dialog, [data-console="business"] .sheet { background: rgba(13, 14, 28, 0.78) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06) !important; color: var(--text-main); } [data-theme="light"] .dialog, [data-theme="light"] .sheet-modal, [data-theme="light"] .sheet, [data-theme="light"] .compose-modal-content, [data-theme="light"] .story-dialog, [data-theme="light"] .story-studio-modal, [data-theme="light"] .story-viewers-sheet, [data-theme="light"] .quick-chat-popup, [data-theme="light"] .mobile-drawer, [data-theme="light"] .lightbox-shell, [data-theme="light"] .lightbox-side, [data-theme="light"] .plan-sheet .sheet-modal, [data-theme="light"] .receipt-sheet .sheet-modal, [data-theme="light"] .compose-scrim .sheet-modal, .theme-light .dialog, .theme-light .sheet-modal, .theme-light .sheet, .theme-light .compose-modal-content, .theme-light .story-dialog, .theme-light .story-studio-modal, .theme-light .story-viewers-sheet, .theme-light .quick-chat-popup, .theme-light .mobile-drawer, .theme-light .lightbox-shell, .theme-light .lightbox-side, .theme-light .plan-sheet .sheet-modal, .theme-light .receipt-sheet .sheet-modal, .theme-light .compose-scrim .sheet-modal, [data-theme="light"] [data-console="business"] .dialog, [data-theme="light"] [data-console="business"] .sheet { background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(32px) saturate(190%) !important; -webkit-backdrop-filter: blur(32px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 1.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important; color: var(--text-main, #0F172A) !important; } @media (prefers-color-scheme: light) { [data-theme="auto"] .dialog, [data-theme="auto"] .sheet-modal, [data-theme="auto"] .sheet, [data-theme="auto"] .compose-modal-content, [data-theme="auto"] .story-dialog, [data-theme="auto"] .story-studio-modal, [data-theme="auto"] .story-viewers-sheet, [data-theme="auto"] .quick-chat-popup, [data-theme="auto"] .mobile-drawer, [data-theme="auto"] .lightbox-shell, [data-theme="auto"] .lightbox-side, [data-theme="auto"] .plan-sheet .sheet-modal, [data-theme="auto"] .receipt-sheet .sheet-modal, [data-theme="auto"] .compose-scrim .sheet-modal, [data-theme="auto"] [data-console="business"] .dialog, [data-theme="auto"] [data-console="business"] .sheet { background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(32px) saturate(190%) !important; -webkit-backdrop-filter: blur(32px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 1.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important; color: var(--text-main, #0F172A) !important; } } /* Modal inner container transparency (prevents opaque solid boxes from covering the glass) */ .sheet-modal > .sheet-body, .sheet-modal > .sheet-header, .compose-scrim .composer-card.in-modal, .compose-scrim .composer-card, .sheet-modal .plan-detail-view, .sheet-modal .plan-detail-scroll, .sheet-modal .repost-sheet-content, .sheet-modal .k3-body, .sheet-modal .composer-top, .sheet-modal .composer-bottom, .dialog form, .dialog .row, .dialog .actions { background: transparent !important; } [data-theme="light"] .sheet-modal .sheet-header { border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .sheet-modal .sheet-close { background: rgba(0, 0, 0, 0.04) !important; color: var(--text-muted, #64748B) !important; border-radius: 50% !important; } [data-theme="light"] .sheet-modal .sheet-close:hover { background: rgba(0, 0, 0, 0.08) !important; color: var(--text-main, #0F172A) !important; } .dialog { width: 100%; max-width: 380px; border-radius: var(--radius-lg); padding: 20px; max-height: 86vh; overflow-y: auto; } .dialog h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; text-align: start; } .dialog p { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); text-align: start; } .dialog .keeps { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; } .dialog .row, .dialog .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } /* ── 3. Floating Popovers & Menus (Glassmorphism) ── */ .menu, .picker-menu, .msg-more-menu, .lang-menu, .toast { background: rgba(14, 16, 32, 0.82) !important; backdrop-filter: blur(24px) saturate(190%) !important; -webkit-backdrop-filter: blur(24px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important; } [data-theme="light"] .menu, [data-theme="light"] .picker-menu, [data-theme="light"] .msg-more-menu, [data-theme="light"] .lang-menu, [data-theme="light"] .toast, .theme-light .menu, .theme-light .picker-menu, .theme-light .msg-more-menu, .theme-light .lang-menu, .theme-light .toast { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important; color: var(--text-main) !important; } @media (prefers-color-scheme: light) { [data-theme="auto"] .menu, [data-theme="auto"] .picker-menu, [data-theme="auto"] .msg-more-menu, [data-theme="auto"] .lang-menu, [data-theme="auto"] .toast { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important; color: var(--text-main) !important; } } .btn { padding: 9px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border); } .btn:hover { background: var(--bg-input-focus); } .btn.primary { background: var(--brand-gradient); color: #FFF; border-color: transparent; } .btn.danger { background: #EF4444; color: #FFF; border-color: transparent; } .btn[disabled] { opacity: .5; cursor: default; } /* ── Avatar Initial Fallback (เมื่อไม่มีรูปโปรไฟล์) ── */ .av { border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(139, 61, 255, 0.12), rgba(255, 59, 136, 0.12)); color: var(--accent-purple); border: 1px solid var(--border); font-weight: 700; flex-shrink: 0; width: 36px; height: 36px; overflow: hidden; } .av img { width: 100%; height: 100%; object-fit: cover; } .composer-top > .av { width: 36px; height: 36px; } .comment-item > .av, .comment-input-row > .av { width: 34px; height: 34px; font-size: 13px; } /* ── Character Count Helper ── */ .charcount { font-size: 11px; color: var(--text-dim); text-align: right; padding: 2px 6px; } .charcount[hidden] { display: none !important; } .chat-lenwarn { font-size: 11px; color: var(--text-dim); margin: 2px 14px; text-align: right; } .chat-lenwarn.bad { color: #EF4444; font-weight: 700; } /* ── ซ่อน Floating Quick-Chat เมื่ออยู่ในหน้าแชทหลัก ── */ .app-shell[data-route="chat"] ~ [data-dock], .app-shell[data-route="mchat"] ~ [data-dock], .app-shell[data-route="chat"] .quick-chat-popup, .app-shell[data-route="mchat"] .quick-chat-popup, [data-route="chat"] .dock, [data-route="mchat"] .dock { display: none !important; } /* ── Call cards inside chat bubbles ── */ .att-card { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); color: inherit; text-decoration: none; white-space: normal; } .att-card small { display: block; font-size: 11px; color: var(--text-dim); } .att-card .grow { min-width: 0; overflow-wrap: anywhere; } .att-card.call.missed { color: #EF4444; } .msg-bubble.outgoing .att-card { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); color: #FFFFFF; backdrop-filter: blur(8px); } .msg-bubble.outgoing .att-card small { color: rgba(255, 255, 255, 0.85); } .msg-bubble.outgoing .att-card.call.missed { background: rgba(239, 68, 68, 0.35); border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; } @media (max-width: 640px) { .mobile-nav { display: flex !important; } } .badge-num[hidden], .badge-dot[hidden], .icon-btn-ghost[hidden] { display: none !important; } .left-rail { overflow-y: auto; } .top-header .search-box { flex: 1 1 240px; max-width: 420px; } .app-shell[data-route="chat"] .fabcompose, .app-shell[data-route="mchat"] .fabcompose, .app-shell[data-route="post"] .fabcompose { display: none; } /* ── ฟีด/การ์ดโพสต์/คอมเมนต์: กฎที่ v3.css ไม่มี ── */ .post-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .post-actions { display:flex; gap:8px; align-items:center; } .post-header .openarea { flex:1; align-self:stretch; min-width:16px; cursor:pointer; } .gallery-4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; height:320px; } .media-gallery { position:relative; } .media-gallery .shots-more { position:absolute; inset-inline-end:8px; bottom:8px; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700; } /* คลิปในโพสต์ — ปกคลิป + ปุ่มเล่นทับกลาง (feed.js: `mediaSlidesOf`/`openVideoModal`) */ .media-item-video { position:relative; cursor:pointer; background:#000; } .media-item-video img { opacity:.85; } .media-item-video .video-play-badge { position:absolute; inset:0; margin:auto; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; pointer-events:none; } .media-item-video .video-play-badge svg { width:22px; height:22px; fill:#fff; margin-inline-start:2px; } .video-stage { display:flex; align-items:center; justify-content:center; } .lightbox-video { max-width:100%; max-height:100vh; background:#000; } .action-bookmark.on svg { fill: var(--accent-purple); } .action-like .reaction { font-size:16px; line-height:1; } .comment-item.reply { margin-inline-start:40px; } .reply-link { background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; } .reply-link svg { width:12px; height:12px; } .reply-link.on { color:var(--accent-pink); } .reply-link.danger { color:#EF4444; } .reply-link.warn { color:#F59E0B; } /* คอมเมนต์ในโมดัลดูรูป (lightbox panel) และหน้าโพสต์เดี่ยว (#/post/) ใช้ตัวเรนเดอร์ คอมเมนต์เดียวกัน (mountPostComments) — ต่างกันแค่ opts.iconOnly: โมดัลส่ง true (ไอคอนล้วน, ใช้ .icon-only ด้านล่าง), หน้าโพสต์เดี่ยวไม่ส่ง ⇒ ปริยาย = มีข้อความ (.reply-link ฐาน ด้านบน). ปรับความหนาแน่นที่ mountPostComments จุดเดียว คงข้อความไว้เป็น aria-label/title เสมอ (เข้าถึงได้), พื้นที่กดขั้นต่ำ 40x40px เฉพาะโหมดไอคอนล้วน */ .reply-link.icon-only { justify-content: center; min-width: 40px; min-height: 40px; padding: 8px; border-radius: 8px; } .reply-link.icon-only svg { width: 16px; height: 16px; flex-shrink: 0; } .reply-link.icon-only .cnt { font-size: 11px; font-weight: 600; } .reply-link.icon-only:active { background: var(--bg-card-hover); } .comment-input { resize:none; max-height:120px; font-family:inherit; line-height:1.4; padding:6px 0; } a.k3-row { text-decoration:none; color:inherit; } .shopx { margin-top:10px; } .shopx > .k3-card + .k3-card { margin-top:8px; } .post-card.text-only .post-text { font-size:17px; } .post-card.text-only.brief .post-text { font-size:20px; line-height:1.5; } .composer-top > .av { width:36px; height:36px; } .comment-item > .av, .comment-input-row > .av { width:34px; height:34px; font-size:13px; } .composer-link-preview { margin-top: 10px; width: 100%; } .composer-linkcard-container { position: relative; width: 100%; } .composer-linkcard-dismiss { position: absolute; top: 8px; inset-inline-end: 8px; /* วงกลม ไม่ใช่วงรี: `width`/`height` อย่างเดียวยังถูกกฎอื่นดันสูงได้ (padding ที่สืบมา หรือ ตัวอักษร × ที่ดันความสูงบรรทัด) — ล็อกทั้งสี่ทางแล้วบังคับสัดส่วน 1:1 ไว้เป็นด่านสุดท้าย */ width: 26px; height: 26px; min-width: 26px; min-height: 26px; flex: 0 0 auto; padding: 0; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; background: rgba(0, 0, 0, 0.72); color: #FFF; border: none; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: background 0.15s ease, transform 0.15s ease; } .composer-linkcard-dismiss:hover { background: #EF4444; transform: scale(1.1); } /* ── Floating Video PiP (Picture-in-Picture Mini Player) ── */ #korat-global-pip-player { position: fixed; bottom: 24px; inset-inline-end: 24px; width: 340px; min-width: 240px; max-width: min(640px, calc(100vw - 24px)); min-height: 160px; max-height: 80vh; z-index: 10000; background: var(--bg-card, #1A1D2D); border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18)); border-radius: 16px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(139, 61, 255, 0.22); display: flex; flex-direction: column; overflow: hidden; resize: both; animation: pipSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @keyframes pipSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: none; } } #korat-global-pip-player .video-pip-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.08); user-select: none; cursor: grab; touch-action: none; } #korat-global-pip-player .video-pip-header:active { cursor: grabbing; } #korat-global-pip-player .video-pip-title { font-size: 12px; font-weight: 700; color: var(--text-main, #FFF); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; margin-inline-end: 8px; display: flex; align-items: center; gap: 6px; } #korat-global-pip-player .video-pip-title svg { width: 14px; height: 14px; color: var(--accent-pink, #FF4586); flex-shrink: 0; } #korat-global-pip-player .video-pip-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } #korat-global-pip-player .video-pip-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: var(--text-dim, #A1A1AA); display: grid; place-items: center; cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.15s ease; } #korat-global-pip-player .video-pip-btn:hover { background: rgba(255, 255, 255, 0.15); color: var(--text-main, #FFF); } #korat-global-pip-player .video-pip-btn.danger:hover { background: #EF4444; color: #FFF; } #korat-global-pip-player .video-pip-body { position: relative; width: 100%; flex: 1; min-height: 135px; background: #000; } #korat-global-pip-player .video-pip-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .is-pip-floating .video-pip-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); user-select: none; } .is-pip-floating .video-pip-title { font-size: 12px; font-weight: 700; color: var(--text-main, #FFF); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; margin-inline-end: 8px; } .is-pip-floating .video-pip-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .is-pip-floating .video-pip-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: var(--text-dim, #A1A1AA); display: grid; place-items: center; cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.15s ease; } .is-pip-floating .video-pip-btn:hover { background: rgba(255, 255, 255, 0.15); color: var(--text-main, #FFF); } .is-pip-floating .video-pip-btn.danger:hover { background: #EF4444; color: #FFF; } .is-pip-floating .video-pip-body { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .post-linkcard-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-input, rgba(0,0,0,0.1)); border-radius: var(--radius-md, 12px); } .post-linkcard-pip-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--bg-card, #1A1D2D); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .post-linkcard-pip-indicator svg { width: 16px; height: 16px; color: var(--accent-pink); animation: pipPulse 2s infinite ease-in-out; } @keyframes pipPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } } @media (max-width: 640px) { .post-video-pip-wrap.is-pip-floating { bottom: 74px; /* above mobile navigation bar */ inset-inline-end: 12px; width: 280px; } } /* ── มือถือ: กันเนื้อหาล้นออกนอกจอ ────────────────────────────────────── v3 เป็นเดโมจอกว้าง ไม่เคยเจอกรณีคอลัมน์แคบ ⇒ ลูกของกริดที่ min-width เป็น auto จะดันตัวเองกว้างกว่าจอแล้วทั้งหน้าเลื่อนตามแนวนอน (หัวเรื่องหลุดจอ) */ html, body { max-width: 100%; overflow-x: hidden; } .app-shell { width: 100%; max-width: min(1280px, 100%); } .app-shell > * { min-width: 0; } .main-content, .left-rail, .right-sidebar { min-width: 0; max-width: 100%; } .main-content img, .main-content video, .main-content canvas { max-width: 100%; } .top-header { max-width: 100%; flex-wrap: wrap; row-gap: 8px; } .top-header .search-box { min-width: 0; } /* ── หัวจอ: ชื่อร้านยาวดันปุ่มแชร์/ตะกร้าล้นกรอบ (2026-08-26 เจ้าของชี้บนจอจริง ที่ #/shop/7) ──────────────────────────────────────────────────────────── สาเหตุจริง (อ่านโค้ดแล้ว ยังไม่ได้เห็นด้วยตา — เปิดเบราว์เซอร์ไม่ได้): `.top-header` (v3.css:336) สูงคงที่ `height:56px` และเป็น `position:sticky` ส่วนบรรทัดข้างบน (v3-extra.css เดิม) เติม `flex-wrap:wrap` ให้มันเพื่อกันจอแคบ ล้น — แต่ `.header-title-wrap` (main.js:770, ห่อ `

` ที่พิมพ์ ชื่อร้าน) ไม่เคยมี `min-width:0` และ `h2` เดิมไม่มี ellipsis เลย ⇒ flex item ที่ไม่ยอมหด: ชื่อร้านยาวดันความกว้างรวมเกินคอลัมน์ ⇒ `flex-wrap:wrap` ที่เพิ่งเติม จึงพับ `.header-actions` (ปุ่มแชร์+ตะกร้า, main.js:775) ลงแถวที่สอง ซึ่งล้น ออกนอกกรอบสูง 56px ของ sticky header (overflow เริ่มต้นคือ visible) ไปทับ เนื้อหาที่เลื่อนอยู่ข้างล่าง (ปกร้าน) พอดี — ตรงกับที่เห็น "ตะกร้าตกลงไปอยู่บน แบนเนอร์" และปุ่มสองปุ่มถูกบีบชิดกันในแถวที่ล้นจนดูเหมือนทับกัน. แก้ที่ราก: ให้ชื่อเรื่องตัดด้วย … แทนการดันบรรทัด และห้ามแถบปุ่มหดจนบีบกัน ยืนยันโหนดจริง: main.js:770-775 มี `.header-title-wrap`/`h2`/`.header-actions` ตรงตัวทุกคลาส. / .header-title-wrap { min-width: 0; } .header-title-wrap h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-actions { flex-shrink: 0; } @media (max-width: 640px) { .top-header { position: sticky; top: 0; z-index: 20; } / ห้ามใส่ระยะขอบซ้าย/ขวาบนมือถือ — v3 ให้เนื้อหาเต็มความกว้าง 100% (บรรทัดนี้เคยทำให้ทุกหน้าบนมือถือมีขอบว่างสองข้าง) / .main-content { padding-inline: 0; } } / ตาราง/โค้ด/ข้อความยาวในหน้าที่ยังไม่ได้แปลงเป็น v3 ต้องไม่ดันจอ / .main-content table { display: block; overflow-x: auto; max-width: 100%; } .main-content pre { overflow-x: auto; } / ── ชิ้นส่วนกลางจาก ui.js ที่ v3 ไม่มีคลาสให้ ── / .scrim { inset: auto; top: var(--vv-t, 0px); left: var(--vv-l, 0px); width: var(--vv-w, 100%); height: var(--vv-h, 100dvh); } .scrim > .sheet-modal { display: flex; flex-direction: column; max-height: 100%; } .sheet-modal > .sheet-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; } .sheet-header .k3-title { flex: 1; min-width: 0; } @media (max-width: 640px) { .scrim { padding: 12px 10px; } .sheet-modal, .dialog { width: 100% !important; max-width: calc(100vw - 20px) !important; border-radius: var(--radius-xl, 20px) !important; } } .toast-host .toast { position: static; transform: translateY(8px); } .toast-host .toast.on { transform: none; } .k3-btn-danger { background: #EF4444; box-shadow: none; } .k3-btn-danger:hover { background: #DC2626; } / ── ตระกูล k3-* ที่โค้ดฝั่งลูกค้าอ้างถึงแต่ v3.css ไม่เคยนิยาม (2026-09-18) ── ตรวจด้วย `node web/tools/check_deployed_css_classes.mjs app` · หน้านี้โหลดแค่ v3.css + v3-extra.css (เจ้าของตัด app.css/biz.css ออก — ดูคอมเมนต์หัว index.html) ⇒ กฎต้องอยู่ที่นี่ ไม่ใช่โหลดไฟล์เก่ากลับมา · ไม่ลอกจาก site/bizv3/v3-fixes.css ตรง ๆ เพราะฝั่งนั้นผูกโทเคน `--bz-` ของคอนโซล ที่นี่ผูกโทเคน v3 (`--brand-gradient` · `--bg-input` · `--border`) · `.k3-btn-primary` = ปุ่มหลัก: ยืนยันการเติมสีแบรนด์ให้ชัดแม้ถูกวางคู่กับตัวปรับอื่น · `.k3-btn-outline` = ปุ่มรอง: โปร่ง + เส้นขอบ (คู่ของ `.k3-btn-ghost` ที่มีพื้นจาง) · `.k3-input` = ช่องกรอกในชีต (เดิมเป็น input เปล่าของเบราว์เซอร์ — ไม่มีขอบ ไม่มีพื้น) · `.k3-link` = ลิงก์ย้อนกลับ "← บัญชี" ในจอตั้งค่า · `.k3-chip-sm` = ชิปเล็กในประวัติการเรียกเก็บ · `.k3-list` = คอลัมน์แถว · `.k3-screen` = จอเดี่ยว / .k3-btn-primary { background: var(--brand-gradient); color: #FFF; box-shadow: var(--brand-glow); } .k3-btn-primary:hover { background: var(--brand-hover); } .k3-btn-outline { background: transparent; color: var(--text-main); border: 1px solid var(--border); box-shadow: none; } .k3-btn-outline:hover { background: var(--bg-input); transform: none; } .k3-btn.sm { padding: 6px 12px; font-size: 12px; } .k3-input { display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 14px; line-height: 1.4; color: var(--text-main); background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; outline: none; transition: background 0.15s ease, border-color 0.15s ease; } .k3-input:focus { background: var(--bg-input-focus); border-color: var(--text-dim); } .k3-input::placeholder { color: var(--text-dim); } textarea.k3-input { resize: vertical; min-height: 72px; } select.k3-input { appearance: auto; } .k3-link { color: var(--text-dim); text-decoration: none; cursor: pointer; } .k3-link:hover { color: var(--text-main); text-decoration: underline; } .k3-chip-sm { display: inline-flex; align-items: center; font-size: 11px; line-height: 1.2; } .k3-list { display: flex; flex-direction: column; gap: 6px; } .k3-screen { display: block; min-width: 0; } .av.sm { width: 32px; height: 32px; } .av.xs, .av.tiny { width: 28px; height: 28px; font-size: 12px; } .av.xl { width: 96px; height: 96px; font-size: 34px; } .av-ring { display: inline-block; padding: 2px; border-radius: 50%; background: var(--ring-c, transparent); } .av-ring.neon { background: var(--ring-c, transparent); box-shadow: 0 0 12px var(--ring-c); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ff-pick { position: relative; overflow: hidden; } .ff-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* ── กฎเดียวที่ทั้งแอปพึ่งพา: `hidden` ต้องซ่อนจริง ────────────────────── ของเดิมมีกฎนี้ใน app.css ที่ถูกตัดทิ้ง ⇒ ทุกกฎที่ตั้ง display เอง (.boot, .badge-num, .k3-) จะชนะ [hidden] ของเบราว์เซอร์ ⇒ หน้าจอ "กำลังเปิด Korat…" ค้างทับแอปทั้งที่แอปโหลดเสร็จแล้ว / [hidden] { display: none !important; } /* ── หน้าโปรไฟล์: กฎที่ v3 ไม่มี ── / .profile-actions-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .profile-avatar-large.noimg { display: grid; place-items: center; font-size: 34px; font-weight: 800; color: var(--text-dim); background: var(--bg-input); } .avatar-img.noimg { display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--text-dim); background: var(--bg-input); } .profile-tabpanel { padding: 0; } / ในแท็บของหน้าโปรไฟล์ หัวข้อกับรายการต้องกว้างเท่ากันเป๊ะ — หัวข้อเคยกินเต็มความกว้าง ส่วนการ์ดในรายการถูกดันเข้ามาอีกชั้น / .profile-tabpanel > .section-label, .profile-tabpanel .section-label.row { padding-inline: 16px; } .profile-tabpanel .list:not(.k3-body) { padding-inline: 16px; } .profile-tabpanel .list:not(.k3-body) > .row { margin-inline: 0; } .profile-tabpanel .bookmarks-header { padding: 14px 20px 0; margin-bottom: 8px; } .profile-suggest { margin: 12px 16px; } .profile-editor .form { padding: 14px 20px; } / ══ หน้าแชท: กฎที่ v3 ไม่มี (เดโมเป็นจอกว้างสามคอลัมน์เสมอ) ══ / / เลขเดาถูกลบแล้ว — ห้องยืดตามพื้นที่จริงด้านล่างแทน / @media (max-width: 1024px) { .chat-layout[data-mode] { grid-template-columns: minmax(0, 1fr); } .chat-layout[data-mode="list"] .chat-threads { display: flex; } .chat-layout[data-mode="list"] .chat-room { display: none; } .chat-layout[data-mode="thread"] .chat-threads { display: none; } .chat-layout[data-mode] .thread-meta { display: block; } .chat-layout[data-mode] .thread-time { display: inline; } .chat-layout[data-mode] .thread-item { justify-content: flex-start; padding: 12px 14px; } } a.thread-item, button.thread-item { width: 100%; text-align: start; font: inherit; color: inherit; text-decoration: none; background: transparent; border: 0; border-bottom: 1px solid var(--border); } .av.avatar-sm { width: 34px; height: 34px; font-size: 13px; } .msg-group > .av.avatar-sm { align-self: flex-end; } .msg-bubble { white-space: pre-wrap; } .msg-bubble .quote { border-inline-start: 3px solid var(--border-strong); padding-inline-start: 8px; margin-bottom: 6px; font-size: 12px; opacity: .8; white-space: normal; } .msg-bubble .deleted { opacity: .6; font-style: italic; } .msg-bubble .autochip { display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: var(--radius-pill); background: rgba(127,127,127,.18); font-size: 10.5px; font-weight: 700; white-space: normal; } .msg-time { display: flex; align-items: center; gap: 6px; } .msg-time .rr { background: none; border: 0; padding: 0; color: var(--text-dim); cursor: pointer; } .msg-time .rr.read { color: var(--accent-purple); } .msg-time .rr svg { width: 13px; height: 13px; display: block; } .msg-inline-reply-btn { background: none; border: 0; padding: 0 4px; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0.6; transition: all 0.15s ease; line-height: 1; } .msg-inline-reply-btn:hover { opacity: 1; color: var(--brand-primary, var(--accent-purple)); transform: scale(1.15); } .stamp .msg-inline-reply-btn { vertical-align: middle; margin-left: 4px; } .att img { max-width: 100%; width: auto; max-height: 280px; border-radius: var(--radius-md); display: block; object-fit: cover; } .att-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); color: inherit; text-decoration: none; white-space: normal; max-width: 100%; box-sizing: border-box; } .att-card small { display: block; font-size: 11px; color: var(--text-dim); } .att-card .grow { min-width: 0; overflow-wrap: anywhere; } .att-card.call.missed { color: #EF4444; } .att-audio { margin-top: 6px; max-width: 100%; } .att-audio audio { width: 100%; max-width: 260px; } .chat-composer { flex-shrink: 0; } .chat-input-bar textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; font: inherit; line-height: 1.4; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 14px; outline: none; color: var(--text-main); } .chat-input-bar textarea:focus { border-color: var(--border-focus); background: var(--bg-input-focus); } .chat-input-bar .ff-pick { flex-shrink: 0; } .attach-preview { display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); } .attach-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); } .filemsg { margin: 0; padding: 6px 16px; font-size: 12px; color: #EF4444; } .chat-messages-body > .k3-state, .chat-messages-body > .k3-body { margin: auto; width: 100%; } .msgs { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden !important; display: flex; flex-direction: column; gap: 16px; padding: 12px; box-sizing: border-box; } .inbox-thread-placeholder { margin: auto; padding: 24px; color: var(--text-dim); font-size: 13px; text-align: center; } / Quick Chat Popup Responsive & Anti-Scrollbar Fitting / .quick-chat-popup .msgs, .quick-chat-popup .popup-chat-body { overflow-x: hidden !important; width: 100%; box-sizing: border-box; } .quick-chat-popup .msg-group { max-width: 90%; } .quick-chat-popup .msg-bubble { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; } .quick-chat-popup .att img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .quick-chat-popup .att-card, .quick-chat-popup .chat-call-card, .quick-chat-popup .msg-quote { max-width: 100%; box-sizing: border-box; } / ── แถบ "ติดตั้งแอป" (install.js) — ฟีเจอร์เดิมของโปรดักชัน v3 ไม่มี กฎเดิมอยู่ใน app.css ที่ถูกตัด ⇒ มันเลยกลายเป็นไอคอนลอยมุมล่างซ้าย / .installbar { position: fixed; z-index: 60; inset-inline: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg, 16px); background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,.28); } @media (min-width: 641px) { .installbar { inset-inline: auto 16px; bottom: 16px; max-width: 360px; } } .installbar .ib-icon img { width: 36px; height: 36px; border-radius: 10px; display: block; } .installbar .ib-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .installbar .ib-title { font-size: 13px; font-weight: 700; color: var(--text-main); } .installbar .ib-body { font-size: 11.5px; color: var(--text-dim); } .installbar .ib-action { flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: var(--radius-pill); background: var(--brand-gradient, var(--accent-purple)); color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; } .installbar .ib-close { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; } / ── หน้าตั้งค่า: กฎที่ v3 ไม่มี ── / .auth-field textarea { min-height: 96px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font: inherit; font-size: 14px; resize: vertical; } .auth-field textarea:focus { outline: none; border-color: var(--border-focus); background: var(--bg-input-focus); } .auth-field input[type="range"] { height: auto; padding: 0; background: none; border: 0; accent-color: var(--accent-pink); } .k3-row[role="button"], .k3-row[role="button"] .k3-row-main { cursor: pointer; } .k3-row[role="button"]:hover { background: var(--bg-input-focus); } .k3-note a { color: var(--accent-purple, #8B5CF6); text-decoration: none; } .k3-note a:hover { text-decoration: underline; } / ── dock แชทลอย: กฎที่หายไปพร้อม app.css (ตอนนี้ยังไหลลงหน้า) ── / .dock { display: none; } @media (min-width: 1025px) { .dock { display: flex; position: fixed; inset-inline-end: 16px; bottom: 0; align-items: flex-end; gap: 12px; z-index: 60; } } .dockcol { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 232px; } .dockbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px 12px 0 0; color: var(--text-main); cursor: pointer; } .dockbar svg { width: 20px; height: 20px; color: var(--text-dim); flex: 0 0 auto; } .dockbar .lbl { flex: 1; min-width: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; } .docklist { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; max-height: 380px; display: flex; flex-direction: column; } .docklist header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); } .docklist .ttl { font-size: 13px; font-weight: 700; color: var(--text-dim); flex: 1; min-width: 0; } .docklist .lnk { font-size: 12px; font-weight: 600; color: var(--accent-pink); text-decoration: none; } .docklist .body { overflow-y: auto; padding: 0 6px 8px; } .dockwin { width: 300px; height: 420px; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px 12px 0 0; overflow: hidden; } .dockwin.min { height: auto; } .dockwin.min .dwbody { display: none; } .dwhead { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); } .dwhead .nm { flex: 1; min-width: 0; background: none; border: 0; cursor: pointer; text-align: start; font-size: 13px; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dwhead .ic { width: 26px; height: 26px; border: 0; background: none; border-radius: 8px; color: var(--text-dim); cursor: pointer; } .dwhead .ic:hover { background: rgba(127,127,127,.12); color: var(--text-main); } .dwbody { display: flex; flex-direction: column; min-height: 0; flex: 1; } .dwbody .msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; } @keyframes k3skel { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } .skel-inline { display: inline-block; width: 64px; height: 26px; border-radius: 999px; background: linear-gradient(90deg, var(--border), transparent, var(--border)); background-size: 200% 100%; animation: k3skel 1.2s linear infinite; } .btn-follow.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); } .follow-item .rowacts { flex: 0 0 auto; display: inline-flex; } / แท็บฟีดอยู่ในคอลัมน์กลาง ไม่ใช่ในหัวเรื่อง ⇒ ต้องมีความสูงของตัวเอง / .view.feed .header-tabs { height: 52px; padding: 0 16px; gap: 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; background: var(--bg-header); backdrop-filter: blur(20px) saturate(180%); } .view.feed .header-tabs::-webkit-scrollbar { display: none; } .view.feed .tab-btn { flex: 0 0 auto; white-space: nowrap; } / ปุ่มออกจากระบบย้ายเข้า .user-profile-pill แล้ว (v3 นิยาม .pill-main/.pill-signout เอง) จึงไม่ต้องมีกฎที่นี่ — ลบทิ้งเพื่อไม่ให้ทับของต้นฉบับ / / ── กฎที่ v3 ไม่มี เพราะเดโมไม่เคยใช้อิลิเมนต์เหล่านี้ ── / .auth-field select, .rel-acts select { height: 46px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font: inherit; font-size: 14px; } .rel-acts select { height: 36px; font-size: 13px; } .auth-field select:focus, .rel-acts select:focus { outline: none; border-color: var(--border-focus); background: var(--bg-input-focus); } a.chip-item, a.linkbtn, a.k3-btn { text-decoration: none; } .notif-item[role="button"] { cursor: pointer; width: 100%; text-align: start; } .grp-cover { background: var(--brand-gradient); } / ── ฟอร์มในชีท: v3 มีแต่ .rz-field input/textarea (ไม่มี select, ไม่มี label ลอย) ── / .rz-field select, .rz-editor > input, .rz-editor > select, .rz-editor > textarea { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font-size: 13px; font-family: inherit; font-weight: 500; } .rz-editor > label { font-size: 12px; font-weight: 700; color: var(--text-dim); } .rz-link input { flex: 1; min-width: 160px; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font-size: 12px; } / แท็บ 5–6 อันบนจอ 360px: `flex:1` ของ .notif-tab บีบจนตัดคำ ⇒ ให้เลื่อนแนวนอน / .notifs-header-bar { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .notifs-header-bar::-webkit-scrollbar { display: none; } .notifs-header-bar > .notif-tab { flex: 0 0 auto; white-space: nowrap; padding: 14px 14px; } / ── ตัวนับบรรทัดเดียว + แผงอีโมจิ + ชิปเช็คอิน (v3 ไม่มีทั้งสามอย่าง) ── / .counterbar-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; min-width: 0; font-size: 11px; } .counterbar-line > { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .counterbar-line .tagcap { font-size: 11px; color: var(--text-dim); text-align: start; font-variant-numeric: tabular-nums; flex: 0 1 auto; } .counterbar-line .tagcap.bad { color: #EF4444; font-weight: 700; } .counterbar-line .neon-quota { flex: 1 1 auto; flex-wrap: nowrap; } .counterbar-sep { color: var(--text-dim); flex: 0 0 auto; } .counterbar-sep[hidden] { display: none; } .counterbar-line:has(.tagcap.bad) { flex-wrap: wrap; } /* The "captured tags" chip strip (tagpicker.js `.tagfound`) lives inside the same `.tagpick` node as `.tagcap`, which this bar otherwise forces onto one nowrap/ellipsis line (`.counterbar-line > ` above). A chip row clipped to one line and ellipsised would hide exactly the tags it exists to confirm, so both the node and the row itself opt back out of that clipping and the whole bar wraps to make room. / .counterbar-line .tagpick { overflow: visible; white-space: normal; text-overflow: clip; } .counterbar-line .tagfound { overflow: visible; white-space: normal; flex: 1 1 100%; } .counterbar-line:has(.tagfound:not([hidden])) { flex-wrap: wrap; } .emoji-pop { width: min(320px, calc(100vw - 24px)); padding: 8px; } .emoji-head { padding: 0 0 6px; } .emoji-search { width: 100%; font-size: 13px; padding: 6px 10px; } .emoji-cats { display: flex; gap: 2px; overflow-x: auto; padding: 0 0 6px; border-bottom: 1px solid var(--border); } .emoji-cat { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; padding: 5px 6px; border-radius: 8px; opacity: .6; } .emoji-cat[aria-selected="true"] { opacity: 1; background: rgba(127,127,127,.14); } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 216px; overflow-y: auto; padding-top: 6px; } .emoji-key { border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 0; border-radius: 8px; } .emoji-key:hover { background: rgba(127,127,127,.16); } .emoji-empty { font-size: 12px; color: var(--text-dim); padding: 10px 4px; margin: 0; } .emoji-wrap { flex: 0 0 auto; } .comment-field-wrap .emoji-wrap .tool-btn { width: 30px; height: 30px; } .chat-input-bar { overflow: visible; } .chip-place { background: rgba(14,165,233,.14); color: #0EA5E9; } .post-location .place-link { color: inherit; text-decoration: none; } .post-location .place-link:hover { text-decoration: underline; } .shopdine { display: contents; } /* ── ไดเรกทอรี: กฎที่ v3 ไม่มี ── / .shop-status-warn { background: rgba(245, 158, 11, 0.85); color: #FFF; } .shop-cover-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:34px; } .shop-rating-badge.none { background:none; color:var(--text-dim); font-weight:600; } .directory-viewbar.pager { justify-content:center; } / ── หน้าร้านเดี่ยว #/shop/: เนื้อหาใต้หัวร้านชิดขอบจอ (2026-08-26) ────── `renderShop` (shop.js — ห้ามแตะ) ต่อ `promoHost`/`tabBar`/`body` เข้ากับ `.view` ตรง ๆ (`view.replaceChildren(head, promoHost, tabBar, body)`) ไม่มี คลาสไหนตรงกับกฎ margin-inline เดิม (`.k3-card`/`.k3-section`/`.rel-page`/ `.k3-body`/`.dirgrid`/... — grep ยืนยันแล้วไม่มีสักคลาสอยู่ในหน้านี้) ⇒ การ์ดสินค้า/ป้ายโปรโมชัน/บล็อกคิวถึงชนขอบจอพอดี. สโคปด้วย `.view:has(> .bizhead)` — ผูกกับหัวร้านค้าปลีกเท่านั้น (คลาสเดียวกับที่ shop.js:581 ใส่ไว้บนหัวร้าน) ไม่แตะกฎกว้างของ `.ptabs`/`.profile-tab`/ `.shoppage` เลยสักบรรทัด — ปกร้าน (`.bizhead`) และแถบแท็บ (`.ptabs`) ยังเต็ม ขอบจอเหมือนเดิมตามดีไซน์โปรไฟล์ทั่วไป มีแค่ "เนื้อหาในแท็บ" ที่ได้ระยะขอบ / .view:has(> .bizhead) .product-grid, .view:has(> .bizhead) .section-label.k3-group-label, .view:has(> .bizhead) > [data-promo] .shop-highlights, .view:has(> .bizhead) .q-board, .view:has(> .bizhead) .q-list, .view:has(> .bizhead) .q-take, .view:has(> .bizhead) .q-board-note, .view:has(> .bizhead) .job-empty { margin-inline: 12px; } @media (min-width: 641px) { .view:has(> .bizhead) .product-grid, .view:has(> .bizhead) .section-label.k3-group-label, .view:has(> .bizhead) > [data-promo] .shop-highlights, .view:has(> .bizhead) .q-board, .view:has(> .bizhead) .q-list, .view:has(> .bizhead) .q-take, .view:has(> .bizhead) .q-board-note, .view:has(> .bizhead) .job-empty { margin-inline: 16px; } } / ── มุมมอง "List" ของไดเรกทอรี (2026-08-26 เจ้าของสั่งตรงบนจอจริง) ────────── v3.css:3361-3363 ทำ .as-list เป็น "การ์ดแนวตั้งเต็มความกว้าง รูปสูง 220px" — เจ้าของสั่งตรงกันข้าม: การ์ดต้องเล็กลง รูปอยู่ซ้าย ข้อความอยู่ขวา (แนวนอน) ⇒ override เฉพาะ `.as-list` เท่านั้น ไม่แตะ `.directory-grid:not(.as-list)` (มุมมอง Grid) เด็ดขาดตามที่สั่ง. โครงสร้าง `.shop-card` มีลูก 3 ก้อนเรียงกัน (`.shop-cover-wrap` → `.shop-body` → `.shop-footer-actions`, ยืนยันด้วย grep `directory.js`) จึงใช้ CSS grid areas ให้รูปอยู่คอลัมน์ซ้ายเต็มความสูง และข้อความ+ปุ่มอยู่คอลัมน์ขวา แทนการจัดเรียง flex แนวนอนตรง ๆ ซึ่งจะดันปุ่ม ไปเป็นคอลัมน์ที่สาม / .directory-grid.as-list { grid-template-columns: 1fr; gap: 8px; } .directory-grid.as-list .shop-card { display: grid; / ★ สามคอลัมน์แถวเดียว: รูป → ข้อความ → ปุ่ม เดิมเป็นสองคอลัมน์สองแถว (ปุ่มอยู่ ใต้ ข้อความ) ⇒ แถวสูงขึ้นเท่าตัวและปุ่มกลาย เป็นแถบเต็มความกว้าง · แบบสามคอลัมน์อ่านเป็น "แถวรายการ" จริง ๆ สายตาไล่ซ้ายไปขวา และการ์ดเตี้ยลง เห็นร้านได้มากขึ้นต่อหนึ่งหน้าจอ / grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "cover body foot"; align-items: center; } .directory-grid.as-list .shop-cover-wrap { grid-area: cover; width: 96px; height: 100%; / ยกเลิก 220px เดิม — เต็มความสูงของแถว ไม่ใช่สูงคงที่ / aspect-ratio: auto; / บังคับจัตุรัสไม่ได้แล้ว เพราะแถวเตี้ยกว่า 96px ⇒ รูปจะล้น / min-height: 84px; } .directory-grid.as-list .shop-cover-img { height: 100%; object-fit: cover; } .directory-grid.as-list .shop-body { grid-area: body; padding: 8px 4px 8px 10px; gap: 3px; min-width: 0; / ไม่มีตัวนี้ ข้อความยาวจะดันปุ่มหลุดขอบการ์ด / } .directory-grid.as-list .shop-name { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .directory-grid.as-list .shop-desc, .directory-grid.as-list .shop-highlights { display: none; } / การ์ดเล็กลง — ตัดรายละเอียดรอง ชื่อ+สถานะ+ที่ตั้งพอ / / ⚠️ ปุ่มเคยถูกบังคับ `style="flex:1"` ไว้ในตัวสร้างมาร์คอัพ ⇒ ในมุมมอง List มันยืด เต็มความกว้างของคอลัมน์ขวาแล้วกลายเป็น แถบสีเต็มการ์ด ที่หนักกว่าชื่อร้านเอง (เจ้าของเห็นบนจอจริงแล้วสั่งแก้) · ตอนนี้ปุ่มมีคลาส `.shop-cta` แทน inline style ⇒ มุมมอง Grid ยังยืดเต็มความกว้างเหมือนเดิม · มุมมอง List หดเป็นปุ่มจริงชิดขวา / .shop-footer-actions .shop-cta { flex: 1; } .directory-grid.as-list .shop-footer-actions { grid-area: foot; padding: 0 10px; background: none; border-top: 0; align-self: center; } .directory-grid.as-list .shop-footer-actions .shop-cta { flex: 0 0 auto; / ★ หัวใจของการแก้: เลิกยืดเต็มความกว้าง / min-height: 36px; padding: 7px 14px; font-size: 12px; } / สถานะเปิด/ปิดยังเป็นป้ายทับมุมรูปเหมือนเดิม (`.shop-status-tag` เป็นลูกของ `.shop-cover-wrap` — ย้ายด้วย CSS ล้วนไม่ได้) แค่ย่อขนาดให้พอดีรูป 96px / .directory-grid.as-list .shop-status-tag { top: 4px; left: 4px; font-size: 9px; padding: 2px 5px; } .directory-grid.as-list .shop-header-row { flex-wrap: wrap; } .directory-grid.as-list .shop-rating-badge { font-size: 11px; padding: 1px 5px; } .directory-grid.as-list .shop-meta { font-size: 11px; gap: 6px; } / ── หน้าแท็ก / สมุดที่อยู่ / สมาชิก: กฎที่ v3 ไม่มี ── / .explore-hero-card[data-taghero] { background-image: none; background: var(--brand-gradient); } .k3-row[data-tagcomment] .k3-row-name { white-space: normal; overflow: visible; font-weight: 400; line-height: 1.5; } button.k3-row { width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; } button.k3-row[aria-checked="true"] { border-color: var(--accent-pink); background: var(--bg-input-focus); } button.k3-row:hover { background: var(--bg-input-focus); } .k3-btn-row { flex-wrap: wrap; } / ── หน้าสินค้า (shop.js): แกลเลอรีเลื่อนแนวนอน + แถบซื้อ ── / .k3-gallery { display:flex; gap:6px; overflow-x:auto; padding:10px 14px 0; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .k3-gallery::-webkit-scrollbar { display:none; } .k3-gallery img, .k3-gallery-ph { flex:0 0 auto; width:min(72vw,260px); height:190px; border-radius:var(--radius-md); border:1px solid var(--border); } .k3-gallery img { object-fit:cover; cursor:zoom-in; } .k3-gallery-ph { display:grid; place-items:center; font-size:40px; background:var(--bg-input); } .k3-buybar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px 14px; } .k3-buybar .k3-btn { flex:1 1 140px; } .qty-stepper input.qty-value { width:48px; padding:0; background:transparent; border:0; outline:none; font:inherit; text-align:center; -moz-appearance:textfield; } .qty-stepper input.qty-value::-webkit-outer-spin-button, .qty-stepper input.qty-value::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .profile-cover > img { width:100%; height:100%; object-fit:cover; display:block; } .profile-cover.noimg { display:grid; place-items:center; font-size:40px; } .orderlines.k3-bill > .k3-bill-line { align-items:center; } / ── แถบป้ายกำกับในคอลัมน์รายการแชท (v3 วางไว้ในหัวเรื่อง เราวางในแพนรายการ) ── / / เจ้าของ 2026-08-22: «แชท» กับชิป «ทั้งหมด» ชิดกันเกินไป — `.top-header` เป็น flex ที่ไม่มี gap และชั้นวางป้ายกิน flex:1 จนดันมาติดชื่อเรื่องพอดี · ใช้ `margin-inline-start` ไม่ใช่ `margin-left` เพราะแอปมีภาษาอาหรับ ⇒ ต้องสลับข้างเองเมื่อทิศทางกลับด้าน / .top-header .chat-labels-row { flex: 1; min-width: 0; margin-inline-start: 14px; } .top-header .chat-labels-row .header-labels { flex: 1; min-width: 0; overflow-x: auto; } .top-header .chat-labels-row .label-chip-add { flex-shrink: 0; } .chat-threads .chat-labels-row { flex: 0 0 auto; padding: 8px 14px; border-bottom: 1px solid var(--border); } .chat-threads .chat-labels-row .header-labels { flex: 1; padding-bottom: 2px; } .chat-threads .chat-labels-row .label-chip-add { flex-shrink: 0; } .chat-layout.collapsed .chat-labels-row { display: none !important; } / ── คอนโซลบนโดเมนหลัก: หัวหน้า/ตาราง/การ์ดสรุป (v3 ไม่มีคำศัพท์พวกนี้เลย) ── / .k3-pagehead { display:flex; align-items:center; gap:10px; padding:4px 4px 8px; } .k3-pagehead .ic { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--bg-input); border:1px solid var(--border); color:var(--text-dim); } .k3-pagehead .ic svg { width:20px; height:20px; } .k3-pagehead-title { font-size:17px; font-weight:800; color:var(--text-main); margin:0; } .k3-acts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 0; } .k3-acts.sm, td.k3-acts { padding:0; gap:6px; } .k3-card-foot { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--border); } .k3-pad { padding:10px 14px; } .k3-big { font-size:24px; font-weight:800; color:var(--text-main); font-family:var(--font-display); font-variant-numeric:tabular-nums; } .k3-strong { font-weight:800; color:var(--text-main); } .k3-struck { opacity:.6; } .k3-struck td:first-child, .k3-struck .k3-row-name { text-decoration:line-through; } .k3-warn { color:#F59E0B; } .k3-bad { color:#EF4444; } .k3-good { color:#22C55E; } .k3-note-warn { color:#F59E0B; } .k3-note-bad { color:#EF4444; } .k3-note-good { color:#22C55E; } .k3-chip[aria-selected="true"], .k3-chip[aria-checked="true"] { background:var(--bg-input-focus); color:var(--text-main); border-color:var(--border-focus); font-weight:700; } .k3-needs-dot { display:inline-block; width:6px; height:6px; margin-inline-start:5px; border-radius:50%; background:#F59E0B; vertical-align:middle; } .k3-tbl-scroll { overflow-x:auto; } .k3-tbl { width:100%; border-collapse:collapse; font-size:13px; } .k3-tbl th { padding:8px 12px; text-align:start; font-size:11px; font-weight:800; color:var(--text-dim); background:var(--bg-input); border-bottom:1px solid var(--border); white-space:nowrap; } .k3-tbl td { padding:9px 12px; border-bottom:1px solid var(--border); color:var(--text-main); vertical-align:top; } .k3-tbl tbody tr:last-child td { border-bottom:none; } .k3-tbl .k3-num { text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; } .k3-tbl-tap { cursor:pointer; } .k3-tbl-tap:hover td { background:var(--bg-card-hover); } .k3-tbl-tap:focus-visible { outline:2px solid var(--border-focus); outline-offset:-2px; } .k3-tbl-break td { background:var(--bg-input); font-size:11px; font-weight:800; color:var(--text-dim); } .k3-tbl-hot td:first-child { box-shadow:inset 3px 0 0 #F59E0B; } .k3-tbl .k3-out { opacity:.55; } @media (max-width:640px) { .k3-tbl-stack thead { display:none; } .k3-tbl-stack, .k3-tbl-stack tbody, .k3-tbl-stack tr, .k3-tbl-stack td { display:block; width:100%; } .k3-tbl-stack tr { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-input); margin-bottom:8px; padding:4px 0; } .k3-tbl-stack td { border-bottom:none; padding:5px 12px; display:flex; gap:10px; align-items:baseline; } .k3-tbl-stack td::before { content:attr(data-label); flex:0 0 40%; font-size:11px; font-weight:800; color:var(--text-dim); } .k3-tbl-stack td:empty { display:none; } .k3-tbl-stack .k3-num { text-align:end; justify-content:space-between; } .k3-tbl-stack .k3-tbl-break td::before { content:none; } } .k3-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; } .k3-hours { display:flex; flex-direction:column; gap:6px; } .k3-hours-head { display:flex; gap:8px; font-size:11px; font-weight:800; color:var(--text-dim); padding:0 4px; } .k3-hours-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 4px; border-bottom:1px solid var(--border); } .k3-hours-row .field { flex:0 0 auto; } / ══════════════════════════════════════════════════════════════════════════ ชั้นเชื่อม: คำศัพท์ร่วมของแอปที่ตายไปพร้อม app.css ───────────────────────────────────────────────────────────────────────── นี่ไม่ใช่ดีไซน์ใหม่. เจ้าของสั่งตัด app.css ทิ้ง ⇒ คลาสร่วมที่ ~400 โหนด ข้ามไฟล์ใช้กันอยู่ (.row .list .field .hint …) ไม่มีกฎเหลือในทั้ง v3.css และ ไฟล์นี้ ⇒ หน้าที่ยังไม่ถูกแปลงเป็น v3 กลายเป็นข้อความเปล่าไหลลงมา. ทุกบล็อกข้างล่างคือการ แม็ปคำเก่าไปยังสำนวนของ v3 ตัวต่อตัว: .row ⇢ .k3-row · .l1/.l2 ⇢ .k3-row-name/.k3-row-sub · .list ⇢ .k3-body .field ⇢ .auth-field input · .label ⇢ .auth-field (+ span) · .hint ⇢ .k3-sub .acts ⇢ .k3-btn-row · .card/.panel ⇢ .k3-card · .sk* ⇢ .k3-skel เรขาคณิต (padding/gap/size) ยกมาจาก app.css เดิมตรง ๆ เพื่อไม่ให้หน้าที่เคย ถูกจูนแล้วขยับ · สีใช้โทเคนของ v3 ล้วน (โหมดสว่างจึงถูกตามอัตโนมัติ) ยกเว้นสีสถานะที่เป็นค่าคงที่ตามกฎ. ★ ทำไมทุกตัวมี `:not(...)` ★ ไฟล์นี้โหลด หลัง v3.css ⇒ กฎคลาสเดี่ยวของเราชนะฝาแฝดของ v3 ที่ specificity เท่ากันด้วยลำดับซอร์ส. แต่การแปลงหน้าใช้วิธี ใส่สองคลาสพร้อมกัน (`class="row k3-row"`, `card k3-card`, `l1 k3-row-name`, `acts k3-acts`, `section-label k3-group-label`, `sk k3-skel`, `pcard product-card`, `shot product-cover`, `nm product-name`, `editor rz-editor`) ⇒ ถ้าไม่กัน คำเก่าจะทับหน้าที่แปลงเสร็จแล้ว (ฟีด · โปรไฟล์ · แชท · ไดเรกทอรี · สินค้า · งาน · บัตรคิว · ตั้งค่า). `:not()` ทำให้กฎนี้แตะเฉพาะโหนดที่ยังไม่มีเจ้าภาพ. ══════════════════════════════════════════════════════════════════════════ / / ── รายการ + แถว ⇢ .k3-body / .k3-row ───────────────────────────────────── ระยะตาม CLAUDE.md: list content 8/16 · gap 6 · row padding 7/10 · radius 14 / .list:not(.k3-body) { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; } .list.cards:not(.k3-body) { gap: 8px; } .row:not(.k3-row):not(.k3-bill-line) { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-md); background: var(--bg-input); border: 1px solid var(--border); text-align: start; / .row เป็น