/* Comment Section Container */
.comment-section {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.76);
    padding: 15px;
    display: flex;
    height: 600px;
    flex-direction: column;
    max-height: 60%; /* Covers from the bottom to half of the screen */
    overflow-y: auto;
    z-index: 1000;
}


/* Container for the comments section */
.vid-des {
    background-color: #1a1a1a00; /* Dark background for contrast */
    color: #f5f5f5; /* Light text color for readability */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Style for the horizontal rule */
.vid-des hr {
    border: 1px solid #333;
    margin: 10px 0;
    display: flex;
}
.sidebar {
    background: rgba(22, 22, 22, 0.8);
    width: 15%;
    height: 100vh;
    position: fixed;
    top: 0;
    padding: 70px 2% 0;
    color: #fff;
    overflow-y: hidden; /* Allow vertical scrolling */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

.comment {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.76);
    padding: 15px;
    display: flex;
    height: 600px;
    flex-direction: column;
    max-height: 60%; /* Covers from the bottom to half of the screen */
    overflow-y: auto; /* Allow vertical scrolling */
    z-index: 1000;
}
/* Individual Comment Container */
.comment {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

/* Profile Picture */
.comment .profile-pic,
.comment-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 1x;
    object-fit: cover;
}

/* Comment Content */
.comment .content,
.comment-content {
    flex: 1;
    margin-top: 5px;
    margin-left: 10px;
}

/* Username and Time */
.comment .username,
.comment-username {
    font-weight: 200;
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
    gap: 10px;
}

.comment .time,
.comment-timestamp {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 200;
    font-size: 14px;}
/* Style for the separator between username and time */
.comment-separator {
    color: rgba(255, 255, 255, 0.6); /* Light color for visibility */
    margin: 0 5px; /* Space around the separator */
    font-size: 16px; /* Adjust size to fit the design */
}

.comment .username-time {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-weight: 200;
    font-size: 14px;
}

/* Comment Text */
.comment .text,
.comment-text {
    margin-top: 5px;
    color: #fff;
    font-weight: 200;
    font-size: 14px;
}

/* Comment Icon and Count */
.comment .comment-icon {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    margin-left: 10px;
}

.comment .comment-icon i {
    margin-right: 5px;
}

.comment .comment-count {
    font-size: 14px;
}

/* Container for adding a comment */
.add-cmnt {
    display: flex;
    align-items: center;
    margin-top: 10px;
    border-top: 1px solid #333;
    padding-top: 10px;
}

/* Style for the comment input field */
#comment-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #444;
    border-radius: 16px;
    background-color: #2a2a2a;
    color: #fff;
    margin-right: 10px;
}

/* Style for the post comment button */
#post-comment-button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #0a15b37e;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}


#post-comment-button:hover {
    background-color: #0056b3;
}

/* Container for the list of comments */
#comments-list {
    margin-top: 16px; /* Space above the comments list */
    list-style: none;
    padding: 0;
}

/* Style for individual comments */
.comment-item {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #333;
    padding: 10px;
    margin-bottom: 10px;
}

.comment-item:last-child {
    border-bottom: none;
}




/* Overlay Styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Ensure the overlay is above everything */
    transition: opacity 0.3s ease; /* Smooth transition for overlay */
}

/* Comment Section Styles */
.vid-des {
    position: fixed;
    bottom: -50%; /* Initially offscreen */
    left: 0;
    width: 100%;
    height: 55%; /* Takes up half of the screen height */
    background-color: rgb(36, 36, 36); /* Slightly darker background */
    padding: 15px;
    border-radius: 10px 10px 0 0;
    overflow-y: auto; /* Allows scrolling inside the comments section */
    z-index: 2100; /* Ensure it's above the overlay */
    transition: transform 0.3s ease; /* Smooth transition for sliding */
}

/* Show the comments section */
.vid-des.active {
    transform: translateY(-86%); /* Slide up to visible position */
}

/* Hide the comments section */
.vid-des.inactive {
    transform: translateY(0); /* Slide back to offscreen */
}