.tab-container {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Tab Buttons Styling */
.tab-buttons {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tab-button {
    flex-grow: 1;
    padding: 15px 20px;
    cursor: pointer;
    border: none;
    background-color: #f1f1f1;
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    font-weight: bold;
    outline: none;
}

.tab-button:hover:not(.active) {
    background-color: #ddd;
}

/* Active Tab Button Styling */
.tab-button.active {
    background-color: #fff;
    border-bottom: 3px solid #007bff; /* Highlight color */
    color: #007bff;
}

/* Tab Content Styling */
.tab-contents {
    padding: 20px;
    display: none; /* Hide content by default */
}

/* Active Tab Content Styling */
.tab-contents.active {
    display: block; /* Show active content */
}



/* --- Comment Input Area --- */
.comment-input-area.hybrid-box {
    /* Set up for relative positioning of the action buttons group */
    position: relative; 
    
    /* Create the white box with rounded corners and border */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between name field and textarea */
    
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px; /* Internal padding */
    
    margin-bottom: 20px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Name Input Field Styling */
#comment-name {
    padding: 10px;
    border: 1px solid #eee; /* Lighter border inside the main box */
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    background-color: #fcfcfc;
}

/* Textarea Styling */
#comment-text {
    width: 100%;
    /* Add padding at the bottom for the buttons group to sit in */
    padding: 10px 10px 45px 10px; 
    
    border: none; /* No border for the textarea itself */
    resize: vertical; 
    min-height: 80px;
    font-size: 15px;
    box-sizing: border-box;
    outline: none; 
    background: transparent;
}


/* Action Buttons Positioning */
.action-buttons-group {
    position: absolute;
    bottom: 15px; /* Aligned with the bottom padding of the container */
    right: 15px; /* Aligned with the right padding of the container */
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Button Styling */
.action-btn, .submit-btn {
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    height: 35px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    outline: none;
}

/* Photo Button Styling (Icon Only) */
.photo-btn {
    background-color: #fff;
    color: #666;
    border: 1px solid #ccc;
    width: 35px; 
    padding: 0;
}

.photo-btn:hover { 
    background-color: #f1f1f1; 
    border-color: #bbb;
}

/* Send Button Styling */
.submit-btn {
    background-color: #fff; 
    color: #333;
    border: 1px solid #ccc; 
    min-width: 60px;
}

.submit-btn:hover {
    background-color: #f1f1f1;
    border-color: #bbb;
}

/* Name Input Field Styling */
#comment-name {
    flex-grow: 1; /* Allows it to take up the remaining space */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    height: 40px; /* Set a fixed height to align with buttons */
    box-sizing: border-box;
}

/* Textarea Styling */
#comment-text {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical; /* Allow vertical resize only */
    min-height: 80px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Button Styling */
.action-btn, .submit-btn {
    border: none;
    padding: 10px 15px; /* Adjusted padding to look like your image */
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-btn {
    background-color: #f1f1f1;
    color: #666;
    width: 40px; /* Make the photo button square and iconic */
    padding: 0;
}

.submit-btn {
    background-color: #007bff;
    color: white;
    min-width: 60px;
}

.photo-btn:hover { background-color: #e0e0e0; }
.submit-btn:hover { background-color: #0056b3; }


/* --- Comment Item Styling --- */
.comment-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.comment-item:last-child {
    border-bottom: none; /* No line after the last comment */
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.avatar, .avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #ddd; /* Placeholder background */
}

.avatar-sm {
    width: 35px;
    height: 35px;
}

.comment-meta {
    display: flex;
    flex-direction: column;
}

.username {
    font-weight: bold;
    font-size: 14px;
}

.verified {
    color: #007bff;
    font-size: 12px;
    margin-left: 5px;
}

.timestamp {
    font-size: 12px;
    color: #999;
}

.comment-body {
    margin-left: 50px; /* Aligns content with the meta info */
    font-size: 15px;
    line-height: 1.4;
    padding-right: 20px;
}

/* Image Attachment Styling */
.comment-attachment {
    margin-top: 10px;
    max-width: 100%;
}

.attached-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    border: 1px solid #eee;
}

/* --- Comment Footer --- */
.comment-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: 50px;
    font-size: 13px;
    color: #666;
}

.like-section {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.like-icon {
    font-size: 16px;
    margin-right: 5px;
}

.reply-btn {
    margin-left: 20px;
    cursor: pointer;
    font-weight: 500;
}

.comments-container {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
}