:root{--deep:#073b42;--teal:#0b7777;--coral:#ff7562;--line:#dbe7e5;--shadow:0 24px 70px rgba(7,48,53,.25)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans TC",sans-serif;color:var(--deep)}body{background:#eef4f2}button,input{font:inherit}.website-layer{min-height:150vh;position:relative;background:#f4f7f6}.website-layer iframe{position:fixed;inset:0;width:100%;height:100%;border:0;background:#fff}.site-fallback{position:fixed;inset:0;display:none;padding:7vw;background:linear-gradient(135deg,#eff8f5,#d3eae4);overflow:hidden}.site-fallback:after{content:"";position:absolute;width:44vw;height:44vw;border-radius:50%;right:-8vw;bottom:-14vw;background:#ff826c}.fallback-logo{font:700 30px Outfit;position:relative;z-index:1}.fallback-logo span{color:var(--coral)}.fallback-copy{position:relative;z-index:1;max-width:620px;margin-top:18vh}.fallback-copy small{letter-spacing:3px;color:var(--teal)}.fallback-copy h1{font-size:clamp(54px,7vw,105px);line-height:1;margin:20px 0}.fallback-copy p{font-size:18px;line-height:1.9;color:#577176}.fallback-copy a{display:inline-block;margin-top:20px;padding:14px 22px;border-radius:99px;background:var(--deep);color:#fff;text-decoration:none}.frame-notice{position:fixed;left:18px;bottom:18px;z-index:3;padding:9px 12px;border-radius:10px;background:rgba(7,59,66,.9);color:#fff;font-size:11px}.frame-notice a{color:#a9eadc;margin-left:8px}
.chat-launcher{position:fixed;right:22px;bottom:22px;z-index:20;width:268px;height:88px;padding:9px 22px 9px 9px;border:0;border-right:5px solid var(--coral);border-radius:25px 6px 6px 25px;background:rgba(255,255,255,.95);box-shadow:0 17px 50px rgba(4,47,53,.25);display:flex;align-items:center;gap:15px;color:var(--deep);cursor:pointer;transition:.25s}.chat-launcher:hover{transform:translateY(-3px)}.chat-launcher.hidden{opacity:0;transform:translateY(15px) scale(.94);pointer-events:none}.launcher-avatar{width:70px;height:70px;flex:0 0 auto;border-radius:20px;overflow:hidden;background:#dcece8}.launcher-avatar img{width:100%;height:100%;object-fit:cover}.launcher-copy{display:grid;text-align:left}.launcher-copy b{font-size:20px}.launcher-copy small{font:600 11px Outfit;color:#758b8e;margin-top:5px}.launcher-dot{position:absolute;right:-4px;top:-9px;width:18px;height:18px;border-radius:50%;background:#3fc68d;border:3px solid #fff}
.chat-widget{position:fixed;right:22px;bottom:22px;z-index:21;width:min(430px,calc(100vw - 24px));height:min(650px,calc(100dvh - 28px));border-radius:24px;background:#fff;box-shadow:var(--shadow);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);transform-origin:bottom right;transition:.28s cubic-bezier(.2,.8,.2,1)}.chat-widget.open{opacity:1;visibility:visible;transform:none}.widget-header{height:58px;padding:0 12px 0 16px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e7efed}.widget-brand{display:flex;align-items:center;gap:9px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--deep);color:#fff;font:700 20px Outfit}.widget-brand strong{font:700 18px Outfit;display:block}.widget-brand small{font:600 8px Outfit;letter-spacing:1.5px;color:#829496;display:block}.widget-brand i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#42c88e;margin-right:5px}.widget-actions{display:flex;gap:6px}.widget-actions button{width:36px;height:36px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--deep);display:grid;place-items:center;cursor:pointer}.widget-actions svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.7}.widget-actions .close-button{font-size:25px;font-weight:300}.widget-body{height:calc(100% - 58px)}.widget-body iframe{display:block;width:100%;height:100%;border:0;background:#eef7f5}
.settings-panel{position:absolute;inset:58px 0 0 auto;width:min(350px,100%);z-index:5;padding:22px;background:#fff;box-shadow:-18px 0 50px rgba(5,49,55,.16);overflow:auto;transform:translateX(105%);transition:.25s}.settings-panel.open{transform:none}.settings-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.settings-heading small{font:700 9px Outfit;letter-spacing:2px;color:var(--coral)}.settings-heading h2{font-size:22px;margin:3px 0}.settings-heading button{width:34px;height:34px;border:0;border-radius:10px;background:#edf3f1;color:var(--deep);font-size:22px}.settings-panel>label{display:grid;gap:7px;margin-bottom:15px;font-size:12px;font-weight:700}.settings-panel input:not([type=color]):not([type=range]){width:100%;padding:10px 11px;border:1px solid #d9e5e2;border-radius:10px;outline:0}.url-input{display:flex;align-items:center;border:1px solid #d9e5e2;border-radius:10px;padding-left:10px}.url-input input{border:0!important}.upload-control{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 9px;padding:10px;border:1px dashed #b9d1cc;border-radius:11px;background:#f7faf9;overflow:hidden}.upload-control input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-control b{grid-row:1/3;padding:7px 10px;border-radius:8px;background:var(--deep);color:#fff}.upload-control small{color:#829496;font-weight:400}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:17px}.color-grid label{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border:1px solid #e0e9e7;border-radius:10px;font-size:11px;font-weight:700}.color-grid input{width:28px;height:28px;padding:0;border:0;background:none}.range-label>span{display:flex;justify-content:space-between}.range-label output{color:var(--teal)}.range-label input{accent-color:var(--teal)}.setting-note{font-size:10px;line-height:1.6;color:#7f9395;background:#f4f7f6;padding:10px;border-radius:9px}.apply-settings{width:100%;padding:12px;border:0;border-radius:11px;background:var(--deep);color:#fff;font-weight:700;cursor:pointer}
@media(max-width:520px){.frame-notice{display:none}.chat-launcher{right:12px;bottom:12px}.chat-widget{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}.widget-header{height:56px}.widget-body{height:calc(100% - 56px)}.settings-panel{inset:56px 0 0 auto}}