:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#172033;background:#edf4ff}*{box-sizing:border-box}body{margin:0}main{min-height:100dvh;display:grid;place-items:center;padding:20px}.chat{--brand: #1677ff;width:min(760px,100%);height:min(760px,calc(100dvh - 40px));background:#fff;border-radius:22px;box-shadow:0 24px 70px #1d4f9120;overflow:hidden;display:flex;flex-direction:column;min-height:0}.chat header{padding:22px 26px;color:#fff;background:var(--brand);display:flex;align-items:center;gap:14px;flex:0 0 auto}.avatar{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:block;background:#ffffff2b;object-fit:cover;box-shadow:0 0 0 2px #ffffff30}.chat h1{font-size:18px;margin:0}.chat header p{font-size:13px;margin:5px 0 0;opacity:.9}.chat header i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#62e99b;margin-right:5px}.chat header i.off{background:#ffca67}.messages{flex:1;min-height:0;padding:30px;background:#f8faff;overflow:auto}.bubble{max-width:72%;display:inline-block;padding:13px 16px;background:#fff;border:1px solid #e7ebf3;border-radius:6px 18px 18px;box-shadow:0 4px 18px #18365b0a;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}.welcome{margin-bottom:16px}.row{display:flex;align-items:center;gap:7px;margin:10px 0}.row.visitor{justify-content:flex-end}.row.visitor .bubble{background:var(--brand);color:#fff;border:0;border-radius:18px 6px 18px 18px}.bubble small{display:block;font-size:10px;opacity:.6;margin-top:5px;text-align:right}.bubble img{display:block;max-width:min(260px,70vw);max-height:300px;border-radius:10px;object-fit:contain}.reply-quote{display:block;width:100%;margin:-5px 0 8px;padding:7px 9px;border-left:3px solid var(--brand)!important;border-radius:7px;background:#eff4fc!important;color:#42516a;text-align:left;cursor:pointer}.row.visitor .reply-quote{border-left-color:#fff!important;background:#ffffff24!important;color:#fff}.reply-quote b,.reply-quote span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reply-quote b{margin-bottom:2px;font-size:11px}.reply-quote span{font-size:12px;opacity:.82}.image-button{display:block;padding:0;cursor:zoom-in}.chat form{padding:14px 16px 16px;display:flex;align-items:center;gap:9px;border-top:1px solid #edf0f5;background:#fff;flex:0 0 auto}.composer-reply{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;border-top:1px solid #e8ecf3;background:#f8faff;color:#39475d;flex:0 0 auto}.composer-reply span,.composer-reply small{display:block;min-width:0}.composer-reply small{max-width:min(520px,70vw);overflow:hidden;color:#7a8699;text-overflow:ellipsis;white-space:nowrap}.composer-reply>button{width:30px;height:30px;border-radius:8px;color:#7c8799;font-size:21px;cursor:pointer}.composer-reply>button:hover{background:#e9eef7}.composer-tools{position:relative;display:flex;align-items:center;gap:2px}.composer-tools>button{width:40px;height:40px;border-radius:11px;color:#68758a;font-size:19px;cursor:pointer}.composer-tools>button:hover,.composer-tools>button.active{background:#eef2f8;color:var(--brand)}.composer-tools>button:disabled{cursor:not-allowed;opacity:.45}.hidden-file{display:none}.emoji-panel{position:absolute;left:0;bottom:48px;z-index:20;width:332px;max-width:calc(100vw - 32px);overflow:hidden;border:1px solid #e1e6ee;border-radius:16px;background:#fff;color:#263143;box-shadow:0 18px 50px #1c2d491f}.emoji-head{height:43px;padding:0 11px 0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f4;font-size:13px}.emoji-head button{width:28px;height:28px;border-radius:8px;color:#929baa;font-size:20px;cursor:pointer}.emoji-categories{height:45px;padding:6px 9px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;border-bottom:1px solid #edf0f4;background:#fafbfc}.emoji-categories button{height:32px;border-radius:8px;font-size:18px;cursor:pointer;opacity:.65}.emoji-categories button:hover,.emoji-categories button.active{background:#e9edff;opacity:1}.emoji-grid{height:216px;padding:10px 11px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:36px;gap:3px;align-content:start;overflow-y:auto;scrollbar-width:thin}.emoji-grid button{height:36px;border-radius:8px;font-size:23px;line-height:1;cursor:pointer}.emoji-grid button:hover{background:#f0f2f6;transform:scale(1.1)}.emoji-panel footer{height:31px;padding:0 14px;display:flex;align-items:center;border-top:1px solid #edf0f4;background:#fafbfc;color:#929baa;font-size:10px}.composer-error{margin:0;padding:8px 16px;border-top:1px solid #ffe0df;background:#fff3f2;color:#bd3f39;font-size:12px}.chat input{flex:1;min-width:0;height:46px;border:1px solid #e2e7ef;background:#f7f9fc;border-radius:14px;padding:0 16px;color:#172033;font:inherit;font-size:15px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.chat input::placeholder{color:#99a3b2}.chat input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}.chat button{border:0;background:none}.chat .send{background:var(--brand);color:#fff;height:46px;min-width:78px;padding:0 20px;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 22%,transparent);transition:transform .16s ease,opacity .16s ease}.chat .send:not(:disabled):hover{transform:translateY(-1px)}.chat .send:disabled{box-shadow:none;cursor:not-allowed;opacity:.42}.image-lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:54px 24px 24px;background:#07101de8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.image-lightbox img{max-width:min(1100px,92vw);max-height:calc(100dvh - 90px);border-radius:12px;object-fit:contain;box-shadow:0 24px 90px #0008}.image-lightbox>button{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;background:#ffffff1f;color:#fff;font-size:28px;cursor:pointer}.error{text-align:center;color:#657087}.error h1{color:#172033}.logo{margin:auto;width:56px;height:56px;border-radius:18px;background:#1677ff;color:#fff;display:grid;place-items:center;font-size:28px}@media(max-width:600px){main{padding:0}.chat{height:100dvh;border-radius:0}.bubble{max-width:86%}.chat form{gap:6px;padding:10px 10px max(12px,env(safe-area-inset-bottom))}.composer-tools>button{width:36px;height:40px}.chat input{height:44px;padding:0 12px;font-size:14px}.chat .send{height:44px;min-width:68px;padding:0 14px}}