*{box-sizing:border-box;margin:0;padding:0}body{background:#000;justify-content:center;align-items:center;min-height:100dvh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;overflow:hidden}#root{width:100%;height:100%}.chat-container{background:#d4cdc4;flex-direction:column;width:100%;height:100dvh;display:flex;overflow:hidden}@media (width>=480px){.chat-container{border-radius:0;width:min(100vw,56.25vh);max-width:420px;height:min(100vh,177.778vw);max-height:746px;box-shadow:0 0 60px #000c}}.chat-header{z-index:10;background:linear-gradient(#3a3a3a,#2a2a2a);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.chat-header h1{color:#e8e0d0;text-shadow:1px 1px 2px #00000080;font-size:22px;font-weight:700}.header-icons{align-items:center;gap:10px;display:flex}.header-icon{cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;font-size:18px;display:flex;position:relative}.header-icon.money{background:#c0392b;border:2px solid #e74c3c}.header-icon.bell{background:#444;border:2px solid #666}.header-icon.settings,.header-icon.profile,.header-icon.trash{background:#555;border:2px solid #777}.notif-dot{background:#e74c3c;border:1.5px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;top:-3px;right:-3px}.tabs-container{z-index:10;background:linear-gradient(#5a5550,#4a4540);flex-shrink:0;padding:0 4px 4px;display:flex}.tab{text-align:center;color:#e8e0d0;cursor:pointer;text-shadow:1px 1px 1px #0006;background:linear-gradient(#8a8278,#7a7268 50%,#6a6258);border:1px solid #5a5248;border-bottom:none;border-radius:4px 4px 0 0;flex:1;margin:0 1px;padding:10px 4px;font-size:13px;font-weight:700;transition:all .2s;position:relative}.tab:hover{background:linear-gradient(#9a9288,#8a8278 50%,#7a7268)}.tab.active{color:#fff;text-shadow:1px 1px 2px #0000004d;background:linear-gradient(#f0c878,#e8b860 50%,#d8a850)}.tab .notif-dot{border:1px solid #c0392b;top:-4px;right:20%}.sub-tabs{background:#d4cdc4;flex-shrink:0;gap:4px;padding:6px 10px;display:flex}.sub-tab{text-align:center;cursor:pointer;border-radius:6px;flex:1;padding:8px 12px;font-size:14px;font-weight:700;transition:all .2s}.sub-tab.active{color:#fff;text-shadow:1px 1px 1px #0003;background:linear-gradient(#f5d890,#e8c870);box-shadow:0 2px 4px #00000026}.sub-tab:not(.active){color:#6a5a4a;background:#c8c0b8}.chat-area{background:#d4cdc4;flex:1;min-height:0;padding:10px;overflow-y:auto}.chat-area::-webkit-scrollbar{width:4px}.chat-area::-webkit-scrollbar-thumb{background:#aaa;border-radius:2px}.msg-row{align-items:flex-start;gap:8px;margin-bottom:14px;display:flex}.msg-row.right{flex-direction:row-reverse}.avatar-wrap{flex-shrink:0;width:56px;height:56px;position:relative}.avatar-frame{border-radius:6px;justify-content:center;align-items:center;width:56px;height:56px;font-size:32px;display:flex;position:relative}.avatar-frame.green-vine{background:linear-gradient(135deg,#6a9a5a,#5a8a4a);border:3px solid #5a8a4a}.avatar-frame.silver-chain{background:linear-gradient(135deg,#777,#666);border:3px solid #888}.avatar-frame.gold-frame{background:linear-gradient(135deg,#d8b850,#c8a840);border:3px solid #c8a840}.avatar-frame.rose-frame{background:linear-gradient(135deg,#d07090,#c06080);border:3px solid #c06080}.avatar-frame.dragon-frame{background:linear-gradient(135deg,#8a6a3a,#7a5a2a);border:3px solid #c8a840}.avatar-frame.santa-frame{background:linear-gradient(135deg,#e8e0f0,#d8d0e8);border:3px solid #c0392b}.avatar-frame.yin-yang{background:linear-gradient(135deg,#6a9a5a,#5a8a4a);border:3px solid #5a8a4a}.avatar-frame.pirate-frame{background:linear-gradient(135deg,#e0d8d0,#d0c8c0);border:3px solid #888}.avatar-frame.abyss-frame{background:linear-gradient(135deg,#4a3a6a,#3a2a5a);border:3px solid #6a5a8a}.avatar-frame.plain{background:linear-gradient(135deg,#f0e0e0,#e0d0d0);border:3px solid #888}.avatar-frame.cat-frame,.avatar-frame.dog-frame{background:linear-gradient(135deg,#6a9a5a,#5a8a4a);border:3px solid #5a8a4a}.avatar-frame.anime-frame{background:linear-gradient(135deg,#e8e0f0,#d8d0e8);border:3px solid #888}.avatar-frame.reaper-frame{background:linear-gradient(135deg,#e0e0e0,#d0d0d0);border:3px solid #888}.avatar-frame.krishna-frame{background:linear-gradient(135deg,#f0e8d0,#e0d8c0);border:3px solid #888}.avatar-frame.boy-frame{background:linear-gradient(135deg,#e0d8f0,#d0c8e0);border:3px solid #888}.avatar-flag{z-index:3;font-size:14px;position:absolute;bottom:2px;right:2px}.avatar-badge-un{color:#fff;z-index:3;background:#4a6aaa;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:9px;display:flex;position:absolute;bottom:-2px;right:-2px}.avatar-badge-shield{z-index:3;font-size:18px;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.user-info-row{color:#4a3a2a;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:4px;font-size:13px;font-weight:600;display:flex}.msg-row.right .user-info-row{justify-content:flex-end}.vip-badge{color:#fff;background:linear-gradient(135deg,#f0a030,#e08020);border-radius:3px;align-items:center;gap:2px;padding:1px 5px;font-size:11px;font-weight:700;display:inline-flex}.vip-badge .v-icon{color:#f44;font-size:12px;font-weight:900}.gender-icon{font-size:16px}.gender-icon.male{color:#3498db}.gender-icon.female{color:#e91e8c}.level-text,.username-text{color:#4a3a2a;font-weight:700}.bubble-wrap{align-items:flex-end;gap:6px;display:flex}.msg-row.right .bubble-wrap{flex-direction:row-reverse}.bubble{word-wrap:break-word;border-radius:10px;max-width:280px;padding:10px 14px;font-size:14px;line-height:1.5;position:relative}.bubble.pink{color:#2a2a3a;background:linear-gradient(135deg,#f8d8d8,#f0c8c8);border:2px solid #e8a0a0;box-shadow:0 1px 3px #0000001a}.bubble.white{color:#2a2a3a;background:#f5f0eb;border:1px solid #ddd5cc;box-shadow:0 1px 3px #0000001a}.bubble.green-yellow{color:#2a3a2a;background:linear-gradient(135deg,#f0f0c0,#e8e8b0);border:2px solid #c8c880;box-shadow:0 1px 3px #0000001a}.bubble.tan{color:#2a2a3a;background:linear-gradient(135deg,#f0e0c8,#e8d8b8);border:2px solid #c8b898;box-shadow:0 1px 3px #0000001a}.bubble.green-border{color:#2a3a2a;background:linear-gradient(135deg,#f0f0c0,#e8e8b0);border:2px solid #5a8a4a;box-shadow:0 1px 3px #0000001a}.bubble.green-fill{color:#2a3a2a;background:#c8e6c0;border:1px solid #b0d8a8;box-shadow:0 1px 3px #0000001a}.reply-text{color:#999;border-bottom:1px solid #ddd;margin-bottom:4px;padding-bottom:5px;font-size:12px}.bubble.pink .reply-text{color:#a08080;border-color:#e0b0b0}.bubble.green-yellow .reply-text{color:#909060;border-color:#d0d090}.bubble.green-border .reply-text{color:#809060;border-color:#c8d8b0}.bubble.green-fill .reply-text{color:#6a8a6a;border-color:#a8d8a0}.chinese-text{color:#2a2a3a;font-size:15px;font-weight:700}.bubble-text{color:#2a2a3a;font-size:14px}.bubble-text.dark{color:#4a3a2a}.emoji-bubble{text-align:center;padding:6px 12px;font-size:22px}.timestamp{text-align:center;color:#888;margin:14px 0;font-size:14px;font-weight:500}.chat-footer{background:linear-gradient(#3a3a3a,#2a2a2a);flex-shrink:0;align-items:center;gap:6px;padding:10px 8px;display:flex;overflow:hidden}.back-btn{cursor:pointer;color:#ccc;background:#444;border:2px solid #555;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;display:flex}.back-btn:hover{background:#555}.input-wrapper{background:#f5f0eb;border:1px solid #ddd;border-radius:8px;flex:1;align-items:center;padding:10px 14px;display:flex}.input-wrapper input{color:#333;background:0 0;border:none;outline:none;flex:1;font-size:16px}.emoji-btn{cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:24px}.send-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#6ab85a,#5aa84a);border:2px solid #4a983a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;display:flex}.send-btn:hover{background:linear-gradient(135deg,#7ac86a,#6ab85a)}.alliance-header{text-align:center;color:#5a4a3a;padding:8px 0 12px;font-size:16px;font-weight:700}.more-btn-row{justify-content:flex-end;margin-bottom:10px;display:flex}.more-btn{cursor:pointer;background:#5a7aaa;border-radius:6px;justify-content:center;align-items:center;gap:3px;width:40px;height:32px;display:flex}.more-btn span{background:#fff;border-radius:50%;width:5px;height:5px}.censored{letter-spacing:3px}.msg-content-col{flex:1;min-width:0}.msg-row.right .msg-content-col{flex-direction:column;align-items:flex-end;display:flex}.at-mention{color:#3498db;cursor:pointer;font-weight:700}.at-mention:hover{text-decoration:underline}.empty-tab{text-align:center;color:#888;padding:40px 20px}.private-chat-wrapper{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.search-bar{background:#d4cdc4;flex-shrink:0;gap:8px;padding:10px;display:flex}.search-input{color:#6a5a4a;background:#b8b0a8;border:1px solid #a09890;border-radius:6px;outline:none;flex:1;padding:10px 14px;font-size:16px}.search-input::placeholder{color:#8a7a6a}.search-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#5a8acc,#4a7abc);border:2px solid #3a6aac;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.chat-list-scroll{flex:1;min-height:0;overflow-y:auto}.chat-list-scroll::-webkit-scrollbar{width:4px}.chat-list-scroll::-webkit-scrollbar-thumb{background:#aaa;border-radius:2px}.chat-list-item{cursor:pointer;border-bottom:1px solid #b8b0a8;align-items:center;gap:12px;padding:12px 10px;transition:background .2s;display:flex}.chat-list-item:hover{background:#c8c0b8}.chat-list-item .avatar-wrap{flex-shrink:0;width:64px;height:64px}.chat-list-item .avatar-frame{width:64px;height:64px;font-size:36px}.chat-list-info{flex:1;min-width:0}.chat-list-info .user-info-row{margin-bottom:4px}.chat-list-message{color:#2a2a3a;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;font-size:14px;font-weight:600;overflow:hidden}.chat-list-time{color:#888;font-size:12px}.private-footer{background:linear-gradient(#3a3a3a,#2a2a2a);flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;padding:10px;display:flex}.group-chat-btn{color:#fff;cursor:pointer;text-shadow:1px 1px 2px #0000004d;background:linear-gradient(135deg,#5a8acc,#4a7abc);border:2px solid #3a6aac;border-radius:8px;flex:1;margin:0 10px;padding:14px;font-size:16px;font-weight:700}.group-chat-btn:hover{background:linear-gradient(135deg,#6a9adc,#5a8acc)}.dots-btn{cursor:pointer;background:#444;border:2px solid #555;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;width:44px;height:44px;display:flex}.dots-btn span{background:#ccc;border-radius:50%;width:6px;height:6px}.splash-screen{z-index:9999;opacity:1;background:linear-gradient(#2a2a2a,#1a1a1a);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s ease-out;display:flex;position:fixed;top:0;left:0}.splash-screen.fade-out{opacity:0}.splash-content{flex-direction:column;align-items:center;gap:20px;display:flex}.splash-icon{font-size:80px;animation:1s ease-in-out infinite bounce}.splash-title{color:#e8e0d0;text-shadow:2px 2px 4px #00000080;letter-spacing:2px;font-size:32px;font-weight:700}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.modal-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{box-sizing:border-box;background:#f5f0eb;border-radius:12px;width:90%;max-width:360px;max-height:80vh;padding:24px;overflow:hidden auto}.modal-content h2{color:#333;text-align:center;margin:0 0 20px;font-size:20px}.modal-section{margin-bottom:20px}.modal-section label{color:#555;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.emoji-preview{text-align:center;margin-bottom:12px;font-size:60px}.emoji-grid{grid-template-columns:repeat(8,1fr);gap:4px;max-width:100%;display:grid;overflow:hidden}.emoji-option{text-align:center;cursor:pointer;border-radius:6px;min-width:0;padding:6px;font-size:24px;transition:background .2s;overflow:hidden}.emoji-option:hover{background:#e0d8d0}.emoji-option.selected{background:linear-gradient(135deg,#f5d890,#e8c870);box-shadow:0 0 0 2px #c8a840}.modal-input{color:#333;box-sizing:border-box;background:#fff;border:2px solid #c8c0b8;border-radius:8px;outline:none;width:100%;padding:12px;font-size:16px}.modal-input:focus{border-color:#5a8acc}.modal-actions{gap:10px;margin-top:20px;display:flex}.modal-btn{cursor:pointer;border:none;border-radius:8px;flex:1;padding:12px;font-size:16px;font-weight:700;transition:opacity .2s}.modal-btn:hover{opacity:.9}.modal-btn.cancel{color:#555;background:#c8c0b8}.modal-btn.save{color:#fff;background:linear-gradient(135deg,#5a8acc,#4a7abc)}.modal-btn:disabled{color:#999;cursor:not-allowed;background:#c8c0b8}.settings-notice{color:#856404;text-align:center;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;margin-bottom:16px;padding:10px 12px;font-size:13px}.flashbang{z-index:9998;background:#fff;width:100%;height:100%;animation:3s ease-out forwards flashAnim;position:fixed;top:0;left:0}@keyframes flashAnim{0%{opacity:1}to{opacity:0}}.typing-indicator{gap:4px;padding:4px 0;display:flex}.typing-indicator .dot{background:#666;border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite dotPulse}.typing-indicator .dot:nth-child(2){animation-delay:.2s}.typing-indicator .dot:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.setup-screen{z-index:9999;background:linear-gradient(135deg,#2c3e50,#1a252f);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.setup-card{box-sizing:border-box;background:#f5f0eb;border-radius:16px;width:90%;max-width:380px;max-height:90vh;padding:32px 24px;overflow:hidden auto;box-shadow:0 8px 32px #0000004d}.setup-title{color:#333;text-align:center;margin:0 0 8px;font-size:22px}.setup-subtitle{color:#777;text-align:center;margin:0 0 24px;font-size:14px}.setup-section{margin-bottom:20px}.setup-section label{color:#555;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.setup-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#5a8acc,#4a7abc);border:none;border-radius:10px;width:100%;margin-top:8px;padding:14px;font-size:17px;font-weight:700;transition:opacity .2s}.setup-btn:hover:not(:disabled){opacity:.9}.setup-btn:disabled{color:#999;cursor:not-allowed;background:#c8c0b8}