/* Main container for YouTube Title Generator */
.gemini-youtube-title-generator-container {
    background-color: #fcfcfc;
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 10px;
    max-width: 700px;
    margin: 40px auto;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.gemini-youtube-title-generator-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 26px;
    font-weight: 700;
}

.gytg-form-group {
    margin-bottom: 25px;
}

.gytg-form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #555;
    font-size: 16px;
}

/* Input field */
.gytg-form-group input[id^="gytg-youtube-video-description"] {
    width: 100%; /* Changed to 100% */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    transition: border-color 0.3s ease;
    box-sizing: border-box; /* Added box-sizing: border-box; */
}

.gytg-form-group input[id^="gytg-youtube-video-description"]:focus {
    border-color: #FF0000; /* YouTube red */
    outline: none;
}

/* Generate and Copy Buttons */
button.gytg-youtube-generate-button,
button.gytg-youtube-copy-all-button {
    background-color: #FF0000; /* YouTube red */
    color: #ffffff;
    padding: 14px 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px; /* Space below generate button */
}

button.gytg-youtube-generate-button:hover,
button.gytg-youtube-copy-all-button:hover {
    background-color: #CC0000; /* Darker red on hover */
    transform: translateY(-2px);
}

button.gytg-youtube-generate-button:disabled {
    background-color: #ff8080;
    cursor: not-allowed;
    transform: none;
}

/* Loading message */
div[id^="gytg-youtube-loading"] {
    text-align: center;
    margin-top: 25px;
    font-style: italic;
    color: #666;
    font-size: 15px;
}

/* Results container */
div[id^="gytg-youtube-results"] {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

div[id^="gytg-youtube-results"] h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
}

/* Styles for the individual title buttons */
.gytg-youtube-title-button {
    display: flex; /* Use flexbox for title and icon alignment */
    justify-content: space-between; /* Space out content and icon */
    align-items: center; /* Vertically align content */
    width: 100%;
    padding: 12px 15px;
    /* margin-bottom: 10px; -- This is now handled by gap in parent container */
    background-color: #f0f0f0; /* Lighter background for titles */
    color: #FF0000; /* Made titles red like the button */
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 17px;
    font-weight: bold; /* Made fonts bold */
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.gytg-youtube-title-button:hover {
    background-color: #e0e0e0; /* Slightly darker on hover */
    border-color: #b0b0b0;
    transform: translateY(-1px);
}

.gytg-youtube-title-button span.title-text {
    flex-grow: 1; /* Allows the text to take up available space */
    margin-right: 10px; /* Space between title and icon */
}

/* Styles for the copy icon within the title button */
.gytg-youtube-title-button .copy-icon {
    flex-shrink: 0; /* Prevents icon from shrinking */
    width: 20px;
    height: 20px;
    fill: #666; /* Color of the icon */
    transition: fill 0.3s ease;
}

.gytg-youtube-title-button:hover .copy-icon {
    fill: #333; /* Darker icon on hover */
}

/* Copy message for individual titles */
.gytg-youtube-copy-message {
    font-weight: bold;
    color: #28a745; /* Green for success */
    margin-left: 10px;
    font-size: 14px;
    display: none;
    position: absolute; /* Position relative to the button for better placement */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* Container for titles display - now acts as a flex container */
div[id^="gytg-youtube-titles-display"] {
    /* Remove previous border/padding as titles will have their own styling */
    min-height: 120px;
    margin-bottom: 20px;
    background-color: #fdfdfd;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack items vertically */
    gap: 10px; /* This creates consistent spacing between direct children (the title buttons) */
    padding: 10px; /* Some internal padding */
    border: 1px solid #ddd; /* Re-add a subtle border for the whole box */
    border-radius: 6px;
}

/* Copy all message */
span[id^="gytg-youtube-copy-all-message"] {
    font-weight: bold;
    color: #28a745; /* Green for success */
    margin-left: 15px;
    font-size: 15px;
}

/* Error message */
div[id^="gytg-youtube-error-message"] {
    color: #dc3545; /* Red for error */
    margin-top: 15px;
    font-weight: 500;
    display: none;
}