@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #121418;
    color: white;
    overflow-x: hidden;
}

/* New class to prevent scrolling on body when sidebar is open */
body.no-scroll {
    overflow: hidden;
}

p {
    padding: 0 !important;
}

.content-area {
    transition: transform 0.3s ease;
}

.content-area.shifted {
    transform: translateX(-14%);
}

.sidebar {
    height: 100vh;
}

.nav-section {
    position: relative;
    cursor: pointer;
    padding: 10px 0;
    text-align: center;
    transition: all 0.3s ease;
}

.nav-section:hover,
.nav-section.active {
    color: #b3ff00;
}

.nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #b3ff00;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-section.active .nav-indicator {
    transform: scaleX(1);
}

/* Button Styles */
.btn-schedule,
.btn-post,
.btn-score {
    width: 120px;
    height: 46px;
    padding: 5px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.btn-schedule {
    background-color: #121418;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.btn-schedule.hidden {
    opacity: 0;
    visibility: hidden;
}

.btn-post {
    background-color: #ffffff;
    color: #000000;
}

.btn-score {
    background-color: #B4FA04;
    color: #000000;
    font-weight: 500;
    width: 170px;
}

.btn-score.hidden {
    opacity: 0;
    visibility: hidden;
}

.btn-new-draft {
    background-color: #b3ff00;
    color: black;
    font-size: 14px;
    font-weight: 600;
    width: 80%;
    height: 50px;
    border-radius: 25px;
}

.btn-new-draft:hover {
    background-color: #a1e600cc;
    transition: background-color 0.3s ease;
}

.btn-generate-new:hover {
    background-color: #a1e600cc;
    transition: background-color 0.3s ease;
}

/* Profile Pictures */
.profile-picture-small {
    width: 24px;
    height: 24px;
}

.profile-picture-large {
    width: 46px;
    height: 46px;
    position: relative;
    z-index: 2;
}

/* Options and Text Styles */
.options-images {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.options-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
}

/* Lines and Dividers */
.horizontal-line {
    border-top: 1px solid #5F5F5F;
    width: 100%;
    position: absolute;
    bottom: 15%;
    left: 0;
}

.vertical-line {
    border-right: 1px solid #5F5F5F;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
}

.add-section {
    width: 100%;
    position: absolute;
    bottom: 5%;
}

/* Content Sections */
.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.posted-item {
    background-color: #1c1f23;
    border-radius: 8px;
    padding: 0px 15px;
    margin-bottom: 10px;
}

.posted-item p {
    font-size: 14px;
}

.posted-item.active {
    border-left: 3px solid #b3ff00;
}

.posted-time {
    font-size: 12px;
    color: #a0a0a0;
}

.navigation {
    height: 70%;
    overflow-x: hidden;
}

/* Post Composer */
.new-post {
    width: 60%;
    max-width: 100%;
}

.type-textarea {
    color: #AFAFAF;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    width: 100%;
    height: 15%;
    resize: none;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
}

textarea:focus {
    outline: none;
}

.text-author {
    font-weight: 700;
    font-size: 17.61px;
    line-height: 100%;
}

.text-username {
    color: #7C7C7C;
    font-weight: 400;
    font-size: 17.61px;
    line-height: 100%;
}

/* Sidebars */
.score-sidebar,
.schedule-sidebar {
    position: fixed;
    top: 0;
    right: -24%;
    width: 24%;
    height: 100vh;
    background-color: #191B20;
    border-left: 1px solid #5F5F5F;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.score-sidebar.open,
.schedule-sidebar.open {
    right: 0;
}

.score-sidebar-header,
.schedule-sidebar-header {
    padding: 32px 24px 0 24px;
}

.score-sidebar-header h3,
.schedule-sidebar-header h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 135%;
    text-align: center;
    text-transform: capitalize;
    color: white;
}

.close-sidebar {
    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer;
    width: 13px;
    height: 13px;
}

.close-sidebar:hover {
    opacity: 0.8;
    /* Slight hover effect */
}

.score-content,
.schedule-content {
    padding: 24px;
}

/* Score Circle */
.virality-score {
    text-align: center;
    margin-bottom: 40px;
}

.score-circle {
    width: 240px;
    height: 150px;
    position: relative;
    margin: 0 auto 0;
}

.score-circle svg {
    width: 240px;
    height: 150px;
}

.score-circle .progress-bg {
    stroke: #2A2A2A;
    stroke-width: 14;
    fill: none;
    stroke-linecap: round;
}

.score-circle .progress-fill {
    --arc-length: 188.5;
    stroke: var(--progress-color, #FF8A00);
    stroke-width: 14;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: var(--arc-length);
    stroke-dashoffset: calc(var(--arc-length) - (var(--arc-length) * var(--progress) / 100));
    transition: stroke-dashoffset 0.5s ease, stroke 0.5s ease;
}

.score-text {
    position: absolute;
    font-size: 26px;
    font-weight: 700;
    color: white;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
}

.score-label {
    background-color: #FFECD6;
    color: var(--progress-color, #FF8A00);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    transition: color 0.5s ease;
}

/* Suggestions */
.suggestions-section {
    padding-top: 32px;
}

.suggestions-section h4 {
    color: #B4FA04;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.suggestion-text {
    color: #a0a0a0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.suggestion-text strong {
    color: white;
}

.suggestion-horizontal-line {
    width: 100%;
    height: 1px;
    background-color: #A9A9A9;
}

.suggestion-horizontal-point {
    width: 8px;
    height: 8px;
    background-color: #A9A9A9;
    border-radius: 50%;
    margin: 0;
}

/* Schedule Sidebar */
.timezone-text {
    color: #7D7D7D;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 12px;
    /* Adjusted margin */
    display: block;
}

.readonly-schedule-info {
    background-color: #121418;
    border-radius: 7px;
    padding: 12px;
    margin-bottom: 24px;
}

.readonly-time,
.readonly-date {
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
}

.readonly-date {
    font-weight: 600;
}

.edit-schedule-inputs {
    display: none;
}

.edit-schedule-inputs.show {
    display: block;
}

.time-input-label {
    color: #7D7D7D;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 12px;
    display: block;
}

.date-input,
.time-input {
    background-color: #121418;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 12px 16px;
    font-size: 14px;
    outline: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.date-input {
    background-image: url('assets/images/date.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}

.time-input {
    background-image: url('assets/images/time.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}

.date-input:focus,
.time-input:focus {
    border-color: #B4FA04;
}

/* Timezone Autocomplete Styles */
.timezone-input-container {
    position: relative;
}

.timezone-suggestions {
    position: absolute;
    top: 100%;
    /* Position below the input */
    left: 0;
    right: 0;
    background-color: #191B20;
    /* Same as sidebar background */
    border: 1px solid #31353F;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1001;
    /* Above other sidebar elements */
    display: none;
    /* Hidden by default */
}

.timezone-suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    color: white;
    font-size: 14px;
}

.timezone-suggestion-item:hover {
    background-color: #2b2e35;
    /* Darker background on hover */
}


/* Schedule Buttons */
.btn-edit-schedule,
.btn-apply-schedule,
.btn-cancel,
.btn-schedule-confirm {
    border: none;
    padding: 8px 31px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    width: 30%;
}

.btn-edit-schedule,
.btn-cancel {
    background-color: transparent;
    border: 1px solid #ffffff;
}

.btn-apply-schedule,
.btn-schedule-confirm {
    background-color: #B4FA04;
    color: #000000;
    padding: 9px 32px;
}

.btn-cancel:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.schedule-sidebar {
    display: flex;
    flex-direction: column;
}

.schedule-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.toggleModifyOptions.active {
    border-radius: 50%;
    background-color: #B4FA04;
}

/* .score-post-trigger.active {
    border-radius: 50%;
    background-color: #B4FA04;
} */

.btn-modify-text {
    padding: 12px;
    cursor: pointer;
    background-color: #252830;
    border-radius: 100px;
}

.btn-modify-text span {
    font-weight: 400;
    font-size: 13.23px;
    line-height: 120%;
    letter-spacing: -1%;
    text-align: center;
}

.score-icon {
    width: 40px;
}

.btn-group-modify-text {
    display: none;
    margin-left: -20%;
}

/* Container for actions to enable absolute positioning of dropdown */
.post-actions-container {
    position: relative;
    /* This div already has d-flex justify-content-end and margin-top */
}

/* Styles for the new card dropdown */
.quick-edit-options-card {
    background-color: #191B20;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 180px;
    z-index: 10;
}

.dropdown-item {
    display: flex;
    justify-content: center;
    /* Center text horizontally */
    align-items: center;
    /* Center text vertically */
    padding: 15px 15px;
    /* Increased padding for more height as per screenshot */
    cursor: pointer;
    color: white;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #3a3f4a;
    /* Add the horizontal line */
}

/* Remove border from the last item */
.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #3a3f4a;
    /* Darker background on hover */
}

.dropdown-item span {
    font-weight: 400;
    /* Slightly bolder as per screenshot */
    font-size: 16px;
    /* Larger font size as per screenshot */
    line-height: 120%;
    /* Removed letter-spacing for a cleaner look as per screenshot */
}

/* Ensure the image container aligns to the left */
.image-preview-container {
    position: relative;
    width: 150px;
    /* Adjusted width */
    height: 150px;
    /* Adjusted height */
}

#uploadedImage {
    width: 150px !important;
    /* Stable width */
    height: 150px !important;
    /* Stable height */
    object-fit: cover;
    /* Ensures the image covers the area, cropping if needed */
    border-radius: 8px;
}

.remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.remove-image-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Styling for the container of multiple posts */
.post-thread-container {
    position: relative;
    width: 60%;
    /* Matches the width of the .new-post / .post-item */
    max-width: 100%;
}

/* Styling for individual post composers */
.post-item {
    margin-bottom: 20px;
    width: 100%;
    /* Space between posts */
    position: relative;
    /* Needed for positioning the line if it goes inside */
}

/* Vertical connecting line */
.post-line {
    position: absolute;
    top: 10px;
    /* Line start point (adjust if your profile picture top is different) */
    left: calc(46px / 2);
    /* Centers the line on the profile picture's horizontal position */
    width: 2px;
    background-color: #5F5F5F;
    bottom: -23px;
    /* This value will make the line extend just enough to meet the center of the next profile picture */
    z-index: 0;
    /* Puts the line behind other elements */
}

/* Adjust margin for subsequent posts to align with the line */
.post-item+.post-item {
    padding-top: 20px;
    /* Add space for the line connection */
}

.emoji-picker-container {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    background: #252830;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: none;
}

.emoji-picker-container.show {
    display: block;
}

/* Custom styling for the emoji picker */
emoji-picker {
    --background: #252830;
    --border-color: #3a3f4a;
    --indicator-color: #B4FA04;
    --input-border-color: #3a3f4a;
    --input-font-color: white;
    --input-font-size: 14px;
    --input-line-height: 1.5;
    --input-padding: 8px;
    --num-columns: 8;
    --outline-color: #B4FA04;
    --outline-size: 2px;
    --category-font-color: #a0a0a0;
    --category-font-size: 12px;
    --skintone-border-radius: 4px;
    --category-emoji-size: 1.125rem;
    --category-emoji-padding: 0.5rem;
    width: 350px;
    height: 400px;
}

/* Ensure emoji icons maintain their styling */
.emoji-trigger {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.emoji-trigger:hover {
    opacity: 0.7;
}

/* Custom CSS for selected time card in schedule sidebar */
.readonly-schedule-info.selected {
    border: 2px solid #B4FA04;
    /* Green border for selected card */
}

/* Specific style for the inner quick edit buttons to ensure they display correctly */
.quick-edit-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    /* Adjust margin as needed */
    flex-wrap: wrap;
    /* Allow buttons to wrap on smaller screens */
    gap: 8px;
    /* Space between buttons */
}

.quick-edit-buttons-container .btn-modify-text {
    flex-grow: 1;
    /* Allow buttons to grow and fill space */
    min-width: 120px;
    /* Minimum width for buttons */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        /* Start off-screen */
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        background-color: #191B20;
        z-index: 1050;
        transition: left 0.3s ease;
        overflow-y: auto;
        /* Allow sidebar content to scroll if needed */
    }

    .sidebar.open {
        left: 0;
        /* Slide in */
    }

    .new-post {
        width: 95%;
    }

    .score-sidebar,
    .schedule-sidebar {
        width: 100%;
        right: -100%;
    }

    .score-sidebar.open,
    .schedule-sidebar.open {
        right: 0;
    }

    .vertical-line {
        display: none;
    }

    .horizontal-line {
        bottom: 25%;
    }

    .navigation {
        height: 60%;
    }

    .add-section {
        bottom: 15%;
    }


    .sidebar.col-2 {
        width: 100% !important;
        /* Override bootstrap col-2 */
        display: none;
    }

    .sidebar.col-2.open {
        display: block !important;
    }

    .content-area.col-10 {
        width: 100% !important;
    }

    .score-icon {
        display: none;
    }

    .btn-modify-text span {
        font-size: 11px;
    }

    .post-thread-container {
        width: 100%;
        max-width: 100%;
    }
}

/* Styles for the inline generate card */
.generate-options-card {
    background-color: #191B20;
    border: 1px solid #31353F;
    border-radius: 12px;
    padding: 15px;
    /* Adjusted padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Default position relative to its parent in the DOM (post-actions-container) */
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 100%;
    /* Takes full width of its parent (post-actions-container) */
    z-index: 10;
    display: none;
    /* Initially hidden */
    flex-direction: column;
}

/* Styles for when generateOptionsCard_0 is shown centrally */
#generateOptionsCard_0.central-popup {
    position: fixed;
    bottom: calc(30px + 50px + 10px);
    left: 57%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 700px;
    right: auto;
    top: auto;
    z-index: 1060;
}

@media (max-width: 768px) {
    #generateOptionsCard_0.central-popup {
        max-width: 90vw;
    }
}


.generate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    /* Reduced margin */
}

.generate-header h3 {
    color: white;
    font-size: 18px;
    /* Adjusted font size */
    font-weight: 600;
    margin: 0;
}

.generate-header .back-arrow {
    cursor: pointer;
    /* width: 18px; */
    /* Adjusted size */
    height: 10px;
    /* Adjusted size */
    margin-right: 10px;
}

.generate-buttons .btn-retry,
.generate-buttons .btn-replace {
    padding: 6px 12px;
    /* Adjusted padding */
    border-radius: 16px;
    /* Adjusted border-radius */
    font-size: 13px;
    /* Adjusted font size */
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.generate-buttons .btn-retry {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    margin-right: 8px;
    /* Adjusted margin */
}

.generate-buttons .btn-replace {
    background-color: #B4FA04;
    color: #121418;
}

/* === START: Carousel Styles for Generated Content === */
.generate-content {
    position: relative;
    overflow: hidden;
    /* min-height: 120px; */
    /* Adjust as needed */
    padding: 5px;
    /* Add some padding if needed */
}

@media (max-width: 768px) {
    .generate-content {
        padding: 0;
    }
}

.generated-responses-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.generated-response-item {
    /* min-width: 100%; */
    width: 100%;
    margin-right: 2%;
    /* Each item takes full width of its parent */
    box-sizing: border-box;
    /* Include padding and border in the width */
    flex-shrink: 0;
    /* Prevent items from shrinking */
    padding: 15px;
    background-color: #27292D;
    /* Matching the example image */
    border-radius: 6px;
    margin-bottom: 15px;
    /* Spacing between items if they were stacked, here it provides internal padding */
    border: 1px solid #3a3f4a;
    /* Added border */
}

.generated-response-item h5 {
    font-size: 14px;
    font-weight: 500;
    color: #AFAFAF;
    margin-bottom: 10px;
}

.generated-response-item p {
    font-weight: 400;
    font-size: 14px;
    color: #ffffff !important;
    /* Ensure high contrast */
    line-height: 1.5;
    margin: 0;
}

.generate-carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    /* Spacing from content */
    margin-bottom: 10px;
}

.nav-arrow {
    cursor: pointer;
    width: 12px;
    /* Adjust size as needed */
    height: 12px;
    /* Adjust size as needed */
    opacity: 1;
    transition: opacity 0.2s ease;
    filter: invert(100%);
    /* Make arrows white */
}

.nav-arrow:hover {
    opacity: 1;
}

.nav-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Space between dots */
    margin: 0 15px;
    /* Space between arrows and dots */
}

.nav-dot {
    width: 8px;
    height: 8px;
    background-color: #5F5F5F;
    /* Inactive dot color */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.nav-dot.active {
    background-color: #b3ff00;
    /* Active dot color from image */
}

/* === END: Carousel Styles === */


.generate-footer {
    display: flex;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #3a3f4a;
}

.generate-prompt-input {
    background-color: transparent;
    border: 1px solid #3a3f4a;
    border-radius: 100px;
    color: white;
    padding: 10px 15px 10px 40px;
    font-size: 14px;
    width: 100%;
    outline: none;

    /* Enable dynamic height adjustment */
    resize: none;
    overflow-y: auto;
    /* Hide scrollbar */
    white-space: pre-wrap;
    word-wrap: break-word;
    height: auto;
    min-height: 40px;
    /* Minimum height */
    line-height: normal;
    box-sizing: border-box;
}

.generate-prompt-input:focus {
    color: #ffffff;
    outline: none;
    border-color: #B4FA04;
    background-color: transparent;
}

.generate-prompt-input::placeholder {
    color: #7D7D7D;
}

.btn-generate-submit {
    background-color: #B4FA04;
    border: none;
    /* border-radius: 50%;
    width: 38px;
    height: 38px; */
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.btn-generate-submit img {
    width: 20px;
    height: 20px;
}

/* Adjustments for dropdown-item to ensure consistent height */
.dropdown-item {
    padding: 12px 15px;
    /* Reduced padding slightly for a tighter look */
}

.custom-popup {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #252830;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-popup.show {
    opacity: 1;
}

.verified-icon {
    width: 16px;
    height: 16px;
}

.custom-dropdown {
    position: relative;
    display: inline-block;
    /* Or block, depending on layout */
}

.custom-dropdown-toggle {
    cursor: pointer;
    /* Ensure the profile picture is clickable */
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    /* Position below the toggle */
    left: 0;
    z-index: 1000;
    display: none;
    /* Hidden by default */
    /* min-width: 10rem; */
    /* Bootstrap's default dropdown width */
    padding: 1px 5px;
    margin: 0;
    font-size: 14px;
    color: #fff;
    /* White text for dropdown items */
    text-align: left;
    list-style: none;
    background-color: #31353E;
    /* Dark background for the dropdown menu */
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* Subtle border */
    border-radius: 12px;
    /* Slightly rounded corners */
}

.custom-dropdown-menu.show {
    display: block;
    /* Shown when 'show' class is added by JS */
}

.custom-dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    /* padding: 0.5rem 1rem; */
    /* clear: both; */
    font-weight: 400;
    color: #fff;
    /* White text */
    text-align: inherit;
    text-decoration: none;
    /* white-space: nowrap; */
    background-color: transparent;
    border: 0;
}

.custom-dropdown-menu:hover {
    /* Ensure items are highlighted on hover */
    background-color: #3a3f4a;
    /* Darker background on hover */
}

.custom-dropdown-menu .dropdown-item:hover,
.custom-dropdown-menu .dropdown-item:focus {
    /* Darker text on hover */
    text-decoration: none;
    background-color: transparent;
    /* Light background on hover */
}

.readonly-schedule-info.selected {
    border: 1px solid #B4FA04;
}

.publish-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Increased z-index */
    /* Removed opacity, visibility, and transition properties */
}

/* The .show class is no longer needed for display control, but can be kept for other visual effects if desired */
.publish-confirm-overlay.show {
    /* These properties are now controlled directly by JS for display */
    /* opacity: 1 !important; */
    /* visibility: visible !important; */
    /* display: flex !important; */
}

.publish-confirm-popup {
    background-color: #191B20;
    /* Dark background */
    color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.publish-confirm-overlay.show .publish-confirm-popup {
    transform: translateY(0);
}

.publish-confirm-popup h4 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

.publish-confirm-popup p {
    margin-bottom: 30px;
    font-size: 1rem;
    color: #AFAFAF;
}

.publish-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.publish-confirm-buttons .btn {
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex-grow: 1;
    /* Allow buttons to grow */
    max-width: 150px;
    /* Max width for buttons */
}

.publish-confirm-buttons .btn-go-back {
    background-color: transparent;
    border: 1px solid white;
    color: white;
}

.publish-confirm-buttons .btn-go-back:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.publish-confirm-buttons .btn-publish-final {
    background-color: #B4FA04;
    color: #121418;
    border: none;
}

.publish-confirm-buttons .btn-publish-final:hover {
    background-color: #aae017;
    transform: translateY(-1px);
}

/* --- START: Subscription Popup Styles --- */
body.no-scroll-popup {
    overflow: hidden;
    /* Prevent body scroll when popup is open */
}

.subscription-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.subscription-popup {
    background: #191B20;
    padding: 48px 40px;
    border-radius: 24px;
    text-align: center;
    width: 60%;
    /* max-width: 480px; */
    color: #FFFFFF;
    border: 1px solid #31353F;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.subscription-popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.popup-logo {
    width: 50px;
    height: 50px;
    background: var(--primary-green);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-right: 0.2rem; */
    box-shadow: 0 8px 32px rgba(163, 230, 53, 0.3);
}

.subscription-popup-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #FFFFFF;
}

.subscription-popup h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 135%;
    margin-bottom: 32px;
    color: #FFFFFF;
}

.welcome-offer {
    /* background: linear-gradient(135deg, #B4FA04 0%, #8BC34A 100%); */
    color: #B4FA04;
    /* padding: 8px 16px; */
    /* border-radius: 8px; */
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 24px;
    /* letter-spacing: 1px; */
    text-transform: uppercase;
}

.pricing {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
}

.original-price {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 400;
}

.discounted-price {
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 700;
}

.billing-details {
    font-size: 16px;
    font-weight: 400;
    color: #B7B7B7;
    margin-bottom: 32px;
    line-height: 145%;
    /* max-width: 380px; */
    margin-left: auto;
    margin-right: auto;
}

.subscribe-now-button {
    background: linear-gradient(135deg, #B4FA04 50%, #8BC34A 100%);
    color: #000000;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px auto;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(180, 250, 4, 0.3);
}

.subscribe-now-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(180, 250, 4, 0.4);
}

.cancel-anytime {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 32px;
}

.payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.payment-icon {
    width: 48px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.payment-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Tablet and Mobile styles */
@media (max-width: 768px) {
    .subscription-popup-overlay {
        padding: 20px;
    }

    .subscription-popup {
        width: 90%;
        max-width: 480px;
        padding: 40px 32px;
        box-sizing: border-box;
        max-height: 90vh;
        overflow-y: auto;
    }

    .subscription-popup h2 {
        font-size: 32px;
        margin-bottom: 28px;
    }

    .welcome-offer {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .pricing {
        gap: 10px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    .original-price {
        font-size: 26px;
    }

    .discounted-price {
        font-size: 26px;
    }

    .billing-details {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .subscription-popup-header {
        margin-bottom: 28px;
    }

    .payment-icons {
        gap: 12px;
        flex-wrap: wrap;
    }

    .subscribe-now-button {
        min-height: 56px;
        touch-action: manipulation;
    }

    .subscribe-now-button:active {
        transform: translateY(0);
    }
}

/* Mobile styles */
@media (max-width: 640px) {
    .subscription-popup-overlay {
        padding: 16px;
        align-items: flex-start;
        padding-top: 40px;
    }

    .subscription-popup {
        padding: 32px 24px;
        width: 100%;
        max-width: none;
        border-radius: 20px;
        max-height: 85vh;
    }

    .subscription-popup-header {
        gap: 10px;
        margin-bottom: 24px;
    }

    .popup-logo {
        width: 44px;
        height: 44px;
    }

    .subscription-popup-header h3 {
        font-size: 16px;
    }

    .subscription-popup h2 {
        font-size: 28px;
        margin-bottom: 24px;
        line-height: 1.3;
    }

    .welcome-offer {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .pricing {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
        align-items: center;
    }

    .original-price {
        font-size: 24px;
        text-align: center;
    }

    .discounted-price {
        font-size: 32px;
        text-align: center;
    }

    .billing-details {
        font-size: 14px;
        margin-bottom: 24px;
        line-height: 1.5;
    }

    .subscribe-now-button {
        padding: 18px 32px;
        font-size: 16px;
        min-height: 60px;
        margin-bottom: 16px;
    }

    .cancel-anytime {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .payment-icons {
        gap: 10px;
        justify-content: center;
    }

    .payment-icon {
        width: 44px;
        height: 30px;
        font-size: 11px;
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .subscription-popup-overlay {
        padding: 16px;
        align-items: center;
        /* Changed from flex-start */
        padding-top: 16px;
        /* Changed from 40px */
    }

    .subscription-popup {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .subscription-popup h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .welcome-offer {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .discounted-price {
        font-size: 28px;
    }

    .original-price {
        font-size: 20px;
    }

    .billing-details {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .subscribe-now-button {
        padding: 16px 24px;
        font-size: 15px;
        min-height: 56px;
    }

    .payment-icons {
        gap: 8px;
    }

    .payment-icon {
        width: 40px;
        height: 28px;
        font-size: 10px;
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .subscription-popup-overlay {
        align-items: center;
        padding-top: 20px;
    }

    .subscription-popup {
        max-height: 80vh;
        overflow-y: auto;
    }

    .subscription-popup h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .subscription-popup-header {
        margin-bottom: 20px;
    }

    .welcome-offer {
        margin-bottom: 16px;
    }

    .billing-details {
        margin-bottom: 20px;
    }

    .cancel-anytime {
        margin-bottom: 20px;
    }
}

/* High DPI displays - removed as requested */

@media (max-width: 768px) {

    .verified-icon {
        width: 12px;
        height: 12px;
    }

    .text-author {
        font-size: 12px;
    }

    .text-username {
        font-size: 12px;
    }

    .generate-options-card,
    #generateOptionsCard_0.central-popup {
        padding: 10px;
        width: 100%;
        /* bottom: calc(15px + 45px + 5px); */
    }


    .generate-header h3 {
        font-size: 16px;
    }

    .generate-buttons .btn-retry,
    .generate-buttons .btn-replace {
        padding: 5px 10px;
        font-size: 11px;
    }

    .generate-prompt-input {
        padding: 6px 12px;
        font-size: 12px;
    }

    .btn-generate-submit {
        width: 32px;
        height: 32px;
    }

    .btn-generate-submit img {
        width: 16px;
        height: 16px;
    }

    #bottomGenerateButtonContainer {
        bottom: 15px;
        /* Adjust for mobile */
    }

    #centralGenerateTweetBtn {
        padding: 10px 20px;
        font-size: 14px;
    }

}

/* X Algorithm Analysis Popup - Styles for _Select menu-3.jpg */
.x-algorithm-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* Slightly stronger overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 15px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.x-algorithm-popup-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.x-algorithm-popup {
    margin-left: 18%;
    background-color: #191B20;
    /* Very dark background, matching image */
    color: #D1D2D3;
    padding: 24px 28px;
    /* Slightly adjusted padding */
    border-radius: 12px;
    border: 1px solid #31353F;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
    width: 90%;
    max-width: 920px;
    /* Slightly wider to accommodate content well */
    max-height: 90vh;
    overflow-y: auto;
    font-family: 'Poppins', sans-serif;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.x-algorithm-popup-overlay.show .x-algorithm-popup {
    transform: scale(1);
}

.x-algorithm-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    /* Increased space */
    padding-bottom: 0;
    border-bottom: none;
}

.popup-title-container {
    display: flex;
    align-items: center;
}

.popup-header-icon {
    font-size: 19px;
    /* Matched to image */
    margin-right: 12px;
    /* Spacing for icon */
    color: #656A71;
    /* Icon color, slightly muted */
}

.x-algorithm-popup-header h2 {
    font-size: 17px;
    /* Matched to image */
    font-weight: 500;
    margin: 0;
    color: #E0E1E3;
    /* Header title color */
}

.x-algorithm-popup .close-popup-btn {
    cursor: pointer;
    width: 13px;
    /* Matched to image */
    height: 13px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.x-algorithm-popup .close-popup-btn:hover {
    opacity: 0.9;
}

.x-algorithm-popup-content .analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* Gap adjusted to image */
    margin-bottom: 28px;
}

.x-algorithm-popup-content .analysis-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.x-algorithm-popup-content .analysis-item {
    /* background-color: #27292D; */
    /* Item background - matching image */
    padding: 0px;
    /* Padding within items */
    /* border-radius: 6px; */
    position: relative;
    display: flex;
    flex-direction: column;
}

.x-algorithm-popup-content .analysis-item h4 {
    /* Category title */
    font-size: 14.5px;
    /* Fine-tuned */
    font-weight: 500;
    color: #C8C9CC;
    /* Item title color */
    margin-top: 0;
    margin-bottom: 10px;
    /* Space below title */
}

.x-algorithm-popup-content .analysis-item p {
    /* Descriptive text */
    font-size: 13px;
    line-height: 1.65;
    /* Adjusted line height */
    color: #878A8F;
    /* Item paragraph text color */
    margin-bottom: 12px;
    flex-grow: 1;
}

.overall-badge {
    position: absolute;
    top: 20px;
    /* Aligned with padding */
    right: 60px;
    /* Aligned with padding */
    background-color: #B4FA04;
    /* Dark background for the badge */
    color: #000000;
    /* Light text color for the badge */
    padding: 4px 10px;
    /* Adjusted padding */
    border-radius: 4px;
    /* Pill shape */
    font-size: 11.5px;
    /* Fine-tuned size */
    font-weight: 400;
    /* Medium weight */
    line-height: 1.4;
    /* Ensure text fits well */
}

/* === Key Change: Score Badge === */
.x-algorithm-popup-content .analysis-item .score-badge {
    position: absolute;
    top: 0px;
    /* Aligned with padding */
    right: 0px;
    /* Aligned with padding */
    background-color: #31353E;
    /* Light background for the badge */
    color: #ffffff;
    /* Dark text color for the badge */
    padding: 4px 10px;
    /* Adjusted padding */
    border-radius: 4px;
    /* Pill shape */
    font-size: 11.5px;
    /* Fine-tuned size */
    font-weight: 500;
    /* Medium weight */
    line-height: 1.4;
    /* Ensure text fits well */
}

.x-algorithm-popup-content .suggestions-for-improvement {
    padding-top: 24px;
    border-top: 1px solid #2A2C2F;
    /* Separator line matching item borders */
}

.x-algorithm-popup-content .suggestions-for-improvement h4 {
    font-size: 15px;
    font-weight: 500;
    color: #B4FA04;
    margin-top: 0;
    margin-bottom: 18px;
}

.x-algorithm-popup-content .suggestions-for-improvement ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.x-algorithm-popup-content .suggestions-for-improvement ul li {
    font-size: 13px;
    color: #878A8F;
    margin-bottom: 10px;
    line-height: 1.65;
    padding-left: 18px;
    position: relative;
}

.x-algorithm-popup-content .suggestions-for-improvement ul li::before {
    content: "•";
    color: #505358;
    font-weight: normal;
    font-size: 1em;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 1px;
}

/* Custom CSS for selected time card in schedule sidebar */
.readonly-schedule-info.selected {
    border: 1px solid #B4FA04;
    /* Green border for selected card */
}

/* Specific style for the inner quick edit buttons to ensure they display correctly */
.quick-edit-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    /* Adjust margin as needed */
    flex-wrap: wrap;
    /* Allow buttons to wrap on smaller screens */
    gap: 8px;
    /* Space between buttons */
}

.quick-edit-buttons-container .btn-modify-text {
    flex-grow: 1;
    /* Allow buttons to grow and fill space */
    min-width: 120px;
    /* Minimum width for buttons */
}

/* Styles for timezone suggestions */
.timezone-suggestions {
    position: absolute;
    background-color: #2c2c2c;
    border: 1px solid #444;
    max-height: 150px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
    border-radius: 0.25rem;
    margin-top: 5px;
    /* Adjust as needed */
    display: none;
    /* Hidden by default */
}

.timezone-suggestions div {
    padding: 8px 12px;
    cursor: pointer;
    color: white;
}

.timezone-suggestions div:hover {
    background-color: #444;
}

/* Styles for 3-dot menu on sidebar cards */
.posted-item {
    position: relative;
    /* Needed for absolute positioning of the menu */
}

.card-menu-dots-container {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    padding: 3px;
    z-index: 10;
    display: inline-flex;
    /* Visible by default (for mobile, on items that have it) */
    align-items: center;
    line-height: 1;
}

.card-menu-dots-icon {
    transform: rotate(90deg);
    font-weight: bold;
    font-size: 18px;
    color: #B3B3B3;
    padding: 0 2px;
}

.card-menu-dots-container:hover .card-menu-dots-icon {
    color: #FFFFFF;
}

.card-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 0.25rem;
    min-width: 120px;
    z-index: 1001;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.card-menu-dropdown.show {
    display: block;
}

.card-menu-dropdown .dropdown-item {
    padding: 8px 12px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    display: block;
    /* Make it block for full clickable area */
    text-decoration: none;
    /* Remove underline if it's an anchor */
}

.card-menu-dropdown .dropdown-item:hover {
    background-color: #444;
}

/* Desktop: Hide dots by default, show on card hover */
@media (min-width: 992px) {
    .card-menu-dots-container {
        display: none;
    }

    .posted-item:hover .card-menu-dots-container {
        display: inline-flex;
    }
}

/* Mobile: .card-menu-dots-container is already display: inline-flex by default */

.post-actions-container img {
    cursor: pointer;
}

/* === START: Styles for Central Generate Button and Popup === */
#bottomGenerateButtonContainer {
    position: fixed;
    bottom: 30px;
    left: 57%;
    transform: translateX(-57%);
    z-index: 1050;
    display: none;
    /* Controlled by JS */
}

#centralGenerateTweetBtn {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    background-color: #B4FA04;
    color: #000000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#centralGenerateTweetBtn img {
    margin-right: 8px;
}

/* #generateOptionsCard_0.central-popup {
    position: fixed;
    bottom: calc(30px + 50px + 10px);
    left: 57%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 700px;
    z-index: 1060;
} */

@media (max-width: 991px) {
    #bottomGenerateButtonContainer {
        left: 50%;
        transform: translateX(-50%);
    }

    #generateOptionsCard_0.central-popup {
        left: 50%;
    }
}

#deletePostBtn_0 {
    display: none !important;
    /* Use !important to ensure override if needed */
}

#addPostBtn_0 {
    margin-right: 22px;
}

/* === END: Styles for Central Generate Button and Popup === */


/* START: MODIFIED AND NEW STYLES FOR GENERATE BOX */
.generate-options-card {
    background-color: #191B20;
    border: 1px solid #31353F;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 100%;
    z-index: 10;
    display: none;
    flex-direction: column;
}

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

.generate-header .back-arrow {
    cursor: pointer;
    height: 12px;
    margin-right: 10px;
}

.generate-buttons .btn-retry,
.generate-buttons .btn-replace {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.generate-buttons .btn-retry {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    margin-right: 8px;
}

.generate-buttons .btn-replace {
    background-color: #B4FA04;
    color: #121418;
}

/* Styles for the post type selection buttons */
.btn-group .btn {
    border-radius: 100px !important;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    background-color: transparent;
    border: 1px solid #5F5F5F;
    color: #FFFFFF;
    margin-right: 8px;
    transition: all 0.2s ease-in-out;
}

@media (max-width: 768px) {
    .btn-group .btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

.btn-group .btn:last-child {
    margin-right: 0;
}

.btn-group .btn:hover {
    border-color: #B4FA04;
    color: #B4FA04;
}

.btn-group .btn.active-option {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
}

#aiPersonalitiesDropdown {
    background-color: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
}

@media (max-width: 768px) {
    #aiPersonalitiesDropdown {
        font-size: 12px;
        padding: 4px 8px;
    }
}

#aiPersonalitiesDropdown:focus {
    background-color: #31353E;
    color: #FFFFFF;
}

#aiPersonalitiesDropdown::after {
    color: #FFFFFF;
}

/* Dropdown Menu Functionality and Style Fix */
#aiPersonalitiesList {
    background-color: #31353E;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px;
    display: none;
    /* Hidden by default */
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    min-width: 250px;
}

#aiPersonalitiesList.show {
    display: grid;
    /* Becomes a grid only when open */
}

#aiPersonalitiesList .dropdown-item {
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    border-bottom: none;
    text-align: center;
    transition: background-color 0.2s ease;
}

#aiPersonalitiesList .dropdown-item:hover {
    background-color: #444;
}

.generate-content p {
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: left;
    /* Changed to left align */
    word-wrap: break-word;
    /* Ensure long words break */
}

/* Added style for individual response container */
.generated-response-item {
    background-color: #31353EB2;
    /* Matching the example image */
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}



.generated-response-item h4 {
    color: #C8C9CC;
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: 10px;
}

.generate-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 0;
    border-top: none;
}

.generate-prompt-container {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.prompt-icon {
    position: absolute;
    left: 15px;
    width: 16px;
    height: 16px;
    z-index: 1;
}

/* .generate-prompt-input {
    resize: none;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    height: auto;
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    background-color: transparent;
    border: 1px solid #3a3f4a;
    border-radius: 100px;
    color: white;
    padding: 10px 15px 10px 40px;
    font-size: 14px;
    width: 100%;
    outline: none;
} */

.generate-prompt-input:focus {
    color: #ffffff;
    outline: none;
    border-color: #B4FA04;
    background-color: transparent;
}

.generate-prompt-input::placeholder {
    color: #7D7D7D;
}

.btn-generate-submit {
    background-color: #B4FA04;
    border: none;
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-generate-submit:hover {
    background-color: #aae017;
}

.btn-generate-submit img {
    display: none;
}

.btn-generate-submit span {
    display: inline;
}

/* === END: MODIFIED AND NEW STYLES FOR GENERATE BOX === */

/* === START: Styles for Generated Thread View (Updated) === */
.generated-thread-view {
    padding: 10px;
}

.generated-thread-tweet {
    display: flex;
    align-items: flex-start;
    position: relative;
    min-height: 50px;
    /* Ensures space for the line */
}

.generated-thread-line-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
    /* space between line/dot and text */
    width: 40px;
    /* Keep a fixed width for alignment consistency */
    flex-shrink: 0;
}

/* New style for the dot */
.generated-thread-dot {
    width: 8px;
    height: 8px;
    background-color: #5F5F5F;
    /* Grey color, same as the line */
    border-radius: 50%;
    z-index: 1;
    /* Ensure dot is above the line */
    margin-top: 14px;
    /* Adjust vertical alignment */
}

/* Adjusted line position */
.generated-thread-line {
    display: none;

    position: absolute;
    top: 22px;
    /* Start below the dot */
    bottom: -50px;
    /* Extend line to connect to the next item */
    width: 2px;
    background-color: #5F5F5F;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .generated-thread-view {
        padding: 0;
    }

    .generated-thread-line {
        display: none;
    }

    .generated-thread-line-container {
        width: 8px;
    }
}

.generated-thread-content {
    padding-top: 10px;
    /* Align text with the dot */
}

.generated-thread-content p {
    margin: 0;
    color: white !important;
    font-size: 14px;
    line-height: 1.5;
}

/* === END: Styles for Generated Thread View === */