*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);color:#fff;height:100vh;overflow:hidden}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%)}.login-box{background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,69,0,.3);padding:40px;border-radius:12px;box-shadow:0 8px 32px #ff450033;width:100%;max-width:500px}.login-image-container{text-align:center;margin-bottom:25px}.login-image{max-width:200px;height:auto;border-radius:8px;border:2px solid rgba(255,69,0,.3);box-shadow:0 4px 12px #ff450033;transition:all .3s ease}.login-image:hover{border-color:#ff450099;box-shadow:0 6px 20px #ff45004d;transform:scale(1.02)}.image-note{display:block;margin-top:8px;color:#fff9;font-size:12px;font-style:italic}.login-box h2{text-align:center;margin-bottom:30px;color:#fff;font-size:24px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.input-group{margin-bottom:20px}.input-group input{width:100%;padding:12px 16px;border:2px solid rgba(255,69,0,.3);border-radius:8px;font-size:16px;transition:border-color .3s,box-shadow .3s;color:#fff;background:rgba(255,255,255,.1);font-family:monospace}.input-group input:focus{outline:none;border-color:#ff4500;box-shadow:0 0 0 3px #ff45001a}.input-group input::placeholder{color:#fff9}.login-btn{width:100%;padding:12px;background:linear-gradient(90deg,#B22222 0%,#FF4500 100%);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .3s;box-shadow:0 4px 20px #ff450066}.login-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px #ff450099}.login-error{color:#ff6b6b;text-align:center;margin-top:15px;font-size:14px;background:rgba(255,107,107,.1);padding:10px;border-radius:6px;border:1px solid rgba(255,107,107,.2);display:none}.login-error:not(:empty){display:block}.logout-btn{background:#e74c3c;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.logout-btn:hover{background:#c0392b}.chat-container{display:flex;flex-direction:column;height:100vh;max-width:900px;margin:0 auto;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,69,0,.3)}.header{background:linear-gradient(90deg,#B22222 0%,#FF4500 100%);padding:20px;display:flex;align-items:center;gap:15px;box-shadow:0 4px 20px #ff450066;position:relative;cursor:pointer}.header:hover{background:linear-gradient(90deg,#C92323 0%,#FF5511 100%)}.header-menu{position:absolute;top:80px;left:20px;background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:2px solid rgba(255,69,0,.5);border-radius:12px;padding:8px;min-width:250px;z-index:1000;box-shadow:0 8px 32px #000c;animation:menuSlideIn .3s ease-out}@keyframes menuSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:4px 0;border-radius:8px;cursor:pointer;transition:all .3s ease;color:#fff;font-size:14px;background:rgba(255,255,255,.05)}.menu-item:hover{background:rgba(255,69,0,.6);transform:translate(5px)}.menu-item-danger:hover{background:rgba(231,76,60,.8)}.menu-icon{font-size:18px;width:24px;text-align:center}.menu-text{flex:1;font-weight:500}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2000;display:flex;justify-content:center;align-items:center;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:rgba(0,0,0,.95);border:2px solid rgba(255,69,0,.5);border-radius:16px;max-width:800px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #ff45004d;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:2px solid rgba(255,69,0,.3)}.modal-header h2{margin:0;color:#fff;font-size:20px}.modal-close{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:28px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;line-height:1}.modal-close:hover{background:rgba(231,76,60,.8);transform:rotate(90deg)}.modal-body{padding:20px 24px;overflow-y:auto;flex:1}.modal-body .message{margin-bottom:15px}.modal-body .loading{text-align:center;padding:40px;color:#fff9;font-size:16px}#pinnedMessagesList .message.text-message .message-content,#pinnedMessagesList .message.link-message .message-content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-height:4.5em}.modal-body .empty-state{text-align:center;padding:60px 20px}.modal-body .empty-state .empty-icon{font-size:64px;margin-bottom:16px}.modal-body .empty-state p{color:#fff9;font-size:16px;line-height:1.6}.avatar-container{position:relative;display:flex;align-items:center;min-width:60px}.avatar-image{width:50px;height:50px;border-radius:50%;border:3px solid rgba(255,255,255,.3);cursor:pointer;transition:all .3s ease;object-fit:cover;background:rgba(255,255,255,.1);box-shadow:0 2px 8px #0000004d}.avatar-image:hover{border-color:#fff9;transform:scale(1.05);box-shadow:0 4px 12px #0006}.avatar-url-input{position:absolute;top:60px;left:0;width:250px;padding:8px 12px;border:2px solid rgba(255,69,0,.5);border-radius:6px;background:rgba(0,0,0,.8);color:#fff;font-size:12px;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #00000080}.avatar-url-input:focus{outline:none;border-color:#ff4500;box-shadow:0 0 0 3px #ff450033}.avatar-url-input::placeholder{color:#fff9}.header-content{text-align:center;flex:1;margin:0}.header-content h1{font-size:1.8rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);margin:0}.messages-area{flex:1;padding:20px;overflow-y:auto;background:rgba(0,0,0,.2)}.messages-area::-webkit-scrollbar{width:8px}.messages-area::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:4px}.messages-area::-webkit-scrollbar-thumb{background:rgba(255,69,0,.6);border-radius:4px}.message{background:rgba(255,255,255,.08);border:1px solid rgba(255,69,0,.2);border-radius:15px;padding:15px;margin-bottom:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.message:hover{background:rgba(255,255,255,.12);border-color:#ff450066;transform:translateY(-2px)}.message.pinned-message{background:linear-gradient(135deg,rgba(255,215,0,.15) 0%,rgba(255,140,0,.1) 100%);border:2px solid rgba(255,215,0,.5);box-shadow:0 0 15px #ffd70033;position:relative}.message.pinned-message:before{content:"📌";position:absolute;top:-10px;right:10px;font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.message.pinned-message:hover{background:linear-gradient(135deg,rgba(255,215,0,.2) 0%,rgba(255,140,0,.15) 100%);border-color:#ffd700b3;box-shadow:0 0 20px #ffd7004d;transform:translateY(-2px)}.message.pinned-message .message-type{background:linear-gradient(135deg,#FFD700 0%,#FF8C00 100%);color:#000;font-weight:700}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.85rem}.message-type{background:rgba(255,69,0,.8);color:#fff;padding:4px 10px;border-radius:12px;font-weight:600;text-transform:uppercase}.message-actions{display:flex;gap:8px}.action-btn{background:rgba(255,255,255,.1);border:none;color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.action-btn:hover{background:rgba(255,69,0,.6);transform:scale(1.1)}.action-btn.pin-btn{font-size:1rem}.action-btn.pin-btn:hover{background:rgba(255,215,0,.6)}.pinned-message .action-btn.pin-btn{background:rgba(255,215,0,.3)}.message-content{font-size:1rem;line-height:1.4;margin-bottom:10px;word-wrap:break-word}.message-time{font-size:.75rem;color:#fff9;text-align:right}.input-area{background:rgba(0,0,0,.3);padding:20px;padding-bottom:env(safe-area-inset-bottom,80px)!important;margin-bottom:30px!important;border-top:1px solid rgba(255,69,0,.3);transition:padding-bottom .2s ease;position:relative;z-index:999}.input-container{display:flex;gap:15px}.input-buttons-left,.input-buttons-right{display:flex;gap:10px}.input-buttons-left{order:1}.message-input{flex:1;order:2;background:rgba(255,255,255,.1);border:2px solid rgba(255,69,0,.3);border-radius:25px;padding:15px 20px;color:#fff;font-size:1rem;resize:none;min-height:50px;max-height:150px;transition:all .3s ease}.message-input:focus{outline:none;border-color:#ff4500cc;background:rgba(255,255,255,.15)}.message-input::placeholder{color:#ffffff80}.input-buttons-right{order:3}.input-btn{background:linear-gradient(45deg,#B22222,#FF4500);border:none;color:#fff;padding:15px;border-radius:15px;cursor:pointer;font-size:1.2rem;min-width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 15px #ff45004d}.btn-icon{width:20px;height:20px;filter:brightness(0) invert(1);transition:all .3s ease}.input-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #ff450080}.input-btn:active{transform:translateY(-1px)}.empty-state{text-align:center;padding:60px 20px;color:#fff9}.empty-icon{font-size:4rem;margin-bottom:20px}.empty-state p{font-size:1.1rem;line-height:1.5}.upload-progress{position:fixed;top:20px;right:20px;background:rgba(255,69,0,.9);color:#fff;padding:10px 20px;border-radius:8px;font-size:.9rem;z-index:1000;display:none;box-shadow:0 4px 15px #0000004d}@media (max-width: 768px){.chat-container{height:100vh;border:none;border-radius:0}.header{padding:15px;gap:10px}.header h1{font-size:1.5rem}.header-menu{top:70px;left:10px;right:10px;min-width:auto;width:auto}.modal-content{width:95%;max-height:90vh;margin:10px}.modal-header{padding:16px}.modal-header h2{font-size:18px}.modal-body{padding:16px}.avatar-image{width:40px;height:40px}.avatar-url-input{width:200px;font-size:11px;padding:6px 10px}.header-content{margin:0}.header-content h1{font-size:1.4rem}.messages-area{padding:15px}.input-area{padding:15px;padding-bottom:env(safe-area-inset-bottom,60px)!important;margin-bottom:25px!important;min-height:90px}.input-container{gap:10px}.input-btn{min-width:45px;height:45px;padding:12px}.message{padding:12px;margin-bottom:12px}}.message-content a{color:#ff4500!important;text-decoration:underline;font-weight:500;transition:color .3s ease}.message-content a:hover{color:tomato!important;text-decoration:none}.message-content a:visited{color:#dc143c!important}a{color:#ff4500;text-decoration:none;transition:color .3s ease}a:hover{color:tomato;text-decoration:underline}a:visited{color:#dc143c}@media (max-width: 768px){.message-content a{padding:8px 4px;margin:-8px -4px;display:inline-block;min-height:44px;-webkit-tap-highlight-color:rgba(255,69,0,.3);touch-action:manipulation!important;color:#ff4500!important;text-decoration:underline;font-weight:500;position:relative;pointer-events:auto!important;z-index:10;pointer-events:auto}.message-content a:active{background-color:#ff45001a;color:tomato!important}.message-content{position:relative;z-index:1}.message:hover{background:rgba(255,255,255,.08);border-color:#ff450033;transform:none}}