*{box-sizing:border-box}body{margin:0;background:#edf1f6;color:#1d2b41;font:15px/1.6 system-ui,-apple-system,"Microsoft YaHei",sans-serif}button,input,textarea{font:inherit}button,a,label.upload{touch-action:manipulation}button{cursor:pointer;border:0;border-radius:10px;padding:11px 18px}button:disabled{opacity:.5;cursor:wait}.shell{max-width:1440px;min-height:100dvh;margin:auto;display:grid;grid-template-columns:284px 1fr;background:white}aside{background:#142641;color:#e3ebf8;padding:34px 24px;display:flex;flex-direction:column;max-height:100dvh}.brand{color:white;text-decoration:none;font-size:23px;font-weight:750;letter-spacing:1px}.brand span{color:#78b5ff}.aside-label{font-size:12px;color:#92a5c2;margin:10px 0 36px}.aside-footer{margin-top:auto;padding-top:24px;color:#8ca1c2;font-size:12px}#sidebar{overflow:auto;flex:1}.side-note{padding:18px;background:#ffffff09;border:1px solid #ffffff12;border-radius:14px;font-size:13px;color:#b4c5dc}.conv{display:block;width:100%;text-align:left;background:transparent;color:#c6d4e8;margin:5px 0;padding:14px}.conv.active{background:#ffffff17;color:white}.conv strong,.conv small{display:block}.conv small{font-size:11px;color:#93a8c6;overflow-wrap:anywhere}.conv p{margin:6px 0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}main{min-width:0;height:100dvh;display:flex;flex-direction:column;position:relative}header{padding:26px 40px;border-bottom:1px solid #eaf0f7;display:flex;align-items:center;justify-content:space-between;gap:14px}.eyebrow{font-size:10px;letter-spacing:2px;color:#8a99ac}h1{font-size:22px;margin:4px 0;font-weight:650}h2{font-size:26px;margin:20px 0 8px}p{color:#78879b}#welcome{width:min(420px,100%);margin:auto;padding:30px 24px;overflow:auto;text-align:center}.intro-icon{display:inline-grid;place-content:center;background:#eaf3ff;border:1px solid #d8eaff;color:#3478dd;width:66px;height:66px;border-radius:21px;font-size:27px;font-weight:bold}#welcome>p{font-size:13px}.primary{background:#3478eb;color:white;font-weight:600}.primary:hover{background:#2468d5}#anonymous,form#auth .primary{width:100%}#anonymous{margin-top:20px;display:flex;justify-content:space-between}.divider{display:flex;align-items:center;gap:12px;color:#9aa5b3;font-size:11px;margin:24px 0}.divider:before,.divider:after{content:"";height:1px;background:#e7ebf0;flex:1}#auth label{display:block;text-align:left;font-size:12px;font-weight:600;margin-bottom:16px}input{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #dce3ed;border-radius:9px;outline:none}input:focus,textarea:focus{border-color:#3478eb;box-shadow:0 0 0 3px #3478eb14}.quiet{background:transparent;color:#6d7c90;font-size:12px}#switch{margin-top:10px}.privacy{font-size:10px!important;line-height:1.8;margin-top:24px}#chat{flex:1;min-height:0;display:flex;flex-direction:column;background:#f7f9fc}#notice{padding:10px 30px;background:#eff5ff;color:#6882a7;font-size:11px}#messages{flex:1;min-height:0;overflow-y:auto;padding:30px 40px}.message{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:22px}.message.mine{align-items:flex-end}.message .meta{color:#8a97a7;font-size:10px;margin-bottom:5px}.bubble{max-width:min(80%,600px);border:1px solid #e5ebf3;background:white;border-radius:2px 14px 14px 14px;padding:12px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.mine .bubble{background:#3478eb;color:white;border-color:#3478eb;border-radius:14px 2px 14px 14px}.bubble img{display:block;max-width:100%;max-height:260px;object-fit:contain;border-radius:7px;cursor:zoom-in}.bubble p{margin:0;color:inherit}.bubble img+p{margin-top:10px}#composer{background:white;padding:18px 28px 14px;border-top:1px solid #e5ebf3}.compose-row{display:flex;gap:12px;align-items:center}textarea{width:100%;resize:none;max-height:120px;border:1px solid transparent;padding:10px;border-radius:6px;outline:none}.upload{display:grid;place-items:center;background:#edf3fb;color:#5b78a0;border-radius:9px;width:38px;height:38px;flex-shrink:0;font-size:23px;cursor:pointer}#send{white-space:nowrap}#composer small{font-size:10px;color:#9ba8b9;margin-left:50px}#attachment{font-size:12px;color:#5475a6}.empty{display:grid;place-content:center;height:100%;text-align:center;color:#95a3b6;font-size:13px}#error{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:#b53333;color:white;padding:10px 20px;border-radius:10px;font-size:13px;max-width:95%;z-index:5}dialog{border:0;border-radius:12px;max-width:95vw;max-height:95dvh;padding:16px}dialog::backdrop{background:#142641bf}dialog img{display:block;max-width:85vw;max-height:80dvh}dialog button{display:block;margin-left:auto}[hidden]{display:none!important}@media(max-width:760px){.shell{grid-template-columns:1fr}aside{display:none}header{padding:16px 20px}h1{font-size:18px}.eyebrow{font-size:8px}#messages{padding:20px 16px}#composer{padding:12px}#composer small{margin-left:0}#notice{padding:9px 16px}.bubble{max-width:88%}.shell.admin{grid-template-columns:150px 1fr}.admin aside{display:flex;padding:20px 10px}.admin .brand{font-size:16px}.admin .aside-label{font-size:10px}.admin header{padding:12px}.admin h1{font-size:15px}.admin .compose-row{gap:4px}.admin #send{padding:8px}.admin #messages{padding:14px 8px}.admin #composer small{display:none}}
/* Visitor details stay outside the independently scrolling message history. */
main{overflow:hidden}header,#composer{flex-shrink:0}#chat{overflow:hidden}#messages{overscroll-behavior:contain}
#notice.visitor-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.35fr);gap:5px 18px;padding:10px 26px;background:white;border-bottom:1px solid #e5ebf3;color:#1d2b41;position:sticky;top:0;z-index:3;flex:0 0 auto}
.visitor-field{min-width:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;line-height:1.5}
.visitor-field>span{font-size:10px;color:#8290a3;white-space:nowrap}
.visitor-field>strong{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.visitor-field>strong.ip-address{font:600 12px/1.5 ui-monospace,Consolas,monospace;color:#2468d5;user-select:all}
.visitor-field:nth-child(3)>strong{color:#2468d5}
.visitor-field>small{font-size:10px;color:#8191a8}
.visitor-field>.source-badge{font-size:9px;background:#edf4ff;color:#6487b9;border-radius:3px;padding:0 4px}
.visitor-field:nth-child(n+4)>strong{font-size:10px;font-weight:400;color:#718198}
@media(max-width:1100px){#notice.visitor-details{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px 16px;gap:4px 12px}.visitor-field:nth-child(3){grid-column:1/-1;grid-row:2}}
@media(max-width:600px){#notice.visitor-details{display:flex;flex-wrap:wrap;padding:8px 10px;gap:4px 12px}.visitor-field{gap:4px}.visitor-field>strong,.visitor-field>strong.ip-address{font-size:11px}}

.conv.unread,.conv.unread.active{background:#d9f8e7;color:#0e5130;box-shadow:inset 3px 0 #23b967}.conv.unread small{color:#3e7e5c}.conv.unread p{color:#245a3d}.conv strong{position:relative}.unread-badge{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:8px;background:#159c50;color:white;font-size:10px;line-height:1.6;white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.danger-button{background:#fff0f0;color:#ba4141;font-size:12px;padding:8px 12px}.danger-button:hover{background:#ffe1e1}
/* Customer page: keep only the chat/login content. */ .shell:not(.admin){grid-template-columns:minmax(0,1fr)}.shell:not(.admin)>aside,.shell:not(.admin) #switch,.shell:not(.admin) .privacy{display:none!important}
.presence-status{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;font-weight:500;border-radius:4px;padding:1px 5px;margin-left:5px;line-height:1.5}.presence-status:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}.presence-status.presence-online{color:#12864b;background:#e2f7eb}.presence-status.presence-offline{color:#987321;background:#fff4d9}.presence-status.presence-exited{color:#7b8798;background:#edf0f5}.conv .presence-status{font-size:9px;margin-left:4px}.visitor-field .presence-status{font-size:10px}
.auth-hint{font-size:11px;line-height:1.6;color:#8190a4;margin:12px 0 0}