@import url('/platform/system-ui.css');
:root{font-family:'Noto Sans Thai',system-ui,sans-serif;color:#173f35;background:#f6f8f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}header{height:92px;display:flex;align-items:center;justify-content:space-between;max-width:1260px;margin:auto;padding:0 32px;gap:18px}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:750;letter-spacing:-.8px}.brand>span{background:#205e49;color:white;border-radius:13px;width:39px;height:39px;text-align:center;font-size:30px}.brand small{font-size:9px;letter-spacing:2px;border-left:1px solid #bccbbf;padding-left:12px;margin-left:5px;color:#728979}.preview{font-size:11px;padding:7px 13px;border:1px solid #d6e2d7;border-radius:30px;color:#64796a}.signup{display:grid;grid-template-columns:1fr 440px;gap:85px;max-width:1140px;margin:35px auto 65px;padding:0 28px}.intro{padding-top:42px}.eyebrow,.step{font-size:10px;font-weight:700;letter-spacing:2px;color:#78957c}h1{font-size:48px;line-height:1.4;letter-spacing:-1.8px;margin:20px 0}h1 span{color:#4b8a4f}.intro>p{color:#788978;font-size:15px;line-height:1.9}.conversation-art{position:relative;margin:40px 0 25px;min-height:240px;max-width:435px;background:radial-gradient(ellipse,#e2eccb,transparent 72%)}.art-person{width:40px;height:40px;background:#d3deb5;border-radius:15px;display:grid;place-items:center;position:absolute;top:17px;left:0}.art-bubble{background:white;box-shadow:0 9px 40px #2451330c;padding:16px 22px;border-radius:20px 20px 20px 3px;position:absolute;left:53px;top:8px;transform:rotate(-3deg);font-size:14px}.art-bubble small{display:block;font-size:9px;color:#99aa97;margin-top:5px}.art-bubble.reply{left:auto;right:0;top:97px;background:#286548;color:white;transform:rotate(3deg);border-radius:20px 20px 3px 20px}.art-bubble.reply small{color:#bed3bb}.art-caption{position:absolute;bottom:0;left:28px;display:flex;gap:12px;align-items:center;font-size:10px;color:#7f9278}.art-caption i{font-size:30px;color:#91ad64}.art-caption b{font-size:13px;color:#456c4b}.benefits{display:flex;gap:22px;font-size:11px;color:#71846b;flex-wrap:wrap}.form-card{background:white;border:1px solid #e4eae0;padding:32px;border-radius:27px;box-shadow:0 20px 65px #35562b06}h2{font-size:25px;margin:13px 0 5px;letter-spacing:-.5px}.muted{color:#839080;font-size:12px;margin:0 0 22px}.notice{font-size:11px;background:#f0f5e8;padding:11px 13px;border-radius:10px;color:#678058;line-height:1.6}label{display:block;font-size:12px;font-weight:600;margin:18px 0 7px}input,textarea{font:inherit;font-size:14px;width:100%;border:1px solid #dfe6dc;border-radius:11px;padding:12px 13px;background:#fcfdfb;color:#214832;outline-offset:3px}input:focus,textarea:focus{outline:2px solid #86aa7e}input::placeholder,textarea::placeholder{color:#a0ad9e}.handle{display:flex;align-items:center;border:1px solid #dfe6dc;border-radius:11px;background:#fcfdfb;padding-left:13px;color:#8b9c83}.handle input{border:0;background:none}.handle+small{font-size:10px;display:block;color:#859580;margin-top:6px}.form-note{font-size:10px;color:#8a9586;line-height:1.7}.primary{background:#245f45;color:white;font:inherit;font-weight:600;font-size:13px;border:0;border-radius:12px;padding:14px 18px;cursor:pointer;min-height:46px}.primary:hover{background:#194a35}#signup-form>.primary{width:100%;display:flex;justify-content:space-between;margin-top:18px}.footnote{font-size:11px;text-align:center;color:#869180;margin:24px 0 0}.footnote a{font-weight:600;color:#406e44}footer{border-top:1px solid #e2e8de;max-width:1140px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;color:#8b9a83;font-size:10px;letter-spacing:1px}footer span{letter-spacing:0}#form-error{color:#a44831;font-size:12px}.chat-layout{max-width:1196px;margin:15px auto;display:grid;grid-template-columns:310px minmax(0,1fr);height:calc(100dvh - 135px);min-height:400px;background:white;border:1px solid #dfe7da;border-radius:24px;overflow:hidden}.rooms{padding:24px;border-right:1px solid #e3e9df}.rooms-title{display:flex;align-items:center;justify-content:space-between}.rooms h1{font-size:26px;letter-spacing:0;margin:0 0 10px}.room{display:flex;gap:10px;align-items:center;background:#edf4e7;border:0;border-radius:13px;padding:14px 10px;width:100%;text-align:left;color:#214c36;font:inherit}.room span{min-width:0}.room b{font-size:11px;display:block}.room small{font-size:10px;display:block;color:#809575}.room em{display:none}i{font-style:normal}.room i,.chat-heading i{width:38px;height:38px;border-radius:13px;background:#d6e5c0;display:grid;place-items:center;flex-shrink:0}.empty-rooms{font-size:11px;color:#9ba591;line-height:1.9;text-align:center;margin-top:35px}.chat-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:#f7f9f3}.chat-heading{display:flex;gap:12px;align-items:center;background:white;padding:18px 24px;border-bottom:1px solid #e5ebde}.chat-heading b{font-size:14px}.chat-heading small{display:block;font-size:10px;color:#8c9c82}#message-list{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:18px}.date{font-size:10px;color:#9aa78e;align-self:center}.bubble{background:white;border:1px solid #e6eadf;border-radius:18px 18px 18px 4px;padding:15px 18px;font-size:13px;line-height:1.8;max-width:85%;align-self:flex-start;white-space:pre-wrap;overflow-wrap:anywhere}.bubble small{display:block;font-size:9px;color:#9aa88c;margin-top:5px}.bubble.mine{background:#285e43;color:white;align-self:flex-end;border-radius:18px 18px 4px 18px}.bubble.mine small{color:#bcceb0}#chat-form{display:flex;gap:12px;padding:16px 20px 5px;background:white}#chat-form textarea{resize:none;min-width:0}#chat-form button{flex-shrink:0}.chat-note{font-size:10px;color:#8b9c80;padding:5px 20px 12px;margin:0;background:white}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}a:focus-visible,button:focus-visible{outline:3px solid #89ad72;outline-offset:3px}
@media(max-width:850px){.signup{gap:30px;grid-template-columns:1fr 400px}.intro h1{font-size:36px}.chat-layout{margin:10px 15px;grid-template-columns:235px minmax(0,1fr)}.rooms{padding:18px}.brand small{display:none}}
@media(max-width:650px){header{height:72px;padding:0 20px}.brand{font-size:21px}.preview{font-size:9px;padding:6px 9px}.signup{display:flex;flex-direction:column;margin:10px auto 35px;padding:0 18px;gap:24px}.intro{padding:15px 6px 0}.intro h1{font-size:34px;margin:13px 0}.intro>p{font-size:13px}.conversation-art,.benefits{display:none}.form-card{padding:24px;border-radius:22px}.eyebrow{font-size:9px}.form-card h2{font-size:24px}input,textarea{font-size:16px}footer{padding:20px;font-size:8px;gap:15px}.chat-layout{display:flex;margin:0 10px 10px;height:calc(100dvh - 83px);border-radius:18px}.rooms{display:none}.chat-pane{width:100%}.chat-heading{padding:14px}#message-list{padding:15px}.bubble{max-width:92%;font-size:12px}#chat-form{padding:12px 10px 5px;gap:8px}.chat-note{font-size:9px;padding-left:12px}}
.provider-button{width:100%;display:block;padding:14px 18px;border:1px solid #dce5d8;background:white;color:#254f39;border-radius:12px;font:600 14px system-ui;min-height:48px;cursor:pointer;margin:15px 0 5px}.line-button{background:#06c755;color:white;border:0}.provider-button:disabled{opacity:.45;cursor:not-allowed}.provider-note,.oauth-options small{font-size:10px;color:#809277}.signup-steps{padding-left:20px;margin-top:25px;font-size:12px;color:#7a8e71;line-height:2}.oauth-options{margin:20px 0;border-top:1px solid #e4eade;padding-top:10px}.oauth-options h3{font-size:13px}.provider-avatar{height:72px;width:72px;border-radius:22px;object-fit:cover;margin-bottom:14px}