*{box-sizing:border-box}body{background-color:#edeff2;font-family:Sarabun,Calibri,Roboto,sans-serif;margin:0;padding:20px;min-height:100vh;display:flex;align-items:center;justify-content:center}.chat_window{width:calc(100% - 40px);max-width:900px;height:80vh;max-height:700px;border-radius:16px;background-color:#fff;box-shadow:0 20px 40px #0000001a,0 4px 12px #0000000d;background-color:#f8f8f8;overflow:hidden;display:flex;flex-direction:column}.top_menu{background-color:#fff;width:100%;padding:24px 24px 20px;box-shadow:0 2px 12px #0000000f;position:relative;flex-shrink:0}.top_menu .buttons{position:absolute;left:24px;top:50%;transform:translateY(-50%);display:flex;gap:10px}.top_menu .buttons .button{width:14px;height:14px;border-radius:50%;transition:all .2s ease;cursor:pointer}.top_menu .buttons .button:hover{transform:scale(1.1)}.top_menu .buttons .button.close{background-color:#f5886e}.top_menu .buttons .button.minimize{background-color:#fdbf68}.top_menu .buttons .button.maximize{background-color:#a3d063}.top_menu .title{text-align:center;color:#bcbdc0;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}.messages{position:relative;list-style:none;padding:24px;margin:0;flex:1;overflow-y:auto;background:linear-gradient(to bottom,#fafbfc,#f5f6f7)}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track{background:transparent}.messages::-webkit-scrollbar-thumb{background:#bcbdc04d;border-radius:3px}.messages::-webkit-scrollbar-thumb:hover{background:#bcbdc080}.messages .message{clear:both;overflow:hidden;margin-bottom:24px;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(10px)}.messages .message.left .avatar{background-image:url(/ditgpt/user.png);background-size:cover;background-position:center;float:left;box-shadow:0 2px 8px #0000001a}.messages .message.left .text_wrapper{background-color:#ffe6cb;margin-left:20px;box-shadow:0 2px 8px #0000000d}.messages .message.left .text_wrapper:after,.messages .message.left .text_wrapper:before{right:100%;border-right-color:#ffe6cb}.messages .message.left .text{color:#c48843}.messages .message.right .avatar{background-image:url(/ditgpt/dit_avatar.png);background-size:cover;background-position:center;float:right;box-shadow:0 2px 8px #0000001a}.messages .message.right .text_wrapper{background-color:#c7eafc;margin-right:20px;float:right;box-shadow:0 2px 8px #0000000d}.messages .message.right .text_wrapper:after,.messages .message.right .text_wrapper:before{left:100%;border-left-color:#c7eafc}.messages .message.right .text{color:#45829b}.messages .message.appeared{opacity:1;transform:translateY(0)}.messages .message .avatar{width:48px;height:48px;border-radius:50%;display:inline-block;transition:all .2s ease}.messages .message .avatar:hover{transform:scale(1.05)}.messages .message .text_wrapper{display:inline-block;padding:16px 20px;border-radius:18px;width:calc(100% - 75px);min-width:100px;position:relative;word-wrap:break-word}.messages .message .text_wrapper:after,.messages .message .text_wrapper:before{top:16px;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.messages .message .text_wrapper:after{border-width:8px;margin-top:0}.messages .message .text_wrapper:before{border-width:9px;margin-top:-1px}.messages .message .text_wrapper .text{font-size:16px;font-weight:400;line-height:1.5}.bottom_wrapper{width:100%;background-color:#fff;padding:20px 24px;border-top:1px solid rgba(188,189,192,.15);display:flex;gap:12px;align-items:center;flex-shrink:0}.bottom_wrapper .message_input_wrapper{flex:1;height:52px;border-radius:26px;border:2px solid #bcbdc0;position:relative;padding:0 20px;background:#fff;transition:all .2s ease;box-shadow:0 2px 4px #0000000a}.bottom_wrapper .message_input_wrapper:focus-within{border-color:#a3d063;box-shadow:0 0 0 3px #a3d0631a}.bottom_wrapper .message_input_wrapper .message_input{border:none;height:100%;width:100%;outline:none;color:#333;font-size:16px;background:transparent;font-family:inherit}.bottom_wrapper .message_input_wrapper .message_input::placeholder{color:#bcbdc0}.bottom_wrapper .send_message{width:52px;height:52px;border-radius:50%;background-color:#a3d063;border:2px solid #a3d063;color:#fff;cursor:pointer;transition:all .2s ease;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #a3d0634d}.bottom_wrapper .send_message:hover{transform:translateY(-1px);box-shadow:0 4px 12px #a3d06366}.bottom_wrapper .send_message:active{transform:translateY(0)}.bottom_wrapper .send_message .text{display:none}.bottom_wrapper .send_message .icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bottom_wrapper .send_message .icon:before{content:"➤";font-size:18px;font-weight:700}.message_template{display:none}.bottom_wrapper .wait_message{width:52px;height:52px;border-radius:50%;background-color:gray;border:2px solid gray;color:#fff;cursor:not-allowed;text-align:center;display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite}.bottom_wrapper .wait_message .text{font-size:14px;font-weight:600}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@media (max-width: 768px){body{padding:10px}.chat_window{width:calc(100% - 20px);height:90vh;border-radius:12px}.top_menu{padding:20px 16px 16px}.messages,.bottom_wrapper{padding:16px}.messages .message .text_wrapper{width:calc(100% - 65px)}.messages .message .avatar{width:40px;height:40px}}