:root{--bg:#f5f6f8;--panel:#ffffff;--border:#e4e7ec;--text:#1a1d23;--muted:#6b7280;--accent:#2563eb;--line:#06c755;--facebook:#0866ff;--unread:#ef4444}*{box-sizing:border-box}body,html{margin:0;height:100%}body{font-family:-apple-system,Segoe UI,Noto Sans Thai,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px}button{font:inherit;cursor:pointer}.app{display:flex;flex-direction:column;height:100vh}.topbar{height:52px;flex:0 0 52px;display:flex;align-items:center;gap:20px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar .brand{font-weight:700;font-size:16px}.topbar .stat{color:var(--muted);font-size:13px}.topbar .stat b{color:var(--text)}.layout{flex:1 1;display:flex;min-height:0}.list{width:340px;flex:0 0 340px;border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column}.list .filters{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--border)}.list .filters button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:4px 12px;color:var(--muted)}.list .filters button.on{background:var(--accent);color:#fff;border-color:var(--accent)}.list .items{overflow-y:auto;flex:1 1}.conv{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}.conv:hover{background:#fafbfc}.conv.active{background:#eef4ff}.avatar{width:40px;height:40px;border-radius:50%;background:#dfe3e8;flex:0 0 40px;overflow:hidden;position:relative}.avatar img{width:100%;height:100%;object-fit:cover}.badge-ch{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;border:2px solid #fff}.badge-ch.line{background:var(--line)}.badge-ch.facebook{background:var(--facebook)}.conv .body{flex:1 1;min-width:0}.conv .row1{display:flex;justify-content:space-between;align-items:baseline}.conv .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv .time{color:var(--muted);font-size:12px;flex:0 0 auto;margin-left:8px}.conv .preview{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread{background:var(--unread);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;margin-left:8px}.thread{flex:1 1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}.thread .head{height:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--border)}.thread .head .title{font-weight:600}.thread .head .sub{color:var(--muted);font-size:12px}.thread .head .actions{display:flex;gap:8px;align-items:center}.thread .head .btn,.thread .head select{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 10px}.thread .head .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.messages{flex:1 1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px}.msg{max-width:62%;padding:8px 12px;border-radius:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}.msg.in{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px}.msg.out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}.msg .meta{font-size:11px;opacity:.7;margin-top:4px}.msg.out.failed{background:#b91c1c}.msg.out.queued{opacity:.65}.msg img{max-width:240px;max-height:280px;border-radius:10px;display:block}.msg .msg-text{margin-top:4px}.msg .file-link{display:inline-block;color:inherit;text-decoration:underline}.composer{flex:0 0 auto;display:flex;gap:10px;padding:12px 16px;background:var(--panel);border-top:1px solid var(--border)}.composer textarea{flex:1 1;resize:none;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;height:44px;max-height:140px}.composer button{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:0 20px;font-weight:600}.composer button:disabled{opacity:.5;cursor:default}.composer .attach{background:#fff;color:var(--text);border:1px solid var(--border);padding:0 12px;font-size:18px}.assign-ctl{margin-left:auto;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px}.assign-ctl select{border:1px solid var(--border);border-radius:8px;padding:4px 8px;background:#fff;color:var(--text)}.empty{flex:1 1;display:flex;align-items:center;justify-content:center;color:var(--muted)}.assign-ctl+.me{margin-left:0}.topbar .me{color:var(--muted);font-size:13px}.topbar .logout{border:1px solid var(--border);background:#fff;border-radius:8px;padding:5px 12px;color:var(--muted)}.topbar .logout:hover{color:var(--text)}.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.login-card{width:320px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,.06)}.login-brand{font-size:22px;font-weight:700}.login-sub{color:var(--muted);margin-bottom:6px}.login-card input{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit}.login-card button{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:11px;font-weight:600}.login-card button:disabled{opacity:.5}.login-error{color:#b91c1c;font-size:13px}.topnav{display:flex;gap:4px;margin-left:8px}.topnav a{padding:6px 12px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:500}.topnav a:hover{background:#f2f4f7;color:var(--text)}.topnav a.on{background:#eef4ff;color:var(--accent)}.composer-wrap{position:relative}.rich-panel{position:absolute;bottom:100%;left:12px;right:12px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 -4px 20px rgba(0,0,0,.08);padding:10px;max-height:320px;overflow-y:auto;margin-bottom:6px;z-index:5}.rich-title{font-weight:600;margin-bottom:8px}.hint,.rich-empty{color:var(--muted);font-size:12px}.rich-item{display:block;width:100%;text-align:left;border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 10px;margin-bottom:6px}.rich-item:hover{background:#fafbfc}.rich-item b{display:block}.rich-item span{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:6px;gap:6px}.sticker-grid img{width:100%;cursor:pointer;border-radius:8px}.sticker-grid img:hover{background:#f2f4f7}.flex-form,.flex-form input{display:block}.flex-form input,.rich-panel input{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px;font:inherit}.flex-form .row2{display:flex;gap:6px}.flex-form .row2 input{flex:1 1}.flex-form>button,.rich-panel>button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-weight:600}.composer .attach.on{background:#eef4ff;border-color:var(--accent)}.msg .sticker{width:120px;height:120px;object-fit:contain}.msg.out .sticker{background:transparent}.flex-card{border:1px dashed rgba(255,255,255,.6);border-radius:8px;padding:8px 10px}.msg.in .flex-card{border-color:var(--border)}.page-body{flex:1 1;overflow-y:auto;background:var(--bg)}.sheet{max-width:760px;margin:0 auto;padding:24px 18px 60px}.sheet h2{margin:0 0 4px}.sheet h3{margin:24px 0 8px}.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:12px;display:flex;flex-direction:column;gap:8px}.card input,.card select,.card textarea{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font:inherit;width:100%}.card textarea{min-height:70px;resize:vertical}.card .row2{display:flex;gap:8px}.card .row2>*{flex:1 1}.seg{display:flex;gap:6px}.seg button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:5px 14px;color:var(--muted)}.seg button.on{border-color:var(--accent)}.primary,.seg button.on{background:var(--accent);color:#fff}.primary{border:none;border-radius:8px;padding:10px;font-weight:600}.primary:disabled{opacity:.5}.list-rows{margin-top:10px;display:flex;flex-direction:column;gap:8px}.list-row{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px}.tag{background:#eef4ff;color:var(--accent);border-radius:6px;padding:1px 8px;font-size:12px}.del{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 12px;color:#b91c1c}.pill{border-radius:999px;padding:2px 10px;font-size:12px;background:#f2f4f7;color:var(--muted)}.pill.done{background:#e7f8ee;color:#067a3e}.pill.sending{background:#fff4e5;color:#b45309}.pill.failed{background:#fdecec;color:#b91c1c}.bstatus{text-align:right}.cells{flex-direction:column}.cell,.cells{display:flex;gap:6px}.cell,.cell-no{align-items:center}.cell-no{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:#eef4ff;color:var(--accent);display:flex;justify-content:center;font-size:12px}.cell select{flex:0 0 130px}.cell input{flex:1 1}.rm-info{display:flex;gap:12px;align-items:center}.rm-thumb{width:90px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}.rm-actions{display:flex;gap:6px}.rm-actions button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 12px}