/**
 * Claira AI Theme - Comments Styles
 * AI-themed comments section with modern design
 */

/* Comments Area Container */
.comments-area {
    margin-top: var(--spacing-2xl); /* Reduced from 4xl */
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(0, 87, 183, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl); /* Reduced from 3xl */
    backdrop-filter: blur(10px);
}

/* Comments Header */
.comments-header {
    border-bottom: 2px solid rgba(0, 87, 183, 0.2);
    padding-bottom: var(--spacing-lg); /* Reduced from 2xl */
    margin-bottom: var(--spacing-xl); /* Reduced from 3xl */
}

.comments-title {
    color: var(--ai-primary);
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.comments-icon {
    font-size: var(--font-3xl);
}

.post-title-ref {
    color: var(--text-secondary);
    font-weight: var(--font-normal);
    font-size: var(--font-lg);
}

.comments-ai-analysis {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 87, 183, 0.1);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 87, 183, 0.2);
}

.ai-analysis-icon {
    font-size: var(--font-2xl);
    flex-shrink: 0;
}

.ai-analysis-text strong {
    display: block;
    color: var(--ai-primary);
    font-size: var(--font-md);
    margin-bottom: var(--spacing-xs);
}

.ai-analysis-text p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.sentiment-positive {
    color: var(--ai-success);
    font-weight: var(--font-bold);
}

.engagement-high {
    color: var(--ai-primary);
    font-weight: var(--font-bold);
}

/* Comment Navigation */
.comment-navigation {
    margin: var(--spacing-2xl) 0;
    text-align: center;
}

.comment-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.comment-navigation a {
    background: rgba(0, 87, 183, 0.1);
    color: var(--ai-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 1px solid rgba(0, 87, 183, 0.2);
    transition: var(--transition-base);
    font-weight: var(--font-medium);
}

.comment-navigation a:hover {
    background: rgba(0, 87, 183, 0.2);
    border-color: var(--ai-primary);
    transform: translateY(-2px);
}

/* Comment List */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list .comment {
    margin-bottom: var(--spacing-lg); /* Reduced from 3xl */
}

.comment-list .children {
    list-style: none;
    margin-left: var(--spacing-3xl);
    margin-top: var(--spacing-2xl);
    padding-left: var(--spacing-xl);
    border-left: 2px solid rgba(0, 87, 183, 0.2);
}

/* Individual Comment Item */
.ai-comment-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 87, 183, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg); /* Reduced from xl */
    transition: var(--transition-base);
}

.ai-comment-item:hover {
    border-color: var(--ai-primary);
    box-shadow: 0 5px 20px rgba(0, 87, 183, 0.1);
}

/* Comment Header */
.comment-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    align-items: start;
}

/* Comment Avatar */
.comment-avatar {
    position: relative;
}

.ai-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(0, 87, 183, 0.3);
    transition: var(--transition-base);
}

.avatar-ai-ring {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--ai-primary), transparent, var(--ai-primary)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: subtract;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    animation: avatarGlow 3s linear infinite;
}

@keyframes avatarGlow {
    0%, 100% { 
        opacity: 0.3; 
        transform: rotate(0deg); 
    }
    50% { 
        opacity: 1; 
        transform: rotate(180deg); 
    }
}

/* Comment Meta */
.comment-meta {
    min-width: 0;
}

.comment-author-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.comment-author-name {
    color: var(--text-primary);
    font-weight: var(--font-bold);
    font-size: var(--font-md);
}

.comment-author-name a {
    color: inherit;
    text-decoration: none;
}

.comment-author-name a:hover {
    color: var(--ai-primary);
}

.author-url-badge {
    font-size: var(--font-sm);
    opacity: 0.7;
}

.comment-metadata {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.comment-date {
    color: var(--text-tertiary);
    font-size: var(--font-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.date-icon {
    opacity: 0.7;
}

.ai-moderated-badge {
    background: rgba(0, 255, 136, 0.1);
    color: var(--ai-success);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.ai-check {
    font-size: var(--font-sm);
}

/* Comment Actions */
.comment-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

.reply-link-wrapper, .edit-link-wrapper {
    display: inline-block;
}

.reply-link-wrapper a, .edit-link-wrapper a {
    background: rgba(0, 87, 183, 0.1);
    color: var(--ai-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    border: 1px solid rgba(0, 87, 183, 0.2);
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.reply-link-wrapper a:hover, .edit-link-wrapper a:hover {
    background: rgba(0, 87, 183, 0.2);
    border-color: var(--ai-primary);
    transform: translateY(-1px);
}

/* Comment Content */
.comment-content {
    grid-column: 1 / -1;
    margin-top: var(--spacing-lg);
}

.comment-awaiting-moderation {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.moderation-icon {
    font-size: var(--font-lg);
    flex-shrink: 0;
}

.comment-awaiting-moderation em {
    color: rgba(255, 193, 7, 0.9);
    font-style: normal;
    font-weight: var(--font-medium);
}

.comment-text {
    color: var(--text-primary);
    font-size: var(--font-md);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.comment-text p {
    margin-bottom: var(--spacing-md);
}

.comment-text p:last-child {
    margin-bottom: 0;
}

/* Comment AI Analysis */
.comment-ai-analysis {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(0, 87, 183, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 87, 183, 0.1);
}

.ai-sentiment, .ai-quality {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.sentiment-icon, .quality-icon {
    font-size: var(--font-md);
}

/* Comments Closed */
.comments-closed {
    text-align: center;
    padding: var(--spacing-2xl);
    background: rgba(255, 87, 87, 0.1);
    border: 1px solid rgba(255, 87, 87, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-2xl);
}

.closed-icon {
    font-size: var(--font-2xl);
    display: block;
    margin-bottom: var(--spacing-md);
}

.comments-closed p {
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    margin: 0;
}

/* Comment Form Wrapper */
.comment-respond-wrapper {
    margin-top: var(--spacing-xl); /* Reduced from 4xl */
    border-top: 2px solid rgba(0, 87, 183, 0.2);
    padding-top: var(--spacing-lg); /* Reduced from 3xl */
}

/* Comment Form Header */
.comment-form-ai-header {
    margin-bottom: var(--spacing-2xl);
}

.comment-form-title {
    color: var(--ai-primary);
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-icon {
    font-size: var(--font-2xl);
}

.ai-moderation-notice {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(0, 87, 183, 0.1);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 87, 183, 0.2);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.ai-shield-icon {
    font-size: var(--font-lg);
    color: var(--ai-primary);
}

/* Comment Form */
.ai-comment-form {
    display: grid;
    gap: var(--spacing-xl);
}

.comment-form-author,
.comment-form-email,
.comment-form-human-verification,
.comment-form-comment {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.comment-form-author,
.comment-form-email,
.comment-form-human-verification {
    grid-column: span 1;
}

.comment-form-comment {
    grid-column: 1 / -1;
}

/* Form Labels */
.comment-label,
.author-label,
.email-label,
.human-verification-label {
    color: var(--text-primary);
    font-weight: var(--font-medium);
    font-size: var(--font-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.label-icon {
    font-size: var(--font-lg);
    color: var(--ai-primary);
}

/* Form Inputs */
.ai-comment-form input[type="text"],
.ai-comment-form input[type="email"],
.ai-comment-form input[type="url"],
.ai-comment-form textarea {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 87, 183, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-md);
    font-family: var(--font-primary);
    transition: var(--transition-base);
}

.ai-comment-form input[type="text"]:focus,
.ai-comment-form input[type="email"]:focus,
.ai-comment-form input[type="url"]:focus,
.ai-comment-form textarea:focus {
    outline: none;
    border-color: var(--ai-primary);
    box-shadow: 0 0 0 3px rgba(0, 87, 183, 0.1);
    background: rgba(0, 0, 0, 0.7);
}

.ai-comment-form textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.ai-comment-form input::placeholder,
.ai-comment-form textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 0.7;
}

/* Submit Button */
.ai-submit-button {
    background: var(--gradient-primary);
    color: var(--castaldo-white);
    border: none;
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-castaldo);
    justify-self: start;
}

.ai-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-castaldo-lg);
}

.ai-submit-button:active {
    transform: translateY(0);
}

.submit-ai-icon {
    font-size: var(--font-lg);
    transition: var(--transition-base);
}

.ai-submit-button:hover .submit-ai-icon {
    transform: translateX(3px);
}

/* Cancel Reply */
.cancel-reply-wrapper {
    margin-bottom: var(--spacing-lg);
    text-align: right;
}

.cancel-reply-wrapper a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 87, 87, 0.3);
    background: rgba(255, 87, 87, 0.1);
    transition: var(--transition-base);
}

.cancel-reply-wrapper a:hover {
    background: rgba(255, 87, 87, 0.2);
    border-color: rgba(255, 87, 87, 0.5);
}

/* Responsive Design - Mobile Optimized */
@media (max-width: 768px) {
    .comments-area {
        margin-top: var(--spacing-xl) !important; /* Reduced from 4xl */
        padding: var(--spacing-lg) var(--spacing-md) !important; /* Reduced padding */
    }
    
    .comments-header {
        padding-bottom: var(--spacing-lg) !important; /* Reduced spacing */
        margin-bottom: var(--spacing-lg) !important;
    }
    
    .comments-title {
        font-size: var(--font-lg) !important; /* Smaller title */
        flex-direction: row; /* Keep inline on mobile */
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .comments-ai-analysis {
        padding: var(--spacing-md) !important; /* Reduced padding */
        margin-bottom: var(--spacing-md);
    }
    
    /* Compact comment layout */
    .ai-comment-item {
        padding: var(--spacing-md) !important; /* Reduced from spacing-xl */
        margin-bottom: var(--spacing-md) !important;
    }
    
    .comment-header {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-sm) !important; /* Reduced gap */
    }
    
    .comment-content {
        margin-top: var(--spacing-sm) !important;
    }
    
    .comment-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: var(--spacing-sm) !important; /* Reduced spacing */
        gap: var(--spacing-md);
    }
    
    /* Reduced nested comments indentation */
    .comment-list .children {
        margin-left: var(--spacing-md) !important; /* Reduced indentation */
        padding-left: var(--spacing-sm) !important;
    }
    
    /* Optimized form layout */
    .comment-form-ai-header {
        margin-bottom: var(--spacing-md) !important;
    }
    
    .comment-form-title {
        font-size: var(--font-md) !important;
    }
    
    .ai-comment-form {
        grid-template-columns: 1fr;
        gap: var(--spacing-md) !important; /* Reduced form gaps */
    }
    
    .comment-form-author,
    .comment-form-email,
    .comment-form-url {
        grid-column: 1;
    }
    
    /* Compact AI analysis */
    .comment-ai-analysis {
        flex-direction: row !important; /* Keep horizontal on mobile */
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }
    
    /* Optimized human verification for mobile */
    .human-verification-challenge {
        padding: var(--spacing-md) !important; /* Reduced padding */
        margin-top: var(--spacing-sm) !important;
    }
    
    .challenge-content {
        grid-template-columns: 1fr auto; /* Simplified layout */
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .challenge-icon {
        width: 32px !important; /* Smaller icon */
        height: 32px !important;
        font-size: var(--font-lg) !important;
    }
    
    .challenge-text {
        font-size: var(--font-sm) !important;
    }
    
    .refresh-challenge {
        width: 32px !important;
        height: 32px !important;
    }
    
    .verification-info {
        margin-top: var(--spacing-sm) !important;
        padding: var(--spacing-sm) !important;
        font-size: var(--font-xs) !important;
    }
}

@media (max-width: 480px) {
    .comments-area {
        margin-top: var(--spacing-lg) !important; /* Further reduced */
        padding: var(--spacing-md) var(--spacing-sm) !important; /* Minimal padding */
    }
    
    .comments-header {
        padding-bottom: var(--spacing-md) !important;
        margin-bottom: var(--spacing-md) !important;
    }
    
    .comments-title {
        font-size: var(--font-md) !important; /* Even smaller title */
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
    }
    
    .ai-avatar {
        width: 40px !important; /* Smaller avatar */
        height: 40px !important;
    }
    
    .ai-comment-item {
        padding: var(--spacing-sm) !important; /* Minimal padding */
        margin-bottom: var(--spacing-sm) !important;
    }
    
    .comment-header {
        grid-template-columns: auto 1fr; /* Keep horizontal layout */
        gap: var(--spacing-xs) !important;
    }
    
    .comment-content {
        margin-top: var(--spacing-xs) !important;
    }
    
    .comment-actions {
        justify-content: flex-start; /* Left align */
        margin-top: var(--spacing-xs) !important;
        gap: var(--spacing-sm);
    }
    
    /* Minimized nested comments */
    .comment-list .children {
        margin-left: var(--spacing-sm) !important;
        padding-left: var(--spacing-xs) !important;
    }
    
    /* Compact form inputs */
    .ai-comment-form {
        gap: var(--spacing-sm) !important;
    }
    
    .ai-comment-form input[type="text"],
    .ai-comment-form input[type="email"],
    .ai-comment-form input[type="url"],
    .ai-comment-form textarea {
        font-size: var(--font-sm);
        padding: var(--spacing-sm) !important; /* Reduced input padding */
    }
    
    .ai-comment-form textarea {
        min-height: 80px !important; /* Smaller textarea */
    }
    
    .ai-submit-button {
        width: 100%;
        justify-self: stretch;
        padding: var(--spacing-md) var(--spacing-lg) !important;
    }
    
    /* Super compact verification */
    .human-verification-challenge {
        padding: var(--spacing-sm) !important;
    }
    
    .challenge-content {
        grid-template-columns: 1fr; /* Stack vertically */
        text-align: center;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
    }
    
    .challenge-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: var(--font-md) !important;
        justify-self: center;
    }
    
    .challenge-text {
        font-size: var(--font-xs) !important;
        line-height: 1.4;
    }
    
    .refresh-challenge {
        width: 28px !important;
        height: 28px !important;
        justify-self: center;
        margin-top: var(--spacing-xs);
    }
    
    #human_check {
        font-size: var(--font-sm) !important;
        padding: var(--spacing-sm) !important;
    }
    
    .verification-info {
        font-size: 10px !important;
        padding: var(--spacing-xs) !important;
        margin-top: var(--spacing-xs) !important;
        text-align: center;
    }
    
    /* Minimal AI analysis */
    .comment-ai-analysis {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        gap: var(--spacing-xs);
        font-size: var(--font-xs);
    }
}

/* Mobile overflow fixes for WordPress default elements */
@media (max-width: 768px) {
    /* Fix WordPress default comment form text that overflows */
    .comment-form .comment-notes,
    .comment-form p,
    .comment-respond p {
        font-size: var(--font-sm) !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        margin: var(--spacing-sm) 0 !important;
        padding: 0 !important;
    }
    
    .comment-form .comment-notes {
        background: rgba(0, 87, 183, 0.05) !important;
        padding: var(--spacing-sm) !important;
        border-radius: var(--radius-sm) !important;
        border: 1px solid rgba(0, 87, 183, 0.1) !important;
        color: var(--text-secondary) !important;
    }
    
    /* Ensure form container doesn't overflow */
    .comment-respond-wrapper,
    .comment-respond,
    .ai-comment-form {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .comment-respond {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Fix any potential wide elements */
    .comment-respond *,
    .ai-comment-form * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    /* Extra mobile fixes for very small screens */
    .comment-form .comment-notes,
    .comment-form p,
    .comment-respond p {
        font-size: var(--font-xs) !important;
        margin: var(--spacing-xs) 0 !important;
        padding: var(--spacing-xs) !important;
    }
    
    .comment-form .comment-notes {
        padding: var(--spacing-xs) !important;
    }
    
    /* Ensure container has proper padding */
    .comment-respond-wrapper {
        padding: 0 var(--spacing-xs) !important;
    }
}

/* Human Verification Styles */
.comment-form-human-verification {
    position: relative;
}

.human-verification-challenge {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 87, 183, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    transition: var(--transition-base);
}

.challenge-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.challenge-icon {
    font-size: var(--font-2xl);
    color: var(--ai-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 87, 183, 0.1);
    border-radius: 50%;
    border: 2px solid rgba(0, 87, 183, 0.3);
}

.challenge-text {
    color: var(--text-primary);
    font-size: var(--font-md);
    line-height: 1.5;
}

.challenge-text strong {
    color: var(--ai-primary);
}

.refresh-challenge {
    background: rgba(0, 87, 183, 0.1);
    border: 1px solid rgba(0, 87, 183, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    color: var(--ai-primary);
    font-size: var(--font-lg);
    cursor: pointer;
    transition: var(--transition-base);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-challenge:hover {
    background: rgba(0, 87, 183, 0.2);
    border-color: var(--ai-primary);
    transform: rotate(180deg);
}

.verification-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-sm);
    color: var(--text-tertiary);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 87, 183, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 87, 183, 0.1);
}

.info-icon {
    color: var(--ai-primary);
    font-size: var(--font-md);
}

/* Verification Status Styles */
.human-verification-challenge.status-pending {
    border-color: rgba(255, 193, 7, 0.3);
}

.human-verification-challenge.status-correct {
    border-color: rgba(0, 255, 136, 0.5);
    background: rgba(0, 255, 136, 0.05);
}

.human-verification-challenge.status-incorrect {
    border-color: rgba(255, 87, 87, 0.5);
    background: rgba(255, 87, 87, 0.05);
}

/* Verification Input */
#human_check {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 87, 183, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-md);
    font-family: var(--font-primary);
    transition: var(--transition-base);
    margin-top: var(--spacing-sm);
}

#human_check:focus {
    outline: none;
    border-color: var(--ai-primary);
    box-shadow: 0 0 0 3px rgba(0, 87, 183, 0.1);
    background: rgba(0, 0, 0, 0.7);
}

#human_check.correct {
    border-color: var(--ai-success);
    background: rgba(0, 255, 136, 0.1);
}

#human_check.incorrect {
    border-color: rgba(255, 87, 87, 0.7);
    background: rgba(255, 87, 87, 0.1);
}

/* AI Status Display */
.verification-ai-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 87, 183, 0.1);
    border: 1px solid rgba(0, 87, 183, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--ai-primary);
    margin-top: var(--spacing-md);
    animation: pulse 2s infinite;
}

/* Verification Messages */
.verification-message {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    margin-top: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.3s ease-out;
}

.verification-success {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: var(--ai-success);
}

.verification-error {
    background: rgba(255, 87, 87, 0.1);
    border: 1px solid rgba(255, 87, 87, 0.3);
    color: rgba(255, 87, 87, 0.9);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced AI Verification Animation */
.challenge-icon {
    animation: challengeGlow 3s ease-in-out infinite;
}

@keyframes challengeGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 87, 183, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 87, 183, 0.6), 0 0 30px rgba(0, 87, 183, 0.3);
    }
}

/* Print Styles */
@media print {
    .comment-actions,
    .comment-respond-wrapper,
    .ai-moderation-notice,
    .human-verification-challenge {
        display: none !important;
    }
    
    .comments-area {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    
    .ai-comment-item {
        background: white !important;
        border: 1px solid #ddd !important;
    }
}