@import url('/base.css');
:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#1d2c36;background:#f3f5f7;font-synthesis:none;--green:#116b55;--green-light:#eaf5ef;--line:#e7ebee;--muted:#7c8793;--navy:#142c32}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #73bda7;outline-offset:3px}input,textarea{border:1px solid #dde3e7;border-radius:9px;background:white;padding:12px 13px;color:inherit;outline:none;width:100%;font-size:1rem}input:focus,textarea:focus{border-color:#459782;box-shadow:0 0 0 3px #116b5510}textarea{resize:vertical;line-height:1.65}label{display:block;font-size:.875rem;font-weight:600;margin:18px 0 8px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}p{line-height:1.8}small{font-size:.8125rem;color:var(--muted);line-height:1.7}[hidden]{display:none!important}.primary,.secondary{border:1px solid transparent;border-radius:8px;padding:11px 17px;font-size:.875rem;font-weight:600;display:inline-flex;justify-content:center;align-items:center;gap:10px;line-height:1.4}.primary{background:var(--green);color:white;box-shadow:0 3px 6px #116b5512}.primary:hover{background:#0d5947}.secondary{background:white;border-color:#dbe2e6;color:#41515e}.secondary:hover{background:#f5f8f7}.wide{width:100%}.icon-button{border:0;background:transparent;color:#7c8793;border-radius:7px;min-width:36px;height:36px;font-size:1.5rem;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#edf2f3;color:#1b4740}.eyebrow{font-size:.75rem;letter-spacing:.17em;font-weight:700;color:#74838b}.text-button{border:0;background:transparent;color:var(--muted);font-size:.875rem;padding:14px}.error{color:#bc453f;font-size:.875rem}.notice{background:#f1f6f3;border:1px solid #e0ebe5;border-radius:8px;padding:14px;font-size:.875rem;line-height:1.8;color:#526b60}.button-row{display:flex;gap:10px;margin:18px 0}.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}
.login-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:100px 24px;background:radial-gradient(ellipse at 80% 20%,#e3efed 0,transparent 45%),#f3f5f7}.login-brand{position:absolute;top:40px;left:50px;display:flex;align-items:center;gap:12px;font-size:1.35rem;font-weight:700}.brand-icon{background:var(--green);color:white;font-size:2rem;width:42px;height:42px;border-radius:12px;text-align:center}.brand-en{display:block;font-size:.75rem;letter-spacing:.12em;margin-top:2px;color:#7d8c94}.login-card{width:440px;background:white;border:1px solid var(--line);border-radius:18px;padding:36px;box-shadow:0 20px 70px #192e3907}.login-card h1{font-size:2rem;line-height:1.5;margin:14px 0}.login-card p{color:var(--muted);font-size:.875rem}.login-card .primary{margin:20px 0 12px;justify-content:space-between}.login-card .secondary{margin-bottom:8px}.login-card small{display:block;border-top:1px solid var(--line);padding-top:20px}.login-foot{position:absolute;bottom:30px;font-size:.75rem;letter-spacing:.1em;color:#89969d}
.workspace{display:flex;min-height:100dvh}.rail{position:fixed;inset:0 auto 0 0;width:80px;background:var(--navy);display:flex;align-items:center;flex-direction:column;padding:26px 10px 16px;z-index:10}.rail-logo{width:42px;height:42px;border-radius:12px;color:white;background:#317462;font-size:2.1rem;text-align:center;line-height:42px;margin-bottom:40px}.rail-button{width:58px;border:0;background:none;color:#a4b5bb;display:flex;align-items:center;flex-direction:column;gap:7px;padding:12px 5px;border-radius:10px;margin:4px 0}.rail-button span{font-size:.75rem}.rail-button.selected{background:#29464c;color:#def1e8}.rail-button:hover{background:#29464c}.rail-spacer{flex:1}.operator-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#33545a;color:#e0e8e9;font-size:.8125rem;margin-bottom:16px}.logout{padding:8px}.main-shell{margin-left:80px;width:calc(100% - 80px)}.topbar{height:76px;border-bottom:1px solid var(--line);padding:0 36px;display:flex;align-items:center;justify-content:space-between;background:#ffffffb0}.wordmark{font-size:1rem;font-weight:700;display:flex;gap:18px;align-items:center}.wordmark>span{color:#bac3c9;font-weight:400}.wordmark .workspace-name{color:#707d87;font-size:.875rem}.topbar-right{display:flex;align-items:center;gap:22px}.mode-pill{font-size:.75rem;background:#edf3f1;padding:6px 10px;border-radius:6px;color:#456b5c}.live-status{font-size:.8125rem;color:#718078;display:flex;align-items:center;gap:7px}.live-status:before{content:'';width:6px;height:6px;border-radius:50%;background:#6c9e84}.live-status.offline:before{background:#d29c42}.demo-banner{background:#fff5dc;border-bottom:1px solid #efe1bd;font-size:.8125rem;min-height:38px;padding:8px 36px;color:#856829;display:flex;justify-content:space-between;align-items:center;gap:12px}.demo-banner button{border:0;background:none;color:#856829;text-decoration:underline;font-size:.8125rem;white-space:nowrap}.page-heading{padding:30px 36px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px}.page-heading h1{font-size:1.6rem;margin:8px 0 6px;display:flex;align-items:center;gap:12px;letter-spacing:-.03em}.page-heading p{font-size:.875rem;color:#8c969e;margin:0}.count-badge{font-size:.8125rem;color:#78878e;background:#e5eaed;border-radius:6px;padding:3px 8px;letter-spacing:0}.plus{font-size:1.15rem;line-height:1}.inbox-grid{margin:0 36px;display:grid;grid-template-columns:300px minmax(0,1fr);height:calc(100dvh - 300px);min-height:510px;border:1px solid #e0e6e9;border-radius:12px;overflow:hidden;background:white;box-shadow:0 5px 15px #20303903}.inbox-grid.with-details{grid-template-columns:280px minmax(0,1fr) 260px}.conversation-panel{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;background:#fcfdfd}.search-box{display:flex;align-items:center;margin:20px 18px 14px;background:#f1f4f6;border-radius:7px;padding:0 12px;color:#98a3aa}.search-box svg{width:16px;height:16px}.search-box input{border:0;background:none;font-size:.875rem;padding:11px 0 11px 9px;box-shadow:none;min-width:0}.filters{display:flex;gap:18px;padding:0 20px;border-bottom:1px solid var(--line)}.filters button{position:relative;border:0;background:none;padding:12px 0 15px;font-size:.8125rem;color:#9099a1;white-space:nowrap}.filters button.active{color:#24624f;font-weight:600}.filters button.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#317962}.filters span{font-size:.75rem;margin-left:3px}.customer-list{overflow:auto;flex:1;padding:8px}.customer-item{border:0;background:transparent;display:flex;align-items:flex-start;width:100%;gap:11px;text-align:left;padding:17px 12px;border-radius:9px;margin:3px 0;color:inherit;position:relative}.customer-item:hover{background:#f0f5f3}.customer-item.active{background:#e9f3ee}.avatar{width:42px;height:42px;flex-shrink:0;display:flex;justify-content:center;align-items:center;background:#e3ece7;color:#437663;border-radius:12px;font-size:1rem;font-weight:600}.avatar.blue{background:#e7edf5;color:#5d7798}.avatar.orange{background:#f3e9db;color:#ac8550}.customer-item .avatar{width:40px;height:40px}.customer-info{min-width:0;flex:1}.customer-row{display:flex;align-items:center;gap:5px;justify-content:space-between}.customer-row strong{font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.customer-row time{font-size:.75rem;white-space:nowrap;color:#97a0a7}.preview-message{font-size:.8125rem;color:#8b979e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:8px;padding-right:15px}.unread-badge{position:absolute;right:13px;bottom:17px;border-radius:9px;background:#247d60;color:white;min-width:17px;text-align:center;padding:1px 4px;font-size:.75rem}.list-footer{padding:16px 20px;color:#9aa3a9;font-size:.75rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:7px}.tiny-square{width:10px;height:10px;border:1.5px solid #8dafa0;border-radius:3px}.list-empty{padding:40px 12px;text-align:center;color:#98a2aa;font-size:.875rem;line-height:1.9}.chat-panel{min-width:0;min-height:0;background:#fff}.empty-state{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px;color:#93a0a7}.empty-icon{width:85px;height:85px;border-radius:25px;background:#f0f6f2;color:#89b09d;display:grid;place-items:center;margin-bottom:15px}.empty-icon svg{width:43px;height:43px;stroke-width:1.4}.empty-state h2{font-size:1.15rem;color:#465b63;font-weight:600;margin-bottom:0}.empty-state p{font-size:.875rem;margin:12px 0 24px}.chat-content{height:100%;display:flex;flex-direction:column}.chat-header{display:flex;gap:12px;align-items:center;min-height:85px;padding:18px 26px;border-bottom:1px solid var(--line)}.chat-heading{flex:1;min-width:0}.chat-heading h2{font-size:1rem;margin:0;overflow-wrap:anywhere}.chat-heading p{font-size:.75rem;color:#95a1a8;margin:5px 0 0}.messages{flex:1;overflow:auto;padding:24px 28px;background:#fbfcfd;min-height:100px;scroll-behavior:smooth}.day-label{text-align:center;color:#a4adb4;font-size:.75rem;margin:3px 0 24px}.message{display:flex;align-items:flex-start;gap:10px;margin:0 0 22px}.message .avatar{width:31px;height:31px;border-radius:9px;font-size:.8125rem}.message.out{flex-direction:row-reverse}.message.out .avatar{background:#e9edf1;color:#627784}.message-main{max-width:min(80%,650px);min-width:0}.message-meta{font-size:.75rem;color:#9ca5ad;margin:0 2px 7px;display:flex;gap:10px}.message.out .message-meta{justify-content:flex-end}.bubble{background:white;border:1px solid #e5eaf0;padding:12px 16px;border-radius:0 12px 12px 12px;font-size:1rem;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 2px 2px #17293502}.out .bubble{background:#e6f2ea;border-color:#dcece1;border-radius:12px 0 12px 12px;color:#2c4f3f}.message-state{font-size:.75rem;color:#9da9a2;margin-top:6px;text-align:right}.message-state.failed,.message-state.unknown{color:#b76643}.connection-alert{padding:10px 26px;background:#fff8e9;color:#9c7b3a;font-size:.8125rem;line-height:1.6}.composer{padding:15px 24px 18px;border-top:1px solid var(--line)}.composer textarea{border:0;box-shadow:none;resize:none;padding:3px 0;background:none;min-height:74px;font-size:.9375rem}.composer textarea::placeholder{color:#a5adb3}.composer-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.composer-footer>span{font-size:.75rem;color:#a4acb2}.composer-footer .primary{padding:9px 16px}.composer-footer svg{width:15px;height:15px}.page-footer{padding:18px 36px;display:flex;justify-content:space-between;gap:12px;color:#9fa9b0;font-size:.75rem}.details-panel{border-left:1px solid var(--line);padding:20px;overflow:auto;background:#fff}.detail-top{display:flex;align-items:center;justify-content:space-between}.detail-top h2{font-size:1rem}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 8px;font-size:.8125rem;margin:26px 0}.detail-meta span{color:var(--muted)}.detail-meta strong{text-align:right;font-weight:500}.details-panel label{font-size:.8125rem}.details-panel input,.details-panel textarea{font-size:.875rem}.details-panel .secondary{margin-top:10px}.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#193b34;color:white;padding:13px 23px;border-radius:9px;box-shadow:0 6px 30px #0002;z-index:100;font-size:.875rem;max-width:90vw;line-height:1.7}.mobile-only{display:none}dialog{border:1px solid #e3e8eb;border-radius:16px;padding:28px;width:min(460px,calc(100vw - 32px));box-shadow:0 25px 100px #102b3326;color:inherit}dialog::backdrop{background:#18333b65;backdrop-filter:blur(3px)}.dialog-title{display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-title h2{font-size:1.25rem;margin:8px 0}.dialog-title .eyebrow{font-size:.75rem}dialog p{font-size:.875rem;color:#819099}dialog .notice{margin:20px 0}dialog small{display:block}dialog .setting-item{padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:.875rem;gap:15px}.setting-item span{color:var(--muted)}.setting-item strong{font-weight:500}.bind-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:#f3f6f5}.bind-card{max-width:420px;width:100%;padding:32px;background:white;border:1px solid var(--line);border-radius:18px;text-align:center;box-shadow:0 14px 50px #203a3708}.bind-card .brand-icon{display:inline-block}.bind-card h1{font-size:1.5rem}.bind-card p{font-size:.875rem;color:#87958f}.qr-image{width:260px;max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px}.bind-card .notice{text-align:left}.bind-card label{text-align:left}
@media(min-width:1600px){.main-shell{max-width:1920px;margin-right:auto}.inbox-grid{grid-template-columns:340px minmax(0,1fr)}}
@media(max-width:1200px){.inbox-grid.with-details{grid-template-columns:280px minmax(0,1fr)}.details-panel{position:fixed;right:0;top:0;bottom:0;width:300px;z-index:20;box-shadow:-15px 0 60px #1233}.topbar{padding:0 24px}.page-heading{padding-left:24px;padding-right:24px}.inbox-grid{margin:0 24px;grid-template-columns:280px minmax(0,1fr)}.page-footer{padding-left:24px;padding-right:24px}}
@media(max-width:760px){.rail{width:58px;padding:18px 5px}.rail-logo{width:35px;height:35px;line-height:35px;font-size:1.7rem;margin-bottom:25px}.rail-button{width:46px}.rail-button span{font-size:.75rem}.main-shell{margin-left:58px;width:calc(100% - 58px)}.topbar{height:60px;padding:0 15px}.wordmark{gap:9px;font-size:.875rem}.wordmark .workspace-name{font-size:.75rem}.topbar-right{gap:8px}.live-status{font-size:.75rem}.mode-pill{display:none}.page-heading{padding:20px 14px}.page-heading h1{font-size:1.3rem}.page-heading p{display:none}.page-heading>.primary{font-size:.8125rem;padding:9px 10px;gap:4px}.eyebrow{font-size:.75rem}.inbox-grid,.inbox-grid.with-details{margin:0 12px;height:calc(100dvh - 240px);min-height:420px;display:block}.conversation-panel{height:100%;border:0}.chat-panel{display:none;height:100%}.inbox-grid.chat-open .conversation-panel{display:none}.inbox-grid.chat-open .chat-panel{display:block}.mobile-only{display:inline-flex}.chat-header{padding:13px 10px;gap:6px;min-height:72px}.chat-header>.avatar{width:34px;height:34px;border-radius:9px}.chat-heading h2{font-size:.875rem}.chat-heading p{font-size:.75rem}.messages{padding:20px 12px}.message{gap:7px}.message-main{max-width:84%}.message .avatar{display:none}.bubble{padding:10px 12px;font-size:.9375rem}.composer{padding:12px}.composer-footer>span{font-size:.75rem;max-width:125px}.composer-footer .primary{padding:8px 13px}.page-footer{padding:14px;font-size:.75rem}.page-footer>span:first-child{max-width:190px}.demo-banner{padding:8px 14px;font-size:.75rem;align-items:flex-start}.demo-banner button{font-size:.75rem}.connection-alert{padding:9px 13px}.login-brand{left:25px;top:25px}.login-card{padding:26px}.login-card h1{font-size:1.8rem}.details-panel{width:min(300px,calc(100vw - 45px))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.preview-message{display:block}.filters{flex-wrap:wrap;row-gap:0}.customer-row{min-width:0}.customer-row strong{min-width:0}.customer-row time{flex-shrink:0}
@media(max-width:760px){.page-footer{flex-wrap:wrap;row-gap:5px}.page-footer>span:first-child{max-width:none}.preview-message{display:block}.topbar-right{min-width:0}}
/* Media and calls */
.message-state.unconfirmed{color:#875209;background:#fff4d8;border:1px solid #e8c578;border-radius:8px;padding:8px 10px;line-height:1.6;text-align:left;max-width:34em;margin-left:auto;overflow-wrap:anywhere}.message-state.unconfirmed strong{display:block;font-size:.8125rem;font-weight:700}.message-delivery-note{display:block;margin-top:3px;font-weight:400}
.heading-actions{display:flex;gap:9px;align-items:center}.heading-actions button{white-space:nowrap}#entry-dialog .qr-image{display:block;margin:10px auto}#entry-dialog .button-row{flex-wrap:wrap}@media(max-width:760px){.page-heading{flex-wrap:wrap}.heading-actions{gap:6px}.heading-actions button{font-size:.75rem;padding:8px 9px}}
.media-toolbar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.media-action{border:1px solid #dce6e1;background:#f5f9f7;border-radius:6px;padding:6px 9px;color:#426957;font-size:.8125rem}.media-action:hover{background:#e7f2eb}.media-action:disabled{opacity:.45;cursor:not-allowed}.attachment{white-space:normal;margin-top:10px;max-width:100%;min-width:0}.attachment video,.attachment img{display:block;width:320px;max-width:100%;max-height:280px;border-radius:8px;background:#172c29;object-fit:contain}.attachment audio{display:block;width:280px;max-width:100%;min-width:0}.media-download{display:block;font-size:.75rem;color:#35725b;overflow-wrap:anywhere;margin-top:7px}.attachment-status{font-size:.8125rem;color:#977348;white-space:normal;margin-top:8px}.media-preview{margin:15px 0;overflow:hidden;border-radius:9px}.media-preview video,.media-preview img,.media-preview audio{display:block;max-width:100%;width:100%;max-height:320px;object-fit:contain}.media-preview video{background:#162e28}#media-dialog small{margin-top:12px;color:#87958f}#upload-progress{width:100%;accent-color:#317962}#record-status{color:#39745b;font-variant-numeric:tabular-nums}.message-search{padding:7px 22px;border-bottom:1px solid var(--line)}.message-search input{padding:7px 10px;font-size:.8125rem;background:#f7f9f8}.quote-button{border:0;padding:0 3px;background:none;color:#7e998b;font-size:.75rem}.emoji-panel{border:1px solid #dce6e1;border-radius:8px;padding:9px;margin-bottom:9px;max-height:190px;overflow:auto}.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:3px}.emoji-grid button{font-size:1.3rem;padding:3px;background:none;border:0;border-radius:5px}.emoji-grid button:hover{background:#e7f2eb}.emoji-panel small{font-size:.75rem;color:#82918a}#call-duration{font-size:2rem;font-variant-numeric:tabular-nums;color:#315c4b}#call-status{font-weight:600;color:#315c4b}.bind-card .button-row{justify-content:center;margin-top:14px}@media(max-width:760px){.media-action{font-size:.75rem;padding:5px 7px}.message-search{padding:6px 10px}.media-toolbar{gap:4px}.attachment audio{width:210px}.attachment video,.attachment img{width:220px}.composer textarea{min-height:50px}.message-main{max-width:95%}}