:root{color:#20242d;font-synthesis:none;--green:#51d68b;--border:#e3e5e8;background:#1f1f1f;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}button{cursor:pointer}.stage{place-items:center;min-height:100dvh;padding:18px;display:grid;position:relative}.phone{background:#fff;border:1px solid #444;border-radius:42px;flex-direction:column;width:min(390px,100vw);height:min(844px,100dvh - 36px);display:flex;overflow:hidden;box-shadow:0 28px 80px #0009}.status{color:#111;justify-content:space-between;align-items:flex-end;height:42px;padding:0 27px 9px;font-size:12px;display:flex}.status span{align-items:center;gap:4px;display:flex}.status svg{stroke-width:2.8px;width:14px;height:14px}.status svg:last-child{width:19px}.appbar{color:#fff;background:linear-gradient(90deg,#ff6a32,#ffad28);flex:none;justify-content:space-between;align-items:center;height:48px;padding:0 10px;display:flex}.appbar strong{font-size:16px}.appbar button,.channel button,.tools button,.active-persona button{width:44px;height:44px;color:inherit;background:0 0;border:0;place-items:center;display:grid}.appbar svg{width:21px}.channel{border-bottom:1px solid var(--border);color:#5d6065;flex:none;justify-content:space-between;align-items:center;height:51px;padding:0 4px;display:flex}.channel>div{align-items:center;gap:10px;display:flex}.channel strong{font-size:15px}.channel i,.active-persona i{background:#10cb82;border-radius:50%;flex:none;width:9px;height:9px}.channel svg{width:21px}.messages{scrollbar-width:none;flex:1;min-height:0;padding:9px 14px 12px;overflow-y:auto}.message{align-items:flex-start;gap:8px;margin:8px 0;display:flex}.avatar,.admin-avatar{color:#fff;background:linear-gradient(145deg,#e09a5e,#173950);border-radius:50%;flex:none;place-items:center;width:31px;height:31px;font-size:10px;font-weight:800;display:grid;box-shadow:0 1px 5px #0002}.a1{background:linear-gradient(145deg,#91b4cb,#223651)}.a2{background:linear-gradient(145deg,#d18e55,#143f55)}.a3{background:linear-gradient(145deg,#76849a,#172b45)}.bubble{background:#f2f3f4;border:1px solid #e1e3e6;border-radius:0 16px 16px;flex:1;min-width:0;padding:9px 11px}.bubble.white{background:#fff}.bubble p,.admin-copy p{color:#303541;white-space:pre-wrap;overflow-wrap:anywhere;margin:3px 0;font-size:12.5px;line-height:1.42}.bubble time,.admin-copy time{text-align:right;color:#89909a;font-size:9px;display:block}.date{color:#6e7379;border-bottom:1px solid #ececee;margin:8px 0 6px;padding:2px 0 8px;font-size:10px;font-weight:700}.admin-message{border-bottom:1px solid #e6e6e8;align-items:flex-end;margin-top:12px;padding:4px 0 10px}.art.small{flex:none;width:77px;height:91px}.admin-copy{flex:1;min-width:0}.admin-copy strong{display:inline}.admin-badge{color:#19814d;background:#dcf8e8;border-radius:999px;margin-left:5px;padding:2px 5px;font-size:7px;font-weight:800}.composer{padding:0 11px max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dadcdf;flex:none;position:relative}.composer textarea{resize:none;border:0;outline:0;width:100%;min-height:42px;max-height:104px;padding:12px 5px 5px;font-size:12.5px;line-height:1.4;display:block}.composer textarea::placeholder{color:#a4a6aa}.tools{color:#a9abad;align-items:center;display:flex}.tools button{width:37px;height:39px;padding:8px;transition:color .12s,transform 80ms}.tools button:hover{color:#555}.tools button:active{transform:scale(.88)}.tools span{flex:1}.tools svg{width:19px}.tools .send{color:#087cff;transform:rotate(-8deg)}.tools .send:disabled{color:#b7c5d6;cursor:not-allowed}.active-persona{color:#387957;border-bottom:1px solid #edf0ee;align-items:center;gap:6px;min-height:36px;font-size:9px;display:flex}.active-persona span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.active-persona button{color:#303d35;width:auto;height:36px;padding:0 4px;font-size:10px;text-decoration:underline}.active-persona button:last-child{width:30px}.active-persona svg{width:14px}.count{color:#888;font-size:9px;position:absolute;top:42px;right:15px}.backdrop{z-index:10;background:#111a;position:fixed;inset:0}.modal{z-index:11;background:#fff;border-radius:20px;width:min(356px,100vw - 28px);max-height:min(760px,100dvh - 30px);padding:24px 26px 20px;position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 30px 90px #0008}.modal-x{color:#777;background:0 0;border:0;place-items:center;width:44px;height:44px;display:grid;position:absolute;top:10px;right:10px}.modal header{border-bottom:1px solid #dedfe1;padding:0 18px 20px 0}.modal h1{color:#111;letter-spacing:-.5px;margin:0 0 8px;font-size:27px;line-height:1.05}.modal header p,.helper{color:#73767a;margin:0;font-size:12px;line-height:1.4}.persona-list{margin-bottom:18px}.persona-option{text-align:left;background:#fff;border:0;border-bottom:1px solid #dedfe1;align-items:center;gap:12px;width:100%;min-height:61px;display:flex}.persona-option i{border:2px solid #76797d;border-radius:50%;flex:none;width:19px;height:19px;position:relative}.persona-option.selected i{border-color:var(--green)}.persona-option.selected i:after{content:"";background:var(--green);border-radius:50%;animation:.18s pop;position:absolute;inset:4px}.persona-option span{border:1px solid #a5a8ad;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:600}.actions{gap:12px;margin-top:18px;display:flex}.actions button{color:#fff;border:0;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:4px;height:42px;font-weight:700;display:flex}.actions svg{width:16px}.actions button:disabled{opacity:.45;cursor:not-allowed}.helper{padding:16px 4px 0}.appearance-grid{grid-template-columns:1fr 1fr;gap:11px;margin-top:15px;display:grid}.appearance{background:#fff;border:1px solid #d1d4d7;border-radius:3px;min-width:0;height:142px;padding:3px;transition:border .15s,transform 80ms;position:relative;overflow:hidden}.appearance:active{transform:scale(.97)}.appearance.selected{border:3px solid var(--green);padding:1px}.appearance .art{width:100%;height:112px}.appearance-name{white-space:nowrap;text-overflow:ellipsis;background:#fffffff2;padding:3px;font-size:8px;line-height:1.15;position:absolute;bottom:3px;left:4px;right:4px;overflow:hidden}.appearance>b{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:28px;height:28px;font-size:18px;animation:.18s pop;display:grid;position:absolute;top:4px;right:4px}.no-art{color:#676b70;place-content:center;justify-items:center;gap:8px;height:100%;display:grid}.no-art svg{width:42px;height:42px}.dev{color:#bbb;z-index:2;font-size:11px;position:fixed;bottom:18px;right:18px}.dev summary{cursor:pointer;text-align:right}.dev button{color:#fff;background:#303030;border:1px solid #555;border-radius:6px;width:160px;margin-top:4px;padding:8px;display:block}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}button:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #1687ff}@keyframes pop{0%{transform:scale(.5)}to{transform:scale(1)}}@media (width<=520px){.stage{padding:0}.phone{border:0;border-radius:0;width:100vw;height:100dvh}.modal{width:100%;max-height:92dvh;padding-bottom:max(20px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0;top:auto;bottom:0;transform:translate(-50%)}.dev{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.phone{isolation:isolate;position:relative}.phone>.backdrop{position:absolute;inset:0}.phone>.modal{width:calc(100% - 28px);max-height:calc(100% - 30px);position:absolute;translate:-50% -50%}.iphone-keyboard{z-index:4;-webkit-user-select:none;user-select:none;background:#d1d4d9;flex:none;height:258px;padding:0 4px 7px;box-shadow:0 -1px #aeb1b6}.keyboard-grip{justify-content:flex-end;align-items:center;height:25px;padding-right:5px;display:flex}.keyboard-grip button{color:#4a4d52;background:0 0;border:0;width:40px;height:25px;font-size:20px;line-height:1}.key-row{justify-content:center;gap:5px;height:45px;margin-bottom:6px;display:flex}.key-row button{color:#111;background:#fff;border:0;border-radius:5px;min-width:31px;height:43px;padding:0 4px;font-size:17px;box-shadow:0 1.5px #858990}.key-row.row-1{padding:0 14px}.key-row.row-2{padding:0 2px}.key-row.row-2 button:nth-child(2),.key-row.row-2 button:last-child{margin-left:6px}.key-row button.special{background:#abb0b8;min-width:42px;font-size:13px}.bottom-row button.space{flex:1;font-size:13px}.bottom-row button.return{min-width:72px}.bottom-row{margin:0 1px}.home-indicator{background:#171717;border-radius:5px;width:132px;height:5px;margin:7px auto 0}.art.supplied{object-fit:contain;object-position:center bottom;background:#fff;padding:8px}.art.supplied.small{object-position:center bottom;background:0 0;padding:0}.appearance,.persona-option,.actions button,.tools button,.active-persona button,.key-row button{transition-property:transform,opacity,color,background-color,border-color,box-shadow;transition-duration:.18s;transition-timing-function:ease-in-out}.appearance:hover,.persona-option:hover{background-color:#f8fbf9}.actions button:hover:not(:disabled){filter:brightness(.97);transform:translateY(-1px)}.key-row button:active,.actions button:active:not(:disabled),.persona-option:active,.appearance:active{transition-duration:90ms;transform:scale(.96)}@media (width<=520px){.phone>.modal{border-radius:20px;width:calc(100% - 28px);max-height:calc(100% - 30px);padding-bottom:20px;top:50%;bottom:auto;translate:-50% -50%}}:root,html,body,#root{background:#fff;min-height:100%}.stage{background:#fff;width:100%;min-height:100dvh;padding:20px}.phone{aspect-ratio:390/844;border:1px solid #ececec;border-radius:42px;width:min(390px,100vw - 40px);min-width:300px;height:auto;min-height:640px;box-shadow:0 22px 60px #0000001a,0 3px 12px #0000000f}@media (width<=520px){.stage{padding:16px}.phone{border:1px solid #e8e8e8;border-radius:clamp(30px,9vw,42px);width:min(390px,100vw - 32px);min-width:0;height:auto;min-height:0}}@media (width<=379px){.stage{justify-items:start;overflow-x:auto}}:root,html,body,#root,.stage{background:#fff}.phone{color:#151b29;background:#fff}.status{height:46px;padding:0 34px 12px;font-size:14px}.status svg{color:#050505}.appbar{background:linear-gradient(90deg,#ff6b35 0%,#ffb12e 100%);height:46px;margin:0 16px;padding:0 5px}.appbar strong{font-size:19px;font-weight:600}.appbar button{width:42px}.appbar svg{width:21px;height:21px}.channel{color:#656565;border-bottom:1px solid #ececef;height:55px;margin:0 16px;padding:0}.channel strong{font-size:19px;font-weight:700}.channel>div{gap:12px}.channel i{width:10px;height:10px}.channel svg{width:22px;height:22px}.messages{padding:11px 16px 8px}.message{gap:9px;margin:10px 0}.avatar{width:33px;height:33px;font-size:10px}.bubble{border-color:#dfe2e7;border-radius:0 17px 17px;padding:10px 12px 9px}.bubble strong,.admin-copy strong{font-size:14px}.bubble p,.admin-copy p{margin:4px 0;font-size:14px;line-height:1.4}.bubble time,.admin-copy time{font-size:10px}.date{margin:9px 0 7px;padding:3px 0 8px;font-size:11px}.admin-message{align-items:flex-end;gap:10px;margin:14px 0 2px;padding:2px 0 12px}.art.small,.art.supplied.small{width:92px;height:116px}.admin-copy strong{font-weight:600}.admin-copy p{margin-top:7px}.admin-copy time{margin-top:4px}.composer{padding:0 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid #bfc1c4}.composer textarea{min-height:48px;padding:14px 10px 7px;font-size:14px}.tools{height:42px}.tools button{width:41px;height:42px;padding:9px}.tools svg{width:22px;height:22px}.active-persona{color:#121a20;border:0;gap:7px;height:40px;font-size:9px}.active-persona>span{color:#fff;background:#51d68b;border-radius:999px;padding:4px 10px}.active-persona i{display:none}.active-persona button{height:38px;font-size:12px}.active-persona button:last-child{margin-left:auto}.phone>.backdrop{-webkit-backdrop-filter:blur(5px);background:#19191961;position:absolute;inset:0}.phone>.modal{border-radius:0;width:100%;max-height:none;padding:0 32px 28px;transition:height .3s cubic-bezier(.4,0,.2,1);position:absolute;inset:auto 0 0;overflow:hidden;translate:0;box-shadow:0 -12px 32px #00000014}.phone>.modal:focus{outline:none}.modal.persona-step{height:46%}.modal.appearance-step{height:81.3%}.modal header{border:0;padding:37px 0 22px}.modal h1{letter-spacing:-.8px;margin:0 0 12px;font-size:34px}.modal header p{color:#696969;font-size:14px}.persona-list{margin:0 7px 31px}.persona-option{border-color:#d7d7d7;gap:15px;min-height:68px;padding:0 17px}.persona-option i{border-width:3px;width:27px;height:27px}.persona-option.selected i:after{inset:5px}.persona-option span{color:#666;background:#fff;border-width:2px;padding:6px 14px;font-size:12px}.persona-option.selected span{color:#666;background:#fff;border-color:#666}.actions{gap:22px;margin:0 9px}.actions button{border-radius:11px;height:42px;font-size:15px}.actions .secondary{background:#b9b9b9}.actions .primary{background:#55d48b}.helper{display:none}.appearance-step header{padding-top:36px;padding-bottom:28px}.appearance-step h1{margin-bottom:9px;font-size:30px}.appearance-grid{grid-template-columns:1fr 1fr;gap:18px;margin:0 16px}.appearance{will-change:transform,box-shadow;border:1px solid #bbb;border-radius:0;height:188px;padding:0;overflow:visible;box-shadow:inset 0 0 #55d48b}.appearance .art{object-fit:contain;background:#fff;width:100%;height:100%;padding:10px}.appearance.selected{border-color:#55d48b;padding:0;box-shadow:inset 0 0 0 4px #55d48b}.appearance.selected .art{padding:10px}.appearance>b{width:41px;height:41px;font-size:27px;top:-24px;right:50%;transform:translate(50%);box-shadow:0 2px 7px #168b4d33}.appearance:last-child{grid-column:auto;height:188px}.appearance:focus{outline:none}.appearance:focus-visible{outline-offset:3px;outline:3px solid #1687ff}.no-art{color:#666;place-items:center;height:100%;display:grid}.no-art span{font-size:15px;font-weight:400}.appearance-step .actions{margin-top:61px}.dev{color:#777}@media (width<=520px){.phone>.modal{width:100%;max-height:none;padding-bottom:max(28px,env(safe-area-inset-bottom));border-radius:0;inset:auto 0 0;translate:0}}
