html{height:100%;--thumbBG: #813BC3;--scrollbarBG: #312E2E}body{background:#312E2E;color:#f8f8f8;width:100%;height:100%}*{padding:0;margin:0;color:inherit;background-color:inherit}.container{margin:0;padding:0;position:0;display:flex;justify-content:space-between;align-items:center;background-color:#312e2e;width:100%}#user{display:flex;justify-content:end;align-items:center;height:50px}@media (max-width: 600px){html,body{overflow:hidden;position:fixed;width:100%;height:100%;-webkit-overflow-scrolling:touch}#chatbox-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.container{position:fixed;top:0;left:0;right:0;z-index:200;background:#181028;box-shadow:0 2px 12px #0000008c;height:60px}#main-flex{margin-top:60px;flex:1;overflow:hidden;display:flex;padding-bottom:70px}#side-nav{display:flex;flex-direction:column;overflow:hidden}.side-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}#chat-flex{flex:1;display:flex;flex-direction:column;overflow:hidden}#msgbox{flex:1;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:20px!important}#input-container{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:300!important;background:linear-gradient(180deg,rgba(20,20,20,.98) 0%,rgba(14,14,14,1) 100%)!important;box-shadow:0 -2px 12px #0000008c!important;padding:12px 10px!important;border-top:1px solid rgba(102,126,234,.3)!important;height:70px}}@media (max-width: 375px){.container{padding:10px 12px}.phx-logo img{height:32px;width:32px}.phx-logo h2{font-size:16px}#count{font-size:12px}#main-flex{padding-top:52px}#msgbox{padding:12px 10px;padding-bottom:75px!important}.msg-data{padding:6px 10px;font-size:13px;max-width:min(92%,280px)}.msg-author{font-size:11px;max-width:min(92%,280px)}#input-container{padding:8px 6px}#text-input{padding:7px 9px;font-size:12px}#send-btn{padding:7px 10px;font-size:11px}#emoji-btn{padding:7px 10px;font-size:16px}.emoji-grid{grid-template-columns:repeat(4,24px)}.emoji-grid span{font-size:16px}.side-nav{width:240px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#0e0e0e;color:#e0e0e0;height:100vh;overflow:hidden}button{cursor:pointer;border:none;background:none;font-family:inherit}#chatbox-container{display:flex;flex-direction:column;height:100vh;background:transparent}.container{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:transparent;color:#fff;box-shadow:0 0 12px #0000008c}.phx-logo{display:flex;align-items:center;justify-content:center;gap:12px}.phx-logo img{height:40px;width:40px;border-radius:50%}#count{display:flex;align-items:center;gap:6px;font-size:14px}#count_num{background:rgba(255,255,255,.3);padding:4px 8px;border-radius:12px;font-weight:700}#user{display:flex;gap:10px;align-items:center}.info-container{position:relative}.info-icon{padding:8px 10px;background:rgba(102,126,234,.1);border:1px solid rgba(102,126,234,.3);border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.info-icon svg{color:#b0b0b0;transition:color .2s}.info-icon:hover{background:rgba(102,126,234,.2);transform:scale(1.05)}.info-icon:hover svg{color:#e0e0e0}.info-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:99999!important}.info-backdrop.show{display:flex}.info-popup{position:relative;background:linear-gradient(135deg,rgba(30,30,40,.98) 0%,rgba(20,20,30,.98) 100%);border:1px solid rgba(102,126,234,.3);border-radius:12px;padding:24px 28px;font-size:15px;color:#e0e0e0;line-height:1.6;max-width:500px;width:90%;box-shadow:0 8px 32px #000c}.info-popup strong{color:#667eea;font-weight:600}.info-close{position:absolute;top:12px;right:12px;background:transparent;border:none;color:#e0e0e0;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.info-close:hover{background:rgba(255,255,255,.1);transform:scale(1.1)}.info-popup-arrow{position:absolute;top:-8px;right:12px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid rgba(30,30,40,.98)}.logout-btn{padding:10px 16px;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:6px;font-size:14px;transition:all .3s ease;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);font-weight:700;width:100%}.logout-btn:hover{background:transparent;border-color:#fff}#main-flex{display:flex;flex:1;overflow:hidden}#side-nav{width:280px;border-radius:16px;display:flex;flex-direction:column;padding:10px;box-shadow:0 0 15px #0000008c}.side-header{padding:8px;background:transparent;display:flex;justify-content:space-between;align-items:center}.side-header h3{font-size:18px;color:#e0e0e0;margin:0}.group-chat-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;justify-content:space-between;width:100%;cursor:pointer}.group-chat-header.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.group-chat-title{display:flex;align-items:center;gap:8px}.group-chat-title svg{color:#e0e0e0;flex-shrink:0;margin-left:5px;margin-right:5px}.group-chat-header span{font-size:14px;color:#e0e0e0;font-weight:600}.online-count{display:flex;align-items:center}.side-body{flex:1;padding:8px;overflow-y:auto;overflow-x:hidden}.side-footer{padding:12px 16px;border-top:1px solid rgba(102,126,234,.2);margin-top:8px}.online-badge{display:inline-flex;align-items:center;justify-content:center;background:black;border:1px solid rgba(102,126,234,.3);border-radius:12px;padding:6px 12px;font-size:11px;font-weight:700;color:#e0e0e0}.online-user{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:4px;border-radius:8px;cursor:pointer;transition:all .2s ease}.online-user:hover{background:rgba(102,126,234,.15)}.online-user.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.user-icon{font-size:18px;flex-shrink:0}.user-name{flex:1;font-size:14px;color:#e0e0e0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unread-badge{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;min-width:20px;text-align:center;flex-shrink:0}.msg-btn{background:rgba(102,126,234,.3);border:none;border-radius:6px;padding:6px 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.msg-btn:hover{background:rgba(102,126,234,.5);transform:scale(1.05)}.msg-btn svg{color:#e0e0e0}#chat-area{display:flex;flex-direction:column;flex:1;overflow:hidden;background:transparent}#msgbox{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:8px;background:transparent}.msg{display:flex;flex-direction:column;margin-bottom:4px;align-items:flex-start;max-width:100%}.msg-author{font-size:12px;color:#707080;margin-bottom:2px;font-weight:600;max-width:min(70%,600px)}.msg-data{padding:8px 12px;background:rgba(70,70,90,.4);border-radius:8px;word-wrap:break-word;word-break:break-word;font-size:14px;color:#e0e0e0;max-width:min(70%,600px)}.msg-user{align-items:flex-end}.msg-user .msg-data{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.msg-info{text-align:center;font-size:12px;color:#707080;margin:8px 0;font-style:italic}#input-container{padding:16px 20px;box-shadow:0 -4px 20px #0000004d;background:linear-gradient(180deg,rgba(20,20,20,.95) 0%,rgba(14,14,14,1) 100%);border-top:1px solid rgba(102,126,234,.2);position:relative}#input-wrapper{display:flex;gap:10px;align-items:center;background:rgba(30,30,40,.6);border-radius:12px;padding:6px;border:1px solid rgba(102,126,234,.15);position:relative}#emoji-btn{padding:8px 10px;font-size:20px;background:rgba(102,126,234,.1);border:1px solid rgba(102,126,234,.2);border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}#emoji-btn:hover{background:rgba(102,126,234,.2);transform:scale(1.05)}#emoji-picker{position:absolute;display:none;bottom:100%;left:16px;margin-bottom:10px;background:linear-gradient(135deg,rgba(30,30,40,.98) 0%,rgba(20,20,30,.98) 100%);border:1px solid rgba(102,126,234,.3);border-radius:12px;padding:16px;box-shadow:0 8px 24px #0009;backdrop-filter:blur(10px);z-index:1000}#emoji-picker.show{display:block}.emoji-pointer{position:absolute;bottom:-10px;left:12px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(30,30,40,.98);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.emoji-grid{display:grid;grid-template-columns:repeat(5,32px);gap:4px}.emoji-grid span{font-size:20px;cursor:pointer;text-align:center;border-radius:6px;padding:6px;transition:all .2s;background:rgba(40,40,50,.3)}.emoji-grid span:hover{background:rgba(102,126,234,.4);transform:scale(1.15)}#text-input{flex:1;padding:12px 16px;border:none;border-radius:8px;font-size:14px;font-family:inherit;resize:none;max-height:80px;background:rgba(40,40,50,.5);color:#e0e0e0;transition:all .2s}#text-input:focus{outline:none;background:rgba(50,50,60,.7);box-shadow:0 0 0 2px #667eea4d}#text-input::placeholder{color:#707080}#send-btn{padding:12px 18px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 2px 8px #667eea4d;display:flex;align-items:center;justify-content:center}#send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}#send-btn:active{transform:translateY(0)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#764ba2}#auth-container{height:100vh;display:flex;align-items:center;justify-content:center;background:transparent;padding:20px}.auth-content{text-align:center;max-width:500px;animation:fadeIn .5s ease-in-out}.app-brief{margin-bottom:40px}.app-brief h1{font-size:2.5rem;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-brief p{font-size:1.1rem;color:#b0b0b0;margin-bottom:12px;line-height:1.6}.app-brief .features{font-size:.95rem;color:#667eea;margin-top:20px;font-weight:500;letter-spacing:.5px}.google-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:14px 32px;border-radius:10px;cursor:pointer;font-size:1.05rem;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 15px #667eea66;transition:all .3s ease;min-width:280px}.google-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea80}.google-btn:active{transform:translateY(-1px);box-shadow:0 4px 12px #b450ff66}.google-icon{font-size:1.3rem}.mobile-nav-toggle{display:none;background:transparent;border:none;font-size:22px;margin:0 10px;cursor:pointer}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1024px){#side-nav{width:240px}.msg-data,.msg-author{max-width:min(80%,550px)}.container{padding:10px 16px}.phx-logo img{height:32px;width:32px}#count{font-size:12px}#count_num{padding:2px 6px}}@media (max-width: 768px){.mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center}#main-flex{flex-direction:column}#side-nav{display:none}#side-nav.open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;width:100%;height:calc(100lvh - 60px);padding:10px;background:rgb(15,15,15);z-index:999;overflow-y:auto;border-radius:0}.msg-data,.msg-author{max-width:min(85%,500px)}#input-wrapper{flex-wrap:wrap}#emoji-picker{bottom:100%;left:16px;margin-bottom:10px}.emoji-pointer{left:12px}}@media (max-width: 480px){#chatbox-container{flex-direction:column}.container{padding:8px 12px}.phx-logo{gap:8px}.phx-logo img{height:28px;width:28px}#count{font-size:11px}#count_num{padding:2px 4px;font-size:10px}.info-icon{font-size:16px;padding:6px 8px}.info-popup{font-size:12px;padding:12px 14px;right:0;min-width:260px;max-width:calc(100vw - 40px)}.side-header h3{font-size:14px}#msgbox{padding:12px 16px;gap:6px}.msg-data{padding:6px 10px;font-size:13px;max-width:min(90%,450px)}.msg-author{max-width:min(90%,450px)}#input-container{padding:12px 16px}#text-input{padding:8px 10px;font-size:13px}#send-btn{padding:8px 12px;font-size:12px}.emoji-grid{grid-template-columns:repeat(4,28px)}.emoji-grid span{font-size:18px;padding:2px}#emoji-btn{font-size:16px;padding:6px}.msg-author{font-size:11px}}@media (max-width: 360px){.container{gap:8px;padding:6px 8px}#user{width:100%;justify-content:flex-end}.emoji-grid{grid-template-columns:repeat(3,24px)}.emoji-grid span{font-size:16px}}