*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#315c6d}body{background:linear-gradient(135deg,#dffbff,#a7e5f5 48%,#e6fff4);min-height:100vh}input,textarea{border:1px solid #8cbccd;border-radius:9px;background:#ffffffd9;padding:11px;outline:0}button{border:1px solid #72aec2;border-radius:9px;padding:9px 14px;background:linear-gradient(#fff,#d9f4fb);color:#256078;cursor:pointer}.primary{background:linear-gradient(#8fe8ff,#2187c1);color:#fff}.error,.success{padding:9px;border-radius:9px;margin:10px 0}.error{background:#ffe4e4;color:#933}.success{background:#e4ffef;color:#276b49}.login-page{display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:min(390px,94vw);padding:28px;text-align:center;background:#f5ffffdf;border:1px solid #fff;border-radius:20px;box-shadow:0 20px 60px #376f8055}.login-card form{display:grid;gap:10px;margin:18px 0}.login-card input,.login-card button{width:100%}.logo{width:78px;height:78px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:30px;font-weight:900;color:#fff;background:radial-gradient(circle at 30% 25%,#fff 0 8%,#80e8ff 24%,#238fce 65%,#075a91);border:3px solid #fff;box-shadow:inset 0 2px 7px #fff,0 10px 30px #397d9a44}.sub{color:#78949c}.layout{height:100dvh;display:flex;overflow:hidden;background:#e9fbff99}.sidebar{width:330px;flex:0 0 330px;background:#effdffcc;border-right:1px solid #fff;overflow:auto}.mebar{height:70px;padding:10px;display:flex;gap:9px;align-items:center;border-bottom:1px solid #fff}.avatar{width:43px;height:43px;flex:0 0 43px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900;background:radial-gradient(circle at 30% 25%,#fff 0 8%,#80e8ff 24%,#238fce 65%,#075a91);border:2px solid #fff}.meinfo{flex:1;min-width:0}.meinfo b,.item b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meinfo small{color:#3b9162}.mebar a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #72aec2;border-radius:9px;background:#fff}.tabs{display:flex;gap:5px;padding:7px}.tabs button{flex:1}.tabs button.active{background:#fff}.tabs i{font-style:normal;background:#e44c4c;color:#fff;border-radius:8px;padding:1px 5px;font-size:10px}.panel{display:none;padding:9px}.panel.active{display:block}.item{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;margin:4px 0}.item:hover{background:#fff8}.item>div{min-width:0;flex:1}.item small{display:block;color:#78949c;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty{text-align:center;padding:35px;color:#78949c}.main{display:flex;flex:1;min-width:0;flex-direction:column}.main header{height:70px;display:flex;align-items:center;gap:9px;padding:10px 14px;background:#fff8;border-bottom:1px solid #fff}.main header small{display:block;color:#78949c}.main header #back{display:none;font-size:28px;padding:0;border:0;background:none}.main #messages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px}.welcome{text-align:center;margin:auto;color:#66858f}.welcome .logo{width:65px;height:65px;font-size:25px}.msg{max-width:min(75%,650px);align-self:flex-start}.msg>div{padding:10px 13px;border:1px solid #fff;border-radius:14px;background:#ffffffdb;box-shadow:0 3px 12px #397d9a22;word-break:break-word}.msg.mine{align-self:flex-end}.msg.mine>div{background:#bfeefa}.msg small{font-size:9px;color:#78949c;margin:2px 5px;display:block}.main footer{display:flex;gap:7px;padding:10px;background:#fff8;border-top:1px solid #fff}.main footer textarea{flex:1;height:43px;resize:none}.main footer button{min-width:65px}@media(max-width:720px){.sidebar{width:100%;flex-basis:100%}.main{display:none}.open-chat .sidebar{display:none}.open-chat .main{display:flex}.main header #back{display:block}}

.searchbox{display:flex;gap:7px;margin-bottom:7px}.searchbox input{width:100%}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 2px 10px}.panel-title button{padding:7px 10px;font-size:12px}
.item{position:relative}.item .on{width:9px;height:9px;border-radius:50%;background:#53c97a;border:1px solid #fff;box-shadow:0 1px 4px #4b9d6a55;margin-left:auto}.item .on:not(.on){display:none}
.mini{padding:5px 8px;font-size:11px}.mini.danger,.danger{background:linear-gradient(#fff,#ffdede);border-color:#d79a9a;color:#9a4545}
.request-card{display:flex;gap:8px;padding:10px;margin:6px 0;border-radius:12px;background:#ffffffb8;border:1px solid #fff;align-items:flex-start}.request-main{flex:1;min-width:0}.request-main small{color:#78949c}.request-main p{margin:6px 0;color:#587782;font-size:12px;word-break:break-word}.request-actions{display:flex;gap:5px;flex-direction:column}.request-actions button{font-size:11px;padding:5px 8px}
.search-panel{position:absolute;left:8px;right:8px;top:8px;bottom:8px;z-index:20;background:#effdff;backdrop-filter:blur(12px);border:1px solid #fff;border-radius:15px;box-shadow:0 15px 45px #28657a44;padding:10px;overflow:auto}.search-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.search-head button,.modal-close{border:0;background:transparent;font-size:24px;padding:0 6px}
.modal{position:fixed;inset:0;background:#255b6a33;backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:18px}.modal-card{position:relative;width:min(520px,96vw);max-height:88vh;overflow:auto;background:#effdff;border:1px solid #fff;border-radius:18px;box-shadow:0 25px 80px #235e7044;padding:18px}.modal-close{position:absolute;right:12px;top:8px}.modal-card h3{margin:0 0 12px}.add-box>input{width:100%;margin-bottom:8px}.search-user{display:flex;align-items:center;gap:9px;padding:9px;border-radius:11px;background:#ffffffa8;border:1px solid #fff;margin:6px 0}.search-user>div{flex:1;min-width:0}.search-user small,.search-user p{display:block;color:#78949c;font-size:11px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-user button{white-space:nowrap}.state{font-size:11px;color:#78949c;white-space:nowrap}.state.ok{color:#3b9162}
.peer-head{flex:1;min-width:0}.peer-menu{margin-left:auto;padding:4px 9px;font-size:23px;border:0;background:transparent}
@media(max-width:720px){.sidebar{position:relative}.search-panel{position:fixed;inset:8px}.modal-card{width:100%}.main header{padding-top:calc(10px + env(safe-area-inset-top))}.main footer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}

.add-friend-dialog{min-height:180px}
.friend-search{display:flex;align-items:center;gap:7px;padding:4px 10px;margin-bottom:10px;background:#fffdfd99;border:1px solid #b9dfe8;border-radius:12px;box-shadow:inset 0 1px 3px #2d75851c}
.friend-search span{font-size:16px}.friend-search input{border:0!important;box-shadow:none!important;background:transparent!important;outline:0!important;margin:0!important;width:100%}
.search-user{display:flex;align-items:center;gap:9px;padding:9px;margin:6px 0;border-radius:12px;background:#ffffffbb;border:1px solid #fff;box-shadow:0 2px 8px #27708412}
.search-user-main{flex:1;min-width:0}.search-user-main small,.search-user-main p{display:block;color:#78949c;font-size:11px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-user-main p{font-size:12px}
.small-btn{white-space:nowrap;padding:6px 10px!important;font-size:12px!important}.friend-state{white-space:nowrap;font-size:11px;color:#78949c}.friend-state.ok{color:#3a9162}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#55bd73;margin-right:3px}
.chat-item{width:100%;text-align:left;border:0!important;cursor:pointer}.chat-item:hover{filter:brightness(1.02)}

.friend-search-dialog{padding-top:2px}
.friend-search-row{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-bottom:12px}
.friend-search-row input{min-width:0}
.friend-search-row button{white-space:nowrap}
.friend-search-row .secondary{background:linear-gradient(#fff,#e8f5f8);border-color:#b8d8df;color:#56767d}
#friendSearchResults{min-height:90px;max-height:55vh;overflow:auto;padding-right:2px}
.search-user{display:flex;align-items:center;gap:10px;padding:10px;margin:6px 0;border-radius:12px;background:#ffffffc9;border:1px solid #fff;box-shadow:0 2px 8px #27708412}
.search-user-main{flex:1;min-width:0}.search-user-main small,.search-user-main p{display:block;color:#78949c;font-size:11px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-user-main p{font-size:12px}
.small-btn{white-space:nowrap;padding:6px 11px!important;font-size:12px!important}.friend-state{white-space:nowrap;font-size:11px;color:#78949c}.friend-state.ok{color:#3a9162}

/* V9 critical fix: the HTML hidden attribute must override .modal's display:flex. */
.modal[hidden] { display: none !important; }

.modal[aria-hidden="true"]{visibility:hidden;pointer-events:none}.modal[aria-hidden="false"]{visibility:visible;pointer-events:auto}
.friend-search-dialog{width:100%}.friend-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}.friend-search-row input{box-sizing:border-box;width:100%;min-width:0}.friend-search-row button{white-space:nowrap}.friend-search-row .secondary{background:linear-gradient(#fff,#e8f5f8);color:#56767d;border-color:#b8d8df}

/* V11 */

.tool-btn{border:1px solid #b9d9df;background:linear-gradient(#fff,#e7f5f8);border-radius:10px;padding:7px 9px;cursor:pointer}
.emoji-panel{position:fixed;z-index:1002;bottom:75px;left:12px;width:min(330px,calc(100vw - 24px));padding:10px;border:1px solid #b5d9e0;border-radius:16px;background:#ffffffea;box-shadow:0 12px 35px #155e7028;backdrop-filter:blur(12px)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-height:220px;overflow:auto}.emoji-item{border:0;background:transparent;font-size:23px;padding:5px;border-radius:8px;cursor:pointer}

.emoji-panel{position:fixed!important;z-index:5000;width:min(340px,calc(100vw - 16px));max-height:45vh;overflow:auto;left:auto;bottom:auto;top:auto}.emoji-panel[hidden]{display:none!important}
.chat-image-thumb{display:block;width:min(220px,55vw);max-height:220px;height:auto;object-fit:cover;border-radius:12px;border:1px solid #b9dfe6;cursor:pointer}.group-modal-card{max-width:420px}.group-create-body{padding:14px}.group-create-actions{display:flex;gap:8px;margin-top:12px}.group-create-actions button{flex:1}.floating-group-btn{position:fixed;right:16px;top:16px;z-index:2000}