:root{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#243e35;background:#f5f6f1;--green:#174f43;--muted:#728278}*{box-sizing:border-box}body{margin:0}a{color:var(--green);text-decoration:none}button,input,textarea{font:inherit}button{background:var(--green);color:white;border:0;border-radius:10px;padding:13px 18px;min-height:44px;cursor:pointer}button:disabled{opacity:.5;cursor:wait}.secondary{background:#f4f8f1;color:var(--green);border:1px solid #dce6d9;font-size:12px;padding:10px 14px}[hidden]{display:none!important}.top{max-width:1120px;margin:auto;padding:22px 28px;border-bottom:1px solid #dde5dc;display:flex;justify-content:space-between;gap:16px;font-size:13px}main{max-width:1120px;margin:auto;padding:50px 28px 28px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:44px}.intro{align-self:start;position:sticky;top:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#779282}h1{font-size:37px;font-weight:600;line-height:1.45;letter-spacing:-1px;margin:20px 0}.intro p{font-size:14px;color:var(--muted);line-height:1.9}.workspace{min-width:0}.card{background:white;border:1px solid #dfe7dd;border-radius:18px;padding:28px;margin-bottom:20px;min-width:0}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:19px;font-weight:600;margin:8px 0}.muted{font-size:12px;color:var(--muted);line-height:1.9}.empty{text-align:center;padding:22px 6px;font-size:13px;color:var(--muted)}.inquiry-row{display:block;border-top:1px solid #edf1e8;padding:17px 0}.inquiry-row strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}.inquiry-row p{font-size:11px;color:var(--muted);line-height:1.7;margin:8px 0}.badge{display:inline-block;font-size:11px;background:#b25c36;color:white;padding:3px 8px;border-radius:20px;margin-left:8px}.thread-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#81917f}.thread-meta span:first-child{color:var(--green);background:#eef5e8;border-radius:5px;padding:4px 8px}.thread-meta span:last-child{padding:4px 0;overflow-wrap:anywhere}.messages{display:flex;flex-direction:column;gap:16px;border-top:1px solid #e5ece0;border-bottom:1px solid #e5ece0;padding:22px 0;margin:22px 0;max-height:440px;overflow:auto;scroll-behavior:smooth}.bubble{max-width:90%;align-self:flex-start}.bubble.customer{align-self:flex-end}.bubble small{display:block;font-size:10px;color:#889585;margin:0 2px 7px}.bubble p{margin:0;background:#f0f5eb;border:1px solid #e5eddd;border-radius:12px 12px 12px 2px;padding:13px 15px;font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.customer p{background:#174f43;color:#fff;border-color:#174f43;border-radius:12px 12px 2px 12px}.bubble.customer small{text-align:right}form{margin-top:20px}label{font-size:13px;font-weight:600}textarea{display:block;resize:vertical;width:100%;font-size:14px;line-height:1.8;background:#fafcf8;color:#243e35;border:1px solid #dce6d8;border-radius:10px;padding:13px;margin-top:10px}form button{width:100%}#page-message{font-size:13px;line-height:1.8;color:#a65c3f;white-space:pre-wrap;padding:8px}footer{grid-column:1/-1;border-top:1px solid #dfe6db;padding:22px 0 0;font-size:11px;color:#8b9987}:focus-visible{outline:3px solid #a2c5ae;outline-offset:3px}@media(max-width:750px){.top{padding:18px;font-size:12px}main{display:block;padding:26px 18px}.intro{position:static}.intro h1{font-size:30px;line-height:1.4;margin:12px 0}.intro p{font-size:13px;margin-bottom:24px}.card{padding:22px 18px;border-radius:16px}.heading{align-items:flex-start}h2{font-size:17px}.messages{max-height:380px}.bubble{max-width:94%}.bubble p{font-size:13px}.thread-meta{gap:8px}footer{margin-top:25px}}@media(prefers-reduced-motion:reduce){.messages{scroll-behavior:auto}}

#chat-start input{display:block;width:100%;padding:13px;background:#fafcf8;color:#243e35;border:1px solid #dce6d8;border-radius:10px;margin:10px 0 20px;font:inherit;font-size:14px}.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.secondary{display:inline-block}#chat-start #chat-topic{background:#eef5e8;padding:12px;border-radius:8px}#chat-name:focus{outline:2px solid #a2c5ae;outline-offset:2px}

.heading:has(#chat-phone){flex-wrap:wrap;gap:8px}.heading:has(#chat-phone) h2{width:100%}
