:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;font-size:16px;color:#303932;background:#f0f3f0;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,textarea:focus-visible{outline:2px solid #259f60;outline-offset:2px}[hidden]{display:none!important}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#app{position:fixed;top:var(--support-top,0px);left:50%;transform:translateX(-50%);height:var(--support-height,100vh);height:var(--support-height,100dvh);width:100%;max-width:1000px;background:#fff;display:flex;flex-direction:column;overflow:hidden;min-height:0;border-left:1px solid #e6ebe5;border-right:1px solid #e6ebe5}.visitor-header{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:61px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));border-bottom:1px solid #e7ebe6;background:white}.visitor-mark{width:35px;height:35px;border-radius:9px;background:#0ba667;color:white;display:grid;place-items:center;font-size:17px}.visitor-header b{display:block;font-size:16px;font-weight:600}.visitor-header small{display:block;color:#929b94;font-size:11px;margin-top:3px}.conversation{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:22px clamp(14px,4vw,36px);background:#fff}.notice{background:#f5f8f4;border:1px solid #e6eee3;border-radius:14px;padding:20px;line-height:1.7;font-size:13px;color:#657363;overflow-wrap:anywhere}.notice .intro{font-size:14px;color:#3e5641;margin:0 0 12px}.notice section{margin-top:16px}.notice h2{font-size:14px;color:#c98b2d;margin:0 0 4px;font-weight:600}.notice p{margin:0}.notice strong{font-weight:600}.messages{display:flex;flex-direction:column;gap:16px;padding-top:22px}.message{max-width:82%;padding:11px 14px;border-radius:8px;line-height:1.65;word-break:break-word;white-space:pre-wrap;font-size:15px}.message.mine{align-self:flex-end;background:#a9e889;color:#263c29}.message.system{align-self:flex-start;background:#f1f3f0;color:#374238}.message a{color:#337c55;overflow-wrap:anywhere}.message img.emoji{width:25px;height:25px;vertical-align:middle}.message img.preview{max-width:100%;max-height:320px;display:block;border-radius:7px}.message video,.message audio{max-width:100%;display:block;width:100%}.timestamp{text-align:center;color:#a0aaa2;font-size:11px;margin:10px 0}.dock{flex:0 0 auto;background:#f7f9f6;border-top:1px solid #e5eae3;padding-bottom:env(safe-area-inset-bottom);max-height:58%;overflow-y:auto}.quick{height:43px;display:flex;align-items:center;gap:9px;overflow-x:auto;overflow-y:hidden;padding:0 14px;border-bottom:1px solid #e8ede5;scrollbar-width:none;touch-action:pan-x;flex:none}.quick::-webkit-scrollbar{display:none}.quick button{white-space:nowrap;font-size:12px;border:1px solid #d7e5d4;border-radius:6px;padding:5px 9px;color:#658362;line-height:1.4;flex:none;background:white}.compose{display:flex;align-items:center;gap:10px;padding:10px 13px;min-height:64px}.tool{display:grid;place-items:center;flex:0 0 31px;width:31px;height:38px;color:#62796a}.tool svg{width:28px;height:28px}.input-wrap{min-width:0;flex:1;border-radius:9px;min-height:43px;background:white;border:1px solid #e4eae0;display:flex;align-items:center;padding:5px 7px 5px 11px;gap:5px}.input-wrap textarea{border:0;outline:none;resize:none;flex:1;min-width:0;width:0;height:30px;max-height:90px;padding:4px 0;background:none;font-size:16px;line-height:22px;color:#303c33}.input-wrap .tool{width:29px;flex-basis:29px;height:30px}.input-wrap .tool svg{height:25px;width:25px}#send{color:#079e5d}.extras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 14px 20px;gap:14px}.extra{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}.extra .box{width:56px;height:56px;background:#fff;border-radius:13px;display:grid;place-items:center;color:#578361}.box svg{width:29px;height:29px}.emojis{height:210px;max-height:35vh;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}.emoji-page{width:100%;flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(5,1fr);padding:7px 12px 15px;gap:4px}.emoji-page button{display:grid;place-items:center;min-height:0}.emoji-page img{width:25px;height:25px;max-height:100%;object-fit:contain}#localStatus{flex:0 0 auto;font-size:12px;color:#9b6836;text-align:center;margin:0;padding:5px 10px;max-height:64px;overflow:auto;background:#fff8ed}#localStatus:empty{display:none}#retryConnection{flex:0 0 auto;background:#f0f6ed;color:#4d845a}#queue{flex:1 1 0;min-height:0;overflow:auto;padding:40px 18px;background:#fff}.queue-notice{text-align:center;font-size:15px;line-height:1.8;margin:0 0 28px}.queue-card{border-radius:12px;background:#f2f7ef;text-align:center;padding:28px;color:#628958}.queue-card h2{font-size:16px;font-weight:500}.queue-number{font-size:26px;margin:14px 0 0}
@media(min-width:900px){.notice{max-width:760px;margin:0 auto;padding:24px}.message{max-width:72%}.compose{padding:13px 22px;gap:15px}.quick{padding-left:22px}.emojis{max-width:600px}.extras{max-width:460px}.conversation{padding-top:28px}}
@media(max-height:480px){.visitor-header{min-height:45px;padding-top:5px;padding-bottom:5px}.visitor-header small{display:none}.visitor-mark{width:29px;height:29px}.quick{display:none}.dock{max-height:70%}.emojis{height:100px;max-height:30vh}.emoji-page{grid-template-rows:repeat(5,26px);overflow-y:auto}.compose{min-height:55px;padding-top:6px;padding-bottom:6px}.extras{padding:8px;gap:8px}.extra .box{width:40px;height:40px}.notice{padding:14px}}
.dock{display:flex;flex-direction:column;overflow:hidden}.dock>.compose{flex:0 0 auto}.dock>.extras,.dock>.emojis{flex:1 1 auto;min-height:0}.dock>.extras{overflow:auto}

/* Reference visitor layout: pale blue chat, white notice and blue controls. */
:root{color:#333;background:#fff;font-family:Arial,'Microsoft YaHei',sans-serif}
#app{max-width:1000px;border:0;background:#f2fafc;--visitor-scale: min(1vw,10px)}
.conversation{padding:calc(var(--visitor-scale)*5.3) calc(var(--visitor-scale)*4.2);background:#f2fafc}
.notice{max-width:none;margin:0;border:0;background:#fff;border-radius:calc(var(--visitor-scale)*7);padding:calc(var(--visitor-scale)*1.8) calc(var(--visitor-scale)*4.4) calc(var(--visitor-scale)*11);text-align:center;line-height:1.28;font-size:clamp(14px,3.65vw,36.5px);color:#333}
.notice .intro{font-size:inherit;line-height:inherit;color:inherit;margin:0}
.notice section{margin-top:calc(var(--visitor-scale)*4.6)}
.notice h2{font-size:inherit;line-height:inherit;font-weight:700;color:#e99a25;margin:0}
.notice strong{font-weight:700}
.dock{background:#f0f0f0;border-top:0;max-height:58%}
.quick{height:calc(var(--visitor-scale)*10);min-height:38px;padding:0 calc(var(--visitor-scale)*4.4);gap:calc(var(--visitor-scale)*3.2);border-bottom:1px solid #c9c9c9}
.quick button{font-size:clamp(12px,3.2vw,32px);border:1px solid #53a4c8;border-radius:3px;padding:calc(var(--visitor-scale)*.8) calc(var(--visitor-scale)*2.2);background:transparent;color:#479fc6;line-height:1.4}
.compose{gap:calc(var(--visitor-scale)*3.8);padding:calc(var(--visitor-scale)*2.4) calc(var(--visitor-scale)*6.4);min-height:64px}
.tool{color:#30a5ce;width:calc(var(--visitor-scale)*6.6);flex-basis:calc(var(--visitor-scale)*6.6);height:calc(var(--visitor-scale)*7);min-height:30px}
.tool svg{width:100%;height:100%;stroke-width:1.4}
.input-wrap{border:0;border-radius:100px;min-height:calc(var(--visitor-scale)*11.2);padding:calc(var(--visitor-scale)*2) calc(var(--visitor-scale)*3);gap:8px}
.input-wrap textarea{font-size:clamp(16px,3.65vw,32px);line-height:1.3;height:calc(var(--visitor-scale)*7);min-height:28px;padding:0;color:#333}
.input-wrap .tool{flex-basis:calc(var(--visitor-scale)*5.6);width:calc(var(--visitor-scale)*5.6);height:calc(var(--visitor-scale)*5.6)}
.input-wrap .tool svg{width:100%;height:100%}#send{color:#30a5ce}
#queue{padding:0;background:#fff}
.queue-notice{margin:0;padding:calc(var(--visitor-scale)*16.8) 0 calc(var(--visitor-scale)*4.1);font-size:clamp(15px,4.1vw,41px);line-height:2;text-align:center;color:#333}
.queue-card{border-radius:0;background:#f3f6ff;padding:calc(var(--visitor-scale)*14.3) 0 calc(var(--visitor-scale)*15.4);color:#407fc4;text-align:center}
.queue-card h2{margin:0;font-weight:400;font-size:clamp(18px,4.7vw,47px);line-height:1.5}
.queue-number{font-size:clamp(22px,5.5vw,55px);font-weight:700;margin:calc(var(--visitor-scale)*5) 0 0;line-height:1.5}
.message.mine{background:#d4effb;color:#333}.message.system{background:white;color:#333}.message a{color:#298db8}
button:focus-visible,textarea:focus-visible{outline-color:#30a5ce}
@media(max-height:480px){.quick{display:flex}.compose{padding-top:6px;padding-bottom:6px}.input-wrap{min-height:40px}.input-wrap textarea{height:28px}.dock{max-height:70%}}

/* Expanded actions, matching the six blue tiles in the reference. */
.dock>.extras{flex:0 1 auto;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));padding:calc(var(--visitor-scale)*2.2) calc(var(--visitor-scale)*6.4) calc(var(--visitor-scale)*4);column-gap:calc(var(--visitor-scale)*4.7);row-gap:calc(var(--visitor-scale)*8);background:#f0f0f0}
.extra{min-width:0;gap:calc(var(--visitor-scale)*2.3);font-size:clamp(14px,3.7vw,32px);line-height:1.3;color:#111}
.extra .box{width:100%;height:auto;aspect-ratio:1;border-radius:30%;background:#fff;color:#20a8df}
.extra .box svg{width:42%;height:42%;stroke-width:1.9}
.extra:focus-visible .box{outline:2px solid #20a8df;outline-offset:3px}
.extra:active .box{background:#e5f7ff}
#ratingDialog{width:min(88vw,420px);border:0;border-radius:20px;padding:24px;color:#333;background:white}
#ratingDialog::backdrop{background:#0006}
#ratingDialog h2{margin:0 0 20px;font-size:20px;color:#249ed0}
#ratingDialog label{display:block;font-size:14px;margin:14px 0 8px}
#ratingDialog select,#ratingDialog textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #cee2eb;border-radius:8px;background:#f6fbfe;font:inherit}
#ratingScore{color:#cf8a16}#ratingFeedback{resize:vertical;max-height:180px}
#ratingError{font-size:13px;color:#b94d36}.rating-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.rating-actions button{padding:10px 16px;border-radius:9px;background:#eef5f8}
.rating-actions #submitRating{background:#20a8df;color:white}