*{box-sizing:border-box}body{margin:0;font-family:Arial,"Microsoft YaHei",sans-serif;color:#172033}button,input,textarea,select{font:inherit}a{text-decoration:none;color:inherit}.login-bg,.chat-bg{min-height:100vh;background:#eef3fa;display:grid;place-items:center}.login-card{width:min(420px,92vw);background:#fff;padding:32px;border-radius:22px;box-shadow:0 20px 60px #20385825}.login-card input,.login-card button{width:100%;padding:13px;margin:8px 0;border:1px solid #d8e0ec;border-radius:12px}.login-card button,.settings-page button,.profile button,#send{background:#246bfd;color:#fff;border:0}.logo{display:inline-block;background:#246bfd;color:#fff;padding:12px;border-radius:14px}.error{background:#ffecef;color:#d22;padding:10px;border-radius:10px}.visitor{width:min(560px,100vw);height:min(820px,100vh);display:flex;flex-direction:column;background:#f4f7fb;box-shadow:0 20px 70px #20385825}.visitor header{display:flex;align-items:center;gap:12px;padding:18px;background:#246bfd;color:#fff}.visitor header nav{margin-left:auto;display:flex;gap:8px}.avatar{width:48px;height:48px;border-radius:15px;background:#ffffff25;display:grid;place-items:center;font-weight:bold}.visitor h2{margin:0}.visitor main,.chat main{flex:1;overflow:auto;padding:18px}.msg{position:relative;max-width:78%;padding:11px 14px;border-radius:15px;margin:9px 0;background:#fff;box-shadow:0 4px 12px #18365310;word-break:break-word}.visitor .msg.visitor,.chat .msg.admin{margin-left:auto;background:#246bfd;color:#fff}.visitor .msg.admin,.chat .msg.visitor{margin-right:auto;background:#fff;color:#172033}.msg.system{margin-right:auto}.msg img{display:block;max-width:280px;max-height:300px;border-radius:10px}.msg audio{max-width:260px}.msg small,.who{display:block;font-size:11px;opacity:.68;margin-top:5px}.who{margin:0 0 5px}.file{display:block;padding:9px;background:#ffffff22;border-radius:9px}.pending{opacity:.6}.failed{outline:2px solid #f44}.failed button{margin-left:8px}.typing{min-height:24px;padding:3px 18px;color:#7a8799;font-size:13px}.offline{margin:10px;padding:12px;background:#fff6d9;border-radius:14px}.offline input,.offline textarea{width:100%;padding:9px;margin:4px 0}.emoji{display:none;flex-wrap:wrap;padding:8px;background:#fff}.emoji.show{display:flex}.emoji button{border:0;background:#f2f5fa;padding:7px;font-size:20px}footer{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid #e3e8f0}footer input{flex:1;padding:11px;border:1px solid #d7dfeb;border-radius:12px}footer button,footer label{padding:11px;border:0;border-radius:12px;background:#eef2f8}.top{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#172b4d;color:#fff}.top nav{display:flex;gap:18px}.top i{background:#246bfd;padding:3px 7px;border-radius:7px}.layout{height:calc(100vh - 62px);display:grid;grid-template-columns:300px minmax(360px,1fr) 320px;background:#dfe5ee;gap:1px}.list,.chat,.profile{background:#fff;overflow:auto}.list{padding:12px}.search{display:grid;grid-template-columns:1fr 90px 40px;gap:5px}.search input,.search select,.msearch input,.profile input,.profile textarea,.profile select,.settings-page input,.settings-page textarea,.settings-page select{width:100%;padding:10px;border:1px solid #d8e0ec;border-radius:10px}.bulk{display:flex;gap:6px;margin:8px 0}.bulk button{border:0;padding:7px;border-radius:8px}.conv{display:grid;grid-template-columns:22px 1fr;margin:6px 0;padding:10px;border-radius:12px}.conv.active,.conv:hover{background:#edf3ff}.conv a{position:relative}.conv small,.conv span{display:block;font-size:11px;color:#78869a;margin-top:3px}.conv em{position:absolute;right:0;top:0;background:#ff3e5f;color:#fff;border-radius:20px;padding:3px 7px;font-style:normal}.chat{display:flex;flex-direction:column}.chathead{padding:14px;display:flex;justify-content:space-between;border-bottom:1px solid #e2e8f0}.actions{display:flex}.actions form{margin-left:5px}.actions button,.msearch button{border:0;padding:8px;border-radius:9px}.msearch{display:flex;padding:7px}.recall{position:absolute;right:-8px;top:-8px;background:#ff4563;color:#fff;border:0;border-radius:15px;padding:4px 7px;font-size:11px}.recalled{opacity:.55;background:#eef1f5!important;color:#667!important}.quick{display:flex;gap:6px;padding:7px;overflow:auto}.quick button{white-space:nowrap;border:1px solid #d8e0ec;border-radius:18px;background:#fff;padding:7px}.profile{padding:16px}.profile dl{font-size:13px}.profile dt{color:#8490a2;margin-top:9px}.profile dd{margin:3px 0;word-break:break-all}.profile form{margin:12px 0}.profile textarea{min-height:90px}.danger{background:#e33!important}.empty{margin:auto}.settings-page{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;padding:18px;background:#eef3fa;min-height:calc(100vh - 62px)}.settings-page section{background:#fff;border-radius:16px;padding:18px}.settings-page label{display:block;margin:10px 0}.settings-page textarea{min-height:90px}.settings-page button{padding:11px 15px;border-radius:10px}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.agent{padding:10px;background:#f4f7fb;margin:6px 0;border-radius:10px}.agent span{display:block;color:#78869a;font-size:12px}@media(max-width:1000px){.layout{grid-template-columns:240px 1fr}.profile{display:none}.settings-page{grid-template-columns:1fr 1fr}}@media(max-width:650px){.layout{grid-template-columns:95px 1fr}.list{padding:5px}.search,.bulk{display:none}.conv{grid-template-columns:1fr;padding:7px}.conv input,.conv small,.conv span{display:none}.top{font-size:12px;padding:0 8px}.top nav{gap:8px}.settings-page{grid-template-columns:1fr}.visitor{height:100vh}}

.hint{padding:10px 12px;background:#eef5ff;border-radius:10px;color:#42628a;font-size:13px;line-height:1.6}


/* v4.3: mobile message bubbles must size to their content */
.visitor #messages{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:0;
}
.visitor #messages .msg{
  display:block;
  flex:0 0 auto !important;
  width:fit-content;
  min-width:0;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  align-self:flex-start;
  white-space:normal;
}
.visitor #messages .msg.visitor{
  align-self:flex-end;
}
.visitor #messages .msg.admin,
.visitor #messages .msg.system{
  align-self:flex-start;
}
.visitor #messages .msg > span{
  display:block;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media(max-width:650px){
  .visitor #messages .msg{
    max-width:82%;
    padding:10px 13px;
    margin:7px 0;
  }
}


/* v4.4: admin message bubbles size to content, never stretch vertically */
.chat #messages{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:0;
}
.chat #messages .msg{
  display:block;
  flex:0 0 auto !important;
  width:fit-content;
  min-width:120px;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  align-self:flex-start;
  white-space:normal;
}
.chat #messages .msg.admin{
  align-self:flex-end;
}
.chat #messages .msg.visitor,
.chat #messages .msg.system{
  align-self:flex-start;
}
.chat #messages .msg > span{
  display:block;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.notify-toggle{
  border:1px solid #ffffff55;
  background:#ffffff18;
  color:#fff;
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
}
.reconnecting .top::after{
  content:"实时连接正在恢复…";
  position:fixed;
  left:50%;
  top:68px;
  transform:translateX(-50%);
  z-index:99;
  padding:7px 12px;
  border-radius:10px;
  color:#8a5a00;
  background:#fff1bd;
  box-shadow:0 4px 14px #0002;
  font-size:13px;
}
@media(max-width:650px){
  .chat #messages .msg{
    max-width:86%;
    min-width:0;
    padding:10px 13px;
  }
  .notify-toggle{display:none}
}


/* v4.5 visitor device summary */
.profile dl#visitorProfile{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:9px 10px;
  align-items:start;
}
.profile dl#visitorProfile dt{
  margin:0;
  color:#7f8da1;
}
.profile dl#visitorProfile dd{
  margin:0;
  line-height:1.45;
  word-break:break-word;
}
.raw-device{
  margin:14px 0;
  padding:10px 12px;
  border:1px solid #e1e7f0;
  border-radius:10px;
  background:#f8fafc;
}
.raw-device summary{
  cursor:pointer;
  color:#58708f;
  font-size:13px;
}
.raw-device pre{
  white-space:pre-wrap;
  word-break:break-all;
  font-size:11px;
  color:#66758a;
  margin:10px 0 0;
}

.chat-bg{background:var(--chat-bg,#eef3fa)}
.visitor{background:var(--chat-bg,#f4f7fb)}
.visitor header{background:var(--theme,#246bfd)}
.visitor .msg.visitor{background:var(--visitor-bubble,#246bfd)}
.visitor .msg.admin{background:var(--admin-bubble,#fff)}
#send,.offline button{background:var(--button,#246bfd)}
.status{font-size:10px;opacity:.8}
.settings-page input[type="color"]{height:44px;padding:4px}


/* v5.1: message status is visible only in admin */
.admin-status{
  font-size:10px;
  opacity:.78;
}
.visitor .status,
.visitor [data-status-id]{
  display:none !important;
}