@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--ink:#202324;--muted:#85847d;--paper:#f4f1e9;--line:#dad6ca;--orange:#ef7e4d;--teal:#247b77;--night:#202c2b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope','Noto Sans Thai',sans-serif;min-height:100vh}.grain{position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4vw;gap:30px}.brand{font-size:20px;font-weight:800;letter-spacing:-.5px;color:inherit;text-decoration:none;display:flex;align-items:center;gap:9px}.brand-mark{font-size:27px;color:var(--orange);transform:rotate(-25deg);display:inline-block}.dot{color:var(--orange)}.status{margin-right:auto;font:11px 'DM Mono',monospace;text-transform:uppercase;color:var(--muted);letter-spacing:1px}.pulse{display:inline-block;width:7px;height:7px;background:#55aa72;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #55aa7220}.new-room-button,.composer-actions button,.dialog-submit{border:0;background:var(--ink);color:#fff;padding:12px 18px;font:600 12px 'Manrope','Noto Sans Thai',sans-serif;cursor:pointer}.new-room-button span{color:#f7a26e;font-size:18px;vertical-align:-2px;margin-right:4px}.app-shell{display:grid;grid-template-columns:minmax(240px,280px) minmax(450px,1fr) minmax(200px,280px);max-width:1500px;margin:0 auto;min-height:calc(100vh - 78px)}.sidebar{padding:44px 28px 25px 4vw;border-right:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{font:500 10px 'DM Mono',monospace;letter-spacing:1.4px;color:var(--muted);margin:0 0 15px;text-transform:uppercase}.sidebar h1{font-size:34px;line-height:1.05;letter-spacing:-1.5px;margin:0 0 18px}.sidebar h1 em{color:var(--orange);font-style:normal}.intro-copy{font-size:12px;line-height:1.7;color:var(--muted);max-width:190px;margin:0}.room-heading{border-top:1px solid var(--line);padding-top:24px;margin-top:46px;display:flex;justify-content:space-between;font-size:11px;font-weight:700}.room-count{color:var(--orange);font:12px 'DM Mono',monospace}.room-list{margin-top:14px}.room-item{width:100%;border:0;background:transparent;text-align:left;padding:12px 10px;display:flex;align-items:center;gap:11px;cursor:pointer;color:var(--muted);font-family:inherit}.room-item.active{background:#e8e3d8;color:var(--ink)}.room-dot{width:9px;height:9px;border-radius:50%;flex:none}.room-name{font-size:12px;font-weight:600}.room-item small{margin-left:auto;font:10px 'DM Mono',monospace}.sidebar-foot{margin-top:auto;color:var(--muted);font:10px 'DM Mono',monospace;display:flex;gap:7px;align-items:center}.sidebar-foot>span:first-child{color:#55aa72}.foot-separator{color:var(--line)}.conversation{padding:44px clamp(25px,5vw,80px) 30px;display:flex;flex-direction:column;min-width:0}.conversation-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:28px}.conversation-head h2{font-size:32px;letter-spacing:-1.3px;margin:0 0 6px}.conversation-head p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0}.head-decoration{text-align:right;font:34px 'DM Mono',monospace;color:var(--orange);line-height:.8}.head-decoration span{font:10px 'DM Mono',monospace;color:var(--muted);letter-spacing:1px}.thread{flex:1;padding:24px 0;overflow:auto;min-height:300px}.message{display:grid;grid-template-columns:38px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid #e3dfd5;animation:rise .35s ease both}.avatar{width:34px;height:34px;background:var(--night);color:#f6d2a2;display:grid;place-items:center;font:bold 12px 'DM Mono',monospace}.message-meta{display:flex;gap:10px;align-items:baseline}.message-author{font-size:12px;font-weight:700}.message-time{font:10px 'DM Mono',monospace;color:var(--muted)}.message-body{font-size:13px;line-height:1.65;margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere}.message-index{font:10px 'DM Mono',monospace;color:#bbb5a8}.empty-state{text-align:center;margin-top:90px;color:var(--muted)}.empty-icon{display:block;font-size:28px;color:var(--orange);margin-bottom:12px}.empty-state p{font-size:13px;color:var(--ink);margin:0 0 5px}.empty-state small{font:10px 'DM Mono',monospace}.composer{border-top:2px solid var(--ink);padding-top:15px}.composer-top{display:flex;align-items:center;gap:10px}.composer label{font:10px 'DM Mono',monospace;color:var(--muted)}.composer input{border:0;background:transparent;font:12px inherit;width:150px;outline:0;color:var(--ink)}.char-hint{font:10px 'DM Mono',monospace;color:var(--muted);margin-left:auto}.composer textarea{resize:vertical;width:100%;border:0;background:transparent;outline:0;font:15px/1.6 'Manrope','Noto Sans Thai',sans-serif;padding:13px 0;min-height:62px}.composer textarea::placeholder{color:#aaa69c}.composer-actions{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:10px 'DM Mono',monospace}.composer-actions button{background:var(--orange);padding:12px 15px}.composer-actions button span{font-size:16px;margin-left:8px}.info-panel{background:var(--night);color:#f5f0e5;padding:45px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden}.info-number{font:80px 'DM Mono',monospace;color:#e5e0d4;line-height:1;opacity:.9}.info-number span{color:var(--orange)}.info-block{margin-top:auto;max-width:205px}.info-block .eyebrow{color:#9da7a0}.info-block p:not(.eyebrow){font-size:14px;line-height:1.75;margin:0}.rules{border-top:1px solid #ffffff20;margin-top:38px;padding-top:20px;font-size:11px;line-height:2.5;color:#c3c7bc}.rules span{font:10px 'DM Mono',monospace;color:var(--orange);margin-right:14px}.built-with{margin-top:auto;padding-top:35px;font:10px/1.8 'DM Mono',monospace;color:#727d78}.built-with span{color:#e5e0d4}.toast{position:fixed;right:25px;bottom:25px;background:var(--ink);color:#fff;padding:13px 18px;font-size:12px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}dialog{border:0;padding:0;background:var(--paper);color:var(--ink);width:min(420px,calc(100% - 30px));box-shadow:0 20px 80px #20232440}dialog::backdrop{background:#20232488}.dialog-head{display:flex;justify-content:space-between;margin-bottom:30px}.dialog-head h2{margin:0;font-size:25px}.close-button{border:0;background:transparent;font-size:25px;color:var(--muted);cursor:pointer}#room-form{padding:30px}#room-form>label{display:block;font:10px 'DM Mono',monospace;color:var(--muted);margin:16px 0 8px}#room-form>input{width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;font:14px inherit;outline:0}.color-picker{margin:24px 0}.color-picker>span{font:10px 'DM Mono',monospace;color:var(--muted);display:block;margin-bottom:12px}.color-option{width:22px;height:22px;border-radius:50%;border:3px solid var(--paper);outline:1px solid transparent;cursor:pointer;display:inline-block;margin-right:8px}.color-option.selected{outline-color:var(--ink)}.dialog-submit{width:100%;margin-top:8px;background:var(--orange)}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:950px){.app-shell{grid-template-columns:230px minmax(0,1fr)}.info-panel{display:none}}@media(max-width:650px){.topbar{height:66px;padding:0 18px}.status{display:none}.new-room-button{margin-left:auto;padding:10px 12px}.app-shell{display:block;min-height:calc(100vh - 66px)}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:22px 18px 14px}.sidebar-intro{display:none}.room-heading{margin-top:0;padding-top:0;border:0}.room-list{display:flex;overflow-x:auto;gap:5px;margin:8px -5px 0}.room-item{min-width:max-content;padding:9px 10px}.room-item small{display:none}.sidebar-foot{display:none}.conversation{padding:25px 18px 20px}.conversation-head{padding-bottom:20px}.conversation-head h2{font-size:26px}.head-decoration{font-size:26px}.thread{min-height:260px}.composer-actions>span{font-size:9px;max-width:180px;line-height:1.5}.message{grid-template-columns:32px 1fr auto;gap:9px}.avatar{width:30px;height:30px;font-size:10px}}