.service-toolbar{align-items:center}.service-live{display:flex;align-items:center;gap:10px;color:#6b7d76;font-size:13px}.service-live>i{width:9px;height:9px;border-radius:50%;background:#a5b1ac}.service-live>i.online{background:#24a978;box-shadow:0 0 0 5px rgba(36,169,120,.12)}.service-chat-layout{height:calc(100vh - 190px);min-height:620px;display:grid;grid-template-columns:310px minmax(420px,1fr) 285px;overflow:hidden;border:1px solid #e1ebe7;border-radius:20px;background:#fff;box-shadow:0 14px 38px rgba(27,72,58,.06)}.service-conversations{display:flex;min-width:0;flex-direction:column;border-right:1px solid #e6eeeb;background:#f8fbf9}.service-filter{display:flex;gap:6px;padding:14px;border-bottom:1px solid #e5ede9;overflow:auto}.service-filter button{height:34px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#71817b;white-space:nowrap;cursor:pointer}.service-filter button.active{background:#dff2e9;color:#0d7759;font-weight:650}.service-conversation-list{overflow:auto}.service-conversation{width:100%;padding:16px;display:flex;gap:12px;border:0;border-bottom:1px solid #e7efeb;background:transparent;text-align:left;cursor:pointer}.service-conversation:hover,.service-conversation.active{background:#fff}.service-conversation.active{box-shadow:inset 3px 0 #168c67}.service-avatar{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#dff1e9;color:#137b5d;font-weight:750}.service-conversation-main{min-width:0;flex:1}.service-conversation-head,.service-conversation-preview{display:flex;align-items:center;justify-content:space-between;gap:10px}.service-conversation-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#264c40;font-size:14px}.service-conversation-head time{flex:none;color:#9aa6a1;font-size:11px}.service-conversation-preview{margin-top:6px}.service-conversation-preview span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#74847e;font-size:12px}.service-conversation-preview em{min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#e76d55;color:#fff;font-size:10px;font-style:normal}.service-dialog{min-width:0;display:flex;flex-direction:column;background:#f3f7f5}.service-dialog-head{min-height:72px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4ece8;background:#fff}.service-dialog-head b,.service-dialog-head span{display:block}.service-dialog-head b{color:#234a3d;font-size:16px}.service-dialog-head span{margin-top:4px;color:#7b8b85;font-size:12px}.service-status-select{height:36px;border:1px solid #d9e5e0;border-radius:10px;background:#f8fbf9;color:#365e52}.service-messages{flex:1;overflow:auto;padding:24px}.service-message{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:18px}.service-message.mine{align-items:flex-end}.service-message>small{margin:0 5px 6px;color:#8c9994}.service-bubble{max-width:72%;padding:11px 14px;border-radius:5px 16px 16px 16px;background:#fff;color:#294c41;font-size:14px;line-height:1.6;box-shadow:0 6px 18px rgba(28,72,58,.05);white-space:pre-wrap;word-break:break-word}.service-message.mine .service-bubble{border-radius:16px 5px 16px 16px;background:#128563;color:#fff}.service-message img,.service-message video{max-width:360px;max-height:320px;border-radius:14px;background:#dfe8e4}.service-message video{width:360px;height:230px}.service-product-message{width:340px;padding:10px;display:flex;align-items:center;gap:11px;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(27,72,58,.07);cursor:pointer}.service-product-message img{width:70px;height:64px;object-fit:cover;border-radius:10px}.service-product-message div{min-width:0;flex:1}.service-product-message small,.service-product-message b{display:block}.service-product-message small{color:#218466}.service-product-message b{margin-top:4px;color:#284f42}.service-composer{padding:13px 16px;display:flex;align-items:flex-end;gap:10px;border-top:1px solid #e1ebe7;background:#fff}.service-composer textarea{height:68px;max-height:120px;flex:1;box-sizing:border-box;padding:12px;border:1px solid #dce7e2;border-radius:13px;resize:none;background:#f8fbf9}.service-composer>button{height:42px}.service-upload{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#e9f5ef;color:#158361;font-size:22px;cursor:pointer}.service-upload input{display:none}.service-context{overflow:auto;padding:18px;border-left:1px solid #e5ede9;background:#fff}.service-context-card{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #edf2ef}.service-context-card h3{margin:0 0 12px;color:#284e42;font-size:14px}.service-customer{display:flex;align-items:center;gap:11px}.service-customer .service-avatar{width:48px;height:48px}.service-customer b,.service-customer span{display:block}.service-customer span{margin-top:4px;color:#7b8b85;font-size:12px}.service-product-context{display:flex;gap:11px}.service-product-context img{width:72px;height:68px;object-fit:cover;border-radius:11px;background:#e8efec}.service-product-context b,.service-product-context span{display:block}.service-product-context span{margin-top:5px;color:#7a8983;font-size:12px}.service-context label{display:block;margin-top:12px;color:#687b74;font-size:12px}.service-context select{width:100%;height:38px;margin-top:6px;border:1px solid #dce6e2;border-radius:10px;background:#f8fbf9}.service-product-send{display:flex;gap:8px;margin-top:8px}.service-product-send select{margin:0;min-width:0;flex:1}.service-product-send button{flex:none}.service-tags{display:flex;flex-wrap:wrap;gap:6px}.service-tags span{padding:5px 8px;border-radius:999px;background:#eaf5f0;color:#36725f;font-size:11px}.service-empty{padding:40px 20px;text-align:center;color:#889790;font-size:13px}.service-empty.centered{margin:auto}.service-error{color:#b55749}.service-message-time{margin-top:5px;color:#9aa6a1;font-size:10px}@media(max-width:1180px){.service-chat-layout{grid-template-columns:280px minmax(390px,1fr)}.service-context{display:none}}@media(max-width:820px){.service-chat-layout{grid-template-columns:1fr}.service-conversations{display:none}.service-dialog{display:flex}}