:root{--primary-color:#1921ff;--secondary-color:#f8fafc;--footer-bg:#171717;--link-color:#1921ff;--font-color:#303030;--link-hover-color:#1921ff}.people-list{background-color:#1e1f24;border-radius:0 25px 25px 0;color:#fff;height:91vh;padding:25px 0}.people-list .sidebar-left{position:relative}.people-list .chat-count{font-size:18px;font-weight:500}.people-list .chat-count,.people-list .serch-controls{margin-bottom:20px;padding:0 25px}.people-list .chat-searchbar{background-color:#000;border:none;border-radius:8px;margin-right:10px}.people-list .chat-searchbar:active,.people-list .chat-searchbar:focus{background-color:#000;color:#fff}.people-list .chat-searchbar-icon{background:#000;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;padding:8px 0 8px 14px}.people-list .chat-list-wrapper{height:80vh;overflow-x:hidden;overflow-y:scroll}.people-list .chat-list-wrapper::-webkit-scrollbar{width:4px}.people-list .chat-list-wrapper::-webkit-scrollbar-track{background:transparent}.people-list .chat-list-wrapper::-webkit-scrollbar-thumb{background:#fff}.people-list .chat-list{background-color:#1e1f24;background:#1e1f24;color:#fff;list-style:none;padding:0}.people-list .chat-list .chat-item .chat-item-link{gap:12px;padding:15px 25px;width:100%}.people-list .chat-list .chat-item .avatar-wrapper img{height:50px;width:50px}.people-list .chat-list .chat-item .about{gap:8px}.people-list .chat-list .chat-item .about .name{font-size:18px;font-weight:500;letter-spacing:.36px}.people-list .chat-list .chat-item .about .time{font-size:12px;opacity:.4}.people-list .chat-list .chat-item .about .message{display:flex;flex-direction:row;justify-content:space-between}.people-list .chat-list .chat-item .about .message .content{font-size:14px;opacity:.4}.people-list .chat-list .chat-item .about .message .count{background-color:#00c2ff;border-radius:50%;color:#1e1f24;font-size:11px;font-weight:600;padding:2px 8px}.people-list .chat-list .chat-item.active{background-color:hsla(0,0%,100%,.06);border-left:4px solid #00c2ff}.people-list .newchat-wrapper{align-items:center;background:linear-gradient(180deg,rgba(30,31,36,0),#1e1f24);border-radius:0 0 25px 0;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;width:100%}.people-list .newchat-wrapper .new-chat{background:linear-gradient(69deg,#00c2ff -.83%,#7c4eff 71.75%);border-radius:42px;color:#fff;display:flex;font-size:16px;font-style:normal;font-weight:600;justify-content:center;letter-spacing:.48px;line-height:normal;margin:20px;padding:18px 70px;text-align:center}.character-info{padding-right:25px}.character-info .credits-wrapper{border-radius:14px;height:82px;padding:20px 25px;position:relative}.character-info .credits-wrapper:before{background:linear-gradient(69deg,#00c2ff -.83%,#7c4eff 71.75%);border-radius:14px;content:"";height:100%;left:0;opacity:.3;position:absolute;right:0;width:100%;z-index:-1}.character-info .credits-wrapper .credits-info{color:#fff}.character-info .credits-wrapper .credits-info .credits{font-size:20px;font-weight:400;letter-spacing:.6px;line-height:1.2}.character-info .credits-wrapper .credits-info .date{font-size:12px;font-weight:400;letter-spacing:.36px;line-height:normal;opacity:.5}.character-info .credits-wrapper .credits-pont{color:#00c2ff;font-size:25px;font-weight:600;letter-spacing:.75px;text-align:right}.character-info .character-panel{background-color:#1e1f24;border-radius:14px;color:#fff;/* margin-top:25px; */padding:20px}.character-info .character-panel .character-avatar{padding:20px}.character-info .character-panel .character-avatar img{height:156px;width:156px}.character-info .character-panel .name{font-size:18px;font-weight:500;letter-spacing:.36px;margin-bottom:30px;padding:5px}.character-info .character-panel .description{color:hsla(0,0%,100%,.6);font-size:14px;font-weight:400;letter-spacing:.28px;line-height:20px}.character-info .character-panel hr{border:1px solid hsla(0,0%,100%,.1);width:100%}.character-info .character-panel .related-pills{align-content:flex-start;align-items:flex-start;display:inline-flex;flex-wrap:wrap;gap:10px;list-style:none}.character-info .character-panel .related-pills .pill-item{background:hsla(0,0%,100%,.06);border-radius:6px;font-size:12px;font-weight:400;padding:8px 16px}.chat{padding-left:25px;position:relative}.chat .character-status-wrapper{background-color:#1e1f24;border-radius:14px;color:#fff;height:82px;padding:15px 20px}.chat .character-status-wrapper .character-status{gap:16px}.chat .character-status-wrapper .character-status .character-avatar img{height:52px;width:52px}.chat .character-status-wrapper .character-status .status-details{gap:8px}.chat .character-status-wrapper .character-status .status-details .name{font-size:18px;font-style:normal;font-weight:500;letter-spacing:.36px;line-height:normal}.chat .character-status-wrapper .character-status .status-details .status{color:hsla(0,0%,100%,.4);font-size:14px;font-style:normal;font-weight:400;line-height:normal}.chat .character-status-wrapper .character-status .status-details .status .status-dot{height:6px;margin-right:6px;width:6px}.chat .character-status-wrapper .character-status .status-details .status .status-dot.offline circle{fill:#c2c2c2}.chat .chat-area-wrapper{height:78vh;overflow-x:hidden;overflow-y:scroll}.chat .chat-area-wrapper::-webkit-scrollbar{width:4px}.chat .chat-area-wrapper::-webkit-scrollbar-track{background:transparent}.chat .chat-area-wrapper::-webkit-scrollbar-thumb{background:#fff}.chat .chat-area-wrapper .chat-area{margin-top:20px}.chat .chat-area-wrapper .chat-area .message-wrapper{display:flex;flex-direction:row;gap:12px;padding:20px 0}.chat .chat-area-wrapper .chat-area .message-wrapper .avatar-wrapper .avatar{height:28px;width:28px}.chat .chat-area-wrapper .chat-area .message-wrapper .message-body{gap:8px}.chat .chat-area-wrapper .chat-area .message-wrapper .message-body .message-meta{align-items:center;gap:12px;height:28px}.chat .chat-area-wrapper .chat-area .message-wrapper .message-body .message-meta .name{color:#fff;font-size:16px;font-style:normal;font-weight:500;letter-spacing:.32px;line-height:normal}.chat .chat-area-wrapper .chat-area .message-wrapper .message-body .message-meta .time{color:hsla(0,0%,100%,.5);font-size:12px;font-style:normal;font-weight:400;letter-spacing:.24px;line-height:normal;text-align:right}.chat .chat-area-wrapper .chat-area .message-wrapper .message-body .message{align-items:center;background-color:#1e1f24;border-radius:0 10px 10px 10px;color:hsla(0,0%,100%,.8);display:inline-flex;gap:10px;justify-content:center;padding:14px}.chat .chat-area-wrapper .chat-area .message-wrapper.sent,.chat .chat-area-wrapper .chat-area .message-wrapper.sent .message-body .message-meta{flex-direction:row-reverse}.chat .chat-area-wrapper .chat-area .message-wrapper.sent .message-body .message{background-color:rgba(0,194,255,.25);border-radius:10px 0 10px 10px}.chat .compose-message-wrapper{align-items:center;bottom:0;display:flex;justify-content:center;/* position:absolute; */right:0;width:100%}.chat .compose-message-wrapper .compose-message{margin:20px 20px 30px;position:relative;width:100%}.chat .compose-message-wrapper .compose-message .message-box{background:#1e1f24;border:1px solid hsla(0,0%,100%,.1);border-radius:12px;color:#fff;font-size:16px;font-style:normal;font-weight:400;height:64px;line-height:1.5;padding:20px 50px 0 30px;resize:none;vertical-align:middle;width:100%}.chat .compose-message-wrapper .compose-message .message-box::-webkit-scrollbar{width:4px}.chat .compose-message-wrapper .compose-message .message-box::-webkit-scrollbar-track{background:transparent}.chat .compose-message-wrapper .compose-message .message-box::-webkit-scrollbar-thumb{background:#fff}.chat .compose-message-wrapper .compose-message .send-btn{height:32px;position:absolute;right:18px;top:16px;width:32px}