*{box-sizing:border-box;margin:0;padding:0}:root{--brand:#0e7a5f;--brand-accent:#d9f2ea;--bg:#f4f5f7;--text:#1a1a1a;--muted:#8a8f98;--bubble-other:#fff}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif;font-size:15px}button{cursor:pointer;font-family:inherit}input,textarea{font-family:inherit;font-size:inherit}.app{background:var(--bg);flex-direction:column;max-width:640px;height:100%;margin:0 auto;display:flex}.header{background:var(--brand);color:#fff;flex-shrink:0;align-items:center;gap:10px;padding:12px 16px;display:flex}.header h1{flex:1;font-size:16px;font-weight:600}.header .logout{color:#fff;background:0 0;border:1px solid #ffffff80;border-radius:6px;padding:4px 10px;font-size:12px}.dev-login{padding:24px 16px;overflow-y:auto}.dev-login h2{margin-bottom:4px;font-size:15px}.dev-login .note{color:var(--muted);margin-bottom:16px;font-size:12px}.customer-list{flex-direction:column;gap:8px;display:flex}.customer-list button{text-align:left;background:#fff;border:1px solid #e2e4e8;border-radius:10px;align-items:center;gap:12px;padding:12px;font-size:14px;display:flex}.customer-list button:hover{border-color:var(--brand)}.avatar{background:var(--brand-accent);width:36px;height:36px;color:var(--brand);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;display:flex}.messages{flex-direction:column;flex:1;gap:10px;padding:16px 12px;display:flex;overflow-y:auto}.date-divider{color:var(--muted);align-items:center;gap:10px;margin:6px 0 2px;font-size:11px;display:flex}.date-divider:before,.date-divider:after{content:"";border-top:1px solid #d9dee4;flex:1}.msg-row{flex-direction:column;max-width:78%;display:flex}.msg-row.mine{align-self:flex-end;align-items:flex-end}.msg-row.theirs{align-self:flex-start;align-items:flex-start}.bubble{white-space:pre-wrap;word-break:break-word;border-radius:16px;padding:10px 14px;line-height:1.5}.mine .bubble{background:var(--brand);color:#fff;border-bottom-right-radius:4px}.theirs .bubble{background:var(--bubble-other);border:1px solid #e6e8ec;border-bottom-left-radius:4px}.bubble.deleted{color:var(--muted);background:#eceef1;border:none;font-size:12px}.bubble.system{color:#6b5d2f;background:#fdf6e3;border:1px solid #f0e6c8;font-size:13px}.msg-meta{color:var(--muted);align-items:center;gap:6px;margin-top:2px;font-size:10px;display:flex}.msg-meta .unsend{color:var(--muted);background:0 0;border:none;padding:0;font-size:10px;text-decoration:underline}.attachment img,.attachment video{border-radius:10px;max-width:100%;display:block}.attachment a{color:inherit}.reply-quote{color:#6b7075;white-space:nowrap;text-overflow:ellipsis;background:#0000000a;border-left:3px solid #06c755;border-radius:4px;max-width:240px;margin-bottom:4px;padding:2px 6px;font-size:11px;overflow:hidden}.reply-banner{color:#2b6a45;background:#eef9f2;border-top:1px solid #cde9d8;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex}.reply-banner button{cursor:pointer;color:#2b6a45;background:0 0;border:none;font-size:14px}.img-grid{background:#fff;border:1px solid #e6e8ea;border-radius:10px;grid-template-columns:repeat(5,56px);gap:4px;padding:4px;display:grid}.img-thumb{cursor:zoom-in;background:#f1f3f5;border:none;border-radius:6px;width:56px;height:56px;padding:0;overflow:hidden}.img-thumb img{object-fit:cover;width:100%;height:100%;display:block}.thumb-loading{color:#adb5bd;font-size:12px}.file-link{color:#1971c2;cursor:pointer;background:0 0;border:none;padding:0;font-size:13px;text-decoration:underline}.lightbox{z-index:1000;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lb-top{color:#fff;background:#00000080;align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex;position:absolute;top:0;left:0;right:0}.lb-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.lb-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff6;border-radius:6px;padding:4px 10px;font-size:13px}.lb-content{justify-content:center;align-items:center;max-width:92vw;max-height:84vh;display:flex}.lb-content img,.lb-content video{border-radius:6px;max-width:92vw;max-height:84vh}.lb-content iframe{background:#fff;border:none;border-radius:6px;width:88vw;height:84vh}.lb-arrow{color:#fff;cursor:pointer;z-index:1001;background:#ffffff26;border:none;border-radius:8px;width:48px;height:72px;font-size:34px;position:absolute;top:50%;transform:translateY(-50%)}.lb-arrow.left{left:10px}.lb-arrow.right{right:10px}.lb-arrow:hover{background:#ffffff4d}.quick-replies{background:#f0faf4;border-top:2px solid #06c755;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 14px;display:flex}.quick-reply{color:#fff;cursor:pointer;background:#06c755;border:none;border-radius:20px;padding:10px 22px;font-size:15px;font-weight:700;box-shadow:0 2px 6px #06c75559}.quick-reply:active{background:#05a948;transform:translateY(1px)}.quick-reply:disabled{opacity:.6}.composer{background:#fff;border-top:1px solid #e6e8ec;flex-shrink:0;align-items:flex-end;gap:8px;padding:10px 12px;display:flex}.composer textarea{resize:none;border:1px solid #dcdfe4;border-radius:18px;outline:none;flex:1;max-height:100px;padding:9px 14px}.composer textarea:focus{border-color:var(--brand)}.composer .send,.composer .attach{border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:17px;display:flex}.composer .send{background:var(--brand);color:#fff}.composer .send:disabled{opacity:.4;cursor:default}.composer .attach{color:#555;background:#eef0f3}.loading,.empty{text-align:center;color:var(--muted);padding:32px 16px;font-size:13px}.form-screen{flex-direction:column;flex:1;gap:14px;padding:16px 14px 32px;display:flex;overflow-y:auto}.form-title{margin:0;font-size:17px}.form-desc{color:#6b7075;white-space:pre-wrap;margin:0;font-size:13px;line-height:1.7}.form-field{flex-direction:column;gap:5px;display:flex}.form-label{align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.form-required{color:#fff;background:#e03131;border-radius:3px;padding:1px 5px;font-size:10px;font-weight:600}.form-field input,.form-field select,.form-field textarea{box-sizing:border-box;background:#fff;border:1px solid #d4d8dc;border-radius:8px;width:100%;padding:10px 12px;font-family:inherit;font-size:16px}.form-field textarea{resize:vertical}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--brand);outline:none}.form-submit{background:var(--brand);color:#fff;cursor:pointer;border:none;border-radius:999px;margin-top:6px;padding:13px;font-size:15px;font-weight:600}.form-submit:disabled{opacity:.6}.form-error{color:#c92a2a;white-space:pre-wrap;background:#fff5f5;border:1px solid #ffc9c9;border-radius:8px;margin:0;padding:10px 12px;font-size:13px;line-height:1.6}.form-done{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:40px 10px;display:flex}.form-done-mark{background:var(--brand);color:#fff;border-radius:50%;width:56px;height:56px;margin:0;font-size:30px;line-height:56px}.form-done h2{margin:0;font-size:17px}.form-done p{color:#6b7075;margin:0;font-size:13px;line-height:1.7}.form-done .form-submit{min-width:200px;margin-top:14px}.form-help{color:#6b7075;white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.7}.form-help a{color:#1971c2}.form-field-error{color:#c92a2a;font-size:12px}.form-field input[aria-invalid=true]{background:#fff8f8;border-color:#ffa8a8}.form-price{color:#0e7a5f;background:var(--brand-accent);border-radius:8px;align-self:flex-start;padding:7px 12px;font-size:14px;font-weight:700}.composer.readonly-note{color:var(--muted);text-align:center;padding:12px 14px;font-size:12px;display:block}.share-gate{color:#212529;background:#f1f3f5;justify-content:center;align-items:center;min-height:100vh;font-size:14px;display:flex}.share-card{background:#fff;border:1px solid #dee2e6;border-radius:10px;flex-direction:column;gap:14px;width:min(360px,90vw);padding:28px 24px;display:flex;box-shadow:0 2px 12px #0000000f}.share-card h1{margin:0;font-size:17px}.share-card p{color:#868e96;margin:0;font-size:13px;line-height:1.7}.upload-progress{border-top:1px solid var(--border);flex-direction:column;gap:6px;padding:9px 14px;display:flex}.upload-progress-head{justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;display:flex}.upload-progress-name{align-items:baseline;gap:8px;min-width:0;display:flex}.upload-progress-name small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:11px;overflow:hidden}.upload-progress-percent{font-variant-numeric:tabular-nums;font-weight:600}.upload-progress-bar{background:#7f7f7f38;border-radius:999px;height:6px;overflow:hidden}.upload-progress-fill{background:var(--brand,#1971c2);border-radius:999px;height:100%;transition:width .15s ease-out}@keyframes bubble-in-mine{0%{opacity:0;transform:translate(10px,8px)scale(.97)}to{opacity:1;transform:none}}@keyframes bubble-in-theirs{0%{opacity:0;transform:translate(-10px,8px)scale(.97)}to{opacity:1;transform:none}}.msg-row.fresh.mine{animation:.28s cubic-bezier(.2,.9,.3,1) both bubble-in-mine}.msg-row.fresh.theirs{animation:.28s cubic-bezier(.2,.9,.3,1) both bubble-in-theirs}.composer .send{transition:transform .12s ease-out,opacity .12s ease-out}.composer .send:not(:disabled):active{transform:scale(.88)}@keyframes send-pop{0%{transform:scale(.85)}55%{transform:scale(1.12)}to{transform:scale(1)}}.composer .send.sent{animation:.36s cubic-bezier(.2,.9,.3,1) send-pop}@media (prefers-reduced-motion:reduce){.msg-row.fresh.mine,.msg-row.fresh.theirs,.composer .send.sent{animation:none}.composer .send:not(:disabled):active{transform:none}}.migrate{padding:20px 16px 32px;overflow-y:auto}.migrate h2{margin:0 0 6px;font-size:18px}.migrate .note{color:var(--muted);margin:0 0 12px;font-size:13px;line-height:1.6}.migrate-card{border:1px solid var(--border,#e5e7eb);background:#fff;border-radius:12px;flex-direction:column;gap:10px;padding:16px;display:flex}.migrate-card h3{margin:0;font-size:15px}.migrate-card .note{margin:0}.migrate-field{flex-direction:column;gap:4px;font-size:13px;display:flex}.migrate-field small{color:var(--muted);font-size:11px}.migrate-field input{border:1px solid var(--border,#d0d5dd);border-radius:8px;padding:10px 12px;font-size:16px}.migrate-btn{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:600}.migrate-btn:disabled{opacity:.45}.migrate-btn.sub{color:var(--brand);border:1px solid var(--brand);background:#fff}.migrate-hint{color:#b42318;margin:0;font-size:12px}.migrate-error{color:#b42318;background:#fef3f2;border-radius:8px;margin-top:12px;padding:10px 12px;font-size:13px}.migrate-who{grid-template-columns:80px 1fr;gap:6px 10px;margin:4px 0;font-size:14px;display:grid}.migrate-who dt{color:var(--muted)}.migrate-who dd{margin:0;font-weight:600}