.chat-loader{display:flex;justify-content:center;align-items:center;padding:20px;}
.chat-container{display:flex;border:1px solid #ddd;height:70vh;font-family:sans-serif;border-radius:3px;}
.no-chats,.no-active-chat{text-align:center;padding:50px;color:#888;}
.chat-sidebar{width:23%;min-width:200px;max-width:300px;border-right:1px solid #ddd;overflow-y:auto;padding:0;scrollbar-width:thin;}
.room-list{list-style:none;margin:0;padding:0;border-bottom:1px solid #ddd;}
.room-list li{display:flex;align-items:center;padding:5px 10px;min-height:48px;border-radius:4px;cursor:pointer;transition:background-color 0.2s ease;margin-bottom:0;border-bottom:1px solid #e9ecef;}
.room-list li:last-child{border-bottom:none;}
.room-list li:hover{background-color:#f0f2f5;}
.room-list li.active{background-color:#e7f3ff;}
.room-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;margin-right:8px;flex-shrink:0;}
.room-details{display:flex;flex-direction:column;overflow:hidden;width:100%;gap:2px;}
.room-user-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:0;}
.room-user{font-weight:bold;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room-time{font-size:.87em;color:#65676b;flex-shrink:0;margin-left:6px;}
.room-preview{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:#65676b;}
.last-message{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.unread-badge{background-color:#28a745;color:white;font-size:.8em;font-weight:bold;padding:2px 6px;border-radius:10px;margin-top:0;margin-bottom:1rem;}
.chat-main{width:60%;display:flex;flex-direction:column;}
.active-chat-container{display:flex;flex-direction:column;height:100%;}
.chat-header{display:flex;align-items:center;padding:11px 15px;border-bottom:1px solid #ddd;}
.chat-header-link{display:flex;align-items:center;text-decoration:none;color:inherit;}
.chat-header-info{display:flex;flex-direction:column;}
.chat-header-name{font-weight:600;}
.chat-header-status,.typing-indicator{font-size:.8em;color:#00973e;font-weight:bold;}
/* Нові стилі для покращеного дизайну чату */
.date-separator {
    text-align: center;
    margin: 20px 0 15px 0;
    color: #999;
    font-size: 12px;
    position: relative;
    width: 100%;
}

.date-separator span {
    background-color: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.date-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #e0e0e0;
    z-index: 0;
}

.message-item {
    margin-bottom: 15px;
}

.system-message-wrapper {
    display: flex;
    justify-content: center;
}

.system-message {
    background: #e3f2fd;
    color:30363d;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 14px;
    width :100%;
}

.user-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.message-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.message-avatar-spacer {
    width: 40px;
    flex-shrink: 0;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.grouped-message {
    margin-top: -10px;
}

.grouped-message p {
    margin-bottom: 5px;
}

.message-text-wrapper {
    position: relative;
    display: inline-block;
}

.grouped-message-info {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
}

.message-text-wrapper:hover .grouped-message-info {
    opacity: 1;
}

.grouped-message-time {
    font-size: 11px;
}

.grouped-message-status .bi {
    font-size: 16px;
    color: #4caf50;
}

.online-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.online-status.online {
    background-color: #4caf50;
}

.online-status.offline {
    background-color: #9e9e9e;
}

.message-content-wrapper {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.message-author {
    font-weight: 600;
    font-size: 14px;
    color: #1976d2;
}

.message-time {
    font-size: 12px;
    color: #666;
}

.message-status {
    margin-left: auto;
}

.message-status .bi {
    font-size: 20px;
    color: #4caf50;
}

.message-status .bi-check2-all {
    color:#4caf50;
}

.message-content {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.message-content p {
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}

.message-attachments {
    margin-top: 8px;
}

/* Перевизначення старих стилів */
.message-list{flex-grow:1;padding:20px;overflow-y:auto;}
.unread-separator{text-align:center;margin:15px 0;border-top:1px solid #e0e0e0;position:relative;}
.unread-separator span{background-color:#fff;padding:0 10px;position:relative;top:-11px;font-size:12px;color:#999;}
.chat-context-product{display:flex;align-items:center;padding:10px;margin:0 10px 10px;border:1px solid #ddd;border-radius:8px;background-color:#f9f9f9;}
.chat-context-product img{width:50px;height:50px;object-fit:cover;border-radius:4px;margin-right:15px;}
.context-product-title{font-weight:600;}
.message-form{border-top:1px solid #ddd;padding:10px;display:flex;position:relative;align-items:center;}
.message-form textarea{flex-grow:1;border:1px solid #ccc;border-radius:18px;padding:10px;resize:none;margin:0 10px;}
.message-form .btn-icon{background:none;border:none;font-size:1.4rem;color:#888;padding:5px;cursor:pointer;}
emoji-picker{position:absolute;bottom:65px;left:10px;z-index:10;}
.user-profile-sidebar{width:20%;border-left:1px solid #ddd;overflow-y:auto;padding:20px;}
.profile-info-link{display:flex;align-items:center;text-decoration:none;color:inherit;margin-bottom:20px;}
.profile-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;margin-right:15px;}
.profile-details{display:flex;flex-direction:column;}
.profile-name{margin:0;font-size:1.2em;font-weight:600;}
.profile-status{font-size:.9em;color:#888;}
.profile-registration{font-size:.9em;color:#555;padding:10px;border-radius:6px;}
.reg-label{font-size:.8em;color:#999;text-transform:uppercase;margin-bottom:5px;}
.reg-since{color:#999;}
.product-viewing{color:#007bff;font-weight:500;margin-top:5px;}
.product-viewing-link{color:#007bff;text-decoration:none;font-weight:500;}
.product-viewing-link:hover{text-decoration:underline;}
.profile-section{margin-bottom:20px;}
.profile-section h4{font-size:1em;font-weight:600;color:#666;margin-bottom:15px;text-transform:uppercase;}
.profile-product-list{list-style:none;padding:0;margin:0;}
.profile-product-list li{display:flex;align-items:center;margin-bottom:15px;}
.profile-product-list img{width:40px;height:40px;object-fit:cover;border-radius:4px;margin-right:10px;}
.profile-product-list .product-info{display:flex;flex-direction:column;}
.profile-product-list a{text-decoration:none;color:#007bff;font-weight:500;}
.profile-product-list span{font-size:.9em;color:#333;}
.chat-badge{display:none;background-color:#28a745;color:white;border-radius:50%;padding:2px 6px;font-size:10px;font-weight:bold;vertical-align:middle;margin-left:2px;}
.chat-actions{position:relative;margin-left:auto;}
.action-menu{position:absolute;top:100%;right:0;background-color:white;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:20;width:150px;}
.action-menu ul{list-style:none;margin:0;padding:5px;}
.action-menu li{padding:8px 12px;cursor:pointer;border-radius:4px;}
.action-menu li:hover{background-color:#f0f2f5;}
.blocked-separator{text-align:center;margin:20px 0;border-top:1px solid #ff4d4f;position:relative;}
.blocked-separator span{background-color:#fff;padding:0 10px;position:relative;top:-11px;font-size:12px;color:#ff4d4f;font-weight:500;}
.custom-btn{font-size:1.8rem;}
.message-attachments{margin-top:.5rem;}
.message-images-grid{display:grid;gap:.5rem;max-width:400px;border-radius:8px;overflow:hidden;}
.message-images-grid.grid-single{grid-template-columns:1fr;max-width:300px;}
.message-images-grid.grid-double{grid-template-columns:1fr 1fr;max-width:400px;}
.message-images-grid.grid-triple{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;max-width:400px;}
.message-images-grid.grid-triple img:first-child{grid-row:1 / 3;}
.message-images-grid.grid-quad{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;max-width:400px;}
.message-images-grid.grid-multi{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;max-width:450px;}
.message-images-grid.grid-multi img:first-child{grid-row:1 / 3;}
.message-images-grid.grid-multi img:nth-child(n+4){grid-column:3;position:relative;}
.message-images-grid.grid-multi img:nth-child(5){opacity:0.7;}
.message-images-grid.grid-multi img:nth-child(5)::after{content:'+' attr(data-more);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.7);color:white;font-size:1.2rem;font-weight:bold;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.message-image{width:100%;height:150px;object-fit:cover;cursor:pointer;transition:transform .2s ease;border:none;}
.message-image:hover{transform:scale(1.02);}
.message-images-grid.grid-single .message-image{height:200px;}
.message-images-grid.grid-double .message-image{height:150px;}
.message-images-grid.grid-triple .message-image{height:120px;}
.message-images-grid.grid-quad .message-image{height:120px;}
.message-images-grid.grid-multi .message-image{height:100px;}
.pending-images-preview{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1rem;margin:1rem 0;}
.pending-images-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font-weight:500;color:#495057;}
.pending-images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem;}
.pending-image-item{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;}
.pending-image-item img{width:100%;height:100%;object-fit:cover;}
.pending-image-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;padding:0;}
.image-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px);}
.image-modal-content{position:relative;max-width:90vw;max-height:90vh;background:white;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,0.3);}
.image-modal-close{position:absolute;top:10px;right:10px;width:40px;height:40px;background:rgba(0,0,0,0.7);color:white;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;z-index:10;transition:background .2s ease;}
.image-modal-close:hover{background:rgba(0,0,0,0.9);}
.image-modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background:rgba(0,0,0,0.7);color:white;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;z-index:10;transition:all .2s ease;}
.image-modal-nav:hover{background:rgba(0,0,0,0.9);transform:translateY(-50%) scale(1.1);}
.image-modal-prev{left:20px;}
.image-modal-next{right:20px;}
.image-modal-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:8px 16px;border-radius:20px;font-size:14px;z-index:10;}
.image-modal-img{width:100%;height:auto;max-height:80vh;object-fit:contain;}
.image-modal-caption{padding:1rem;background:#f8f9fa;color:#495057;font-size:.9rem;border-top:1px solid #dee2e6;}
.buyer-link,.order-link,.seller-link{color:#007bff;text-decoration:none;transition:color .2s ease;}
.buyer-link:hover,.order-link:hover,.seller-link:hover{color:#0056b3;text-decoration:underline;}
.message-content .buyer-link,.message-content .order-link,.message-content .seller-link{word-break:break-all;}
@media (max-width:768px){.message-images-grid{grid-template-columns:1fr 1fr;max-width:250px;}.pending-images-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));}.image-modal-content{max-width:95vw;max-height:95vh;}.image-modal-nav{width:40px;height:40px;font-size:20px;}.image-modal-prev{left:10px;}.image-modal-next{right:10px;}.image-modal-counter{bottom:10px;font-size:12px;padding:6px 12px;}}

/* Private Chat Styles */

/* Стилі для системних повідомлень */
.message-content.system-message{background:#f8f9fa !important;color:#333 !important;border:1px solid #dee2e6 !important;border-radius:8px !important;padding:12px !important;max-width:90% !important;margin:10px auto !important;box-shadow:none !important;}
.message-item .message-content.system-message{max-width:90% !important;}
.message-content.system-message p{margin:0 !important;}
/* Стилі для "Playdex Notification" */
.system-notification{color:#fff !important;background-color:#28a745 !important;border-color:#28a745 !important;padding:2px 6px !important;border-radius:4px !important;font-weight:500 !important;display:inline-block !important;font-size:16px !important;}