@import url('/platform/system-ui.css');
:root{--ink:#1a352d;--green:#237b58;--muted:#76847e;--line:#e4eae6}*{box-sizing:border-box}body{margin:0;background:#f5f7f4;color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}header{height:88px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1320px)/2));gap:24px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:750;line-height:1}.brand b{font-size:38px;width:48px;height:48px;border-radius:15px;background:#28694e;color:white;text-align:center;padding:1px}.brand small{display:block;font-size:9px;letter-spacing:.3em;margin-top:7px;color:#8a9b8e}.tagline{color:var(--muted);font-size:13px}.account{background:#eff5ed;padding:10px 17px;border-radius:30px;font-size:13px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shell{max-width:1320px;margin:32px auto;display:grid;grid-template-columns:210px minmax(0,680px) 270px;gap:28px;padding:0 24px}.sidebar{position:sticky;top:120px;height:fit-content}.sidebar nav{display:grid;gap:8px}.sidebar nav a{display:flex;gap:15px;align-items:center;padding:13px 16px;border-radius:14px;color:#617068}.sidebar nav span{font-size:24px;width:28px}.sidebar nav [aria-current]{background:#e0eedf;color:#245e40;font-weight:700}.side-note{margin-top:40px;border-top:1px solid var(--line);padding:24px 15px;font-size:13px}.side-note p,.rightbar p{color:var(--muted)}.sidebar>small,.rightbar>small{font-size:11px;color:#89988e;display:block;padding:10px 15px}main{min-width:0;padding:0;margin:0;max-width:none}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:650;color:#75977b}h1{font-size:30px;line-height:1.3;margin:8px 0 0}h2{font-size:20px;margin:10px 0}.pill{border:1px solid var(--line);padding:7px 13px;border-radius:22px;color:#788b7d;font-size:12px}.card{background:white;border:1px solid var(--line);border-radius:23px;padding:25px;margin-bottom:22px;box-shadow:0 4px 18px #19382403}.author{display:flex;gap:12px;align-items:center}.author small,.dm-head small{display:block;font-size:11px;color:var(--muted)}i{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;background:#e7ead4;color:#52703c;border-radius:15px;font-size:21px;font-style:normal}input,textarea,select{font:inherit;border:1px solid var(--line);border-radius:12px;padding:11px 13px;color:var(--ink);background:#f9fbf8;max-width:100%}input:focus,textarea:focus{outline:2px solid #96bda1;outline-offset:2px}textarea{resize:vertical;width:100%}.composer textarea{border:0;background:white;min-height:108px;padding:20px 0}.compose-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:16px}.compose-footer label{font-size:11px;color:var(--muted)}select{padding:7px;font-size:12px;background:white}button,.primary{cursor:pointer;font:600 13px inherit;background:var(--green);color:white;border:0;border-radius:12px;padding:11px 18px;display:inline-block;min-height:42px}button:hover,.primary:hover{filter:brightness(.94)}button:focus-visible,a:focus-visible{outline:3px solid #97bfa6;outline-offset:3px}.quiet{background:transparent;color:#788b7d;padding:8px}.liked{color:#237b58;background:#eff7ef}.post-body{font-size:16px;overflow-wrap:anywhere;margin:22px 0}.post-actions{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px}.post-actions form{margin:0}.inline-form{display:flex;gap:10px;margin-top:15px}.inline-form input{min-width:0;flex:1}.comments p{background:#f5f7f4;padding:10px 13px;border-radius:12px;font-size:13px;overflow-wrap:anywhere}.comments b{display:block;font-size:12px}.empty{text-align:center;padding:40px 20px}.empty p{color:var(--muted);font-size:14px}.empty a{color:var(--green);font-weight:600}.empty-icon{font-size:42px;color:#94af85}.rightbar h2{font-size:21px}.mini-art{height:145px;display:grid;place-items:center;font-size:110px;color:#b5cc92;background:#f0f4e7;border-radius:18px;margin-top:22px}.people-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.person{text-align:center;margin:0}.person i{margin:0 auto;width:64px;height:64px;font-size:28px}.person h2{font-size:16px;overflow-wrap:anywhere}.person p{color:var(--muted);font-size:12px;min-height:35px}.person form{margin-top:10px}.profile-cover{height:125px;background:radial-gradient(ellipse at top right,#c3d998,#307860);border-radius:16px;margin-bottom:22px}.profile-form label{display:block;margin:20px 0}.profile-form input{width:100%}.contacts{display:flex;overflow:auto;gap:15px;padding-bottom:18px}.contacts a{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:13px}.dm-head{border-block:1px solid var(--line);padding:16px 0}#messages{height:48vh;min-height:260px;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:20px 0}.bubble{align-self:flex-start;max-width:82%;background:#edf2e9;border-radius:16px 16px 16px 4px;padding:12px 15px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.mine{align-self:flex-end;background:#287b57;color:white;border-radius:16px 16px 4px 16px}.bubble small{display:block;font-size:10px;opacity:.65;margin-top:6px}.notice{padding:16px;background:#fff1e5;border-radius:14px;color:#8f4e20}.welcome{position:relative;min-height:680px;background:#e9f0de;border-radius:28px;padding:40px;overflow:hidden}.welcome h1{font-size:49px;margin:28px 0 20px}.welcome h1 span{color:#89aa57}.welcome p{color:#708168;line-height:1.9}.welcome-actions{display:flex;gap:20px;align-items:center;font-size:13px;position:relative;z-index:2}.welcome-art{position:relative;height:250px}.orbit{position:absolute;width:160px;height:160px;background:#2e714d;border-radius:45px;transform:rotate(-12deg);font-size:100px;color:#fff;text-align:center;left:38%;top:35px;box-shadow:20px 22px 0 #bed29a}.floating{position:absolute;background:white;border:1px solid #dce5d5;border-radius:15px;padding:13px 20px;font-size:14px;box-shadow:0 10px 30px #33552b10}.one{top:10px;left:0;transform:rotate(-5deg)}.two{bottom:0;right:0;transform:rotate(5deg)}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
@media(max-width:1100px){.rightbar{display:none}.shell{grid-template-columns:200px minmax(0,1fr);max-width:980px}}@media(max-width:650px){header{height:70px;padding:0 16px}.tagline{display:none}.brand{font-size:20px}.brand b{width:38px;height:38px;font-size:30px}.account{max-width:145px;padding:8px 12px;font-size:11px}.shell{display:block;margin:20px auto 100px;padding:0 13px}.sidebar{position:static}.sidebar nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:#fff;border-top:1px solid var(--line);padding:8px 6px max(8px,env(safe-area-inset-bottom));justify-content:space-around}.sidebar nav a{display:flex;flex-direction:column;font-size:10px;gap:0;padding:5px 10px}.sidebar nav span{text-align:center}.sidebar .side-note,.sidebar>small{display:none}.card{padding:18px;border-radius:19px}.heading{margin-bottom:18px}h1{font-size:26px}.compose-footer{flex-wrap:wrap}.people-grid{gap:10px}.person{padding:15px 10px}.welcome{padding:27px 24px;min-height:620px}.welcome h1{font-size:39px}.welcome-actions{flex-direction:column;align-items:flex-start;gap:15px}.welcome-art{height:220px}.orbit{left:30%;width:130px;height:130px;font-size:80px}.floating{font-size:11px;padding:10px}.inline-form input,textarea{font-size:16px}}
/* Safety controls remain secondary to the conversation. */
.safety-menu{margin-top:16px;text-align:left;border-top:1px solid #dce7e2;padding-top:12px}
.safety-menu summary{cursor:pointer;font-size:.9rem;color:#48695e}
.safety-menu textarea{display:block;width:100%;min-height:90px;margin:10px 0}
.safety-menu p{font-size:.9rem}
.chat-page .shell{grid-template-columns:185px minmax(0,1fr)}.chat-page .rightbar{display:none}.chat-workspace{display:grid;grid-template-columns:290px minmax(0,1fr);background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden;height:calc(100dvh - 220px);min-height:420px}.chat-directory{padding:20px 12px;border-right:1px solid var(--line);overflow-y:auto;min-width:0}.chat-directory>input{width:100%;margin:16px 0}.contact-row{display:flex;align-items:center;gap:10px;padding:14px 10px;border-radius:12px}.contact-row[hidden]{display:none}.contact-row:hover,.contact-row[aria-current]{background:#eaf4ed}.contact-copy{min-width:0;flex:1}.contact-copy b,.contact-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-copy small{color:#6a7c73;font-size:12px}.unread-count{border-radius:20px;background:#237b58;color:white;padding:2px 7px;font-size:11px}.conversation-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f6f8f5}.conversation-heading{display:flex;gap:12px;align-items:center;padding:16px 22px;background:white;border-bottom:1px solid var(--line)}.conversation-heading b{overflow-wrap:anywhere}.conversation-heading small{display:block;font-size:11px;color:#718478}.conversation-pane #messages{flex:1;min-height:0;height:auto;padding:22px;scroll-behavior:smooth}.message-composer{display:flex;gap:10px;padding:12px 18px 4px;background:white}.message-composer textarea{resize:none;max-height:150px;min-height:46px}.message-composer button{flex-shrink:0}.composer-hint{padding:3px 20px 12px;background:white;color:#75867b;font-size:10px}.chat-back{display:none}.chat-welcome{margin:auto}.conversation-pane #chat-status{margin:0;font-size:12px;padding:0 20px;color:#875021}.bubble{box-shadow:0 2px 5px #213a2908}.people-grid{margin-top:18px}.chat-page .heading h1{margin:0}
@media(max-width:900px){.chat-page .shell{grid-template-columns:150px minmax(0,1fr);gap:15px}.chat-workspace{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:650px){.chat-page .shell{display:block;margin-top:12px}.chat-workspace{display:block;height:calc(100dvh - 225px);min-height:320px}.chat-directory{height:100%;border:0}.chat-workspace.has-peer .chat-directory{display:none}.chat-workspace:not(.has-peer) .conversation-pane{display:none}.conversation-pane{height:100%}.conversation-heading{padding:12px}.chat-back{display:block;font-size:24px;padding:4px 8px}.conversation-pane #messages{padding:16px}.message-composer{padding:10px 10px 3px}.composer-hint{font-size:9px}.chat-page .heading{font-size:12px}}