*{box-sizing:border-box}html,body{height:100%;margin:0;color:#555;background:#fff;font:15px/1.5 'Microsoft YaHei',Arial,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #13af57;outline-offset:-2px}[hidden]{display:none!important}#app{display:flex;flex-direction:column;height:100dvh}header{height:54px;background:#2c2e40;color:#fff;display:flex;align-items:center;flex-shrink:0}header button{width:52px;font-size:29px}h1{flex:1;text-align:center;font-size:20px;font-weight:400;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#view{flex:1;min-height:0;overflow:auto;background:#fff}footer{height:60px;flex-shrink:0;display:flex;background:#f8f9fb;border-top:1px solid #eee}footer button{flex:1;position:relative;font-size:12px;color:#96999e;display:flex;align-items:center;justify-content:center;flex-direction:column}footer button span{font-size:26px;line-height:30px}footer button.active{color:#04bc38}footer i:empty{display:none}footer i{position:absolute;top:1px;left:57%;background:red;color:#fff;padding:0 5px;border-radius:12px;font:11px/17px Arial}.search{padding:10px 18px;background:#f7f8fa;position:sticky;top:0;z-index:1}.search input{border:0;background:white;border-radius:20px;width:100%;padding:6px 13px;outline:none}.row{width:100%;padding:14px 17px;display:flex;gap:12px;align-items:center;text-align:left;border-bottom:1px solid #f2f2f2;background:#fff;position:relative}.row:hover{background:#fafafa}.avatar{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:#e5263b;color:white;display:inline-flex;align-items:center;justify-content:center;font-size:23px;position:relative}.avatar img{width:100%;height:100%;border-radius:50%;object-fit:contain}.avatar.blue{background:#14ace0}.avatar.green{background:#13ae72}.avatar.gold{background:#ecab27}.avatar.purple{background:#9e63cd}.avatar.pink{background:#ef82ac}.badge{position:absolute;right:-4px;top:-3px;border-radius:12px;background:red;color:white;min-width:18px;text-align:center;padding:0 4px;font:12px/18px Arial}.copy{flex:1;min-width:0}.copy strong{font-size:16px;font-weight:400;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copy small{font-size:13px;color:#999;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.time{font-size:12px;color:#aaa;white-space:nowrap}.count,.empty{text-align:center;color:#aaa;padding:22px 15px;font-size:13px}.menu-row{display:flex;align-items:center;width:100%;padding:15px 18px;border-bottom:1px solid #eee;background:white;text-align:left}.menu-row span{flex:1}.menu-row small{color:#999;max-width:65%;text-align:right}.menu-row::after{content:'›';color:#bbb;font-size:22px;margin-left:12px}.section-title{padding:8px 18px;background:#f5f6f8;color:#888;font-size:13px}.form{padding:18px}.form label{display:block;margin:12px 0}.form input,.form textarea,.form select{width:100%;padding:9px;border:1px solid #ddd;border-radius:5px;background:white}.form input[type=checkbox]{width:auto}.primary{background:#09b34b;color:white;border-radius:4px;padding:9px 18px}.danger{color:#e63b45}.form .primary{width:100%;margin-top:12px}.profile{padding:24px 18px;background:#fff;display:flex;gap:15px;align-items:center;border-bottom:10px solid #f5f6f8}.profile .avatar{width:65px;height:65px}.profile h2{font-size:19px;font-weight:400;margin:0 0 5px}.profile p{margin:0;color:#888;font-size:13px}#toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#222e;color:white;z-index:10;padding:10px 16px;border-radius:5px;max-width:90%;width:max-content;font-size:14px}.chat-layout{display:flex;flex-direction:column;height:100%;background:#ededed}.chat-feed{flex:1;min-height:0;overflow:auto;padding:12px}.message{display:flex;gap:8px;margin:12px 0;align-items:flex-start}.message .avatar{width:34px;height:34px;font-size:14px}.message.me{flex-direction:row-reverse}.message .bubble-wrap{max-width:80%}.message small{display:block;color:#999;font-size:11px;margin:0 3px 3px}.bubble{background:white;border-radius:5px;padding:9px 12px;white-space:pre-wrap;overflow-wrap:anywhere;color:#333}.me .bubble{background:#9fe770}.me small{text-align:right}.compose{display:flex;align-items:center;gap:7px;padding:9px;background:#fafafa;border-top:1px solid #ddd}.compose textarea{resize:none;flex:1;min-width:0;border:1px solid #ddd;border-radius:5px;padding:7px;max-height:90px}.compose button{padding:5px;font-size:22px}.compose .primary{font-size:14px;padding:7px 12px}.emoji{padding:8px;background:white;display:flex;flex-wrap:wrap}.emoji button{font-size:24px;padding:6px}.notice{font-size:12px;color:#95732b;background:#fffbe7;padding:7px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.history{display:block;margin:auto;color:#909090;font-size:12px}.plan{background:white;border:1px solid #ddd;border-radius:5px;padding:12px;margin:12px 40px;max-width:280px;font-size:13px}.plan h3{font-size:15px;margin:0 0 6px}.plan p{margin:3px 0}.plan button{background:#eb444e;color:white;width:100%;padding:8px;margin-top:8px}.plan small{color:#999}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:15px}.grid button{font-size:12px;overflow:hidden}.grid .avatar{margin-bottom:5px;width:45px;height:45px}dialog{border:0;border-radius:10px;width:320px;max-width:90vw;padding:22px;color:#555}dialog::backdrop{background:#0006}dialog h3{margin-top:0}dialog input{width:100%;padding:8px;border:1px solid #ddd}dialog form>div{display:flex;justify-content:flex-end;gap:18px;margin-top:20px}dialog button[value=ok]{color:#08a83f}.offline{padding:30px;text-align:center}.offline a{display:inline-block;padding:8px 20px;margin-top:15px;background:#0ab34c;color:#fff;border-radius:4px;text-decoration:none}

.message-image{display:block;max-width:100%;max-height:250px;border-radius:4px}.compose button:disabled{opacity:.4;cursor:not-allowed}

footer svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;margin-bottom:2px;stroke-linecap:round;stroke-linejoin:round}
