/* --- YouTube Comment Generator Styles --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

.ytcg-wrapper {
    font-family: 'Poppins', sans-serif;
    background-color: #3B82F6; /* Blue */
    padding: 30px; border-radius: 20px;
    margin: 40px auto; max-width: 800px;
}
.ytcg-container {
    background-color: #fff;
    border-radius: 16px; padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-align: center; color: #1E3A8A;
}
.ytcg-header .fa-comments { font-size: 2.5rem; color: #FBBF24; /* Yellow */ margin-bottom: 10px; }
.ytcg-header h2 { font-size: 1.8rem; color: #1E3A8A; margin: 0 0 5px; }
.ytcg-header p { color: #60A5FA; margin-bottom: 25px; }

.ytcg-input-group { display: flex; gap: 10px; margin-bottom: 25px; }
.ytcg-input-group input[type="text"] {
    flex-grow: 1; padding: 12px 15px; border: 1px solid #BFDBFE;
    border-radius: 8px; font-size: 1rem;
}
.ytcg-input-group input[type="text"]:focus { outline-color: #FBBF24; }
.ytcg-btn {
    padding: 12px 20px; font-size: 1rem; font-weight: 700;
    color: #1E3A8A; background-color: #FBBF24; /* Yellow */
    border: none; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: all 0.2s ease;
}
.ytcg-btn:hover { background-color: #F59E0B; transform: translateY(-2px); }

/* Loading & Result */
.ytcg-centered-content { padding: 40px 0; }
.ytcg-spinner {
    border: 4px solid #DBEAFE; border-top: 4px solid #3B82F6;
    border-radius: 50%; width: 40px; height: 40px; margin: 0 auto 15px;
    animation: ytcg-spin 1s linear infinite;
}
@keyframes ytcg-spin { to { transform: rotate(360deg); } }
.ytcg-centered-content p { font-weight: 500; color: #60A5FA; }
#ytcg-output-block { text-align: left; }
.ytcg-output-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.ytcg-output-header h3 { margin: 0; font-size: 1.2rem; color: #1E3A8A; }
.ytcg-copy-btn {
    background: #DBEAFE; color: #3B82F6; padding: 6px 12px;
    border: none; border-radius: 6px; cursor: pointer; font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}
.ytcg-copy-btn:hover { background-color: #BFDBFE; }
#ytcg-comments-list {
    display: flex; flex-direction: column; gap: 12px;
    max-height: 400px; overflow-y: auto; padding-right: 10px;
}
.ytcg-comment-bubble {
    background-color: #EFF6FF; border-radius: 12px;
    padding: 15px; color: #1E40AF; line-height: 1.6;
}