/**
 * Chat Container Fix CSS
 * Provides fixes for message display in the chat container
 * Ensures messages don't overlap and are properly formatted
 */

/* Chat container styling */
.chat-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px; /* Ensure messages don't overlap */
    overflow-y: auto;
    max-height: 75vh;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    position: relative;
}

/* Individual message styling */
.message {
    max-width: 80%; /* Restrict the message width */
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    clear: both;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Message content styling */
.message-content {
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 2px 0;
}

/* Message text styling */
.message-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Employer message styling */
.message.employer, .message.outgoing {
    background-color: #FF5400; /* Orange brand color */
    color: white;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 10px;
    text-align: right;
    float: right;
}

/* Job seeker message styling */
.message.job-seeker, .message.incoming {
    background-color: white;
    color: black;
    align-self: flex-start;
    margin-left: 10px;
    margin-right: auto;
    text-align: left;
    float: left;
}

/* Right sidebar styling to fix layering issues */
.right-sidebar {
    width: 25%;
    padding: 20px;
    background-color: #f4f4f4;
    border-left: 1px solid #ddd;
    position: relative;
    z-index: 2; /* Ensure it's above other elements */
}

/* No applicant selected state */
.right-sidebar .no-applicant {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-size: 14px;
}

/* Ensure proper z-index layering */
.chat-container {
    position: relative;
    z-index: 1;
}

/* Unread message badge as orange circle with number */
.unread-badge {
    position: absolute;
    top: 10px;
    right: 45px;
    background-color: #FF5400; /* Orange color */
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Notification badge (unread count) */
.notification-badge {
    background-color: #FF5400; /* Orange */
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 999;
}

/* Ensure messages thread is properly sized */
.message-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f9fafc;
    position: relative;
    overflow: hidden;
    min-width: 400px;
}

/* Messages area with proper sizing */
.messages-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Messages container with overflow handling */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Ensures space between messages */
    max-height: calc(100vh - 250px); /* Prevents overflow */
    width: 100%;
}

/* Message container for a clear layout */
.message-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 5px;
    gap: 10px;
    width: 100%;
    clear: both;
}

/* Left sidebar styling */
.conversations-sidebar {
    width: 300px;
    border-right: 1px solid #eee;
    background-color: #fff;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.conversation-search {
    padding: 15px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}

.conversation-search input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    background-color: #f9f9f9;
}

.conversation-search input:focus {
    outline: none;
    border-color: #FF5400;
    box-shadow: 0 0 0 2px rgba(255, 84, 0, 0.1);
}

.conversation-list {
    overflow-y: auto;
    flex: 1;
}

.conversation-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.conversation-item:hover {
    background-color: #f9f9f9;
}

.conversation-item.active {
    background-color: #FFF1EB; /* Light orange */
    border-left: 3px solid #FF5400; /* Brand orange */
}

.conversation-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #777;
    position: relative;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.conversation-details {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.conversation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    position: relative; /* Required for absolute positioning of badges */
}

.conversation-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time, .message-time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    margin-left: 5px;
}

.message-preview {
    font-size: 13px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.unread-badge {
    width: 10px;
    height: 10px;
    background-color: #FF5400; /* Brand orange */
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}

.conversation-item.unread .message-preview {
    font-weight: 600;
    color: #555;
}

/* Main chat component structure */
.chat-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: calc(100vh - 100px);
    position: relative;
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Chat container - scrollable area for messages - improved layout */
.chat-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    background-color: #f9f9f9;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    scroll-behavior: smooth;
    min-height: 350px;
    gap: 20px; /* Add consistent spacing between messages */
}

/* Completely redesigned message styling to prevent overlap */
.message {
    position: relative;
    margin-bottom: 8px; /* Spacing between messages */
    max-width: 75%; /* Slightly wider messages */
    width: auto;
    display: block; 
    clear: both; /* Ensure messages don't overlap */
    overflow: visible; /* Allow space for meta elements outside the bubble */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Message container to wrap each message for better layout */
.message-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    clear: both; /* Force new line */
    position: relative; /* For positioning of child elements */
}

/* Incoming message on the left */
.message.incoming {
    float: left;
    text-align: left;
    margin-right: auto; /* Push to left */
}

/* Outgoing message on the right */
.message.outgoing {
    float: right;
    text-align: right;
    margin-left: auto; /* Push to right */
}

/* Force each message to clear previous floating elements */
.message::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure the chat container properly clears floated messages */
.chat-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Sender name */
.sender {
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
}

/* Actual message content - enhanced for better word wrap */
.message-content {
    background-color: #ffffff; /* White background for job seekers */
    color: #333;
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: inline-block;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Include padding in width calculation */
    white-space: pre-wrap; /* Maintain line breaks but allow wrapping */
}

/* Style for outgoing message content */
.message.outgoing .message-content {
    background-color: #FF5400; /* Brand orange */
    color: white;
    border: none;
}

/* Message text - improved wrapping */
.message-text {
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word; /* Ensures long words break properly */
    overflow-wrap: break-word;
    white-space: pre-wrap; /* Respects line breaks while allowing wrapping */
}

/* Message metadata (time, status) */
.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    gap: 6px;
}

/* Date divider */
.date-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.date-divider-text {
    background-color: white;
    padding: 0 10px;
    color: #999;
    font-size: 12px;
    position: relative;
    z-index: 1;
}

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

/* Empty state styling for no messages */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
}

.empty-state-icon {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 20px;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #555;
}

.empty-state-text {
    color: #888;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Completely redesigned notification badge and circle styling */
.notification-badge, .notification-circle {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background-color: #FF5400; /* Orange brand color */
    color: white;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 999;
    min-width: 22px; /* Ensure circle shape even with larger numbers */
    padding: 0 2px; /* Add padding for multi-digit numbers */
}

/* Position the badge correctly for user avatars */
.avatar-container .notification-badge {
    top: -5px;
    right: -5px;
}

/* Position for conversation items */
.conversation-item .notification-badge {
    top: 10px;
    right: 15px;
}

/* Special styling for conversation list in sidebar */
.conversations-list .conversation-item .notification-badge {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* Avatar in left column - improved positioning */
.avatar-wrapper .notification-badge {
    top: -2px;
    right: -2px;
}

/* User avatar container notification positioning */
.user-avatar .notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    z-index: 100;
}

/* Show notification badge/circle when needed */
.notification-badge.show, .notification-circle.show {
    display: flex;
}

/* Hide by default */
.notification-badge:not(.show), .notification-circle:not(.show) {
    display: none;
}

/* Input container styling */
.input-container {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
    position: relative;
    width: 100%;
}

.message-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: white;
    border-radius: 20px;
    padding: 5px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
}

.message-send-button, .attachment-button {
    background-color: #FF5400; /* Orange brand color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 8px;
    transition: background-color 0.2s ease;
}

.attachment-button {
    background-color: #e0e0e0;
    color: #555;
}

.message-send-button:hover {
    background-color: #E64A00;
}

.attachment-button:hover {
    background-color: #d0d0d0;
}

/* Right sidebar styling */
.user-info-sidebar {
    width: 300px;
    border-left: 1px solid #eee;
    background-color: #f9f9f9;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.user-info-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
    position: relative;
}

.user-info-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #eee;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #777;
    background-size: cover;
    background-position: center;
    position: relative;
}

.user-info-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.user-info-position {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.user-info-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

/* User details sections */
.user-details-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.user-details-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-details-title i {
    color: #FF5400;
}

.user-detail {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.user-detail-label {
    font-size: 13px;
    color: #777;
    flex: 1;
}

.user-detail-value {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    flex: 2;
    text-align: right;
}

/* Match score styling */
.match-score {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
}

.match-score-value {
    font-size: 32px;
    font-weight: bold;
    color: #FF5400;
    margin-bottom: 5px;
}

.match-score-label {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
}

.match-score-meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #777;
    margin-bottom: 5px;
}

.match-score-meter {
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.match-score-meter-value {
    height: 100%;
    background-color: #FF5400;
    border-radius: 4px;
}

/* Action buttons */
.user-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.user-action-button {
    flex: 1;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.user-action-primary {
    background-color: #FF5400;
    color: white;
}

.user-action-secondary {
    background-color: #e0e0e0;
    color: #555;
}

.user-action-primary:hover {
    background-color: #E64A00;
}

.user-action-secondary:hover {
    background-color: #d0d0d0;
}

/* Notes section */
.notes-section {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.notes-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notes-title i {
    color: #FF5400;
}

.add-note-button {
    font-size: 12px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.add-note-button:hover {
    color: #FF5400;
}

.notes-content {
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 10px;
    font-size: 13px;
    color: #555;
    min-height: 80px;
    line-height: 1.4;
}

/* File attachment styling */
.attachment {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    gap: 10px;
}

.attachment-icon {
    font-size: 20px;
    color: #888;
}

.attachment-icon i.fa-file-pdf {
    color: #FF5050;
}

.attachment-icon i.fa-file-word {
    color: #4285F4;
}

.attachment-icon i.fa-file-image {
    color: #4CAF50;
}

.attachment-name {
    flex: 1;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.attachment-action {
    font-size: 16px;
    color: #777;
    cursor: pointer;
    transition: color 0.2s ease;
}

.attachment-action:hover {
    color: #FF5400;
}

/* Document selection styling */
.selected-file {
    display: none;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 5px 0;
    gap: 8px;
}

.selected-file.active {
    display: flex;
}

.selected-file-name {
    flex: 1;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clear-file-button {
    color: #888;
    cursor: pointer;
    font-size: 14px;
}

.clear-file-button:hover {
    color: #FF5400;
}