:root{--brand:#2f6bff;--bg:#f2f4f8;--line:#e6e9f0;--txt:#1f2329;--sub:#6b7280}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:14px;color:var(--txt);background:var(--bg)}
button{font-family:inherit}
input,textarea,select{font-family:inherit;font-size:14px;border:1px solid #d8dce5;border-radius:8px;padding:8px 10px;outline:none;background:#fff;color:var(--txt)}
input:focus,textarea:focus,select:focus{border-color:var(--brand)}
textarea{resize:vertical;width:100%}
.btn{border:1px solid #d8dce5;background:#fff;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:14px;color:var(--txt)}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{opacity:.9;color:#fff}
.btn.ghost{background:transparent}
.btn.small{padding:4px 10px;font-size:12px;border-radius:6px}
.btn.danger-o{color:#e5484d;border-color:#f1b4b7}
.btn.danger-o:hover{background:#fdecec}
.btn.block{width:100%}
.muted{color:var(--sub);font-size:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.row-gap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* login */
.login-wrap{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#2f6bff 0%,#1b3fa8 60%,#12276b 100%)}
.login-card{width:360px;background:#fff;border-radius:16px;padding:34px 34px 28px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-logo{font-size:40px;text-align:center}
.login-card h1{font-size:19px;text-align:center;margin:6px 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:6px}
.field input{width:100%}
.login-err{color:#e5484d;font-size:13px;margin-top:12px;text-align:center}

/* layout */
#app-view{display:flex;height:100%}
#nav{width:208px;background:#141a2a;color:#c6cddd;display:flex;flex-direction:column;flex:none}
.nav-logo{display:flex;align-items:center;gap:8px;font-size:17px;color:#fff;padding:18px 18px 12px}
#nav-items{display:flex;flex-direction:column;padding:6px 10px;gap:2px;flex:1}
#nav-items button{display:flex;align-items:center;gap:8px;text-align:left;border:0;background:transparent;color:#c6cddd;font-size:14px;padding:11px 12px;border-radius:8px;cursor:pointer}
#nav-items button:hover{background:#1f2740;color:#fff}
#nav-items button.on{background:var(--brand);color:#fff}
.pill{margin-left:auto;background:#e5484d;color:#fff;font-size:11px;border-radius:9px;padding:1px 7px}
.nav-foot{padding:12px;border-top:1px solid #232c47;display:flex;align-items:center;gap:8px}
.me{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:#fff}
.me-info div:first-child{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex:none;background:#5d6b8a}
.a1{background:#2f6bff}.a2{background:#00a36c}.a3{background:#e5484d}.a4{background:#9067f0}.a5{background:#e8912d}
#presence{width:76px;padding:5px 6px;font-size:12px;border-radius:6px}
#main{flex:1;min-width:0;overflow:auto}
.page{padding:18px 20px}
.page h2{margin:0 0 14px;font-size:17px}

/* workbench */
.wb-cols{display:flex;gap:14px;height:calc(100vh - 36px)}
.conv-col{width:296px;flex:none;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:0;background:transparent;padding:11px 4px;font-size:13px;cursor:pointer;color:var(--sub);border-bottom:2px solid transparent}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.tabs b{font-weight:600;color:#e5484d;font-size:12px}
.conv-list{flex:1;overflow-y:auto}
.conv-item{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.conv-item:hover{background:#f7f9fd}
.conv-item.on{background:#eef3ff}
.ci-main{flex:1;min-width:0}
.ci-title{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:13px}
.ci-title .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-title .tm{font-weight:400;font-size:11px;color:var(--sub);flex:none}
.ci-sub{color:var(--sub);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:#e5484d;color:#fff;border-radius:9px;font-size:11px;padding:0 6px;min-width:18px;text-align:center;line-height:17px;height:17px}
.ci-ops{display:flex;gap:6px;margin-top:6px}
.conv-empty{padding:30px;text-align:center;color:var(--sub)}
.chat-col{flex:1;min-width:360px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
#page-workbench.chat-hidden .chat-col{display:none}
#page-workbench.chat-hidden .conv-col{flex:1;width:auto}
#chat-hide{flex:none}
.center-note{margin:auto;color:var(--sub)}
#chat-empty{display:flex;height:100%}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat-title{font-weight:600}
.chat-sub{font-size:12px;color:var(--sub);margin-top:2px}
.chat-actions{display:flex;gap:8px;align-items:center}
.chat-actions select{max-width:130px;font-size:12px;padding:5px 7px}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;background:#ededed}
.chat-msgs .row{display:flex;margin:12px 0;align-items:flex-start;gap:8px}
.chat-msgs .row.agent{justify-content:flex-end}
.chat-msgs .avatar-s{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex:none}
.chat-msgs .av-who{background:#07c160}
.chat-msgs .av-vip{background:#576b95}
.chat-msgs .bubble{max-width:100%;padding:9px 12px;border-radius:6px;line-height:1.55;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;background:#fff;color:#111;font-size:14.5px;display:inline-block;text-align:left}
.chat-msgs .col{min-width:0;max-width:calc(100% - 52px)}
.chat-msgs .row.agent .col{text-align:right}
.chat-msgs .row.visitor .col{text-align:left}
.chat-msgs .agent .bubble{background:#95ec69;color:#111}
.chat-msgs .system{justify-content:center}
.chat-msgs .system .bubble{background:transparent;color:#9aa3b2;font-size:12px;max-width:80%}
.chat-msgs .who{font-size:11px;color:#9aa3b2;margin-bottom:3px}
.chat-msgs .row.agent .who{text-align:right}
.chat-msgs .tm{font-size:10px;color:#a5abb6;margin-top:3px}
.chat-msgs .bubble.imgb{padding:3px;line-height:0}
.chat-msgs .bubble.imgb img{max-width:260px;max-height:300px;border-radius:4px;display:block;cursor:zoom-in}
.chat-typing{font-size:12px;color:var(--sub);padding:2px 16px;height:20px}
.chat-input{border-top:1px solid var(--line);padding:8px 14px 12px;position:relative}
.ci-tools{display:flex;gap:2px;margin-bottom:2px;position:relative}
.ct-btn{border:0;background:none;font-size:20px;cursor:pointer;padding:2px 8px;border-radius:6px;line-height:1.2}
.ct-btn:hover{background:#f0f2f5}
.emoji-pop{position:absolute;bottom:calc(100% + 6px);left:0;width:310px;max-height:150px;overflow-y:auto;overflow-x:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;z-index:8}
.emoji-pop button{border:0;background:none;font-size:19px;cursor:pointer;padding:3px 0;border-radius:6px;line-height:1.2;min-width:0}
.emoji-pop button:hover{background:#f0f2f5}
.qr-bar{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px;min-height:0}
.qr-bar:empty{display:none}
.qr-chip{flex:none;background:#eef3ff;color:var(--brand);border:1px solid #d6e2ff;border-radius:14px;font-size:12px;padding:3px 10px;cursor:pointer;white-space:nowrap}
.qr-chip:hover{background:#dfeaff}
.ci-row{display:flex;gap:10px;align-items:flex-end}
.ci-row textarea{flex:1;max-height:120px}
.profile-col{width:300px;flex:none;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.pf-head{padding:12px 16px;font-weight:600;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-body{flex:1;overflow-y:auto;padding:14px 16px}
.pf-sec{margin-bottom:16px}
.pf-sec h4{margin:0 0 8px;font-size:12px;color:var(--sub);font-weight:600}
.pf-line{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:3px 0}
.pf-line span:last-child{color:var(--sub);text-align:right;word-break:break-all;max-width:170px}
.tag{display:inline-block;background:#eef3ff;color:var(--brand);border-radius:10px;font-size:12px;padding:1px 9px;margin:0 6px 6px 0}
.tag em{font-style:normal;cursor:pointer;margin-left:4px;color:#8a94b8}
.pf-body input,.pf-body textarea{width:100%;margin-bottom:8px}
.pv{font-size:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.pv a,.pv .u{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub)}

/* search */
.s-results{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.s-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer}
.s-item:hover{border-color:var(--brand)}
.s-meta{font-size:12px;color:var(--sub);display:flex;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.s-content{font-size:14px;white-space:pre-wrap;word-break:break-word}

/* quick */
#qr-list{flex-direction:column;align-items:stretch}
.qr-row{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;width:100%}
.qr-row .body{flex:1;min-width:0}
.qr-row .t{font-weight:600;margin-bottom:4px}
.qr-row .c{color:var(--sub);font-size:13px;white-space:pre-wrap;word-break:break-word}
.qr-edit{max-width:640px;margin-top:16px}
.qr-edit h3{margin:0 0 12px;font-size:14px}
.qr-edit input,.qr-edit textarea{margin-bottom:10px}

/* stats */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.stat-card .n{font-size:26px;font-weight:700;color:var(--brand)}
.stat-card .l{color:var(--sub);font-size:12px;margin-top:4px}
.trend{display:flex;align-items:flex-end;gap:14px;height:160px;padding:10px 6px 0}
.trend .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.trend .bar{width:100%;max-width:44px;background:linear-gradient(180deg,var(--brand),#6f9bff);border-radius:6px 6px 2px 2px;min-height:3px}
.trend .v{font-size:12px;color:var(--txt)}
.trend .d{font-size:11px;color:var(--sub)}

/* settings */
.settings-card{max-width:640px}
.set-row{margin-bottom:14px}
.set-row label{display:block;font-size:12px;color:var(--sub);margin-bottom:6px}
.set-row input[type=text],.set-row input[type=color],.set-row textarea,.set-row select{width:100%}
.set-row input[type=color]{height:40px;padding:3px}
.set-row .row-gap input{flex:1}
.switch{display:flex;align-items:center;gap:8px;font-size:13px}

/* agents */
.agents-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.ag-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.ag-row .body{flex:1;min-width:0}
.ag-row .n{font-weight:600}
.ag-row .s{font-size:12px;color:var(--sub)}
.conv-site{display:inline-block;font-size:11px;color:#fff;background:#7c4dff;border-radius:4px;padding:0 6px;margin-right:6px;vertical-align:middle;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.tab-clear{margin-left:auto;font-size:12px;color:#d33;background:transparent;border:1px solid #f0b8b8;border-radius:6px;padding:3px 8px;cursor:pointer;flex:none}
.tab-clear:hover{background:#fdecec}
.pill-red{background:#e53935!important;color:#fff!important}
.ag-fe{margin:-4px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fafbff}
.ag-fe .pf-title{font-weight:600;font-size:13px;margin-bottom:8px}
.ag-fe input{flex:1;min-width:0}
.ag-fe .row-gap{margin-top:8px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c3c9d4;margin-right:5px}
.dot.on{background:#00a36c}
.dot.busy{background:#e8912d}
.ag-row .ops{display:flex;gap:6px;flex:none;flex-wrap:wrap;max-width:330px;justify-content:flex-end}

/* toast */
#toast-box{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(31,35,41,.92);color:#fff;border-radius:8px;padding:9px 16px;font-size:13px;animation:tf 2.6s forwards}
.toast.err{background:rgba(200,40,50,.95)}
@keyframes tf{0%,75%{opacity:1}100%{opacity:0}}

@media (max-width:1100px){
  .conv-col{width:250px}
  /* small screens: show visitor profile as right-side overlay instead of hiding it */
  .profile-col{position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);z-index:80;border-radius:0;border:0;box-shadow:-8px 0 28px rgba(0,0,0,.25)}
}

/* ---- mobile / small screen adaptation ---- */
@media (max-width:860px){
  #app-view{flex-direction:column}
  #nav{width:100%;flex-direction:row;align-items:center;padding:6px 8px;gap:6px;overflow-x:auto;flex:none}
  .nav-logo{padding:0 4px;font-size:14px;flex:none}
  #nav-items{flex-direction:row;padding:0;gap:2px;flex:1;overflow-x:auto}
  #nav-items button{white-space:nowrap;padding:8px 10px;font-size:13px}
  .nav-foot{border-top:0;padding:0;gap:4px;flex:none}
  .me-info{display:none}
  .page{padding:10px}
  .wb-cols{flex-direction:column;height:auto;gap:10px}
  .conv-col{width:100%;max-height:38vh}
  .chat-col{min-height:56vh;min-width:0;width:100%}
  .chat-head{flex-wrap:wrap;gap:8px}
  .chat-actions{flex-wrap:wrap;gap:6px;max-width:100%}
  .chat-actions .btn,.tabs button{min-height:36px}
  .chat-actions .btn{padding:8px 12px;font-size:13px;-webkit-tap-highlight-color:transparent}
  .chat-actions select{max-width:110px;min-height:36px}
  #ch-transfer{min-width:0}
  .pf-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .stat-cards{grid-template-columns:1fr 1fr}
}