@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap");:root{--brand:#0e9f6e;--brand-dark:#057a55;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--bg:#f6f7f9;--card:#fff;--danger:#dc2626}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:IBM Plex Sans Thai,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}a{color:var(--brand-dark)}.container{max-width:960px;margin:0 auto;padding:24px 16px}.narrow{max-width:420px;margin:48px auto;padding:0 16px}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:16px}.logo{font-weight:700;font-size:22px;color:var(--ink);text-decoration:none}.logo span{color:var(--brand)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line)}h1{font-size:26px;margin:0 0 8px}h2{font-size:18px;margin:0 0 12px}.muted{color:var(--muted)}.muted,label{font-size:14px}label{display:block;font-weight:500;margin:12px 0 4px}input,select{width:100%;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:8px;background:#fff}input:focus,select:focus{outline:2px solid var(--brand);border-color:transparent}.btn,button{display:inline-block;padding:10px 18px;font:inherit;font-weight:600;background:var(--brand);color:#fff;border:0;border-radius:8px;cursor:pointer;text-decoration:none}.btn:hover,button:hover{background:var(--brand-dark)}.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{background:var(--bg)}.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--line);padding:6px 12px;font-size:14px}.btn-danger:hover{background:#fef2f2}.full{width:100%;margin-top:16px}.alert{padding:10px 12px;border-radius:8px;font-size:14px;margin-bottom:12px}.alert-error{background:#fef2f2;color:var(--danger)}.alert-ok{background:#ecfdf5;color:var(--brand-dark)}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-weight:500}.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--bg)}.badge-owner{background:#ecfdf5;color:var(--brand-dark)}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1 1 180px}.row>button{flex:0 0 auto}.ws-list a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;text-decoration:none;color:var(--ink);background:#fff}.ws-list a:hover{border-color:var(--brand)}.hero{text-align:center;padding:72px 16px 48px}.hero h1{font-size:40px;line-height:1.25}.hero p{font-size:18px;color:var(--muted);max-width:560px;margin:12px auto 28px}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:16px;gap:16px}code.link{display:block;padding:10px;background:var(--bg);border-radius:8px;word-break:break-all;font-size:13px}.badge-line{background:#e8f8ee;color:#06a64c}.inbox{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 160px);min-height:480px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}.inbox-list{border-right:1px solid var(--line);overflow-y:auto}.tabs{display:flex;border-bottom:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;background:var(--card)}.tab{flex:1 1;text-align:center;padding:12px 4px;text-decoration:none;color:var(--muted);font-size:14px;border-bottom:2px solid transparent}.tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}.conv{display:flex;gap:10px;padding:12px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}.conv:hover{background:var(--bg)}.conv.active{background:#ecfdf5}.conv-body{flex:1 1;min-width:0}.conv-bottom,.conv-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.conv-top .muted{font-size:12px;flex:0 0 auto}.preview{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread{background:var(--brand);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;flex:0 0 auto}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px}.avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--line);font-weight:600}.inbox-chat{display:flex;flex-direction:column;min-width:0}.empty{margin:auto;text-align:center;padding:24px}.chat-head{justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}.chat-actions,.chat-head{display:flex;flex-wrap:wrap}.chat-actions{gap:8px}.chat-actions form{display:flex;gap:6px}.chat-actions select{width:auto;padding:8px}.chat-actions .btn{padding:8px 12px;font-size:14px}.messages{flex:1 1;padding:16px;background:var(--bg)}.bubble-row{display:flex;margin-bottom:8px}.bubble-row.out{justify-content:flex-end}.bubble{max-width:70%;padding:8px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:15px}.bubble-row.out .bubble{background:var(--brand);color:#fff;border-color:var(--brand)}.meta{font-size:11px;opacity:.7;margin-top:2px;text-align:right}.chat-img{max-width:240px;max-height:240px;border-radius:8px;display:block}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.composer textarea{flex:1 1;resize:vertical}.composer textarea,.textarea,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px}.textarea,textarea{width:100%}.live-dot{position:-webkit-sticky;position:sticky;top:0;z-index:1;width:-moz-fit-content;width:fit-content;margin:0 auto 8px;font-size:12px;padding:2px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted)}.live-dot.live{color:var(--brand-dark)}.live-dot.down{color:#b45309}.bubble-sticker{background:transparent!important;border:0!important;padding:0}.bubble-row.out .bubble-sticker .meta{color:var(--muted)}.chat-sticker{width:120px;height:auto;display:block}.bubble-failed{opacity:.85;outline:2px solid var(--danger)}.failed-note{font-size:12px;margin-top:4px;color:#fff}.bubble-row.in .failed-note,.bubble-sticker .failed-note{color:var(--danger)}.link-btn{border:0;padding:0;color:inherit;text-decoration:underline;font-size:12px;cursor:pointer;font-weight:600}.link-btn,.link-btn:hover{background:none}.file-link{color:inherit;text-decoration:underline;word-break:break-all}.icon-btn{background:transparent;border:1px solid var(--line);padding:8px 10px;font-size:18px;line-height:1}.icon-btn:hover{background:var(--bg)}.composer-wrap{position:relative}.composer{align-items:flex-end}.qr-menu{list-style:none;margin:0;padding:4px;position:absolute;bottom:100%;left:12px;right:12px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:5}.qr-menu button{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);font-weight:400;padding:8px 10px;border-radius:6px}.qr-menu button.active,.qr-menu button:hover{background:#ecfdf5}.sticker-picker{border-top:1px solid var(--line);background:#fff}.sticker-tabs{display:flex;gap:4px;padding:6px 8px 0}.sticker-tabs .tab{flex:0 0 auto;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:4px 8px}.sticker-tabs .tab.active{border-bottom-color:var(--brand)}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));grid-gap:4px;gap:4px;max-height:220px;overflow-y:auto;padding:8px}.sticker-grid button{background:transparent;border:0;padding:4px;border-radius:8px}.sticker-grid button:hover{background:var(--bg)}.sticker-grid img{width:100%;height:auto;display:block}.tag{display:inline-block;font-size:11px;padding:1px 8px;margin-left:4px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:500}.tag-row{margin-top:4px;margin-left:-4px}.customer-box{border-bottom:1px solid var(--line);padding:8px 16px;font-size:14px}.customer-box summary{cursor:pointer;color:var(--muted)}.customer-form{padding:4px 0 8px}.customer-form .btn{margin-top:8px;padding:6px 14px;font-size:14px}.inbox{height:calc(100dvh - 160px);grid-template-rows:minmax(0,1fr)}.inbox-chat,.inbox-list{min-height:0}.inbox-chat{position:relative;overflow:hidden}.chat-head,.composer-wrap,.customer-box,.sticker-picker{flex:0 0 auto}.messages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.customer-box[open]{max-height:40%;overflow-y:auto}.composer textarea{max-height:140px;resize:none}.mobile-only{display:none}.back-link{font-size:22px;text-decoration:none;color:var(--ink);padding:0 6px}.check{display:flex;gap:8px;align-items:center;font-weight:400}.check input{width:auto}@media (max-width:760px){.container{padding:12px}.inbox{grid-template-columns:1fr;height:calc(100dvh - 140px)}.inbox-list{border-right:0}.inbox.has-chat .inbox-list,.inbox:not(.has-chat) .inbox-chat{display:none}.mobile-only{display:inline-block}.bubble{max-width:85%}.chat-head{padding:8px 10px}.chat-actions select{max-width:130px}.composer .icon-btn{padding:6px 8px}}.bubble-row.note{justify-content:center}.bubble-row.note .bubble{color:#713f12;max-width:80%}.bubble-row.note .bubble,.icon-btn.note-on{background:#fef9c3;border-color:#fde68a}textarea.note-input{background:#fffbeb;border-color:#fde68a}.search-box{padding:8px;border-bottom:1px solid var(--line);display:flex;gap:6px}.search-box input{padding:8px 10px}.list-tools,.search-box .btn{padding:6px 10px;font-size:13px}.list-tools{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.list-tools .link-btn{color:var(--brand-dark);font-size:13px}.inbox.has-chat{grid-template-columns:300px minmax(0,1fr) 300px}.inbox-panel{border-left:1px solid var(--line);overflow-y:auto;min-height:0;background:#fff}.panel-toggle{display:none}.panel-inner{padding:16px;font-size:14px}.panel-profile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}.panel-profile strong{font-size:16px;margin-top:6px}.avatar-lg{width:72px;height:72px;border-radius:50%;object-fit:cover;font-size:28px}.panel-section{padding:12px 0;border-bottom:1px solid var(--line)}.panel-section h3{font-size:14px;margin:0 0 8px}.chip-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;min-height:42px}.chip-input input{border:0;padding:4px;flex:1 1 100px;min-width:80px;outline:none}.chip-input input:focus{outline:none}.chip-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}.chip{display:inline-flex;align-items:center;gap:4px;background:#eef2ff;color:#3730a3;border-radius:999px;padding:2px 4px 2px 10px;font-size:13px}.chip button{background:transparent;color:inherit;border:0;padding:0 6px;font-size:15px;line-height:1;border-radius:999px}.chip button:hover{background:#e0e7ff}.note-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.note-list li{background:#fefce8;border:1px solid #fde68a;border-radius:8px;padding:8px 10px}.note-list li.note-system{background:#fef2f2;border-color:#fecaca}.note-meta{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:8px;justify-content:space-between}.note-meta .link-btn{color:var(--danger);font-weight:500}@media (max-width:1180px){.inbox.has-chat{grid-template-columns:280px minmax(0,1fr)}.panel-toggle{display:inline-block}.inbox-panel{display:none}.inbox.panel-open .inbox-panel{display:block;position:absolute;top:0;right:0;bottom:0;width:min(320px,100%);z-index:30;box-shadow:-8px 0 24px rgba(0,0,0,.1)}.inbox{position:relative}}@media (max-width:760px){.inbox.has-chat{grid-template-columns:1fr}}.container:has(.inbox){max-width:1440px}.img-btn{border:0;padding:0;cursor:zoom-in;display:block}.img-btn,.img-btn:hover{background:transparent}.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:24px}.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:default}.lightbox-close{position:absolute;top:14px;right:18px;width:44px;height:44px;border-radius:50%;background:hsla(0,0%,100%,.15);color:#fff;font-size:30px;line-height:1;padding:0}.lightbox-close:hover{background:hsla(0,0%,100%,.3)}.ch-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}.ch-line{background:#06c755}.ch-facebook{background:#0866ff}.ch-instagram{background:linear-gradient(45deg,#feda75,#d62976,#4f5bd5)}.badge-facebook{background:#e7f0ff;color:#0866ff}.badge-instagram{background:#fce7f3;color:#be185d}.wait{display:inline-block;font-size:11px;padding:1px 8px;margin-left:4px;border-radius:999px;background:#f3f4f6;color:var(--muted);font-weight:500}.wait-late{background:#fee2e2;color:#b91c1c;font-weight:600}.alert-late{display:block;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;text-decoration:none;font-weight:500}.alert-late:hover{background:#fee2e2}.search-box{flex-wrap:wrap}.filter-row{display:flex;gap:6px;width:100%}.filter-row select{flex:1 1;min-width:0;padding:6px 8px;font-size:13px}.report-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.seg-btn{padding:6px 14px;text-decoration:none;color:var(--muted);font-size:14px}.seg-btn.active{background:var(--brand);color:#fff;font-weight:600}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:12px;gap:12px;margin:12px 0 16px}.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;font-size:13px}.tile-num{font-size:28px;font-weight:700;color:var(--ink);margin:4px 0}.tile-alert{border-color:#fecaca;background:#fef2f2}.chart{width:100%;height:auto;display:block}.chart .grid{stroke:var(--line);stroke-width:1}.chart .axis{fill:var(--muted);font-size:11px}.chart .bar{fill:var(--brand)}.chart .bar-hi{fill:#065f46}.chart .hit{fill:transparent}.chart .bar-group:hover .bar{fill:#065f46}.chart .bar-group:hover .hit{fill:rgba(14,159,110,.06)}.legal{max-width:820px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:24px;margin-bottom:24px;padding:32px}.legal h1{font-size:28px}.legal h2{font-size:18px;margin-top:28px}.legal li,.legal p{font-size:15px}.legal hr{margin:48px 0 32px;border:0;border-top:1px solid var(--line)}.site-footer{text-align:center;color:var(--muted);font-size:13px;padding:24px 16px 32px}@media (max-width:760px){.legal{padding:20px 16px;margin:12px}}.btn-facebook{background:#1877f2;display:inline-flex;align-items:center;gap:10px;padding:12px 20px}.btn-facebook:hover{background:#0f63d1}.btn-facebook span{font-weight:800;font-size:18px;background:#fff;color:#1877f2;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;line-height:1}.page-pick{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}.page-row{border:1px solid var(--line);border-radius:10px;padding:12px}.page-row .check{margin:0;gap:10px}.page-ig{margin:8px 0 0 30px!important;font-size:14px}