:root{--side: #2f2346;--side-hi: #45366a;--side-text: #cfc6e0;--side-dim: #9a8fb3;--rail: #241a37;--accent: #3a7bd5;--online: #3cb878;--bg: #ffffff;--text: #222226;--dim: #6b6b73;--line: #e6e4ea;--hover: #f6f5f8;--re: #f2f1f5;--re-mine: #e3eefc;--re-mine-line: #3a7bd5}.night{--side: #141018;--side-hi: #2a2233;--side-text: #a59fb0;--side-dim: #6d6577;--rail: #0b080e;--bg: #17161b;--text: #d9d6de;--dim: #8a8592;--line: #2c2a31;--hover: #1f1d24;--re: #25232b;--re-mine: #1d2b40}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#111;overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font:16px/1.55 Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic UI,Segoe UI,system-ui,sans-serif;color:var(--text)}button{font:inherit;color:inherit;cursor:pointer}kbd{font:11px/1 ui-monospace,monospace;padding:3px 5px;border-radius:4px;border:1px solid currentColor;opacity:.7}#app{position:relative;height:100%;height:100dvh;display:grid;grid-template-columns:1fr;background:var(--bg);color:var(--text);overflow:hidden}.rail,.side{display:none}.side{background:var(--side);color:var(--side-text);padding:10px 0;overflow-y:auto}.wsname{font-weight:800;color:#fff;padding:4px 16px 2px;font-size:17px}.epname{padding:0 16px 10px;font-size:12px;color:var(--side-dim);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}.sec{padding:8px 16px 2px;font-size:13px;color:var(--side-dim)}.side ul{list-style:none;margin:0;padding:0 8px}.side li{padding:4px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}.side li .lead{width:14px;text-align:center;opacity:.8}.side li.on{background:var(--accent);color:#fff}.side li.unread{color:#fff;font-weight:800}.side li .note{font-weight:400}.side li .pen{color:var(--online);font-weight:400;animation:blink 1s infinite}.badge{margin-left:auto;background:#d9534f;color:#fff;border-radius:9px;font-size:11px;padding:0 6px}.sidebtn{margin:18px 16px;background:transparent;border:1px solid var(--side-dim);color:var(--side-text);border-radius:6px;padding:4px 10px;font-size:13px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid var(--side-dim);vertical-align:middle}.dot.on{background:var(--online);border-color:var(--online)}.dot.away{background:transparent;border-color:var(--online)}.dot.off{background:transparent}.rail{background:var(--rail);flex-direction:column;align-items:center;gap:14px;padding-top:12px}.wsicon{width:38px;height:38px;border-radius:9px;background:#e8e0f5;color:var(--side);font-weight:900;display:grid;place-items:center;font-size:18px}.railicon{opacity:.55;font-size:18px}.main{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;position:relative;background:var(--bg)}.head{display:flex;align-items:center;gap:8px;padding:env(safe-area-inset-top) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));height:calc(50px + env(safe-area-inset-top));border-bottom:1px solid var(--line);flex:none}.head .menu{position:relative;border:0;background:none;font-size:20px;padding:4px 8px}.head .menu b{position:absolute;top:0;right:0;background:#d9534f;color:#fff;font-size:10px;border-radius:8px;padding:0 4px}.head .menu b:empty{display:none}.htitle{font-weight:800;font-size:17px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.htitle .dot{border-color:var(--dim)}.htitle .dot.on{border-color:var(--online)}.htitle .note{font-weight:400;font-size:13px;color:var(--dim)}.hclock{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums}.hlist{border:0;background:none;color:var(--dim);font-size:16px;padding:4px 8px}.log{flex:1;overflow-y:auto;padding:8px 0 6px;-webkit-overflow-scrolling:touch}.intro{padding:12px 16px 2px;color:var(--dim);font-size:13px;text-align:center}.day{text-align:center;position:relative;margin:8px 0;font-size:12px;font-weight:700}.day:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}.day span{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:2px 12px}.msg{display:grid;grid-template-columns:40px 1fr;gap:0 10px;padding:6px 16px}.msg.fresh,.sys.fresh{animation:in .25s ease-out}.msg:hover{background:var(--hover)}.msg.cont{padding-top:1px;padding-bottom:2px}.msg.pinned{background:#fff8e6}.night .msg.pinned{background:#2a2416}.pin{grid-column:1 / 3;font-size:12px;color:#b07a00;margin-bottom:2px}.gut time{visibility:hidden;font-size:11px;color:var(--dim);display:block;text-align:right;padding-top:3px}.msg.cont:hover .gut time{visibility:visible}.av{width:38px;height:38px;border-radius:8px;color:#fff;font-weight:800;display:grid;place-items:center;font-size:16px}.av.ghost{background:repeating-linear-gradient(45deg,#333,#333 4px,#444 4px,#444 8px)!important;color:#999}.who{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.who b{font-weight:800}.who time{font-size:13px;color:var(--dim)}.youtag{font-size:12px;color:var(--dim)}.apptag{font-size:10px;background:var(--re);color:var(--dim);padding:0 4px;border-radius:3px}.txt{word-break:break-word;white-space:pre-wrap}.ed{color:var(--dim);font-size:12px}.del{color:var(--dim);font-style:italic}.file{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:1px 8px;margin:2px;background:var(--hover);font-size:13px}.at{background:#fdf3c8;color:#8a6400;border-radius:3px;padding:0 2px}.reacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.re{background:var(--re);border:1px solid transparent;border-radius:12px;padding:0 8px;font-size:13px}.re.fresh{animation:popin .3s ease-out}.re b{font-size:12px;color:var(--dim)}.re.mine{background:var(--re-mine);border-color:var(--re-mine-line)}.sys{padding:4px 16px 4px 66px;color:var(--dim);font-size:14px}.thread{margin:0 16px 6px 66px;border-left:3px solid var(--line)}.thread .msg{padding-left:10px}.tlabel{font-size:12px;color:var(--accent);font-weight:700;padding:2px 10px}.typing{height:22px;padding:0 16px;font-size:13px;color:var(--dim);flex:none}.dots i{display:inline-block;width:5px;height:5px;margin-right:2px;border-radius:50%;background:var(--dim);animation:bounce 1.2s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}.choices{display:none;padding:6px 12px 2px;flex:none}.choices.show{display:block;animation:up .2s ease-out}.clabel{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--dim);padding:0 4px 4px;gap:8px}.clabel b{color:var(--text);font-size:13px}.opt{color:var(--text);display:flex;gap:10px;align-items:center;width:100%;text-align:left;margin:0 0 6px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg)}.opt.sel,.opt:hover{border-color:var(--accent);border-width:2.5px;background:var(--re-mine)}.opt kbd{flex:none}.opt em{color:var(--dim)}.remoji{font-size:20px}.composer{margin:4px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));border:1px solid var(--line);border-radius:10px;flex:none;overflow:hidden}.gauge{height:5px;background:var(--re);visibility:hidden}.gauge.show{visibility:visible}.gauge i{display:block;height:100%;width:100%;background:var(--online);transition:background .3s}.cbox{padding:10px 12px;color:var(--dim);min-height:42px}.cbox.draft{color:var(--text)}.cbox.draft:after{content:"|";animation:blink .8s infinite;color:var(--accent)}.flash{position:absolute;left:50%;bottom:90px;transform:translate(-50%);background:#1e1e23e6;color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;animation:fade 1.6s forwards;pointer-events:none;white-space:nowrap}.overlay{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;overflow-y:auto}.overlay.show{display:flex;align-items:flex-start;justify-content:center;padding:16px}.overlay.end{background:#0a08108c;align-items:center;animation:fadein .4s}.overlay.title{background:linear-gradient(160deg,#2f2346,#1c1530 60%,#120d1f)}.card{background:#fff;color:#222226;border-radius:14px;padding:22px 20px;width:min(520px,100%);box-shadow:0 12px 40px #00000059}.titlecard{background:transparent;color:#eee;box-shadow:none;padding:20px 4px}.logo{font-size:40px;font-weight:900;letter-spacing:-1px;display:flex;align-items:center;gap:10px;color:#fff}.logo .mark{color:#f0b84a;font-size:34px}.tag{color:#cfc6e0;margin:4px 0 18px}.eps{list-style:none;padding:0;margin:0;display:grid;gap:10px}.ep{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:#ffffff12;border:1.5px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;color:#eee}.ep.sel,.ep:hover{border-color:#f0b84a;background:#ffffff1f}.ep.night{background:#00000059}.ep .num{font-size:22px;font-weight:900;color:#f0b84a;width:24px;text-align:center}.ep .et{flex:1;display:flex;flex-direction:column}.ep .et small{color:#b8afc9;font-size:12px}.ep .eg{font-size:11px;color:#b8afc9;text-align:center}.ep .eg b{font-size:15px;color:#fff}.howto{font-size:13px;color:#b8afc9;margin:16px 0 10px}.btns{display:flex;gap:8px;flex-wrap:wrap}.btns button{border:1px solid #ccc;background:#fff;color:#222;border-radius:8px;padding:8px 14px}.titlecard .btns button{background:transparent;color:#eee;border-color:#ffffff4d}.btns button.primary{background:#2a9d8f;color:#fff;border-color:#2a9d8f}.btns kbd{opacity:.55;margin-right:4px}.notice{font-size:12px;color:#b3a9c8;margin-top:16px}.endcard{text-align:center;animation:up .35s ease-out}.endtag{font:800 12px/1 ui-monospace,monospace;letter-spacing:2px;color:#888}.endcard h2{font-size:26px;margin:8px 0 6px}.endcard.good h2{color:#2a9d8f}.endcard.bad h2{color:#d9534f}.endcard.odd h2{color:#8e5bd0}.endcard p{margin:0 0 12px}.endcard .sub{font-size:12px;color:#888}.endlist{list-style:none;padding:0;margin:6px 0 16px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:12px}.endlist li{border-radius:10px;padding:2px 10px;background:#f0eff3;color:#999}.endlist li.good{background:#e0f3f0;color:#1f7a6f}.endlist li.bad{background:#fbe5e4;color:#b03a36}.endlist li.odd{background:#efe6fa;color:#6e3fb0}.endcard .btns{justify-content:center}.scrim{display:none}@media(max-width:759px),(max-height:500px){.side{display:block;position:absolute;top:0;bottom:0;left:0;width:min(280px,82vw);z-index:15;transform:translate(-100%);transition:transform .2s}.side-open .side{transform:none}.side-open .scrim{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;z-index:14}}@media(min-width:760px)and (min-height:501px){#app{grid-template-columns:64px 250px 1fr}.rail{display:flex}.side{display:block}.head .menu{display:none}.msg{padding-left:20px;padding-right:20px}.composer{margin:4px 20px 16px}.choices{padding:6px 20px 2px}.opt{display:inline-flex;width:auto;max-width:100%;margin-right:6px}}.choosing .cbox:not(.draft){display:none}@media(max-height:500px){.head{height:calc(40px + env(safe-area-inset-top))}.typing{height:18px}.opt{padding:5px 10px;margin-bottom:4px}.clabel{padding-bottom:2px}.composer{margin-top:2px;margin-bottom:calc(6px + env(safe-area-inset-bottom))}.cbox{padding:6px 12px;min-height:0}}@keyframes in{0%{opacity:0}}@keyframes popin{0%{transform:scale(.4)}}@keyframes up{0%{opacity:0;transform:translateY(12px)}}@keyframes fadein{0%{opacity:0}}@keyframes fade{0%{opacity:0}15%{opacity:1}75%{opacity:1}to{opacity:0}}@keyframes blink{50%{opacity:0}}@keyframes bounce{0%,60%,to{transform:none}30%{transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
