.chat-panel{position:fixed;right:0;top:0;width:320px;height:100vh;background:#15141a;border-left:1px solid hsla(0,0%,100%,.1);display:flex;flex-direction:column;z-index:1000;box-shadow:-4px 0 24px rgba(0,0,0,.5);background-color:var(--background-primary)}@media screen and (max-width:767.98px){.chat-panel{width:100%;top:70px;bottom:40px;height:calc(100vh - 140px);border-top:1px solid #232325}}.chat-panel .chat-header{padding:22px;border-bottom:1px solid hsla(0,0%,100%,.1);display:flex;justify-content:space-between;align-items:center;background-color:var(--background-primary)}.chat-panel .chat-header .chat-header-content{display:flex;align-items:center;gap:16px;flex:1}.chat-panel .chat-header .chat-title{font-size:18px;font-weight:600;color:#fff;margin:0}.chat-panel .chat-header .language-selector .language-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;color:#fff;font-size:13px;cursor:pointer;transition:all .2s}.chat-panel .chat-header .language-selector .language-btn:hover{background:hsla(0,0%,100%,.08);border-color:hsla(0,0%,100%,.2)}.chat-panel .chat-header .language-selector .language-btn svg{flex-shrink:0}.chat-panel .chat-header .close-btn{background:rgba(0,0,0,0);border:none;color:#8b8b9d;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.chat-panel .chat-header .close-btn:hover{background:hsla(0,0%,100%,.05);color:#fff}.chat-panel .chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:5px;background-color:var(--background-primary)}.chat-panel .chat-messages::-webkit-scrollbar{width:6px}.chat-panel .chat-messages::-webkit-scrollbar-track{background:hsla(0,0%,100%,.05);border-radius:3px}.chat-panel .chat-messages::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:3px}.chat-panel .chat-messages::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.3)}.chat-panel .chat-messages .message-item{display:flex;animation:slideIn .3s ease-out;align-items:center;gap:10px}.chat-panel .chat-messages .message-item .own-message{flex-direction:row-reverse;text-align:right}.chat-panel .chat-messages .message-item .message-content{align-items:flex-end}.chat-panel .chat-messages .message-item .message-avatar{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.chat-panel .chat-messages .message-item .message-avatar img{width:100%;height:100%;border-radius:50%;-o-object-fit:cover;object-fit:cover}.chat-panel .chat-messages .message-item .message-content{flex:1;min-width:0;font-size:14px;color:#e8e8e8;line-height:1.5;word-wrap:break-word}.chat-panel .chat-messages .message-item .message-content .message-username{font-size:13px;font-weight:500;color:#fff}.chat-panel .chat-messages .message-item .message-content .message-text{font-size:13px;font-weight:300;color:hsla(0,0%,100%,.6)}.chat-panel .avatar-wrapper{position:relative;cursor:pointer}.chat-panel .avatar-menu{position:absolute;top:22px;left:0;background:#19191a;border:1px solid hsla(0,0%,100%,.1);border-radius:8px;padding:6px;z-index:100;min-width:120px}.chat-panel .avatar-menu-btn{width:100%;color:#fff;font-size:12px;cursor:pointer;text-align:left;display:flex;align-self:center}.chat-panel .avatar-menu-btn.danger{color:#ff4d4f}.chat-panel .chat-footer{border-top:1px solid hsla(0,0%,100%,.1);padding:16px;background-color:var(--background-primary);display:flex;flex-direction:column-reverse;gap:12px}.chat-panel .chat-footer .chat-status{display:flex;justify-content:space-between;align-items:center}.chat-panel .chat-footer .chat-status .online-indicator{display:flex;align-items:center;gap:8px}.chat-panel .chat-footer .chat-status .online-indicator .online-dot{width:8px;height:8px;border-radius:50%;background:#12de00;animation:pulse 2s infinite}.chat-panel .chat-footer .chat-status .online-indicator .online-text{font-size:12px;color:hsla(0,0%,100%,.6)}.chat-panel .chat-footer .chat-status .chat-rules-btn{font-size:12px;color:hsla(0,0%,100%,.6);border:none;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.chat-panel .chat-footer .chat-status .chat-rules-btn:hover{background:var(--primary-purple);color:#fff}.chat-panel .chat-footer .chat-input-wrapper{position:relative}.chat-panel .chat-footer .chat-input-wrapper .chat-input{width:100%;padding:12px 120px 12px 16px;background:var(--background-tertiary);border:1px solid hsla(0,0%,100%,.1);border-radius:12px;color:#fff;font-size:14px;transition:all .2s}.chat-panel .chat-footer .chat-input-wrapper .chat-input::-moz-placeholder{color:#8b8b9d}.chat-panel .chat-footer .chat-input-wrapper .chat-input::placeholder{color:#8b8b9d}.chat-panel .chat-footer .chat-input-wrapper .chat-input:focus{outline:none;border-color:#7717ff;background:#33323d}.chat-panel .chat-footer .chat-input-wrapper .chat-input-actions{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:4px;align-items:center}.chat-panel .chat-footer .chat-input-wrapper .attach-btn,.chat-panel .chat-footer .chat-input-wrapper .emoji-btn,.chat-panel .chat-footer .chat-input-wrapper .send-btn{background:rgba(0,0,0,0);border:none;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.chat-panel .chat-footer .chat-input-wrapper .attach-btn svg,.chat-panel .chat-footer .chat-input-wrapper .emoji-btn svg,.chat-panel .chat-footer .chat-input-wrapper .send-btn svg{transition:all .2s}.chat-panel .chat-footer .chat-input-wrapper .attach-btn:hover,.chat-panel .chat-footer .chat-input-wrapper .emoji-btn:hover,.chat-panel .chat-footer .chat-input-wrapper .send-btn:hover{background:var(--primary-purple)}.chat-panel .chat-footer .chat-input-wrapper .attach-btn:hover svg path,.chat-panel .chat-footer .chat-input-wrapper .emoji-btn:hover svg path,.chat-panel .chat-footer .chat-input-wrapper .send-btn:hover svg path{fill:#fff}.chat-panel .chat-footer .chat-input-wrapper .active{background:var(--primary-purple)}.chat-panel .chat-footer .chat-input-wrapper .active svg path{fill:#fff}.chat-panel .chat-footer .chat-input-wrapper .emoji-btn{font-size:16px}.chat-panel .chat-footer .chat-input-wrapper .send-btn{padding:6px 8px}.chat-panel.modal-open{pointer-events:none;opacity:.4}.emoji-picker-container{position:absolute;bottom:90px;right:15px;z-index:2000}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.chat-rules-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1001;padding:20px;animation:fadeIn .2s ease-out}.chat-rules-modal .chat-rules-content{background:var(--background-primary);border-radius:16px;max-width:500px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid hsla(0,0%,100%,.1);animation:slideUp .3s ease-out}.chat-rules-modal .chat-rules-content .chat-rules-header{padding:24px;border-bottom:1px solid hsla(0,0%,100%,.1);display:flex;justify-content:space-between;align-items:center}.chat-rules-modal .chat-rules-content .chat-rules-header h3{font-size:20px;font-weight:600;color:#fff;margin:0}.chat-rules-modal .chat-rules-content .chat-rules-header .close-btn{background:rgba(0,0,0,0);border:none;color:#8b8b9d;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.chat-rules-modal .chat-rules-content .chat-rules-header .close-btn:hover{background:hsla(0,0%,100%,.05);color:#fff}.chat-rules-modal .chat-rules-content .chat-rules-body{padding:24px;overflow-y:auto;flex:1}.chat-rules-modal .chat-rules-content .chat-rules-body::-webkit-scrollbar{width:6px}.chat-rules-modal .chat-rules-content .chat-rules-body::-webkit-scrollbar-track{background:hsla(0,0%,100%,.05);border-radius:3px}.chat-rules-modal .chat-rules-content .chat-rules-body::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:3px}.chat-rules-modal .chat-rules-content .chat-rules-body::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.3)}.chat-rules-modal .chat-rules-content .chat-rules-body .chat-rules-intro{font-size:14px;color:hsla(0,0%,100%,.7);line-height:1.6;margin:0 0 24px}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list{display:flex;flex-direction:column;gap:20px}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item{display:flex;gap:16px;animation:slideIn .3s ease-out backwards}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:first-child{animation-delay:.05s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(2){animation-delay:.1s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(3){animation-delay:.15s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(4){animation-delay:.2s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(5){animation-delay:.25s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(6){animation-delay:.3s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(7){animation-delay:.35s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(8){animation-delay:.4s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(9){animation-delay:.45s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item:nth-child(10){animation-delay:.5s}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item .rule-number{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#7717ff,#5a0fd9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item .rule-content{flex:1}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item .rule-content h4{font-size:15px;font-weight:600;color:#fff;margin:0 0 6px}.chat-rules-modal .chat-rules-content .chat-rules-body .rules-list .rule-item .rule-content p{font-size:13px;color:hsla(0,0%,100%,.6);line-height:1.5;margin:0}.chat-rules-modal .chat-rules-content .chat-rules-body .chat-rules-footer{margin-top:24px;padding-top:20px;border-top:1px solid hsla(0,0%,100%,.1)}.chat-rules-modal .chat-rules-content .chat-rules-body .chat-rules-footer .rules-warning{font-size:13px;color:gold;line-height:1.6;margin:0;padding:12px 16px;background:rgba(255,215,0,.1);border-radius:8px;border-left:3px solid gold}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:99999}.modal-box{background:#131314;width:100%;max-width:420px;border-radius:12px;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.15);animation:modalFadeIn .25s ease-out}.modal-box h3{font-size:20px;font-weight:600;margin-bottom:6px;color:#fff}.modal-box p{font-size:14px;color:#6b7280;margin-bottom:16px}.modal-box textarea{width:100%;min-height:90px;resize:none;padding:10px 12px;border-radius:8px;border:1px solid #d1d5db;font-size:14px;color:#fff!important;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.modal-box textarea::-moz-placeholder{color:#fff}.modal-box textarea::placeholder{color:#fff}.modal-box textarea:focus{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15)}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.btn-secondary{background:#f3f4f6;color:#374151;padding:8px 16px;border-radius:8px;font-size:14px;border:none;cursor:pointer;transition:background .2s ease}.btn-secondary:hover{background:#e5e7eb}.btn-primary{background:#ef4444;color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;border:none;cursor:pointer;transition:background .2s ease}.btn-primary:hover{background:#dc2626}.btn-primary:disabled{opacity:.6;cursor:not-allowed}