:root{--ui-font:Inter,"Segoe UI",sans-serif;font-family:Inter,"Segoe UI",sans-serif;color:#172338;background:#f4f6fa;font-synthesis:none;text-rendering:optimizeLegibility;--navy:#172338;--muted:#8290a3;--line:#e7ebf1;--blue:#3469dc;--blue-soft:#edf3ff;--green:#12a77a;--panel:#fff;--shadow:0 8px 28px rgba(25,42,70,.06)}*{box-sizing:border-box}body{margin:0;min-width:360px;min-height:100vh}.app-shell{min-height:100vh;padding-bottom:34px}.topbar{height:66px;display:flex;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:0 22px;gap:40px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);min-width:240px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#775cf6,#4679ed);color:#fff;font:800 17px Manrope,sans-serif;box-shadow:0 5px 12px #5c76e747}.brand-name{font:800 18px Manrope,sans-serif;letter-spacing:-.7px}.brand-name span{color:#6b7b92;font-weight:500}.module-nav{display:flex;align-self:stretch;gap:27px}.module-tab{border:0;background:none;color:#768399;font:600 13px var(--ui-font);cursor:pointer;position:relative;padding:0 2px}.module-tab.active{color:#2457c8}.module-tab.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:2px;background:#3f6ede}.nav-count{margin-left:4px;padding:2px 6px;border-radius:10px;background:#edf3ff;color:#3567d2;font-size:10px}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:17px}.sync-state{font-size:11px;color:#77859b;display:flex;align-items:center;gap:7px}.sync-state i,.live-dot{width:7px;height:7px;border-radius:50%;background:#23b889;box-shadow:0 0 0 3px #e6f8f2}.icon-button{border:0;background:transparent;color:#68768c;font-size:19px;cursor:pointer;border-radius:8px;width:34px;height:34px}.icon-button:hover{background:#f2f5fa}.profile-button{border:0;background:none;display:flex;align-items:center;gap:8px;color:#35445a;font:600 12px var(--ui-font);cursor:pointer}.chevron{color:#99a4b4;font-size:17px;margin-left:2px}.avatar{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:50%;font-weight:700;letter-spacing:-.3px}.avatar-agent{width:28px;height:28px;background:#ddf3eb;color:#138361;font-size:11px}.avatar-customer{width:38px;height:38px;background:linear-gradient(140deg,#fae7d3,#f2c8ad);color:#995d42;font-size:12px}.avatar.large{width:42px;height:42px}.avatar.tiny{width:19px;height:19px;font-size:9px;margin-right:6px}.workspace{height:calc(100vh - 100px);min-height:600px;display:grid;grid-template-columns:60px 310px minmax(400px,1fr) 350px;background:#fff}.rail{background:#1c2a43;display:flex;align-items:center;flex-direction:column;padding:15px 0;gap:10px}.rail-button{width:38px;height:38px;border:0;background:transparent;color:#9cacc3;border-radius:10px;font-size:18px;cursor:pointer}.rail-button:hover,.rail-button.selected{background:#304566;color:white}.rail-spacer{flex:1}.conversation-list{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;background:#fff}.list-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 18px 13px}.eyebrow{font-size:9px;letter-spacing:1.25px;color:#97a3b4;font-weight:700;margin:0 0 6px}.list-heading h1{font:700 19px Manrope,sans-serif;margin:0;letter-spacing:-.5px}.heading-count{font:600 10px 'DM Sans';color:#7e8ca2;background:#f1f4f8;border-radius:9px;padding:3px 7px;vertical-align:3px;margin-left:4px}.light{background:#f7f9fc}.search-box{margin:0 16px 11px;height:36px;border:1px solid #e7ebf1;border-radius:8px;display:flex;align-items:center;padding:0 10px;gap:7px;color:#97a3b4}.search-box span{font-size:20px}.search-box input{border:0;outline:0;width:100%;font:12px var(--ui-font);color:#35445a;background:transparent}.search-box input::placeholder{color:#a1aabc}.filter-row{display:flex;gap:6px;padding:0 16px 12px;border-bottom:1px solid #eff1f5}.filter-chip{border:1px solid transparent;background:#f6f8fb;border-radius:7px;color:#7d899a;padding:6px 9px;font:500 10px var(--ui-font);white-space:nowrap;cursor:pointer}.filter-chip span{margin-left:4px;color:#9da7b5}.filter-chip.selected{background:#edf3ff;color:#3767cd;border-color:#dce7ff}.filter-chip.selected span{color:#3767cd}.inbox-select{height:36px;margin:11px 13px 6px;padding:0 9px;display:flex;align-items:center;gap:8px;background:#f8f9fb;border:1px solid #edf0f4;border-radius:8px;font-size:11px;color:#506078}.inbox-select .chevron{margin-left:auto}.channel-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#3975df;color:#fff;font:bold 11px Arial}.channel-dot.small{width:14px;height:14px;font-size:9px;vertical-align:-2px}.channel-page-filters{display:grid;grid-template-columns:.78fr 1.22fr;gap:7px;padding:0 13px 7px}.channel-page-filters label,.filter-field,.custom-date-range label{display:grid;gap:4px;min-width:0}.channel-page-filters label>span,.filter-field>span,.custom-date-range label>span{font-size:9px;font-weight:650;color:#8996a8}.channel-page-filters select,.advanced-filter-content .select-field,.custom-date-range input,.advanced-filter-content .filter-field input{width:100%;min-width:0;height:33px;border:1px solid #e6eaf0;border-radius:7px;background:#fff;color:#53647c;padding:0 8px;font:10px var(--ui-font);outline-color:#b9caf0}.advanced-filters{margin:0 11px 8px;border:1px solid #edf0f4;border-radius:8px;background:#fbfcfe;padding:0 8px}.advanced-filters summary{display:flex;align-items:center;gap:7px;height:32px;cursor:pointer;list-style:none;color:#65748a;font-size:10px;font-weight:650}.advanced-filters summary::-webkit-details-marker{display:none}.advanced-filters summary:before{content:"+";display:grid;place-items:center;width:15px;height:15px;border:1px solid #e1e7ef;border-radius:4px;color:#70819a}.advanced-filters[open] summary:before{content:"−"}.advanced-filters summary span{display:grid;place-items:center;min-width:17px;height:17px;margin-left:auto;border-radius:9px;background:#edf3ff;color:#3767cd;font-size:8px}.advanced-filter-content{display:grid;gap:8px;padding:3px 0 10px;max-height:min(32vh,300px);overflow-y:auto;overscroll-behavior:contain}.filter-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 5px}.filter-check-grid label{display:flex;align-items:center;gap:6px;min-width:0;color:#627188;font-size:9px;line-height:1.35}.filter-check-grid input{width:14px;height:14px;accent-color:#416fd1;margin:0;flex:0 0 auto}.custom-date-range{display:grid;grid-template-columns:1fr 1fr;gap:6px}.filter-hint{margin:0;color:#8996a8;font-size:9px;line-height:1.45}.conversation-items{overflow:auto;flex:1;padding:2px 8px 8px}.conversation-item{width:100%;border:0;background:#fff;border-radius:9px;display:flex;gap:10px;text-align:left;padding:12px 9px;cursor:pointer;position:relative;color:inherit}.conversation-item:hover{background:#f8faff}.conversation-item.active{background:#edf4ff}.conversation-item .avatar{width:36px;height:36px}.conversation-copy{min-width:0;flex:1}.conversation-topline{display:flex;align-items:center;justify-content:space-between;gap:6px}.conversation-topline strong{font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-time{color:#9aa5b5;font-size:9px;white-space:nowrap}.conversation-preview{margin:4px 0 0;font-size:10px;color:#8491a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-bottom{display:flex;align-items:center;gap:5px;margin-top:7px}.unread-dot{width:6px;height:6px;border-radius:50%;background:#5180ec}.source-label{font-size:8px;color:#8997aa}.item-tag{font-size:8px;color:#657ba2;background:#f1f4fa;padding:3px 6px;border-radius:5px;margin-left:auto}.list-footer{border-top:1px solid #eef1f5;padding:12px 15px;color:#9aa5b4;font-size:9px;display:flex;align-items:center;gap:7px}.list-footer button{margin-left:auto;border:0;background:none;color:#8996a8;cursor:pointer}.thread-panel{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:#fbfcfe}.thread-header{height:75px;background:#fff;border-bottom:1px solid #edf0f4;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px}.thread-person{display:flex;align-items:center;gap:10px;min-width:0}.thread-person h2{font:700 14px Manrope,sans-serif;margin:0 0 4px}.thread-person p{margin:0;color:#8c98a9;font-size:10px;display:flex;align-items:center;gap:5px}.header-separator{color:#c0c7d1}.status-label{color:#8c98a9}.thread-actions{display:flex;align-items:center;gap:6px}.secondary-button{height:32px;padding:0 10px;border:1px solid #e4e9f0;background:#fff;border-radius:7px;color:#617088;font:600 10px var(--ui-font);cursor:pointer;white-space:nowrap}.secondary-button span{margin-right:4px;font-size:14px}.thread-meta{height:43px;display:flex;align-items:center;padding:0 20px;gap:6px;border-bottom:1px solid #eef1f5;background:#fff}.tag{display:inline-block;font-size:9px;font-weight:600;color:#4970b5;background:#eef4ff;border-radius:5px;padding:5px 8px;white-space:nowrap}.muted-tag{background:#f2f4f7;color:#77869a}.add-tag{border:0;background:transparent;color:#9aa5b4;font:500 9px var(--ui-font);cursor:pointer;padding:5px}.resolve-button{margin-left:auto;border:1px solid #d8eee7;background:#f1fbf7;border-radius:6px;color:#278968;padding:6px 9px;font:600 9px var(--ui-font);white-space:nowrap;cursor:pointer}.messages{flex:1;overflow:auto;padding:22px max(22px,calc((100% - 720px)/2)) 15px;display:flex;flex-direction:column;gap:15px}.day-divider{display:flex;align-items:center;gap:11px;justify-content:center;color:#a2acb9;font-size:9px;margin:0 auto 6px;white-space:nowrap}.day-divider:before,.day-divider:after{content:'';height:1px;background:#e9edf2;width:55px}.message-row{display:flex;gap:7px;align-items:flex-end;max-width:83%}.message-row.outgoing{align-self:flex-end;flex-direction:row-reverse}.message-row.incoming{align-self:flex-start}.message-avatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#f4dfd2;color:#985a40;font-size:8px;font-weight:700;flex:0 0 auto}.message-row.outgoing .message-avatar{background:#d9f2e8;color:#19815f}.message-bubble{padding:10px 12px;border-radius:12px 12px 12px 3px;background:#fff;border:1px solid #edf0f4;color:#394961;font-size:11px;line-height:1.55;box-shadow:0 2px 4px #192b4607}.message-row.outgoing .message-bubble{background:#eaf2ff;border-color:#e3edff;border-radius:12px 12px 3px 12px}.message-meta{font-size:8px;color:#9ca7b5;margin-top:5px}.message-row.outgoing .message-meta{text-align:right}.message-attachment{height:72px;width:175px;border-radius:8px;background:linear-gradient(135deg,#edf2f8,#dce6f2);display:flex;align-items:center;justify-content:center;color:#8b9aaf;font-size:9px;margin-top:7px}.reply-tools{height:43px;display:flex;align-items:center;gap:6px;padding:0 20px;border-top:1px solid #edf0f4;background:#fff;overflow:auto}.reply-tools-label{font-size:8px;color:#a0aab8;letter-spacing:.8px;font-weight:700;white-space:nowrap;margin-right:4px}.quick-reply{border:1px solid #e7ebf1;background:#fff;color:#6f7e93;border-radius:6px;font:500 9px var(--ui-font);padding:6px 8px;white-space:nowrap;cursor:pointer}.quick-reply:hover{color:#3567ce;border-color:#cbd9f7;background:#f8faff}.more-replies{font-weight:700}.composer{min-height:92px;background:#fff;border-top:1px solid #e9edf2;padding:10px 18px 9px}.composer textarea{display:block;width:100%;border:0;resize:none;outline:0;font:12px var(--ui-font);color:#31415a;min-height:34px;max-height:82px}.composer textarea::placeholder{color:#a2adba}.composer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:3px}.composer-tools{display:flex;align-items:center;gap:5px}.composer-tools button{border:0;background:transparent;color:#8e9aac;border-radius:5px;padding:5px 6px;cursor:pointer;font:12px var(--ui-font)}.composer-tools button:hover{background:#f4f6f9}.composer-tools button span{font-size:9px}.send-group{display:flex;align-items:center;gap:9px}.send-hint{font-size:8px;color:#a5afbc}.send-button{border:0;border-radius:7px;background:#3568d4;color:#fff;font:600 10px var(--ui-font);padding:8px 13px;cursor:pointer;box-shadow:0 4px 10px #3568d42c}.send-button span{margin-left:5px}.customer-panel{min-width:0;overflow:auto;background:#f9fafc}.panel-tabs{height:52px;display:flex;background:#fff;border-bottom:1px solid #e9edf3;position:sticky;top:0;z-index:2}.panel-tab{flex:1;border:0;background:#fff;color:#8895a8;font:600 11px var(--ui-font);cursor:pointer;position:relative}.panel-tab.active{color:#2e5fcb}.panel-tab.active:after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:#4672d8;border-radius:2px}.panel-content{padding:13px 13px 20px}.customer-card{background:#fff;border:1px solid #edf0f4;border-radius:9px;padding:13px;margin-bottom:10px;box-shadow:0 2px 4px #24395605}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.section-title>div{display:flex;align-items:center;gap:7px}.section-title h3{font:700 11px Manrope,sans-serif;margin:0;color:#32425a}.section-icon{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#4a70be;background:#edf3ff;font-size:12px}.green-icon{color:#19896b;background:#e9f8f2}.orange-icon{color:#c17832;background:#fff4e7}.purple-icon{color:#7861c8;background:#f2efff}.icon-button.mini{width:25px;height:25px;font-size:13px}.customer-name-row{display:flex;align-items:center;gap:9px;padding:2px 0 11px}.customer-name-row>div,.order-customer>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.customer-name-row strong,.order-customer strong{font-size:11px}.customer-id{font-size:8px;color:#9aa5b4}.customer-name-row .icon-button{margin-left:auto}.detail-list{margin:0;display:grid;gap:8px}.detail-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px}.detail-list dt{font-size:9px;color:#94a0b0}.detail-list dd{margin:0;font-size:9px;color:#50617a;text-align:right;display:flex;align-items:center;gap:4px}.copy-button,.edit-link{border:0;background:transparent;color:#4d74c7;font-size:9px;cursor:pointer}.customer-tags{margin-top:12px;padding-top:10px;border-top:1px solid #eff2f6;display:flex;align-items:center;gap:5px}.customer-tags .tag{font-size:8px}.customer-tags .add-tag{margin-left:auto}.text-link{border:0;background:transparent;color:#4b71c3;font:600 9px var(--ui-font);cursor:pointer;white-space:nowrap}.lead-stage{display:flex;align-items:center;gap:8px;padding:10px 8px;background:#f8fafc;border-radius:7px}.stage-dot{width:8px;height:8px;background:#ecac45;border-radius:50%;box-shadow:0 0 0 3px #fff2dd}.lead-stage div,.next-task div,.empty-order-empty div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.lead-stage strong,.next-task strong,.empty-order-empty strong{font-size:9px;color:#475872}.lead-stage span:not(.stage-dot),.next-task span:not(.task-icon),.empty-order-empty span:not(.empty-order-icon){font-size:8px;color:#9aa5b4}.chevron-button{border:0;background:none;color:#9ca8b8;cursor:pointer}.next-task{display:flex;gap:8px;align-items:flex-start;padding:10px 3px 1px}.task-icon{color:#8d9bb0;font-size:13px}.empty-order{display:flex;align-items:center;gap:8px;padding:6px 2px 2px}.empty-order-icon{width:29px;height:29px;border-radius:8px;background:#fff7ed;color:#d8954d;display:grid;place-items:center}.small-primary{border:0;background:#eef3ff;color:#416dc6;border-radius:5px;padding:6px 8px;font:600 8px var(--ui-font);cursor:pointer}.note-card p{color:#a1abba;font-size:9px;margin:0}.hidden{display:none!important}.order-title{display:flex;align-items:center;justify-content:space-between;margin:2px 1px 13px}.order-title h3{font:750 17px Manrope,sans-serif;margin:0;letter-spacing:-.5px}.order-customer{display:flex;align-items:center;gap:9px;padding:10px;background:#fff;border:1px solid #edf0f4;border-radius:8px;margin-bottom:15px}.order-customer span:not(.avatar){font-size:9px;color:#94a0b0}.field-label{display:block;font-size:9px;font-weight:650;color:#53647c;margin:10px 0 6px}.product-picker{height:36px;border:1px solid #e5eaf1;background:white;border-radius:7px;display:flex;align-items:center;padding:0 9px;gap:7px;color:#99a5b4}.product-picker select,.select-field{border:0;background:transparent;color:#68778c;font:10px var(--ui-font);outline:0;width:100%;min-width:0}.product-picker select option{color:#31415a}.order-lines{margin:9px 0 13px}.empty-lines{border:1px dashed #e2e7ef;border-radius:7px;padding:13px;text-align:center;color:#a5afbc;font-size:9px}.order-line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:9px 8px;background:#fff;border:1px solid #edf0f4;border-radius:7px;margin-bottom:6px}.order-line strong{font-size:9px;display:block}.order-line small{font-size:8px;color:#96a2b2}.quantity-control{display:flex;align-items:center;gap:5px;color:#52627a;font-size:9px}.quantity-control button{width:20px;height:20px;border:1px solid #e6eaf0;background:#fff;border-radius:5px;color:#65758c;cursor:pointer}.line-price{font-size:9px;font-weight:650;white-space:nowrap}.remove-line{grid-column:3;grid-row:1;border:0;background:none;color:#adbac8;cursor:pointer}.order-options{border-top:1px solid #e9edf3;padding-top:5px}.money-input,.select-field,.note-input{width:100%;height:33px;border:1px solid #e5eaf1;border-radius:7px;background:#fff;padding:0 9px;color:#53647c;font:10px var(--ui-font);outline-color:#b9caf0}.money-input{display:flex;align-items:center}.money-input input{width:100%;border:0;outline:0;font:10px var(--ui-font);color:#53647c}.money-input span{font-size:9px;color:#98a4b3}.select-field{display:block}.note-input{height:auto;padding:8px;resize:vertical}.order-total{display:grid;grid-template-columns:1fr auto;gap:8px;padding:13px 2px;margin-top:5px;color:#8996a7;font-size:9px}.order-total strong{font-size:9px;color:#4e5e74;text-align:right}.order-total .grand-label,.order-total .grand-total{padding-top:9px;margin-top:2px;border-top:1px solid #e9edf2;color:#364965;font-weight:700}.order-total .grand-total{font-size:13px;color:#2e5fca}.create-order-button{height:38px;width:100%;border:0;border-radius:7px;background:#3769d5;color:#fff;font:650 10px var(--ui-font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 10px #3568d426}.create-order-button:disabled{background:#bac7dc;box-shadow:none;cursor:not-allowed}.demo-note{text-align:center;color:#a0aab8;font-size:8px;line-height:1.5;margin:9px 8px}.placeholder-view{height:calc(100vh - 100px);min-height:500px;display:grid;place-items:center;background:#f6f8fb}.placeholder-card{max-width:420px;text-align:center;background:white;border:1px solid var(--line);border-radius:15px;padding:34px;box-shadow:var(--shadow)}.placeholder-icon{font-size:30px;color:#6485d3}.placeholder-card h2{font:750 22px Manrope;margin:8px 0}.placeholder-card p:not(.eyebrow){font-size:12px;line-height:1.7;color:#7f8ca0}.return-inbox{border:0;background:#3669d5;color:#fff;border-radius:7px;padding:10px 15px;font:600 11px var(--ui-font);margin-top:9px;cursor:pointer}.demo-banner{position:fixed;bottom:0;left:0;right:0;height:34px;background:#263957;color:#dbe5f4;display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;z-index:5}.demo-banner>span{color:#91b4ff}.demo-banner button{position:absolute;right:15px;border:0;background:transparent;color:#abbad0;font-size:16px;cursor:pointer}.toast{position:fixed;right:24px;bottom:50px;z-index:9;padding:11px 15px;border-radius:8px;background:#1d304a;color:white;font-size:11px;box-shadow:0 8px 24px #1d304a44;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1250px){.workspace{grid-template-columns:54px 280px minmax(340px,1fr) 310px}.brand{min-width:205px}.topbar{gap:24px}.messages{padding-left:18px;padding-right:18px}.thread-header{padding:0 14px}.thread-meta{padding:0 14px}.reply-tools{padding:0 14px}}
@media(max-width:1020px){.workspace{grid-template-columns:54px 270px minmax(330px,1fr)}.customer-panel{position:fixed;z-index:4;right:0;top:66px;bottom:34px;width:340px;box-shadow:-12px 0 28px #1723381a;transform:translateX(100%);transition:transform .22s}.customer-panel.mobile-open{transform:translateX(0)}.thread-panel{border-right:0}.module-nav{gap:16px}.brand{min-width:180px}.sync-state{display:none}}
@media(max-width:700px){.topbar{height:58px;padding:0 12px;gap:12px}.brand{min-width:0}.brand-name{font-size:15px}.module-nav{position:fixed;bottom:34px;left:0;right:0;height:46px;background:#fff;border-top:1px solid var(--line);z-index:6;justify-content:space-around;gap:0}.module-tab{font-size:10px}.topbar-actions{gap:4px}.profile-button>span:not(.avatar){display:none}.workspace{height:calc(100vh - 138px);min-height:490px;grid-template-columns:0 minmax(118px,36%) 1fr}.rail{display:none}.conversation-list{grid-column:2}.thread-panel{grid-column:3}.list-heading{padding:13px 9px 10px}.list-heading h1{font-size:15px}.search-box{margin:0 8px 8px;padding:0 7px}.search-box input{font-size:10px}.filter-row{padding:0 7px 8px;gap:3px}.filter-chip{padding:6px 5px;font-size:8px}.inbox-select{margin:8px 6px 4px;padding:0 5px;font-size:9px}.channel-page-filters{display:grid;grid-template-columns:.78fr 1.22fr;gap:7px;padding:0 13px 7px}.channel-page-filters label,.filter-field,.custom-date-range label{display:grid;gap:4px;min-width:0}.channel-page-filters label>span,.filter-field>span,.custom-date-range label>span{font-size:8px;font-weight:650;color:#8996a8}.channel-page-filters select,.advanced-filter-content .select-field,.custom-date-range input,.advanced-filter-content .filter-field input{width:100%;min-width:0;height:31px;border:1px solid #e6eaf0;border-radius:7px;background:#fff;color:#53647c;padding:0 7px;font:9px var(--ui-font);outline-color:#b9caf0}.advanced-filters{margin:0 13px 7px;border-bottom:1px solid #eff1f5}.advanced-filters summary{display:flex;align-items:center;gap:7px;height:29px;cursor:pointer;list-style:none;color:#65748a;font-size:9px;font-weight:650}.advanced-filters summary::-webkit-details-marker{display:none}.advanced-filters summary:before{content:"+";display:grid;place-items:center;width:15px;height:15px;border:1px solid #e1e7ef;border-radius:4px;color:#70819a}.advanced-filters[open] summary:before{content:"−"}.advanced-filters summary span{display:grid;place-items:center;min-width:17px;height:17px;margin-left:auto;border-radius:9px;background:#edf3ff;color:#3767cd;font-size:8px}.advanced-filter-content{display:grid;gap:8px;padding:2px 0 9px}.filter-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 5px}.filter-check-grid label{display:flex;align-items:center;gap:5px;min-width:0;color:#627188;font-size:8px;line-height:1.3}.filter-check-grid input{width:12px;height:12px;accent-color:#416fd1;margin:0;flex:0 0 auto}.custom-date-range{display:grid;grid-template-columns:1fr 1fr;gap:6px}.filter-hint{margin:0;color:#9aa5b4;font-size:8px;line-height:1.45}.conversation-items{padding:1px 4px}.conversation-item{padding:9px 5px;gap:6px}.conversation-item .avatar{width:28px;height:28px;font-size:9px}.conversation-topline strong{font-size:10px}.conversation-preview{font-size:9px}.conversation-time,.source-label,.item-tag{display:none}.thread-header{height:61px;padding:0 9px}.thread-person{gap:6px}.thread-person .avatar{width:30px;height:30px}.thread-person h2{font-size:11px}.thread-person p{font-size:8px}.thread-actions{gap:1px}.secondary-button{padding:0 5px;height:28px;font-size:8px}.thread-actions .icon-button{display:none}.thread-meta{height:35px;padding:0 8px;gap:3px}.thread-meta .tag{font-size:7px;padding:4px 5px}.thread-meta .add-tag{display:none}.resolve-button{font-size:7px;padding:5px}.messages{padding:14px 8px;gap:12px}.message-row{max-width:95%;gap:4px}.message-avatar{width:17px;height:17px;font-size:7px}.message-bubble{font-size:9px;padding:8px}.message-meta{font-size:7px}.reply-tools{height:38px;padding:0 7px;gap:4px}.reply-tools-label{display:none}.quick-reply{font-size:7px;padding:5px}.composer{padding:8px;min-height:83px}.composer textarea{font-size:10px}.send-hint{display:none}.send-button{padding:7px 9px}.composer-tools button{font-size:10px;padding:4px}.customer-panel{top:58px;width:min(340px,88vw)}.demo-banner{height:30px;font-size:8px}.app-shell{padding-bottom:30px}.placeholder-view{height:calc(100vh - 138px)}}

.mobile-panel-button{display:none}@media(max-width:1020px){.mobile-panel-button{display:inline-flex;align-items:center}}

.conversation-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:7px 10px;border-top:1px solid var(--line);color:#738198;font-size:9px}.conversation-pagination button{width:24px;height:22px;border:1px solid #e6eaf0;border-radius:5px;background:#fff;color:#52627a;font:600 15px var(--ui-font);cursor:pointer}.conversation-pagination button:disabled{opacity:.4;cursor:default}@media(max-width:700px){.conversation-pagination{gap:6px;padding:4px 5px;font-size:8px}.conversation-pagination button{width:20px;height:19px}}

@media(max-height:760px){.workspace{min-height:0}.placeholder-view{min-height:0}.conversation-list,.thread-panel,.customer-panel{min-height:0}.messages{min-height:0}.conversation-items{min-height:0;overflow:auto}.advanced-filter-content{max-height:min(34vh,280px);overflow-y:auto}.channel-page-filters{grid-template-columns:.78fr 1.22fr;gap:5px}}
.text-field{display:block;width:100%;height:34px;border:1px solid #e5eaf1;border-radius:7px;background:#fff;padding:0 9px;color:#53647c;font:10px var(--ui-font);outline-color:#b9caf0}.region-heading{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.region-heading .field-label{margin:10px 0 0}.region-help{margin:4px 0 8px;color:#98a4b3;font-size:8px;line-height:1.45}.recipient-form .select-field{margin-bottom:2px}.recipient-form select:disabled,.recipient-form input:disabled{background:#f7f9fc;color:#98a4b3}
.thread-meta{height:auto;min-height:43px;flex-wrap:wrap;padding-top:5px;padding-bottom:5px}.conversation-labels{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.conversation-labels:empty{display:none}.workflow-dialog{width:min(430px,calc(100vw - 28px));max-height:min(80vh,680px);padding:0;border:1px solid #e5eaf1;border-radius:13px;background:#fff;color:#172338;box-shadow:0 20px 70px #17233840}.workflow-dialog::backdrop{background:#14223a70;backdrop-filter:blur(2px)}.workflow-dialog form{padding:20px}.workflow-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.workflow-dialog-heading h2{font:700 17px Manrope,sans-serif;margin:0;letter-spacing:-.4px}.workflow-select{height:39px;margin-top:2px;padding:0 10px}.workflow-help{min-height:18px;color:#8794a6;font-size:10px;line-height:1.5;margin:10px 0 15px}.workflow-actions{display:flex;justify-content:flex-end;gap:8px}.workflow-cancel,.workflow-save{height:34px;padding:0 13px;border:1px solid #e1e7ef;border-radius:7px;background:#fff;color:#65748a;font:600 10px var(--ui-font);cursor:pointer}.workflow-save{background:#3568d4;color:#fff;border-color:#3568d4}.workflow-save:disabled,.workflow-cancel:disabled{opacity:.55;cursor:wait}.label-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:48vh;overflow:auto;padding:2px}.label-choice{display:flex;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid #edf0f4;border-radius:7px;color:#53647c;font-size:10px;cursor:pointer}.label-choice input{accent-color:#3568d4}.label-choice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-count{font-size:9px;color:#8492a6}.note-card .activity-list{display:grid;gap:7px;margin-top:8px}.activity-entry{padding:8px;background:#f8fafc;border:1px solid #edf0f4;border-radius:7px}.activity-entry-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.activity-entry strong{font-size:9px;color:#475872}.activity-entry time,.activity-entry>span,.activity-entry small{font-size:8px;color:#8b98aa}.activity-entry p{margin:5px 0;color:#64748b;font-size:9px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.activity-entry small{display:block;margin-top:5px}.activity-entry-top time{flex-shrink:0;text-align:right}.workflow-dialog textarea.note-input{width:100%;min-height:74px;border:1px solid #e5eaf1;border-radius:7px;background:#fff;color:#53647c;font:10px var(--ui-font);outline-color:#b9caf0}.workflow-dialog input[type="datetime-local"]{width:100%;padding:0 9px}.workflow-dialog .workflow-select{height:36px;margin-top:0;padding:0 9px;border:1px solid #e5eaf1;background:#fff}.workflow-dialog .workflow-select:disabled,.workflow-dialog textarea:disabled,.workflow-dialog input:disabled{background:#f5f7fa;color:#98a4b3}
.followup-list{display:grid;gap:6px;margin-top:8px}.followup-entry{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;background:#f8fafc;border:1px solid #edf0f4;border-radius:7px}.followup-entry-copy{display:grid;gap:3px;min-width:0}.followup-entry-copy strong{overflow:hidden;color:#475872;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.followup-entry-copy span,.followup-entry-copy small{color:#8b98aa;font-size:8px}.followup-entry-actions{display:flex;flex-shrink:0;gap:4px}.followup-entry-actions button{height:24px;padding:0 7px;border:1px solid #e0e6ee;border-radius:5px;background:#fff;color:#53647c;font:600 8px var(--ui-font);cursor:pointer}.followup-entry-actions button:last-child{border-color:#dbe8df;background:#f2faf4;color:#32804d}.followup-entry-actions button:disabled{opacity:.5;cursor:wait}

@media(max-width:700px){.filter-row{overflow-x:auto;flex-shrink:0}.channel-page-filters{gap:4px;padding:0 6px 6px}.channel-page-filters select,.advanced-filter-content .select-field,.custom-date-range input,.advanced-filter-content .filter-field input{height:28px;font-size:8px}.channel-page-filters label>span,.filter-field>span,.custom-date-range label>span{font-size:7px}.advanced-filters{margin:0 6px 5px}.advanced-filters summary{height:25px;font-size:8px}.advanced-filter-content{gap:6px;padding-bottom:7px}.filter-check-grid{gap:6px 3px}.filter-check-grid label{font-size:7px}.filter-hint{font-size:7px}}
/* Inbox channel rail and anchored Page chooser, following the Smax workflow. */
.channel-rail{position:relative;z-index:4;align-items:center;padding:12px 0;gap:9px;background:#f7f8fc;border-right:1px solid var(--line);overflow:visible}.page-rail-button,.channel-rail-button{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border:0;border-radius:11px;background:transparent;color:#718099;font:700 17px var(--ui-font);cursor:pointer}.page-rail-button{background:#fff;border:1px solid #e7ebf1;color:#5c6d86}.page-rail-button:hover,.channel-rail-button:hover{background:#edf3ff;color:#3268d5}.page-rail-button.has-page-filter{background:#eaf1ff;border-color:#cbdcff;color:#2f66d5}.page-rail-button i{position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:#3769d5;display:none}.page-rail-button.has-page-filter i{display:block}.channel-rail-divider{width:26px;height:1px;background:#e0e5ed;flex:0 0 auto}.channel-rail-options{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;overflow:auto;scrollbar-width:none}.channel-rail-options::-webkit-scrollbar{display:none}.channel-rail-button span{display:grid;place-items:center;width:100%;height:100%}.channel-rail-button[data-channel*="Facebook"]{font-family:Arial,sans-serif;font-size:21px}.channel-rail-button[data-channel*="Instagram"]{font-size:22px}.channel-rail-button.selected{background:#e8efff;color:#2f66d5;box-shadow:inset 0 0 0 1px #d9e5ff}.page-filter-popover{position:absolute;top:8px;left:calc(100% + 8px);z-index:8;width:min(290px,calc(100vw - 58px));padding:10px;background:#fff;border:1px solid #e6eaf0;border-radius:11px;box-shadow:0 14px 36px #15284424}.page-filter-heading{display:flex;align-items:center;justify-content:space-between;padding:1px 2px 8px;color:#40516a;font-size:11px}.page-filter-heading button{width:25px;height:25px;border:0;border-radius:6px;background:transparent;color:#8b98aa;font-size:19px;cursor:pointer}.page-filter-heading button:hover{background:#f1f4f8}.page-filter-search{height:34px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid #e7ebf1;border-radius:7px;color:#9aa6b6}.page-filter-search input{width:100%;border:0;outline:0;background:transparent;color:#42536c;font:10px var(--ui-font)}.page-filter-options{display:grid;gap:3px;max-height:min(42vh,320px);overflow:auto;margin:7px -3px;padding:0 3px}.page-filter-option{width:100%;display:flex;align-items:center;gap:9px;padding:8px 7px;border:1px solid transparent;border-radius:8px;background:#fff;text-align:left;color:#53647c;cursor:pointer}.page-filter-option:hover{background:#f7f9fc}.page-filter-option.selected{background:#eef4ff;border-color:#dce7ff}.page-filter-channel{width:29px;height:29px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#edf3ff;color:#376bd4;font:bold 14px Arial,sans-serif}.page-filter-channel.page-channel-◎{font-size:18px}.page-filter-copy{display:grid;gap:3px;min-width:0;flex:1}.page-filter-copy strong{overflow:hidden;color:#45566f;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.page-filter-copy small{color:#97a3b3;font-size:8px}.page-filter-check{width:17px;color:#2e68d7;font-size:13px;text-align:center}.page-filter-empty{margin:9px 5px;color:#8b98aa;font-size:9px}.page-filter-clear{width:100%;height:31px;border:1px solid #e8ecf2;border-radius:7px;background:#fff;color:#77869a;font:600 9px var(--ui-font);cursor:pointer}.page-filter-clear:hover{background:#f7f9fc;color:#4269b4}
@media(max-width:700px){.workspace{grid-template-columns:40px minmax(118px,36%) 1fr!important}.channel-rail{display:flex!important;grid-column:1;padding:8px 0;gap:7px}.page-rail-button,.channel-rail-button{width:31px;height:31px;border-radius:9px;font-size:14px}.channel-rail-button[data-channel*="Facebook"]{font-size:18px}.channel-rail-button[data-channel*="Instagram"]{font-size:19px}.channel-rail-divider{width:22px}.page-filter-popover{left:calc(100% + 5px);top:5px;width:min(270px,calc(100vw - 52px))}}

.channel-dot.facebook,.page-filter-channel.channel-facebook{background:#3478e5;color:#fff}.channel-dot.instagram,.page-filter-channel.channel-instagram{background:linear-gradient(145deg,#8d48cf,#f14f77 62%,#ffad46);color:#fff}.channel-dot.whatsapp,.page-filter-channel.channel-whatsapp{background:#20b875;color:#fff}.channel-dot.telegram,.page-filter-channel.channel-telegram{background:#29a9df;color:#fff}.channel-dot.tiktok,.page-filter-channel.channel-tiktok{background:#202632;color:#fff}.channel-dot.email,.page-filter-channel.channel-email{background:#e8edf5;color:#52637b}.channel-dot.website,.page-filter-channel.channel-website{background:#edf1f7;color:#52637b}.channel-dot.sms,.page-filter-channel.channel-sms{background:#7b67da;color:#fff}
.filter-row{overflow-x:auto;scrollbar-width:none;flex-shrink:0}.filter-row::-webkit-scrollbar{display:none}

/* Smax-style inbox rail: Page selector at the top, channels in the middle, filters at the bottom. */
.channel-rail{overflow:visible;gap:9px}
.channel-rail-options{flex:1 1 auto;min-height:0;justify-content:flex-start;padding-top:0}
.page-rail-button{width:38px;height:38px;border-radius:50%;background:#f1f3f7;border:0;color:#6e7b90}
.page-rail-button:hover,.page-rail-button.has-page-filter{background:#e9efff;color:#356bd5}
.page-filter-sliders{display:grid;gap:3px;width:16px}
.page-filter-sliders i{position:relative;display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
.page-filter-sliders i:after{position:absolute;top:-2px;width:5px;height:5px;border:1px solid #f7f8fc;border-radius:50%;background:currentColor;content:""}
.page-filter-sliders i:nth-child(1):after{left:3px}
.page-filter-sliders i:nth-child(2):after{left:10px}
.page-filter-sliders i:nth-child(3):after{left:6px}
.page-rail-button>i{position:absolute;right:4px;bottom:4px;width:7px;height:7px;border:2px solid #f7f8fc;border-radius:50%;background:#3769d5;display:none}
.page-rail-button.has-page-filter>i{display:block}
.advanced-filters{position:relative;z-index:9;flex:0 0 auto;width:100%;margin:auto 0 0;padding:0;border:0;border-radius:0;background:transparent}
.advanced-filters summary{position:relative;display:grid;place-items:center;width:38px;height:38px;margin:0 auto;border:0;border-radius:11px;background:transparent;color:#76849a;font-size:0;cursor:pointer;list-style:none}
.advanced-filters summary::-webkit-details-marker{display:none}
.advanced-filters summary:before,.advanced-filters[open] summary:before{display:none;content:none}
.advanced-filters summary:hover,.advanced-filters[open] summary{background:#e9efff;color:#356bd5}
.advanced-filter-glyph{display:block;width:17px;height:16px;background:currentColor;clip-path:polygon(0 5%,100% 5%,62% 48%,62% 100%,38% 82%,38% 48%)}
.advanced-filter-count{position:absolute;right:0;top:0}
.active-filter-count:not(.hidden){position:absolute;top:0;right:0;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border:2px solid #f7f8fc;border-radius:10px;background:#356bd5;color:#fff;font:700 8px var(--ui-font)}
.advanced-filter-content{position:absolute;left:calc(100% + 8px);bottom:0;z-index:10;display:grid;width:min(310px,calc(100vw - 84px));max-height:min(68vh,520px);overflow:auto;overscroll-behavior:contain;gap:10px;padding:12px;border:1px solid #e6eaf0;border-radius:11px;background:#fff;box-shadow:0 14px 36px #15284424}
.advanced-filter-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#40516a;font-size:11px}
.advanced-filter-heading button{height:25px;padding:0 8px;border:1px solid #e8ecf2;border-radius:6px;background:#fff;color:#718099;font:600 9px var(--ui-font);cursor:pointer}
.advanced-filter-heading button:hover{background:#f7f9fc;color:#4269b4}
.advanced-filter-content .filter-check-grid{gap:9px 8px}
.advanced-filter-content .filter-check-grid label{font-size:10px}
.advanced-filter-content .filter-field>span,.advanced-filter-content .custom-date-range label>span{font-size:9px}
.advanced-filter-content .select-field,.advanced-filter-content .filter-field input,.advanced-filter-content .custom-date-range input{height:34px;font-size:10px}
.advanced-filter-content .filter-hint{font-size:9px}
.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}
@media(max-width:700px){.channel-rail{padding:8px 0;gap:7px}.page-rail-button,.channel-rail-button,.advanced-filters summary{width:31px;height:31px;border-radius:9px}.advanced-filter-content{left:calc(100% + 5px);bottom:0;width:min(280px,calc(100vw - 52px));max-height:min(68vh,480px);padding:10px}.advanced-filter-content .filter-check-grid label{font-size:9px}}
/* Reference alignment: compact Page avatar, separate source selector, vertical filter toolbar. */
.topbar{height:48px;background:#111a35;color:#fff;padding:0 14px;gap:25px}.brand-name,.brand-name span{color:#fff}.brand{min-width:210px}.brand-mark{width:32px;height:32px;border-radius:7px}.module-tab{color:#abb4c8;font-size:13px}.module-tab.active{color:#fff;background:#ffffff0b}.profile-button,.topbar .icon-button{color:#c7cfdf}.workspace{height:calc(100vh - 82px);grid-template-columns:60px 390px minmax(300px,1fr) 320px;min-height:0}.channel-rail{background:#fff;padding:7px 0;gap:3px}.channel-rail-options{flex:0 0 auto;overflow:visible;gap:3px}.page-rail-button{border-radius:5px;background:transparent;width:42px;height:42px}.page-rail-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:34px;height:34px}.page-rail-mosaic b{display:grid;place-items:center;font:700 10px var(--ui-font);border-radius:2px;color:#fff;background:#be6882}.page-rail-mosaic b:nth-child(2){background:#457d84}.page-rail-mosaic b:nth-child(3){background:#ad9364}.page-rail-mosaic b:nth-child(4){background:#7a65ab}.channel-rail-button,.rail-condition-filters button,.source-rail-filters summary{width:40px;height:40px;border:0;border-radius:11px;background:transparent;color:#98a5b6;font:700 20px var(--ui-font);display:grid;place-items:center;cursor:pointer}.channel-rail-button.selected,.rail-condition-filters button.selected,.source-rail-filters[open] summary{background:#e6efff;color:#3385ed;box-shadow:none}.channel-rail-button[data-channel=''] span{width:20px;height:20px;border-radius:50%;background:#3385ed;color:#fff;font:700 15px Arial}.rail-condition-filters{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;gap:2px;overflow:auto;scrollbar-width:none;width:100%}.rail-condition-filters button{flex:0 0 38px;height:38px;padding:0}.rail-condition-filters .filter-chip span{display:none}.source-rail-filters{position:relative;flex:0 0 auto}.source-rail-filters summary{list-style:none}.source-rail-filters summary::-webkit-details-marker{display:none}.source-filter-popover{position:absolute;left:calc(100% + 10px);top:0;width:280px;display:grid;gap:13px;background:#fff;border:1px solid #e7ebf1;border-radius:5px;box-shadow:0 8px 22px #18283c24;padding:16px;z-index:12;color:#40516a;font-size:12px}.source-filter-popover .select-field{height:36px;width:100%;border:1px solid #e6eaf0;border-radius:6px;padding:0 9px;font:12px var(--ui-font)}.source-filter-popover .filter-field>span{font-size:11px}.conversation-list .list-heading{display:none}.conversation-list .search-box{height:54px;flex:0 0 54px;margin:0;padding:0 16px;border:0;border-radius:0;background:#fafbfc;border-bottom:1px solid #edf0f4}.search-box input{font-size:13px}.conversation-items{padding:0}.conversation-item{height:64px;border-radius:0;border-bottom:1px solid #f0f1f4;padding:9px 14px;gap:10px}.conversation-item.is-unread{background:#ffe3e4}.conversation-item.active{background:#e1e8ff;box-shadow:inset -2px 0 #ff8b8e}.conversation-item .avatar{width:40px;height:40px;font-size:12px}.conversation-topline strong{font-size:13px}.conversation-item.is-unread .conversation-topline strong{color:#d96475}.conversation-preview{font-size:12px;margin-top:4px}.conversation-time{font-size:10px}.conversation-bottom{display:none}.conversation-pagination,.list-footer{padding:6px 10px;font-size:10px}.page-filter-popover{left:calc(100% + 8px);top:6px;width:320px;border-radius:5px;padding:16px}.page-filter-search{height:40px;background:#f8f9fc;border:0}.page-filter-search input{font-size:13px}.page-filter-option{padding:9px 8px;border:0;border-radius:6px;gap:12px}.page-filter-channel{width:39px;height:39px;border-radius:5px;font-size:20px}.page-filter-copy strong{font-size:13px;font-weight:500}.page-filter-copy small{font-size:10px}.page-filter-heading{font-size:13px}.page-filter-clear{height:37px;font-size:12px}.thread-panel{background:#e9ecf3}.thread-header{height:54px;padding:0 14px}.thread-person h2{font-size:14px}.thread-person p{font-size:11px}.message-bubble{font-size:13px}.message-row.outgoing .message-bubble{background:#3385ed;color:#fff;border-color:#3385ed}.message-meta{font-size:10px}.composer textarea{font-size:13px}.customer-panel{background:#fff}.panel-tabs{height:54px}.panel-tab{font-size:12px}.advanced-filters{margin-top:0}.advanced-filters summary{height:38px;width:40px}.advanced-filter-content{bottom:0;max-height:70vh}
@media(max-width:1250px){.workspace{grid-template-columns:60px 340px minmax(300px,1fr)}.customer-panel{position:fixed;z-index:5;right:0;top:48px;bottom:34px;width:320px;transform:translateX(100%);box-shadow:-12px 0 28px #1723381a}.customer-panel.mobile-open{transform:translateX(0)}.mobile-panel-button{display:inline-flex}}
@media(max-width:700px){.workspace{grid-template-columns:48px minmax(170px,42%) 1fr!important;height:calc(100vh - 128px)}.channel-rail{padding:4px 0}.channel-rail-button,.source-rail-filters summary,.rail-condition-filters button{width:36px;height:36px}.conversation-item{padding:8px;gap:7px}.conversation-item .avatar{width:32px;height:32px}.conversation-topline strong{font-size:12px}.conversation-preview{font-size:11px}.page-filter-popover{width:min(310px,calc(100vw - 60px))}.topbar{height:48px}.module-nav{bottom:34px}}
.app-shell{height:100vh;min-height:0;overflow:hidden}.workspace,.conversation-list,.thread-panel,.channel-rail{min-height:0}.messages,.conversation-items{min-height:0}.thread-header,.thread-meta,.reply-tools,.composer,.conversation-pagination,.list-footer{flex-shrink:0}.channel-rail{max-height:100%;overflow:visible}.rail-condition-filters{flex:1 1 0;min-height:0}.workspace{grid-template-columns:60px 340px minmax(300px,1fr) 300px}.customer-panel{position:static;transform:none;box-shadow:none;width:auto}.mobile-panel-button{display:none}
@media(max-width:1250px) and (min-width:951px){.workspace{grid-template-columns:60px 300px minmax(300px,1fr) 260px}.customer-panel{position:static;transform:none;box-shadow:none;width:auto}.module-nav{gap:14px}.brand{min-width:160px}.thread-actions .secondary-button{padding:0 5px}}
@media(max-width:950px){.workspace{grid-template-columns:54px 280px minmax(260px,1fr)}.customer-panel{position:fixed;right:0;top:48px;bottom:34px;width:300px;transform:translateX(100%);z-index:5}.customer-panel.mobile-open{transform:none}.mobile-panel-button{display:inline-flex}.brand{min-width:130px}.module-nav{gap:10px}}
.page-filter-group-title{padding:13px 8px 4px;color:#39485b;font-size:12px;font-weight:700}.page-filter-heading{padding-bottom:12px}.page-filter-options{max-height:55vh}
/* Facebook and Instagram are sources inside the top source/Page picker. */
.page-filter-popover .source-picker-options{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid #edf0f4;overflow:visible;width:100%}
.source-picker-options .channel-rail-button{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;height:32px;padding:0 9px;border:1px solid #edf0f4;border-radius:6px;font-size:14px}
.source-picker-options .channel-rail-button span{display:grid;place-items:center;width:18px;height:18px;font:700 14px Arial}
.source-picker-options .channel-rail-button strong{font:500 11px var(--ui-font)}
.source-picker-options .channel-rail-button[data-channel=''] span{background:transparent;color:inherit;border-radius:0}
.source-picker-options .channel-rail-button.selected{border-color:#cfddfa;background:#eaf1ff;color:#3479de}
.conversation-order-filter{height:34px;margin:0 16px 10px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid #e4e9ef;border-radius:8px;background:#fff;color:#7d8b9e}
.conversation-order-filter>span:first-child{font-size:14px;color:#5072b1}
.conversation-order-filter select{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#52627a;font:10px var(--ui-font);appearance:none;cursor:pointer}
.conversation-order-filter .order-filter-chevron{font-size:13px;color:#91a0b2;pointer-events:none}
.item-tag{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversation-order-stack{display:grid;gap:8px;width:100%;min-width:0}
.conversation-order-card{padding:9px;border:1px solid #e7ebf0;border-radius:8px;background:#fff;display:grid;gap:8px;min-width:0}
.conversation-order-card-head{display:flex;align-items:center;gap:8px;min-width:0}
.conversation-order-card-head>div{display:grid;gap:3px;min-width:0;flex:1}
.conversation-order-card-head strong{font-size:9px;color:#33445c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversation-order-card-head>div span{font-size:8px;color:#8290a3}
.order-state-pill{flex:0 0 auto;border-radius:12px;padding:4px 7px;font-size:8px;font-weight:700;background:#eef3fa;color:#566b88}
.order-state-pill.is-pending{background:#fff5e7;color:#99631f}
.order-state-pill.is-shipping{background:#eaf2ff;color:#3567c5}
.order-state-pill.is-delivered{background:#e7f7ef;color:#18724f}
.order-state-pill.is-returned{background:#fff0ee;color:#a7473b}
.conversation-order-meta{display:grid;gap:3px;padding:6px 0;border-top:1px solid #eff2f5;color:#718097;font-size:8px;overflow-wrap:anywhere}
.sales-call-editor{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;padding-top:7px;border-top:1px solid #eff2f5}
.sales-call-editor label{font-size:9px;font-weight:700;color:#40536e}
.sales-call-editor select{height:29px;min-width:112px;border:1px solid #dde4ed;border-radius:6px;background:#fff;padding:0 7px;color:#40536e;font:9px var(--ui-font)}
.sales-call-editor textarea{grid-column:1/-1;width:100%;resize:vertical;border:1px solid #e3e8ef;border-radius:6px;padding:6px;color:#465870;font:9px/1.4 var(--ui-font)}
.sales-call-editor button{grid-column:1/-1;justify-self:end}
.conversation-add-order{justify-self:start}
.empty-order-empty{display:flex;align-items:center;gap:8px;width:100%;padding:6px 2px 2px}
.empty-order-empty>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
@media(max-width:600px){.conversation-order-filter{margin-inline:10px}.conversation-order-card-head{align-items:flex-start}.order-state-pill{max-width:84px;text-align:center}}

/* Conversation order cards: separate logistics status from the sales call result. */
:root{--order-pending-bg:#fff4dc;--order-pending-fg:#775515;--order-shipping-bg:#e6eff8;--order-shipping-fg:#315e7c;--order-delivered-bg:#dcefe4;--order-delivered-fg:#0b6047;--order-returned-bg:#f8e6e3;--order-returned-fg:#8b3c32;--call-confirmed-bg:#0b6047;--call-confirmed-fg:#fff;--call-no-answer-bg:#f5e9c8;--call-no-answer-fg:#5c4918;--call-declined-bg:#f5e0dc;--call-declined-fg:#873d33;--call-callback-bg:#e6edf2;--call-callback-fg:#365669;--call-waiting-bg:#edf1ee;--call-waiting-fg:#52645a}
.conversation-order-stack{gap:7px}
.conversation-order-card{padding:10px;border:1px solid #c9d8ce;border-radius:10px;background:#fbfcfb;gap:8px;box-shadow:0 1px 2px #143f2d0c}
.conversation-order-card-head{align-items:flex-start;gap:8px}
.conversation-order-card-head>.empty-order-icon{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border-radius:7px;background:#e5f0e9;color:#0b6047;font-size:15px}
.conversation-order-card-head>.conversation-order-copy{gap:3px;min-width:0;flex:1}
.conversation-order-copy strong{font-size:10px;color:#20382b;letter-spacing:.1px}
.conversation-order-copy span{font-size:9px;color:#536b5b}
.conversation-order-copy small{font-size:8px;line-height:1.35;color:#738479;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-status-stack{display:grid;justify-items:end;gap:4px;flex:0 0 auto}
.order-state-pill,.call-status-pill{display:inline-flex;align-items:center;justify-content:center;max-width:104px;padding:4px 7px;border-radius:999px;font-size:8px;line-height:1.15;font-weight:700;white-space:nowrap}
.order-state-pill.is-pending{background:var(--order-pending-bg);color:var(--order-pending-fg)}
.order-state-pill.is-shipping{background:var(--order-shipping-bg);color:var(--order-shipping-fg)}
.order-state-pill.is-delivered{background:var(--order-delivered-bg);color:var(--order-delivered-fg)}
.order-state-pill.is-returned{background:var(--order-returned-bg);color:var(--order-returned-fg)}
.call-status-pill.is-confirmed{background:var(--call-confirmed-bg);color:var(--call-confirmed-fg)}
.call-status-pill.is-no-answer{background:var(--call-no-answer-bg);color:var(--call-no-answer-fg)}
.call-status-pill.is-declined{background:var(--call-declined-bg);color:var(--call-declined-fg)}
.call-status-pill.is-callback{background:var(--call-callback-bg);color:var(--call-callback-fg)}
.call-status-pill.is-waiting{background:var(--call-waiting-bg);color:var(--call-waiting-fg)}
.conversation-order-details{padding-top:6px;border-top:1px solid #e3ebe5}
.conversation-order-details summary{display:flex;align-items:center;gap:6px;list-style:none;color:#0b6047;font-size:9px;font-weight:650;cursor:pointer}
.conversation-order-details summary::-webkit-details-marker{display:none}
.conversation-order-details summary:after{content:'⌄';margin-left:auto;color:#7d9586;transition:transform .15s ease}
.conversation-order-details[open] summary:after{transform:rotate(180deg)}
.conversation-order-meta{padding:7px 0 2px;border-top:0;color:#62766a;font-size:9px}
.sales-call-editor{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding-top:8px;border-top:1px solid #e3ebe5}
.sales-call-editor label{font-size:9px;color:#365342}
.sales-call-editor select,.sales-call-editor textarea{border-color:#c5d5ca;color:#294536;background:#fff;font-size:10px}
.sales-call-editor select{height:32px}
.sales-call-editor textarea{grid-column:1/-1;min-height:46px}
.sales-call-editor button{grid-column:1/-1;justify-self:stretch;height:30px;border-radius:7px;background:#0b6047;color:white;font-size:9px}
.sales-call-editor button:hover{background:#074a36}
.conversation-add-order{height:30px;border:1px solid #bfd3c6;border-radius:7px;background:#f2f7f3;color:#0b6047;font-size:9px}
.conversation-add-order:hover{background:#e6f0e9}
.thread-meta .tag.order-context-chip{border:1px solid #d8c889;background:#fbf4df;color:#69541d}
.thread-meta .tag.order-context-chip.is-shipping{border-color:#c4d5e2;background:var(--order-shipping-bg);color:var(--order-shipping-fg)}
.thread-meta .tag.order-context-chip.is-delivered{border-color:#b9d8c4;background:var(--order-delivered-bg);color:var(--order-delivered-fg)}
.thread-meta .tag.order-context-chip.is-returned{border-color:#e4c6c0;background:var(--order-returned-bg);color:var(--order-returned-fg)}
.thread-meta .tag.call-context-chip.is-confirmed{border:1px solid #0b6047;background:#0b6047;color:white}
.thread-meta .tag.call-context-chip.is-no-answer{border:1px solid #e4d39c;background:#f5e9c8;color:#5c4918}
.thread-meta .tag.call-context-chip.is-declined{border:1px solid #e5c2bc;background:#f5e0dc;color:#873d33}
.thread-meta .tag.call-context-chip.is-callback{border:1px solid #cddbe3;background:#e6edf2;color:#365669}
.thread-meta .tag.call-context-chip.is-waiting{border:1px solid #d6dfd9;background:#edf1ee;color:#52645a}
.conversation-item{height:auto;min-height:72px;align-items:center}
.conversation-copy{display:grid;align-content:center;gap:0}
.conversation-order-tags{display:flex;align-items:center;gap:4px;min-width:0;margin-top:4px;overflow:hidden}
.conversation-order-tag{display:inline-flex;align-items:center;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;padding:3px 6px;font-size:8px;line-height:1.15;font-weight:700;background:var(--order-pending-bg);color:var(--order-pending-fg)}
.conversation-order-tag.is-shipping{background:var(--order-shipping-bg);color:var(--order-shipping-fg)}
.conversation-order-tag.is-delivered{background:var(--order-delivered-bg);color:var(--order-delivered-fg)}
.conversation-order-tag.is-returned{background:var(--order-returned-bg);color:var(--order-returned-fg)}
.conversation-order-tag.is-confirmed{background:var(--call-confirmed-bg);color:var(--call-confirmed-fg)}
.conversation-order-tag.is-no-answer{background:var(--call-no-answer-bg);color:var(--call-no-answer-fg)}
.conversation-order-tag.is-declined{background:var(--call-declined-bg);color:var(--call-declined-fg)}
.conversation-order-tag.is-callback{background:var(--call-callback-bg);color:var(--call-callback-fg)}

/* Compact, expandable order summary inspired by the order card shown in Pancake. */
.section-title .order-section-count{margin-left:3px;color:#819285;font:600 10px var(--ui-font)}
.empty-order:has(.conversation-order-stack){display:block;padding:0;min-width:0}
.conversation-order-stack{display:grid;gap:5px;width:100%;min-width:0}
.conversation-order-card{display:block;overflow:hidden;padding:0;border:1px solid #0b6047;border-radius:7px;background:#fff;box-shadow:none}
.conversation-order-summary{min-height:38px;display:flex;align-items:center;gap:8px;padding:6px 9px;list-style:none;cursor:pointer;background:#0b8f98;color:#fff}
.conversation-order-summary::-webkit-details-marker{display:none}
.conversation-order-summary:hover{background:#087d87}
.conversation-order-card[open]>.conversation-order-summary{border-radius:5px 5px 0 0}
.order-disclosure-chevron{flex:0 0 10px;width:10px;color:#e7fbf8;font-size:13px;line-height:1;transition:transform .16s ease}
.order-disclosure-chevron:before{content:'›';display:block;font-size:20px;transform:rotate(0deg)}
.conversation-order-card[open] .order-disclosure-chevron:before{transform:rotate(90deg)}
.order-summary-code{min-width:0;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:10px;letter-spacing:.15px}
.order-channel-mark{width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;border-radius:50%;background:#687989;color:#fff;font:700 12px Arial,sans-serif}
.order-channel-mark.is-facebook{background:#1877f2}
.order-channel-mark.is-instagram{background:#7d456b;font-size:14px}
.order-summary-total{margin-left:auto;color:#fff;font-size:10px;white-space:nowrap}
.conversation-order-body{padding:7px 9px 9px;display:grid;gap:7px;color:#536b5b}
.order-flow{display:flex;align-items:center;gap:5px;min-height:27px;padding:2px 0 6px;border-bottom:1px solid #dce5df;overflow:hidden;white-space:nowrap}
.order-flow-step{display:inline-flex;align-items:center;gap:3px;color:#718177;font-size:9px}
.order-flow-step.is-current{color:#087d87;font-weight:700}
.order-flow-step.is-done{color:#0b6047}
.order-flow-separator{color:#aab7ad;font-size:12px}
.order-status-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.order-state-pill,.call-status-pill,.order-payment-pill{max-width:unset;padding:4px 7px;border:1px solid transparent;border-radius:4px;font-size:8px;line-height:1.1;font-weight:650;white-space:nowrap}
.order-state-pill.is-pending{background:#e5f1eb;color:#0b6047;border-color:#c8ddd0}
.order-payment-pill{background:#f6f3ea;color:#806a32;border-color:#e9dfc3}
.order-customer-row{display:flex;align-items:center;gap:8px;padding:2px 0}
.order-detail-icon{width:19px;flex:0 0 19px;color:#667d6f;text-align:center;font-size:15px}
.order-customer-row>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.order-customer-row strong{color:#344b3c;font-size:10px;font-weight:600}
.order-customer-row a,.order-customer-row small{color:#1670cf;font-size:9px;text-decoration:none}
.order-customer-row a:hover{text-decoration:underline}
.order-customer-row small{color:#87948a}
.order-product-list{display:grid;gap:5px;padding:6px 0;border-top:1px dashed #dbe4dc;border-bottom:1px dashed #dbe4dc}
.order-product-line{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.order-product-line>span{display:grid;gap:2px;min-width:0}
.order-product-line strong{overflow:hidden;color:#334b3b;font-size:9px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.order-product-line small{color:#849187;font-size:8px}
.order-product-line>b{flex:0 0 auto;color:#0b6047;font-size:9px;white-space:nowrap}
.order-product-empty{padding:3px 0;color:#9a625a;font-size:9px}
.order-total-row{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#708074;font-size:9px}
.order-total-row strong{color:#0b6047;font-size:12px}
.order-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;padding:7px 0;border-top:1px solid #e5ece6;border-bottom:1px solid #e5ece6}
.order-detail-grid>div{display:grid;align-content:start;gap:2px;min-width:0}
.order-detail-grid .order-detail-wide{grid-column:1/-1}
.order-detail-grid span{color:#89968c;font-size:8px}
.order-detail-grid strong{color:#51675a;font-size:9px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.order-tag-list{display:grid;gap:5px}
.order-tag-row{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:5px}
.order-tag-row>span{padding-top:3px;color:#728176;font-size:8px}
.order-tag-row>div{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.order-user-tag,.order-no-tag{display:inline-flex;align-items:center;min-height:20px;padding:3px 7px;border-radius:4px;background:#edf5ef;color:#38644a;font-size:8px}
.order-no-tag{background:#f3f5f3;color:#8a978d}
.order-call-note{display:grid;gap:3px;padding:6px 8px;border-left:2px solid #d4bd6c;border-radius:3px;background:#fbf8eb;font-size:8px}
.order-call-note strong{color:#776324}
.order-call-note span{color:#645a3d;line-height:1.4}
.conversation-order-body .sales-call-editor{padding-top:7px}
.conversation-order-body .sales-call-editor label{font-size:8px}
.conversation-order-body .sales-call-editor select{min-width:105px}
.conversation-order-body .sales-call-editor textarea{min-height:38px}
.empty-order .conversation-order-body .order-flow{display:flex;flex-direction:row;flex:0 0 auto;align-items:center;gap:5px;}
.empty-order .conversation-order-body .order-flow-step,.empty-order .conversation-order-body .order-flow-separator{flex:0 0 auto}
.empty-order .conversation-order-body .order-status-row{display:flex;flex-direction:row;flex:0 0 auto;align-items:center;}
.empty-order .conversation-order-body .order-product-list{display:grid;flex:0 0 auto}
.empty-order .conversation-order-body .order-product-line{display:flex;flex:0 0 auto;flex-direction:row;align-items:center}
.empty-order .conversation-order-body .order-product-line>span{display:grid;flex:1;min-width:0}
.empty-order .conversation-order-body .order-detail-grid{display:grid;flex:0 0 auto}
.empty-order .conversation-order-body .order-detail-grid>div{display:grid;flex:unset}
.empty-order .conversation-order-body .order-tag-list{display:grid;flex:0 0 auto}
.empty-order .conversation-order-body .order-tag-row{display:grid;flex:0 0 auto;grid-template-columns:42px minmax(0,1fr)}
.empty-order .conversation-order-body .order-tag-row>div{display:flex;flex:1;flex-direction:row;flex-wrap:wrap}
.empty-order .conversation-order-body .order-call-note{display:grid;flex:0 0 auto}
.empty-order .conversation-order-body .sales-call-editor{display:grid;flex:0 0 auto}
.order-flow-step{font-size:9px}
.order-customer-row strong{font-size:11px}
.order-customer-row a,.order-customer-row small{font-size:10px}
.order-product-line strong{font-size:10px}
.order-product-line small,.order-detail-grid strong{font-size:9px}
@media(max-width:600px){.order-summary-code{max-width:90px}.order-flow{gap:3px}.order-flow-step{font-size:8px}}
.conversation-order-tag.is-waiting{background:var(--call-waiting-bg);color:var(--call-waiting-fg)}
.conversation-item.is-unread .conversation-order-tag{border:1px solid #ffffff55}
.conversation-item.active .conversation-order-tag{box-shadow:inset 0 0 0 1px #ffffff28}
@media(max-width:700px){.conversation-item{min-height:68px}.conversation-order-tag{font-size:7px;padding:3px 5px}}


/* ========================================================
   SMAX.AI CUSTOMER INFORMATION PANEL STYLES
   ======================================================== */
.smax-customer-content {
  padding: 12px 14px 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.smax-customer-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smax-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.smax-avatar-wrap .avatar-customer {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
  background: #3b5998;
  color: #fff;
}

.smax-gender-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

.smax-gender-badge.female {
  background: #e54d42;
}

.smax-gender-badge.male {
  background: #1877f2;
}

.smax-customer-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smax-customer-meta strong {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smax-id-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8c8c8c;
}

.smax-header-actions {
  flex-shrink: 0;
}

.smax-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  color: #595959;
  cursor: pointer;
  transition: all 0.15s ease;
}

.smax-report-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #e54d42;
}

.smax-fields-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.smax-field-box {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  padding: 0 10px;
  height: 36px;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
}

.smax-field-box:focus-within {
  background: #fff;
  border-color: #1877f2;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.1);
}

.smax-field-icon {
  font-size: 14px;
  color: #8c8c8c;
  flex-shrink: 0;
}

.smax-field-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 12px;
  color: #1f2937;
  font-family: inherit;
}

.smax-field-input::placeholder {
  color: #9ca3af;
}

.smax-field-phone-box {
  padding-right: 6px;
}

.smax-zalo-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #0068ff;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s;
}

.smax-zalo-pill-btn:hover {
  opacity: 0.9;
}

.smax-section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smax-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.smax-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.smax-orange-accent {
  width: 3px;
  height: 14px;
  background: #ff6b00;
  border-radius: 2px;
  flex-shrink: 0;
}

.smax-block-title strong {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}

.smax-block-sub {
  margin: 1px 0 0 0;
  font-size: 10px;
  color: #8c8c8c;
  font-weight: normal;
}

.smax-block-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.smax-sparkle-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 3px;
  color: #ff6b00;
  border-radius: 4px;
}

.smax-add-circle-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #595959;
  display: grid;
  place-items: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.smax-add-circle-btn:hover {
  border-color: #ff6b00;
  color: #ff6b00;
}

.smax-add-note-drawer {
  background: #fdfdfd;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smax-add-note-drawer textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  outline: 0;
}

.smax-drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.smax-btn-cancel {
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}

.smax-btn-save {
  border: 0;
  background: #ff6b00;
  color: #fff;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.smax-empty-text {
  text-align: center;
  font-size: 12px;
  color: #8c8c8c;
  margin: 6px 0;
}

.smax-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smax-note-card {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11px;
  color: #595959;
}

.smax-note-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #8c8c8c;
  margin-top: 3px;
}

.smax-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  color: #262626;
}

.smax-pill-remove {
  border: 0;
  background: transparent;
  color: #8c8c8c;
  cursor: pointer;
  padding: 0;
  font-size: 10px;
}

.smax-page-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.smax-page-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.smax-page-avatar .avatar-channel {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  background: #1877f2;
  color: #fff;
}

.smax-page-avatar .channel-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  font-size: 8px;
  display: grid;
  place-items: center;
}

.smax-page-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.smax-page-info strong {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smax-page-id {
  font-size: 10px;
  color: #1877f2;
  font-family: monospace;
}

.smax-phone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smax-phone-tag {
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  color: #262626;
}

.smax-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  border-top: 1px solid #edf0f5;
  margin-top: 6px;
  background: #fff;
}

.smax-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #6b7280;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
}

.smax-nav-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.smax-nav-btn.active {
  background: #1877f2;
  color: #fff;
}

/* ========================================================
   PANCAKE ORDERS LIST STYLES (IN INFO TAB)
   ======================================================== */
.pancake-orders-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.pancake-quick-note-box {
  background: #f4f5f7;
  border: 1px solid #e3e6eb;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.pancake-quick-note-box textarea {
  width: 100%;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 11px;
  color: #1f2937;
  font-family: inherit;
  resize: none;
  padding-right: 24px;
}

.pancake-note-img-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #8c8c8c;
  line-height: 1;
}

.pancake-orders-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.pancake-orders-divider .divider-line {
  flex: 1;
  height: 1px;
  background: #e3e6eb;
}

.pancake-orders-divider .divider-text {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}

.pancake-view-all-link {
  border: 0;
  background: transparent;
  color: #00a896;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 4px;
}

/* Pancake Teal Order Cards */
.empty-order:has(.conversation-order-stack) {
  display: block;
  padding: 0;
  min-width: 0;
}

.conversation-order-card {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.conversation-order-summary {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #00a896;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
}

.conversation-order-summary:hover {
  background: #009688;
}

.conversation-order-card[open] > .conversation-order-summary {
  border-radius: 6px 6px 0 0;
}

.conversation-order-summary .order-disclosure-chevron:before {
  content: '▶';
  display: inline-block;
  font-size: 9px;
  transition: transform 0.2s;
  color: #fff;
}

.conversation-order-card[open] .order-disclosure-chevron:before {
  transform: rotate(90deg);
}

.order-summary-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #00a896;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.order-summary-code {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}

.order-channel-mark.is-facebook {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.4);
}

.order-summary-total {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.conversation-order-body {
  padding: 10px;
  border: 1px solid #cce8e4;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pancake-orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  background: #fafafa;
  border: 1px dashed #e3e6eb;
  border-radius: 8px;
  gap: 8px;
  text-align: center;
}

.pancake-orders-empty .empty-icon {
  font-size: 24px;
}

.pancake-orders-empty p {
  margin: 0;
  font-size: 11px;
  color: #8c8c8c;
}

.pancake-start-order-btn {
  background: #00a896;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.pancake-start-order-btn:hover {
  opacity: 0.9;
}

/* ========================================================
   PANCAKE POS ORDER CREATION PANEL (#orderPanel)
   ======================================================== */
.pancake-pos-panel {
  background: #f0f2f5;
  padding: 10px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pancake-pos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 4px;
}

.pancake-pos-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1f2937;
}

.pancake-pos-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.pancake-pos-section {
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.pancake-pos-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f2f5;
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.pancake-pos-section-head .head-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1f2937;
  font-size: 12px;
}

.pancake-pos-section-head .head-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pancake-icon-btn {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #1877f2;
  cursor: pointer;
}

.pancake-pos-section-head .head-link {
  font-size: 11px;
  color: #1877f2;
  cursor: pointer;
}

.pancake-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pancake-field {
  width: 100%;
  height: 34px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12px;
  color: #1f2937;
  font-family: inherit;
  outline: 0;
  transition: all 0.15s;
}

.pancake-field:focus {
  background: #fff;
  border-color: #1877f2;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.1);
}

.pancake-location-btn {
  width: 100%;
  height: 32px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #595959;
  cursor: pointer;
  text-align: left;
}

.pancake-location-btn:hover {
  background: #f0f2f5;
}

.pancake-order-warning {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 6px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #d48806;
}

.pancake-order-warning .warning-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #8c8c8c;
  cursor: pointer;
  font-size: 10px;
}

.pancake-customer-card-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  border: 1px solid #e9edf2;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
}

.pancake-customer-card-pill .pill-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pancake-customer-card-pill .pill-info strong {
  font-size: 11px;
  color: #1f2937;
}

.pancake-customer-card-pill .pill-info span {
  font-size: 10px;
  color: #1877f2;
}

.carrier-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.carrier-badge.viettel {
  background: #fff0f0;
  color: #e54d42;
  border: 1px solid #ffccd0;
}

.pancake-product-table-header {
  display: flex;
  align-items: center;
  background: #f4f6fa;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
}

.pancake-product-table-header .col-name { flex: 2; }
.pancake-product-table-header .col-qty { flex: 1.2; text-align: center; }
.pancake-product-table-header .col-price { flex: 1.2; text-align: right; }
.pancake-product-table-header .col-total { flex: 1.2; text-align: right; }

.pancake-order-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 48px;
}

.pancake-empty-products {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  color: #9ca3af;
  font-size: 11px;
  gap: 4px;
}

.pancake-empty-products .empty-box-icon {
  font-size: 22px;
}

.pancake-order-lines .order-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #fafbfc;
  border: 1px solid #edf0f5;
  border-radius: 6px;
  font-size: 11px;
}

.pancake-order-lines .order-line > div:first-child {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pancake-order-lines .order-line strong {
  font-size: 11px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pancake-order-lines .order-line small {
  font-size: 9px;
  color: #8c8c8c;
}

.pancake-order-lines .quantity-control {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pancake-order-lines .quantity-control button {
  width: 22px;
  height: 22px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #595959;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pancake-order-lines .quantity-control span {
  font-size: 12px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}

.pancake-order-lines .line-price {
  flex: 1.2;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: #1f2937;
}

.pancake-order-lines .remove-line {
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}

.pancake-order-lines .remove-line:hover {
  color: #e54d42;
}

.pancake-product-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.pancake-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  height: 34px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 8px;
  gap: 6px;
}

.pancake-search-box .search-icon {
  font-size: 12px;
  color: #9ca3af;
}

.pancake-product-select {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 11px;
  color: #1f2937;
  font-family: inherit;
  cursor: pointer;
}

.pancake-combo-chip {
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.pancake-add-prod-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 0;
  background: #1877f2;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.pancake-checkbox-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 0;
}

.pancake-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
}

.pancake-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pancake-option-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pancake-option-row.full-width {
  grid-column: 1 / -1;
}

.pancake-option-row span {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
}

.pancake-select-sm, .pancake-input-sm {
  height: 32px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 11px;
  color: #1f2937;
  font-family: inherit;
  outline: 0;
}

.pancake-money-input-sm {
  position: relative;
  display: flex;
  align-items: center;
}

.pancake-money-input-sm input {
  width: 100%;
  height: 32px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 22px 0 8px;
  font-size: 11px;
  color: #1f2937;
  font-family: inherit;
  outline: 0;
}

.pancake-money-input-sm span {
  position: absolute;
  right: 8px;
  font-size: 11px;
  color: #9ca3af;
}

.pancake-note-input {
  width: 100%;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: #1f2937;
  font-family: inherit;
  outline: 0;
  resize: vertical;
}

.pancake-price-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid #f0f2f5;
  padding-top: 8px;
  margin-top: 4px;
}

.pancake-price-summary .summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #595959;
}

.pancake-price-summary .summary-line.grand {
  border-top: 1px dashed #e5e7eb;
  padding-top: 6px;
  margin-top: 2px;
}

.pancake-price-summary .summary-line.grand span {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
}

.pancake-price-summary .summary-line.grand .grand-amount {
  font-size: 15px;
  font-weight: 800;
  color: #e54d42;
}

.pancake-pos-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.pancake-reset-btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #595959;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pancake-reset-btn:hover {
  background: #f5f5f5;
}

.pancake-create-btn {
  height: 36px;
  flex: 1;
  background: #1877f2;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}

.pancake-create-btn:hover {
  background: #166fe5;
}

.pancake-create-btn:disabled {
  background: #b0c4de;
  cursor: not-allowed;
}