.messages-container {

    padding: 20px;

    background: var(--bg-color);

    min-height: calc(100vh - 80px);

}



.messages-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    background: #1a1f2d;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.messages-header h2 {

    color: #63E6BE;

    font-size: 24px;

    margin: 0;

}



.messages-actions {

    display: flex;

    gap: 15px;

    align-items: center;

}



.messages-search {

    position: relative;

    width: 300px;

}



.messages-search input {

    width: 100%;

    padding: 10px 35px;

    border: 1px solid #2a2f3d;

    border-radius: 5px;

    background: #1a1f2d;

    color: #fff;

    font-size: 14px;

}



.messages-search input:focus {

    outline: none;

    border-color: #63E6BE;

}



.messages-search i {

    position: absolute;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

    color: #63E6BE;

}



.messages-grid {

    display: grid;

    grid-template-columns: 300px 1fr;

    gap: 20px;

    height: calc(100vh - 250px);

    background: #1a1f2d;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.contacts-list {

    background: #1a1f2d;

    border-right: 1px solid #2a2f3d;

    overflow-y: auto;

}



.contact-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    cursor: pointer;

    border-bottom: 1px solid #2a2f3d;

    transition: all 0.3s ease;

    position: relative;

}



.contact-item:hover {

    background: #2a2f3d;

}



.contact-item.active {

    background: #2a2f3d;

    border-left: 3px solid #63E6BE;

}



.contact-avatar {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    object-fit: cover;

}



.contact-info {

    flex: 1;

    min-width: 0;

}



.contact-info h4 {

    color: #fff;

    margin: 0 0 5px 0;

    font-size: 15px;

}



.last-message {

    color: #8c8c8c;

    font-size: 13px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 180px;

}



.contact-meta {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

    min-width: 60px;

}



.last-time {

    font-size: 12px;

    color: #63E6BE;

}



.status-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    position: absolute;

    bottom: 15px;

    left: 45px;

    border: 2px solid #1a1f2d;

}



.status-dot.online { background: #63E6BE; }

.status-dot.offline { background: #8c8c8c; }

.status-dot.away { background: #ffa502; }



.chat-area {

    display: flex;

    flex-direction: column;

    background: #1a1f2d;

}



.chat-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 20px;

    background: #2a2f3d;

    border-bottom: 1px solid #2a2f3d;

}



.chat-contact {

    display: flex;

    align-items: center;

    gap: 15px;

}



.chat-contact img {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    object-fit: cover;

}



.contact-name {

    color: #fff;

    margin: 0;

    font-size: 16px;

}



.contact-status {

    font-size: 13px;

    color: #63E6BE;

}



.chat-actions {

    display: flex;

    gap: 15px;

}



.chat-actions button {

    background: none;

    border: none;

    color: #63E6BE;

    cursor: pointer;

    padding: 8px;

    border-radius: 5px;

    transition: all 0.3s ease;

}



.chat-actions button:hover {

    background: #363b4a;

    transform: translateY(-2px);

}



.chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-height: calc(100vh - 280px);

    scroll-behavior: smooth;

}



.message {

    display: flex;

    margin: 4px 0;

    max-width: 80%;

}



.message.sent {

    margin-left: auto;

    justify-content: flex-end;

}



.message.received {

    margin-right: auto;

    justify-content: flex-start;

}



.message-bubble {

    color: black;

    padding: 10px 15px;

    border-radius: 15px;

    background: #f0f0f0;

    position: relative;

}



.message.sent .message-bubble {

    background: #0078d4;

    color: white;

}



.message-content {

    margin-bottom: 4px;

    word-wrap: break-word;

}



.message-info {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 0.75rem;

    opacity: 0.8;

}



.message.sent .message-info {

    justify-content: flex-end;

}



.chat-input {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px 20px;

    background: #2a2f3d;

    border-top: 1px solid #2a2f3d;

}



.chat-input input {

    flex: 1;

    padding: 12px 15px;

    border: none;

    border-radius: 25px;

    background: #1a1f2d;

    color: #fff;

    font-size: 14px;

}



.chat-input input:focus {

    outline: none;

    box-shadow: 0 0 0 2px #63E6BE33;

}



.chat-input button {

    background: none;

    border: none;

    color: #63E6BE;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    transition: all 0.3s ease;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.chat-input button:hover {

    background: #363b4a;

    transform: translateY(-2px);

}



.new-message-btn {

    background: #63E6BE;

    color: #1a1f2d;

    border: none;

    padding: 10px 20px;

    border-radius: 25px;

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-weight: 500;

}



.new-message-btn:hover {

    background: #4cd4ac;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(99, 230, 190, 0.2);

}



/* Custom Scrollbar */

.contacts-list::-webkit-scrollbar,

.chat-messages::-webkit-scrollbar {

    width: 5px;

}



.contacts-list::-webkit-scrollbar-track,

.chat-messages::-webkit-scrollbar-track {

    background: #1a1f2d;

}



.contacts-list::-webkit-scrollbar-thumb,

.chat-messages::-webkit-scrollbar-thumb {

    background: #2a2f3d;

    border-radius: 5px;

}



.contacts-list::-webkit-scrollbar-thumb:hover,

.chat-messages::-webkit-scrollbar-thumb:hover {

    background: #63E6BE;

}



/* Custom scrollbar for chat messages */

.chat-messages::-webkit-scrollbar {

    width: 6px;

}



.chat-messages::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.1);

    border-radius: 3px;

}



.chat-messages::-webkit-scrollbar-thumb {

    background: rgba(0, 0, 0, 0.2);

    border-radius: 3px;

}



.chat-messages::-webkit-scrollbar-thumb:hover {

    background: rgba(0, 0, 0, 0.3);

}



/* New scroll indicator styles */

.scroll-indicator {

    position: absolute;

    bottom: 80px;

    right: 20px;

    background: rgba(0, 0, 0, 0.6);

    color: white;

    padding: 8px;

    border-radius: 50%;

    cursor: pointer;

    display: none;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

}



.scroll-indicator:hover {

    background: rgba(0, 0, 0, 0.8);

}



/* Add these styles for the restriction message */

.chat-restriction {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    padding: 20px;

    text-align: center;

    color: #fff;

    background: rgba(26, 31, 45, 0.8);

}



.restriction-icon {

    width: 80px;

    height: 80px;

    background: rgba(99, 230, 190, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

}



.restriction-icon i {

    font-size: 32px;

    color: #63E6BE;

}



.chat-restriction h3 {

    color: #63E6BE;

    margin: 0 0 10px 0;

    font-size: 24px;

}



.chat-restriction p {

    color: #8c8c8c;

    margin: 0 0 20px 0;

    max-width: 400px;

}



.restriction-details {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;

}



.detail-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #63E6BE;

    padding: 10px 20px;

    background: rgba(99, 230, 190, 0.1);

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.3s ease;

}



.detail-item:hover {

    background: rgba(99, 230, 190, 0.2);

    transform: translateY(-2px);

}



.chat-input.disabled {

    opacity: 0.5;

    pointer-events: none;

}



.chat-input.disabled::after {

    content: 'Chat restricted to internal app';

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: -25px;

    background: rgba(26, 31, 45, 0.9);

    padding: 5px 15px;

    border-radius: 15px;

    font-size: 12px;

    color: #63E6BE;

}