.join-page-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;font-family:Poppins,sans-serif;height:100vh;justify-content:center}.join-page-card{background:#fff;border-radius:20px;box-shadow:0 15px 40px #00000040;max-width:420px;padding:50px 40px;text-align:center;transition:transform .3s ease,box-shadow .3s ease;width:90%}.join-page-card:hover{box-shadow:0 25px 50px #0000004d;transform:translateY(-5px)}.join-page-title{color:#333;font-size:30px;font-weight:700;margin-bottom:10px}.join-page-subtitle{color:#555;font-size:16px;margin-bottom:30px}.join-page-input-section{display:flex;flex-direction:column;gap:15px;margin-bottom:25px}.join-page-input{border:2px solid #ddd;border-radius:12px;font-size:16px;padding:14px 18px;text-align:center;transition:border-color .3s ease,box-shadow .3s ease}.join-page-input:focus{border-color:#667eea;box-shadow:0 0 10px #667eea4d;outline:none}.join-page-button{background-color:#667eea;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:14px;transition:background-color .3s ease,transform .2s ease}.join-page-button:hover:not(:disabled){background-color:#5a6fd8;transform:translateY(-2px)}.join-page-button:disabled{background-color:#ccc;cursor:not-allowed}.join-page-hint{color:#888;font-size:14px;margin-top:20px}.chat-header-container{align-items:center;background:linear-gradient(90deg,#ffc50f,#ff8c00);border-radius:10px 10px 0 0;box-shadow:0 4px 6px #0003;color:#1f1f1f;display:flex;font-family:Arial,sans-serif;font-weight:600;justify-content:space-between;letter-spacing:.5px;padding:15px 25px;position:relative;transition:background .3s ease;z-index:10}.chat-header-container:hover{background:linear-gradient(90deg,#ffda59,orange)}.chat-header-left{align-items:center;display:flex;gap:10px}.chat-header-title{text:border-color;font-size:20px;margin:0}.chat-header-online-dot{background:green;border-radius:50%;height:8px;width:8px}.chat-header-online-text{color:#000;font-size:14px}.chat-header-right{align-items:center;display:flex;gap:5px}.chat-header-welcome{color:#000;font-size:14px}.chat-header-username{font-weight:700}.message-list-container{background:#f8f9fa;flex:1 1;overflow-y:auto;padding:20px}.message-list-item{animation:fadeIn .3s ease-in;border-radius:10px;margin-bottom:15px;padding:12px}.message-chat{background:#fff;border-left:4px solid #667eea;box-shadow:0 2px 5px #0000001a}.message-join{background:#e8f5e8;border-left:4px solid #4caf50;text-align:center}.message-system{align-items:center;display:flex;gap:8px;justify-content:center}.message-system-icon{font-size:16px}.message-system-text{color:#4caf50;font-size:14px;font-weight:700}.message-user{align-items:flex-start;display:flex;gap:8px}.message-sender{color:#667eea;font-weight:700;min-width:-webkit-fit-content;min-width:fit-content}.message-content{color:#333;word-break:break-word}.message-time{color:#999;float:right;font-size:11px;margin-left:10px;margin-top:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-list-container::-webkit-scrollbar{width:6px}.message-list-container::-webkit-scrollbar-track{background:#f1f1f1}.message-list-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.message-list-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.message-input-container{background:#fff;border-top:1px solid #e0e0e0;box-shadow:0 -2px 10px #0000001a;display:flex;gap:10px;padding:20px}.message-input-field{border:2px solid #ddd;border-radius:25px;flex:1 1;font-size:16px;outline:none;padding:12px 15px;transition:border-color .3s}.message-input-field:focus{border-color:#667eea}.message-send-button{background-color:#667eea;border:none;border-radius:25px;color:#fff;cursor:pointer;font-weight:700;padding:12px 25px;transition:background-color .3s}.message-send-button:hover:not(:disabled){background-color:#5a6fd8}.message-send-button:disabled{background-color:#ccc;cursor:not-allowed}.chat-page-container{background:#fff;border:1px solid #e0e0e0;box-shadow:0 0 20px #0000001a;display:flex;flex-direction:column;height:100vh;margin:0 auto;max-width:800px}.app-main-container{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f5f5f5}
/*# sourceMappingURL=main.da204f11.css.map*/