:root{--ink:#19223a;--muted:#8792a7;--line:#edf0f6;--brand:#574ce1;--branddark:#4539c8;--sidebar:#171e35;--bg:#f7f9fc;--surface:#fff;--green:#18a77d;--shadow:0 8px 36px #27325208;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);font-size:14px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled,textarea:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #aaa4ff;outline-offset:2px}[hidden]{display:none!important}.muted{color:var(--muted)}.btn{border:0;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:40px;padding:10px 17px;font-weight:700;white-space:nowrap;transition:background .15s,transform .15s;text-decoration:none}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--brand);color:white;box-shadow:0 4px 11px #564ce32b}.btn.primary:hover{background:var(--branddark)}.btn.secondary{background:#f1f2fc;color:#5144d3}.btn.secondary:hover{background:#e6e5fd}.btn.outline{border:1px solid #dfe4ed;color:#4a5871;background:#fff}.btn.ghost-light{background:#404966;color:#f4f4ff;width:100%;font-size:12px;min-height:33px}.btn.small{font-size:12px;padding:8px 13px;min-height:34px}.btn-large{min-height:50px;width:100%;justify-content:space-between;padding:0 20px}.eyebrow{letter-spacing:2px;font-size:10px;font-weight:800;color:#746ee0}.login-screen{min-height:100vh;display:grid;grid-template-columns:55% 45%;background:#fff}.login-card{width:min(455px,84%);margin:auto}.login-icon,.brand-mark{background:#574ce1;color:#fff;border-radius:13px;display:grid;place-items:center;font-size:24px;font-weight:900;position:relative}.login-icon{width:55px;height:55px;margin-bottom:32px}.login-icon span,.brand-mark span{font-size:12px;color:#8df2d2;position:absolute;right:7px;bottom:4px}.login-card .eyebrow{margin:0 0 15px}.login-card h1{font-size:39px;letter-spacing:-1.6px;line-height:1.14;margin:0;font-weight:830}.login-card h1 span{color:#5f55dc}.login-desc{line-height:1.7;margin:19px 0 30px;max-width:390px}.login-form{display:grid;gap:10px}.login-form label{font-weight:700;font-size:12px;margin-top:3px}.login-form input{border:1px solid #e1e5ef;border-radius:10px;padding:14px 15px;background:#fafbff;outline:0}.login-form input:focus{border-color:#8d85f0;background:#fff}.login-form button{margin-top:13px}.form-error{color:#b32843;background:#fff2f3;border-radius:8px;padding:10px}.login-foot{font-size:11px;color:#9ca5b6;margin-top:38px}.login-visual{background:radial-gradient(circle at 85% 24%,#7169e5 0,#443db4 45%,#26246b 100%);display:grid;place-items:center;overflow:hidden;position:relative}.login-visual:before,.login-visual:after{content:"";position:absolute;width:460px;height:460px;border:1px solid #ffffff20;border-radius:50%}.login-visual:before{right:-140px;top:-160px}.login-visual:after{left:-180px;bottom:-190px}.login-visual-content{width:min(360px,80%);position:relative;z-index:1}.mock-notify{background:#fff;border-radius:16px;display:flex;align-items:center;gap:12px;padding:17px 18px;box-shadow:0 18px 45px #1c145a40;margin-bottom:14px}.mock-notify.shift{transform:translateX(24px)}.mock-notify>div:nth-child(2){flex:1;display:grid;gap:5px}.mock-notify b{font-size:13px}.mock-notify div span{font-size:11px;color:#9ba2b1}.mock-notify .live-dot{background:#28c596}.visual-number{font-size:72px;letter-spacing:-6px;font-weight:850;color:#fff;margin-top:85px}.visual-number span{display:block;font-size:15px;font-weight:500;letter-spacing:0;margin-top:2px;color:#d8d5ff}.app-shell{min-height:100vh;display:flex}.sidebar{width:236px;min-width:236px;background:var(--sidebar);color:#eef0ff;display:flex;flex-direction:column;padding:29px 17px 18px;min-height:100vh;position:sticky;top:0;height:100vh}.brand{display:flex;gap:11px;align-items:center;margin:0 9px 44px}.brand-mark{width:38px;height:38px;font-size:19px;border-radius:11px}.brand-mark span{font-size:10px;right:5px;bottom:3px}.brand strong{font-size:20px;letter-spacing:-.8px;display:block}.brand small{font-size:8px;letter-spacing:2px;color:#828ea9;font-weight:700}.workspace-label,.sidebar-heading{font-size:10px;letter-spacing:1.2px;font-weight:800;color:#7f8ca7;padding-left:13px}.workspace-label{margin-bottom:15px}.nav-item{display:flex;align-items:center;gap:11px;width:100%;border:0;color:#aeb9d4;background:transparent;min-height:43px;padding:10px 11px;text-align:left;border-radius:10px;font-size:12px;font-weight:650;margin-bottom:6px}.nav-item.active,.nav-item:hover{background:#343a60;color:white}.nav-item .nav-icon{width:23px;text-align:center;font-size:20px;color:#b5aefd}.nav-item span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-item b{border-radius:7px;background:#4f5186;padding:2px 7px;font-size:11px;color:#dddfff}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 0 13px;padding-right:6px}.plus-btn{font-size:19px;color:#d1cafa;background:none;border:0;line-height:1}.page-nav{overflow:auto;min-height:0;max-height:33vh}.page-nav .nav-item{margin-bottom:2px}.page-dot{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;font-size:11px;font-weight:800;color:#fff;background:#6168a5}.page-nav .nav-item:nth-child(3n+2) .page-dot{background:#a073a1}.page-nav .nav-item:nth-child(3n+3) .page-dot{background:#4c998f}.nav-add{border:1px dashed #4c5675;background:transparent;color:#a6b3d2;border-radius:10px;padding:11px 5px;font-size:12px;text-align:center;margin:12px 4px}.nav-add span{font-size:17px;vertical-align:-1px}.nav-add:hover{background:#303c5a}.sidebar-spacer{flex:1}.demo-sidebar{background:#262f4b;border:1px solid #3d4564;border-radius:12px;padding:15px 13px;margin:15px 0;color:#b4c0da}.demo-title{color:#e8e4ff;font-weight:750;font-size:12px}.demo-sidebar p{line-height:1.6;font-size:11px;margin:9px 0 13px}.sidebar-user{border-top:1px solid #303b56;display:flex;align-items:center;gap:9px;padding:19px 5px 0}.user-avatar{background:#5556a0;border-radius:10px;width:32px;height:32px;display:grid;place-items:center;font-size:11px;font-weight:800}.user-meta{display:grid;gap:4px;flex:1;min-width:0}.user-meta strong{font-size:11px}.user-meta small{font-size:10px;color:#7e8dab}.sidebar-user button{border:0;background:none;color:#a9b8d0;font-size:23px}.workspace{flex:1;min-width:0;padding:29px 34px 24px;max-width:1800px;margin:0 auto}.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:25px}.breadcrumb{color:#98a3b6;font-size:11px;font-weight:600;margin-bottom:10px}.breadcrumb span{padding:0 9px;color:#d0d6df}.breadcrumb b{color:#6d72a4}.topbar h1{font-weight:830;font-size:28px;letter-spacing:-.9px;margin:0}.top-title-dot{font-size:9px;color:#24b68e;vertical-align:middle;margin-left:4px}.topbar p{color:#97a1b4;font-size:12px;margin:8px 0 0}.top-actions{display:flex;align-items:center;gap:17px}.connection-status{font-size:11px;color:#78869d;white-space:nowrap}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20ba91;margin-right:6px;box-shadow:0 0 0 3px #25ba911b}.overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:25px}.stat{background:#fff;border:1px solid #edf0f6;border-radius:16px;min-height:129px;padding:19px 20px;box-shadow:var(--shadow);position:relative;display:grid;align-content:start}.stat-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;position:absolute;right:17px;top:18px;font-size:17px}.stat-icon.blue{background:#e9efff;color:#647fea}.stat-icon.purple{background:#efeaff;color:#8b67dd}.stat-icon.green{background:#e5f9f3;color:#26a78a}.stat-icon.orange{background:#fff0e7;color:#e99458}.stat>span{font-size:11px;color:#8d99ac;font-weight:700;margin:3px 0 10px}.stat strong{font-size:27px;font-weight:850;letter-spacing:-1px}.stat small{color:#adb6c6;font-size:10px;margin-top:6px}.inbox-layout{display:grid;grid-template-columns:minmax(310px,39%) minmax(0,1fr);min-height:510px;height:calc(100vh - 295px);max-height:900px;border:1px solid #ebeff5;border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.thread-panel{min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column}.thread-header{padding:23px 20px 15px;display:flex;justify-content:space-between;align-items:flex-start}.thread-header h2{font-size:17px;letter-spacing:-.4px;margin:0}.count-chip{background:#eef0fe;color:#6055d7;font-size:10px;border-radius:7px;padding:3px 7px;vertical-align:2px;margin-left:5px}.thread-header p{font-size:11px;color:#a2acbd;margin:7px 0 0}.icon-button{border:1px solid #e9edf3;background:#fff;color:#67748d;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:19px}.icon-button:hover{background:#f5f6fc}.filter-area{padding:0 19px 14px;border-bottom:1px solid var(--line)}.search-box{height:38px;display:flex;align-items:center;border:1px solid #edf0f5;background:#f9faff;border-radius:9px;padding:0 12px;gap:9px}.search-box span{font-size:26px;color:#a5acc2;line-height:0}.search-box input{width:100%;border:0;outline:0;background:none;color:#46516b;font-size:11px;min-width:0}.search-box input::placeholder{color:#adb8c9}.filter-row{display:flex;gap:9px;margin-top:10px}.filter-row select{flex:1;min-width:0;border:1px solid #e8ecf3;border-radius:8px;height:31px;padding:0 9px;background:#fff;color:#69768e;font-size:11px;outline:0}.thread-list{overflow-y:auto;flex:1}.thread-card{border:0;border-bottom:1px solid #f3f4f9;background:#fff;width:100%;padding:17px 17px 17px 19px;text-align:left;display:flex;gap:12px;align-items:flex-start;color:inherit}.thread-card:hover{background:#f9faff}.thread-card.selected{background:#f2f1ff;border-left:3px solid #6758ed;padding-left:16px}.avatar{width:40px;height:40px;min-width:40px;border-radius:13px;display:grid;place-items:center;color:#715bd8;background:#eeeafd;font-weight:800;font-size:13px}.avatar.peach{background:#fff0e7;color:#d28b59}.avatar.lavender{background:#f0ecff;color:#7660d5}.avatar.mint{background:#e9f8f4;color:#2b9a80}.thread-main{flex:1;min-width:0}.thread-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}.thread-name{font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thread-time{font-size:10px;color:#aab3c2;flex-shrink:0}.thread-page{font-size:10px;color:#8a96a9;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}.channel-badge{display:inline-flex;align-items:center;border-radius:5px;padding:2px 6px;font-size:9px;font-weight:800;flex-shrink:0}.channel-badge.message{color:#4d67cf;background:#edf2ff}.channel-badge.comment{color:#9c7147;background:#fff2e6}.thread-snippet{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:11px;color:#9aa4b7}.thread-snippet span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unread-chip{background:#5c4cde;color:#fff;border-radius:50px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;font-size:9px;font-weight:700}.thread-footer{padding:13px 20px;text-align:center;font-size:10px;color:#9eaabb;border-top:1px solid #f1f3f8}.empty-list{text-align:center;color:#98a4b4;font-size:12px;line-height:1.7;padding:50px 22px}.chat-panel{min-width:0;position:relative;display:flex;flex-direction:column}.empty-chat{margin:auto;text-align:center;max-width:360px;padding:35px}.empty-illustration{width:118px;height:118px;border-radius:50%;background:#f3f2ff;margin:0 auto 29px;position:relative;display:grid;place-items:center}.illustration-main{font-size:45px;color:#7970dc}.illustration-small{position:absolute;right:7px;bottom:10px;width:37px;height:37px;border-radius:50%;border:5px solid white;background:#3ac4a4;color:white;display:grid;place-items:center;font-weight:800}.empty-chat h2{font-size:18px;letter-spacing:-.4px}.empty-chat p{font-size:12px;color:#9da9b9;line-height:1.7;margin:10px 0 20px}.active-chat{height:100%;min-height:0;display:flex;flex-direction:column}.chat-header{height:80px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:0 23px;flex-shrink:0}.chat-avatar{width:42px;height:42px;min-width:42px;border-radius:13px}.chat-header-identity{flex:1;min-width:0}.chat-header-identity strong{display:block;font-size:14px;margin-bottom:6px}.chat-header-identity div{font-size:11px;color:#96a1b3;display:flex;gap:7px;align-items:center}.back-btn{display:none;border:0;background:none;color:#7474ac;font-size:30px}.chat-messages{overflow-y:auto;flex:1;padding:25px 25px 18px;background:linear-gradient(#fff,#fff)}.chat-day{text-align:center;font-size:10px;color:#abb5c2;margin:0 0 21px}.bubble-row{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 18px;max-width:80%}.bubble-row.out{align-items:flex-end;margin-left:auto}.bubble{font-size:12px;line-height:1.7;padding:12px 16px;border-radius:14px 14px 14px 4px;background:#f2f4f9;color:#475268;white-space:pre-wrap;overflow-wrap:anywhere}.bubble-row.out .bubble{color:#fff;background:#5c52de;border-radius:14px 14px 4px 14px}.bubble-foot{font-size:10px;color:#acb4c5;margin-top:5px;display:flex;gap:7px;align-items:center}.reply-to-inline{color:#6d64d7;background:transparent;border:0;padding:0;font-size:10px;font-weight:700}.reply-to-inline:hover{text-decoration:underline}.reply-banner{padding:9px 24px;background:#f1f0ff;color:#6355ce;font-size:11px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.reply-banner button{border:0;background:transparent;color:#685bcc;font-size:17px}.composer{padding:16px 21px 18px;border-top:1px solid var(--line);background:#fff;flex-shrink:0}.composer textarea{resize:vertical;max-height:160px;width:100%;border:1px solid #e9ecf3;background:#fbfcff;border-radius:11px;outline:none;padding:13px 14px;font-size:12px;line-height:1.6}.composer textarea:focus{border-color:#aea8f0;background:white}.composer-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}.composer-bottom>div{font-size:10px;color:#aab4c1;line-height:1.6}.composer-bottom .btn{font-size:11px;min-height:35px;padding:7px 13px}.connect-dialog{width:min(650px,calc(100vw - 24px));max-height:90vh;overflow:auto;border:0;border-radius:18px;padding:27px 30px 22px;box-shadow:0 30px 90px #111b3f4b;color:var(--ink)}.connect-dialog::backdrop{background:#17203c9c;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.dialog-head h2{font-size:23px;margin:5px 0}.dialog-head p:not(.eyebrow){font-size:12px;color:#9ba6b7;margin:6px 0 21px}.dialog-head .eyebrow{margin:2px 0 5px}.connect-intro{padding:16px;border:1px solid #e9ebf6;border-radius:13px;display:flex;gap:13px;align-items:center}.facebook-mark{font-size:25px;font-family:Arial;font-weight:900;width:39px;height:39px;border-radius:11px;background:#1877f2;color:white;display:grid;place-items:center}.connect-intro>div:nth-child(2){flex:1;min-width:0}.connect-intro strong{font-size:13px}.connect-intro p{font-size:11px;color:#929cae;line-height:1.5;margin:6px 0 0}.config-help{font-size:11px;color:#8f97ac;background:#f7f8fc;border-radius:9px;padding:11px 13px;line-height:1.6;margin-top:12px}.manual-connect{border-bottom:1px solid #edf0f5;padding:16px 0}.manual-connect summary{font-size:12px;font-weight:800;color:#555ac5;cursor:pointer}.manual-connect p{font-size:11px;color:#97a2b2}.manual-connect form{display:flex;gap:8px}.manual-connect input{flex:1;min-width:0;border:1px solid #e3e8f1;border-radius:8px;padding:10px}.page-manager-heading{font-size:13px;margin:21px 0 10px}.managed-page{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #f1f2f6}.managed-page .page-dot{width:33px;height:33px;border-radius:9px}.managed-page-main{flex:1;min-width:0;display:grid;gap:5px}.managed-page-main strong{font-size:12px}.managed-page-main small{font-size:10px;color:#96a0b1}.managed-page .btn{padding:5px 10px;min-height:30px;font-size:11px}.danger-button{background:none;color:#c75c72;border:0;font-size:11px;font-weight:700}.dialog-bottom{display:flex;justify-content:flex-end;padding-top:18px}.toast{position:fixed;right:24px;bottom:23px;z-index:10000;max-width:min(390px,calc(100vw - 38px));padding:15px 19px;border-radius:12px;background:#242d45;color:#fff;box-shadow:0 12px 40px #17203c33;line-height:1.5;font-size:12px}.toast.error{background:#bd455b}
@media(max-width:1180px){.sidebar{width:204px;min-width:204px}.workspace{padding:25px 20px}.overview{gap:10px}.stat{padding:16px}.inbox-layout{grid-template-columns:minmax(275px,43%) minmax(0,1fr)}.top-actions{gap:10px}.connection-status{display:none}}@media(max-width:850px){.sidebar{width:72px;min-width:72px;padding:20px 10px}.brand{margin:0 auto 34px}.brand>div:nth-child(2),.workspace-label,.sidebar-heading,.nav-item span:nth-child(2),.nav-item b,.nav-add,.sidebar-user .user-meta,.sidebar-user button,.demo-sidebar{display:none!important}.nav-item{justify-content:center;padding:8px 4px}.nav-item .nav-icon{font-size:23px}.page-nav{max-height:45vh}.sidebar-user{justify-content:center}.workspace{padding:22px 15px}.topbar h1{font-size:23px}.overview{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-icon{display:none}.stat{min-height:111px}.inbox-layout{height:calc(100vh - 273px)}}@media(max-width:620px){.sidebar{height:auto;min-height:auto;position:relative;display:none}.workspace{padding:16px 10px}.topbar{margin:4px 7px 17px}.topbar h1{font-size:20px}.topbar p{font-size:10px}.top-actions .btn{font-size:11px;padding:9px 10px}.overview{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}.stat{padding:10px 8px;min-height:86px;border-radius:11px}.stat>span{font-size:9px;margin-bottom:4px}.stat strong{font-size:21px}.stat small{font-size:8px;line-height:1.3}.inbox-layout{display:block;height:calc(100dvh - 250px);min-height:440px}.thread-panel{height:100%;border:0}.chat-panel{display:none;height:100%}.app-shell.chat-active .thread-panel{display:none}.app-shell.chat-active .chat-panel{display:flex}.back-btn{display:block}.chat-header{padding:0 12px}.chat-header .btn{font-size:10px;padding:7px 9px}.chat-messages{padding:19px 15px}.composer{padding:11px 12px}.composer-bottom>div{font-size:9px}.connect-dialog{padding:19px 16px}.connect-intro{flex-wrap:wrap}.connect-intro .btn{width:100%}.managed-page .btn{font-size:10px}.mock-notify{display:none}.login-screen{display:block}.login-card{width:88%;max-width:410px;padding:10vh 0;margin:auto}.login-visual{display:none}.login-card h1{font-size:34px}}
/* Giữ ô soạn thảo luôn nằm trong chiều cao hộp thư (không tràn grid). */
.inbox-layout{grid-template-rows:minmax(0,1fr)}
.thread-panel,.chat-panel,.thread-list,.chat-messages{min-height:0}
@media(max-width:620px){.inbox-layout{grid-template-rows:none}}

/* Facebook OAuth - danh sách Page chọn sau khi Facebook cấp quyền */
.oauth-pending{margin:14px 0;padding:15px;border:1px solid #cad5f3;background:#f4f7ff;border-radius:13px}
.oauth-pending h3{font-size:14px;margin:0 0 6px}
.oauth-pending p{font-size:11px;color:#65728b;margin:0 0 12px;line-height:1.6}
.oauth-pending-list{max-height:255px;overflow-y:auto;display:grid;gap:6px;margin-bottom:14px}
.oauth-page{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid #e5ebf7;border-radius:9px;cursor:pointer}
.oauth-page input{width:18px;height:18px;accent-color:#565be9;flex-shrink:0}
.oauth-page span{display:grid;gap:3px;min-width:0}.oauth-page strong{font-size:12px}.oauth-page small{font-size:10px;color:#8994a9}
.oauth-pending-actions{display:flex;gap:9px;flex-wrap:wrap}
.oauth-pending-actions button{font-size:11px}