/* .new-chat-sec {padding: 50px 0;} */

.new-chat-sec .container { max-width: 900px; margin: 0 auto; padding: 30px 30px; background-color: #EDF5FF; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); margin-top: 20px; margin-bottom: 20px;; } 

.new-chat-sec  .chat-top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid #e1e4e8; } 
.new-chat-sec  .chat-top-header .ticket-info { display: flex; align-items: center; gap: 15px; } 
.new-chat-sec  .chat-top-header .ticket-id {font-weight: 600; font-size: 30px; line-height: 30px; text-transform: capitalize; margin-bottom: 0px; color: #111111; } 
.new-chat-sec  .chat-top-header .status { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 15px; font-size: 14px; font-weight: 500;line-height: 18px;} 
.new-chat-sec  .chat-top-header .status span{width: 10px; height: 10px; background-color: #FFD900; border-radius: 50%;}
.new-chat-sec  .chat-top-header .status.In-progress { background-color: #fff; border: 1px solid #FFD900; font-weight: 600; color: #F9CC00;} 
.new-chat-sec  .chat-top-header .btn-primary.btn{background-color: #e74c3c; color: white;}






.new-chat-sec  .chat-top-header .status.Progress span{width: 10px; height: 10px; background-color: #FFD900; border-radius: 50%;}
.new-chat-sec  .chat-top-header .status.Progress { background-color: #fff; border: 1px solid #FFD900; font-weight: 600; color: #F9CC00;} 


.new-chat-sec  .chat-top-header .status.Resolved span{width: 10px;height: 10px;background-color: #01A301;border-radius: 50%;}
.new-chat-sec  .chat-top-header .status.Resolved {background-color: #fff;border: 1px solid #01A301;font-weight: 600;color:  #01A301;} 

.new-chat-sec  .chat-top-header .status.Pending {background-color: #fff;border: 1px solid #DC1A19; color: #DC1A19;}
.new-chat-sec  .chat-top-header .status.Pending span{background-color: #DC1A19;}


.new-chat-sec  .chat-top-header .status.Closed {background-color: #fff;border: 1px solid #535253;color: #535253;}
.new-chat-sec  .chat-top-header .status.Closed span{background-color: #535253;}




.new-chat-sec  .ticket-meta { display: flex; gap: 20px; margin-bottom: 20px; padding: 20px; background-color: #fff; border-radius: 8px;justify-content: space-between;border: 1px solid #00000026; } 
.new-chat-sec  .ticket-meta .meta-item { display: flex; flex-direction: column; } 
.new-chat-sec  .ticket-meta .meta-label {font-size: 13px; color: #7f8c8d; margin-bottom: 5px; font-weight: 600; } 
.new-chat-sec  .ticket-meta .meta-value { font-weight: 600; color: #333; font-size: 18px; } 


.new-chat-sec  .ticket-meta .meta-item:first-of-type{max-width: 280px;}


.new-chat-sec .chat-container { height: 500px; overflow-y: auto; padding: 15px; border: 1px solid #00000026; border-radius: 8px; margin-bottom: 30px; background-color: #fff;overflow-x: hidden; } 
.new-chat-sec .message { margin-bottom: 10px; display: flex; } 
.new-chat-sec .message.admin { justify-content: flex-start; } 
.new-chat-sec .message.user { justify-content: flex-end; } 
.new-chat-sec .message-bubble { max-width: 70%; padding: 12px 16px; border-radius: 18px; position: relative; } 
.new-chat-sec .message.admin .message-bubble {background-color:#F3F4F6;border-bottom-left-radius: 4px;} 
.new-chat-sec .message.user .message-bubble {background-color: #E1FBE2;border-bottom-right-radius: 4px;} 
.new-chat-sec .message-content {margin-bottom: 8px;color: #000;font-weight: 500;font-size: 14px;} 
.new-chat-sec .message-time {font-size: 12px;color: #000;text-align: right;font-weight: 500;} 
.new-chat-sec .message-content { margin-bottom: 8px; } 
.new-chat-sec .msg-time { font-size: 12px; color: #7f8c8d; text-align: right; } 





.new-chat-sec .input-area { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #ddd; padding-top: 30px;} 
.new-chat-sec .message-box { position: relative; display: flex; align-items: start; background: white; border: 1px solid #ccc; border-radius: 8px; padding: 20px 15px; } 
.new-chat-sec .attachment-btn { background: none; border: none;cursor: pointer; margin-right: 12px; color: #555;padding: 0; } 
.new-chat-sec .message-input { flex: 1; border: none; outline: none; resize: none; font-size: 14px; height: 60px; color: #000;} 
.new-chat-sec .action-buttons { display: flex; justify-content: flex-end; gap: 10px; } 



.new-chat-sec .btn.common-btn{display: inline-block;  font-weight: 600; font-size: 16px; line-height: 16px; text-transform: capitalize; font-family: "Open Sans", sans-serif !important;border-radius: 10px; padding: 15px 20px;}
.new-chat-sec .btn.back-btn{background-color: #2086cf;color: #fff;}
.new-chat-sec .btn.close-btn {background-color: #2086cf;color: #fff;} 
.new-chat-sec .btn.send-btn { background-color: #4caf50; color: #fff; }


.new-chat-sec .btn.back-btn:hover{background-color: #fff;color: #2086cf;border-color: #2086cf;}
.new-chat-sec .btn.close-btn:hover{background-color: #fff;color: #2086cf;border-color: #2086cf;}
.new-chat-sec .btn.send-btn:hover{background-color: #fff;color: #4caf50;border-color: #4caf50;}







.new-chat-sec .input-area .resolved-notice { background-color: #e8f6ef; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; color: #27ae60; font-weight: 500; } 
.new-chat-sec .input-area .hidden { display: none; } 

/* Scrollbar styling */ 
.new-chat-sec .chat-container::-webkit-scrollbar { width: 6px; } 
.new-chat-sec .chat-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } 
.new-chat-sec .chat-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; } 
.new-chat-sec .chat-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } 



.new-chat-sec .chat-image-bubble img{width: 100%;height: auto;}
.new-chat-sec .preview-image-box img#previewImage{width: 100px; height: 100px; object-fit: cover; border: 1px solid #00000069; border-radius: 10px;}
.new-chat-sec .preview-image-box {position: relative;}
.new-chat-sec .preview-image-box button.img-remove-btn{position: absolute; right: 0; top: -10px; border-radius: 50%; background-color: #000; color: #fff; font-size: 12px; width: auto; height: auto; display: flex; justify-content: center; align-items: center;border: 0;}
.new-chat-sec .chat-image-bubble{position: relative;display: inline-block;margin-top: 6px;width: 100%;}
.new-chat-sec .chat-image-bubble img { max-width: 200px; border-radius: 8px; }
.new-chat-sec .chat-image-bubble button{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.6); border: none;padding: 6px 12px;border-radius: 4px;cursor: pointer;
;font-size: 14px; color: #fff; font-weight: 600; }










@media (min-width: 768px) and (max-width: 991.98px) {


.new-chat-sec .chat-top-header{flex-direction: column;align-items: start;margin-bottom: 25px;}
.new-chat-sec .chat-top-header .ticket-info{flex-direction: column-reverse;align-items: start;margin-bottom: 20px;}


.new-chat-sec .btn.common-btn{font-size: 14px;line-height: 14px;padding: 14px 22px;}

.new-chat-sec .container { padding: 30px; margin: auto;max-width: 700px; } 

.new-chat-sec .chat-top-header .ticket-id{font-size: 26px;}
.new-chat-sec .ticket-meta{padding: 20px 25px;gap: 14px;flex-direction: column;}
.new-chat-sec .ticket-meta .meta-value{font-size: 17px;}

.new-chat-sec .chat-top-header .status{gap: 10px;}
.new-chat-sec .chat-image-bubble button svg{width: 20px;height: 20px;}


}
@media (max-width: 575.98px){

.new-chat-sec .container{max-width: 100%;padding: 30px 20px;}

.new-chat-sec .chat-top-header{flex-direction: column;align-items: start;}
.new-chat-sec .chat-top-header .ticket-info{gap: 15px;margin-bottom: 20px;flex-direction: column-reverse;align-items: start;}
.new-chat-sec .chat-top-header .ticket-id {font-size: 24px;}  
.new-chat-sec .chat-top-header .status span{width: 8px;height: 8px;} 
.new-chat-sec .chat-top-header .status{font-size: 12px;padding: 5px 10px;}

.new-chat-sec .back-btn {font-size: 16px; width: max-content; margin-right: auto; margin-left: 0; padding: 15px 20px;}
.new-chat-sec .close-btn, .new-chat-sec .send-btn, .new-chat-sec .back-btn{font-size: 16px;}

.new-chat-sec .message-bubble{padding: 12px 14px;}
.new-chat-sec .chat-top-header{margin-bottom: 25px;}
.new-chat-sec .ticket-meta{flex-direction: column;gap: 10px;padding: 20px 15px;}


.new-chat-sec .chat-container{margin-bottom: 25px;}
.new-chat-sec .input-area{padding-top: 25px;}

.new-chat-sec .preview-image-box img#previewImage{width: 70px;height: 70px;object-fit: cover;}
.new-chat-sec .preview-image-box button.img-remove-btn{font-size: 10px;}
.new-chat-sec .chat-image-bubble img{width: 100%;height: auto;}
.new-chat-sec .action-buttons{margin-top: 10px;}

.new-chat-sec .btn.common-btn{font-size: 13px;padding: 14px;line-height: 13px;}
.new-chat-sec .chat-image-bubble button svg{width: 20px;height: 20px;}


}    
@media (max-width: 767.98px) and (orientation: landscape) {
.new-chat-sec .container{max-width: 100%;padding: 30px 20px;}

.new-chat-sec .chat-top-header{flex-direction: column;align-items: start;}
.new-chat-sec .chat-top-header .ticket-info{gap: 15px;margin-bottom: 20px;flex-direction: column-reverse;align-items: start;}
.new-chat-sec .chat-top-header .ticket-id {font-size: 24px;}  
.new-chat-sec .chat-top-header .status span{width: 8px;height: 8px;} 
.new-chat-sec .chat-top-header .status{font-size: 12px;padding: 5px 10px;}

.new-chat-sec .back-btn {font-size: 16px; width: max-content; margin-right: auto; margin-left: 0; padding: 15px 20px;}
.new-chat-sec .close-btn, .new-chat-sec .send-btn, .new-chat-sec .back-btn{font-size: 16px;}

.new-chat-sec .message-bubble{padding: 12px 14px;}
.new-chat-sec .chat-top-header{margin-bottom: 25px;}
.new-chat-sec .ticket-meta{flex-direction: column;gap: 10px;padding: 20px 15px;}


.new-chat-sec .chat-container{margin-bottom: 25px;}
.new-chat-sec .input-area{padding-top: 25px;}

.new-chat-sec .preview-image-box img#previewImage{width: 70px;height: 70px;object-fit: cover}
.new-chat-sec .preview-image-box button.img-remove-btn{font-size: 10px;}
.new-chat-sec .chat-image-bubble img{width: 100%;height: auto;}
.new-chat-sec .action-buttons{margin-top: 10px;}

.new-chat-sec .btn.common-btn{font-size: 13px;padding: 14px;line-height: 13px;}
.new-chat-sec .chat-image-bubble button svg{width: 20px;height: 20px;}



}
@media (min-width: 576px) and (max-width: 767.98px) {

.new-chat-sec .container{max-width: 100%;padding: 30px 20px;}

.new-chat-sec .chat-top-header{flex-direction: column;align-items: start;}
.new-chat-sec .chat-top-header .ticket-info{gap: 15px;margin-bottom: 20px;flex-direction: column-reverse;align-items: start;}
.new-chat-sec .chat-top-header .ticket-id {font-size: 24px;}  
.new-chat-sec .chat-top-header .status span{width: 8px;height: 8px;} 
.new-chat-sec .chat-top-header .status{font-size: 12px;padding: 5px 10px;}

.new-chat-sec .back-btn {font-size: 16px; width: max-content; margin-right: auto; margin-left: 0; padding: 15px 20px;}
.new-chat-sec .close-btn, .new-chat-sec .send-btn, .new-chat-sec .back-btn{font-size: 16px;}

.new-chat-sec .message-bubble{padding: 12px 14px;}
.new-chat-sec .chat-top-header{margin-bottom: 25px;}
.new-chat-sec .ticket-meta{flex-direction: column;gap: 10px;padding: 20px 15px;}


.new-chat-sec .chat-container{margin-bottom: 25px;}
.new-chat-sec .input-area{padding-top: 25px;}

.new-chat-sec .preview-image-box img#previewImage{width: 70px;height: 70px;object-fit: cover}
.new-chat-sec .preview-image-box button.img-remove-btn{font-size: 10px;}
.new-chat-sec .chat-image-bubble img{width: 100%;height: auto;}
.new-chat-sec .action-buttons{margin-top: 10px;}

.new-chat-sec .btn.common-btn{font-size: 13px;padding: 14px;line-height: 13px;}
.new-chat-sec .chat-image-bubble button svg{width: 20px;height: 20px;}



}

@media (min-width:320px) and (max-width:374.99px) { 

.new-chat-sec .container{max-width: 100%;padding: 30px 15px;}   

.new-chat-sec .message-bubble{padding: 12px;}
/* .new-chat-sec .chat-top-header .ticket-id{font-size: 22px;}
.new-chat-sec .chat-top-header .status span{width: 7px;height: 7px;} 
.new-chat-sec .chat-top-header .status{font-size: 10px;padding: 5px 10px;} */

.new-chat-sec .ticket-meta .meta-label{line-height: 15px;font-size: 12px;}
.new-chat-sec .ticket-meta .meta-value{font-size: 15px;line-height: 20px;}

.new-chat-sec .chat-container{padding: 15px 10px;margin-bottom: 20px;}
.new-chat-sec .message-content{font-size: 13px;}

.new-chat-sec .input-area{padding-top: 20px;}
.new-chat-sec .message-box{padding: 15px 12px;}
.new-chat-sec .attachment-btn{margin-right: 10px;}

.new-chat-sec .close-btn, .new-chat-sec .send-btn, .new-chat-sec .back-btn{font-size: 16px;}
.new-chat-sec .back-btn {font-size: 16px; width: max-content; margin-right: auto; margin-left: 0; padding: 15px 20px;}
.new-chat-sec .btn.common-btn{font-size: 12px;}
.new-chat-sec .message-input{font-size: 12px;}
.new-chat-sec .preview-image-box img#previewImage { width: 60px; height: 60px; object-fit: cover; }

}