/**
 * Anime Comments - Frontend CSS
 *
 * Manga/anime themed styling for the comment system
 * Designed to integrate with a theme that uses a .dark-mode class on the body.
 */

/* --- Plugin Specific Variables & Light Mode Defaults --- */
.anime-comments-container {
    --ac-plugin-primary-color: #5E35B1; /* Your plugin's main purple */
    --ac-plugin-secondary-color: #FF4081; /* Your plugin's pink */
    
    /* Spoiler colors - defaults to light mode */
    --ac-spoiler-bg: #333333;
    --ac-spoiler-text-hidden: transparent;
    --ac-spoiler-bg-visible: rgba(0, 0, 0, 0.1);
    --ac-spoiler-text-visible: inherit; /* Will inherit from --ac-text-primary */

    /* Theming variables - default to light theme values */
    --ac-bg-main: #FFFFFF; /* Main background of comment items */
    --ac-bg-container: #F9F9F9; /* Background of the whole comment section container */
    --ac-bg-alt: #F5F5F5; /* Alternate backgrounds like input fields, reply items */
    --ac-text-primary: #212121; /* Main text color */
    --ac-text-secondary: #757575; /* Secondary text like timestamps */
    --ac-border-color: #E0E0E0;
    --ac-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Status message colors - defaults to light mode */
    --ac-success-bg: #E8F5E9;
    --ac-success-text: #388E3C;
    --ac-success-border: #4CAF50;
    --ac-error-bg: #FFEBEE;
    --ac-error-text: #D32F2F;
    --ac-error-border: #F44336;
    --ac-info-bg: #E1F5FE; /* For active reaction, etc. */
    --ac-info-border: #2196F3;
    --ac-warning-bg: #FFF8E1; /* For moderation queue items */
    --ac-warning-border: #FFC107;
    --ac-warning-text: #FFA000; /* Text for moderation items if needed */
}

/* --- Dark Mode Overrides when theme's .dark-mode is active on body --- */
/* This targets the .anime-comments-container when its ancestor body has .dark-mode */
body.dark-mode .anime-comments-container {
    /* Theming variables - overridden for dark mode */
    --ac-bg-main: var(--mv-dark-background-alt, #2d2d2d);
    --ac-bg-container: var(--mv-dark-background, #1e1e1e);
    --ac-bg-alt: var(--mv-dark-border-light, #3c3c3c); /* Using theme's border light as alt bg */
    --ac-text-primary: var(--mv-dark-text, #e0e0e0);
    --ac-text-secondary: var(--mv-dark-text-light, #b0b0b0);
    --ac-border-color: var(--mv-dark-border, #4a4a4a);
    --ac-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* Spoiler colors - overridden for dark mode */
    --ac-spoiler-bg: #cacaca; /* Lighter background for spoiler text */
    --ac-spoiler-text-hidden: transparent;
    --ac-spoiler-bg-visible: rgba(255, 255, 255, 0.1);
    --ac-spoiler-text-visible: var(--mv-dark-background-alt, #2d2d2d); /* Dark text on light spoiler */
    
    /* Status message colors - overridden for dark mode */
    --ac-success-bg: #1c3d1f;
    --ac-success-text: #81c784;
    /* --ac-success-border: #4CAF50; (can remain same or use theme's dark success) */
    --ac-error-bg: #4d1a1f;
    --ac-error-text: #ef9a9a;
    /* --ac-error-border: #F44336; */
    --ac-info-bg: #1a3d50;
    /* --ac-info-border: #2196F3; */
    --ac-warning-bg: var(--mv-dark-background-alt, #4d3f1a); /* Match general dark alt */
    --ac-warning-border: var(--mv-dark-accent, #FFC107); /* Use theme accent for warning border */
    --ac-warning-text: var(--mv-dark-text, #e0e0e0);
}


/* Main Container */
.anime-comments-container {
    max-width: 100%;
    margin: 2rem 0;
    font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--ac-bg-container);
    color: var(--ac-text-primary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--ac-border-color);
}

/* Hidden state for initial load */
.anime-comments-container.comments-hidden {
    display: none;
}

/* Show Comments Button */
.anime-comments-show-btn {
    display: block;
    margin: 2rem auto;
    padding: 0.8rem 1.5rem;
    background-color: var(--ac-plugin-primary-color);
    color: #7c1ba6;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-align: center;
    transform: scale(1);
    letter-spacing: 1px;
}

.anime-comments-show-btn:hover {
    background-color: color-mix(in srgb, var(--ac-plugin-primary-color) 85%, black);
    transform: scale(1.05);
}

/* Comments Title */
.anime-comments-title {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ac-plugin-primary-color);
    color: var(--ac-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.anime-comments-title span {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--ac-plugin-primary-color);
    color: white;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* Comments List */
.anime-comments-list {
    margin-bottom: 2rem;
}

/* Comment Item */
.anime-comments-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--ac-bg-main);
    border-radius: 8px;
    box-shadow: var(--ac-shadow);
    border: 1px solid var(--ac-border-color);
    transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; /* Added transitions */
    animation: fadeIn 0.5s ease-out;
}

.anime-comments-item:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ac-shadow) 150%, transparent);
}

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

/* Comment Header */
.anime-comments-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.anime-comments-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 1rem;
    border: 2px solid var(--ac-bg-alt);
}

.anime-comments-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anime-comments-username {
    font-weight: bold;
    margin-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    color: var(--ac-text-primary); /* Fallback, inline style takes precedence */
}

.anime-comments-achievements {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.5rem;
}

.anime-comments-achievement {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dark-mode .anime-comments-achievement { /* Slightly adjust shadow for dark mode */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}


.anime-comments-achievement img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anime-comments-timestamp {
    font-size: 0.8rem;
    color: var(--ac-text-secondary);
    margin-left: auto;
}

/* Comment Content */
.anime-comments-content {
    margin-bottom: 1rem;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: break-word;
    color: var(--ac-text-primary);
}

.anime-comments-content strong,
.anime-comments-content b {
    font-weight: 700;
}

.anime-comments-content em,
.anime-comments-content i {
    font-style: italic;
}

/* Spoiler */
.anime-comments-content .spoiler {
    background-color: var(--ac-spoiler-bg);
    color: var(--ac-spoiler-text-hidden);
    padding: 0 0.25rem;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.anime-comments-content .spoiler::after {
    content: 'SPOILER';
    font-size: 0.7rem;
    margin-left: 0.25rem;
    vertical-align: text-top;
    color: var(--ac-bg-main); /* Text color on the spoiler overlay */
}

.anime-comments-content .spoiler.visible {
    background-color: var(--ac-spoiler-bg-visible);
    color: var(--ac-spoiler-text-visible);
}

.anime-comments-content .spoiler.visible::after {
    content: '';
}

/* Tenor GIFs */
.anime-comments-tenor-gif {
    max-width: 100%;
    margin: 0.5rem 0;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    border: 1px solid var(--ac-border-color); /* Add a border for GIFs */
}

.anime-comments-tenor-gif::before {
    content: 'Click to load GIF';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.dark-mode .anime-comments-tenor-gif::before {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--ac-text-primary);
}


.anime-comments-tenor-gif:not(.loaded):hover::before {
    opacity: 1;
}

.anime-comments-tenor-gif img {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* Match container */
    display: block; /* Prevents bottom space */
}

.anime-comments-tenor-gif.loaded img {
    animation: fadeIn 0.3s ease-out;
}

/* Comment Actions */
.anime-comments-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Reactions Section */
.anime-comments-reactions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.anime-comments-reaction {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: var(--ac-bg-alt);
    border: 1px solid var(--ac-border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Softer shadow */
}

.anime-comments-reaction img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 0.3rem;
}

.anime-comments-reaction-count {
    font-weight: 600;
    margin-left: 0.3rem;
    color: var(--ac-text-primary);
}

.anime-comments-reaction:hover {
    background-color: var(--ac-plugin-primary-color);
    border-color: var(--ac-plugin-primary-color);
}
.anime-comments-reaction:hover .anime-comments-reaction-count {
    color: white;
}
.anime-comments-reaction:hover img {
    filter: brightness(0) invert(1);
}

.anime-comments-reaction.active {
    background-color: var(--ac-info-bg);
    border-color: var(--ac-info-border);
}
.anime-comments-reaction.active .anime-comments-reaction-count {
    color: var(--ac-plugin-primary-color); /* Or a color that contrasts with --ac-info-bg */
}
.dark-mode .anime-comments-reaction.active .anime-comments-reaction-count {
    color: var(--mv-dark-primary, #bb86fc); /* Use theme's dark primary for active count */
}
.anime-comments-reaction.active img {
    filter: none;
}


/* Reply and Report Buttons */
.anime-comments-reply-btn,
.anime-comments-report-btn {
    padding: 0.25rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ac-text-secondary);
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.anime-comments-reply-btn:hover {
    color: var(--ac-plugin-primary-color);
}

.anime-comments-report-btn:hover {
    color: var(--ac-error-border); /* Using the border color from theme vars */
}

.anime-comments-reply-btn::before { content: '↩'; margin-right: 0.3rem; font-size: 1.1rem; }
.anime-comments-report-btn::before { content: '⚠️'; margin-right: 0.3rem; font-size: 0.9rem; }

/* Replies Section */
.anime-comments-replies {
    margin-top: 1rem;
    margin-left: 2rem;
    padding-left: 1rem;
    border-left: 2px solid var(--ac-border-color); /* Themed border */
}

.anime-comments-reply-item {
    margin-bottom: 1rem;
    padding: 0.8rem;
    background-color: var(--ac-bg-alt);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ac-border-color);
    animation: fadeIn 0.5s ease-out;
}

.anime-comments-load-replies {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--ac-bg-alt);
    border: 1px solid var(--ac-border-color);
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--ac-text-primary);
}

.anime-comments-load-replies:hover {
    background-color: var(--ac-border-color);
}

.anime-comments-reply-count {
    margin-left: 0.5rem;
    color: var(--ac-text-primary);
}

/* Comment Form */
.anime-comments-form-wrapper {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--ac-bg-main);
    border-radius: 8px;
    box-shadow: var(--ac-shadow);
    border: 1px solid var(--ac-border-color);
}

.anime-comments-form {
    position: relative;
}

.anime-comments-form h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--ac-text-primary);
    font-size: 1.2rem;
    font-weight: 700;
}

.anime-comments-textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    background-color: var(--ac-bg-alt);
    border: 1px solid var(--ac-border-color);
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.3s ease;
    color: var(--ac-text-primary);
}
.anime-comments-textarea::placeholder {
    color: var(--ac-text-secondary);
}

.anime-comments-textarea:focus {
    border-color: var(--ac-plugin-primary-color);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac-plugin-primary-color) 20%, transparent);
}

/* Formatting Buttons */
.anime-comments-formatting-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.anime-comments-formatting-buttons button {
    padding: 0.4rem 0.7rem;
    background-color: var(--ac-bg-alt);
    border: 1px solid var(--ac-border-color);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    color: var(--ac-text-primary);
}

.anime-comments-formatting-buttons button:hover {
    background-color: var(--ac-border-color);
}
.anime-comments-formatting-buttons button[data-format="bold"] { font-weight: 900; }
.anime-comments-formatting-buttons button[data-format="italic"] { font-style: italic; }
.anime-comments-formatting-buttons button[data-format="spoiler"] { text-decoration: line-through; }


/* Guest Fields */
.anime-comments-guest-fields {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.anime-comments-guest-fields input {
    flex: 1;
    padding: 0.8rem;
    background-color: var(--ac-bg-alt);
    border: 1px solid var(--ac-border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    color: var(--ac-text-primary);
}
.anime-comments-guest-fields input::placeholder {
    color: var(--ac-text-secondary);
}
.anime-comments-guest-fields input:focus {
    border-color: var(--ac-plugin-primary-color);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac-plugin-primary-color) 20%, transparent);
}

/* Form Buttons */
.anime-comments-form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.anime-comments-submit {
    padding: 0.8rem 1.5rem;
    background-color: var(--ac-plugin-primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.anime-comments-submit:hover {
    background-color: color-mix(in srgb, var(--ac-plugin-primary-color) 85%, black);
    transform: scale(1.05);
}

.anime-comments-gif-btn {
    padding: 0.8rem 1.2rem;
    background-color: var(--ac-plugin-secondary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}
.anime-comments-gif-btn::before { content: '🖼️'; margin-right: 0.5rem; }
.anime-comments-gif-btn:hover {
    background-color: color-mix(in srgb, var(--ac-plugin-secondary-color) 85%, black);
}

.anime-comments-cancel-reply {
    padding: 0.8rem 1.2rem;
    background-color: var(--ac-text-secondary);
    color: var(--ac-bg-main);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    margin-right: 0.5rem;
    transition: all 0.3s ease;
}
.anime-comments-cancel-reply:hover {
    background-color: color-mix(in srgb, var(--ac-text-secondary) 85%, black);
}


/* GIF Search */
.anime-comments-gif-search {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--ac-bg-alt);
    border-radius: 8px;
    animation: slideDown 0.3s ease-out;
    border: 1px solid var(--ac-border-color);
}

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

.anime-comments-gif-search-header {
    display: flex;
    margin-bottom: 1rem;
}

.anime-comments-gif-search-input {
    flex: 1;
    padding: 0.8rem;
    background-color: var(--ac-bg-main);
    border: 1px solid var(--ac-border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    color: var(--ac-text-primary);
}
.anime-comments-gif-search-input::placeholder {
    color: var(--ac-text-secondary);
}
.anime-comments-gif-search-input:focus {
    border-color: var(--ac-plugin-primary-color);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac-plugin-primary-color) 20%, transparent);
}

.anime-comments-gif-search-results {
    min-height: 100px;
    position: relative;
}

.anime-comments-gif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Smaller min for more gifs */
    gap: 0.5rem;
}

.anime-comments-gif-result {
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid var(--ac-border-color);
}

.anime-comments-gif-result img {
    width: 100%;
    height: auto;
    display: block;
}

.anime-comments-gif-result:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-color: var(--ac-plugin-primary-color);
}

/* Loader */
.anime-comments-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: color-mix(in srgb, var(--ac-bg-main) 80%, transparent);
    z-index: 10;
}

.anime-comments-loader img {
    width: 40px;
    height: 40px;
}

/* Load More Button */
.anime-comments-load-more {
    display: block;
    margin: 1rem auto;
    padding: 0.8rem 1.5rem;
    background-color: var(--ac-plugin-primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.anime-comments-load-more:hover {
    background-color: color-mix(in srgb, var(--ac-plugin-primary-color) 85%, black);
}

/* Error and Success Messages */
.anime-comments-error {
    padding: 0.8rem;
    margin: 1rem 0;
    background-color: var(--ac-error-bg);
    border-left: 4px solid var(--ac-error-border);
    color: var(--ac-error-text);
    border-radius: 0 4px 4px 0;
    animation: fadeIn 0.3s ease-out;
}

.anime-comments-success {
    padding: 0.8rem;
    margin: 1rem 0;
    background-color: var(--ac-success-bg);
    border-left: 4px solid var(--ac-success-border);
    color: var(--ac-success-text);
    border-radius: 0 4px 4px 0;
    animation: fadeIn 0.3s ease-out;
}

/* Modal for Report Form */
.anime-comments-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
    z-index: 10000; /* High z-index */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s linear;
}

.anime-comments-modal.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s linear;
}

.anime-comments-modal-content {
    width: 90%;
    max-width: 500px;
    padding: 2rem;
    background-color: #dedede;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.3s ease;
}

.anime-comments-modal.show .anime-comments-modal-content {
    transform: scale(1) translateY(0);
}

.anime-comments-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ac-text-secondary);
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0.25rem;
}

.anime-comments-modal-close:hover {
    color: var(--ac-error-border);
    transform: scale(1.1);
}

/* Report Form */
.anime-comments-report-form h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--ac-text-primary);
    font-size: 1.2rem;
    font-weight: 700;
}

.anime-comments-report-reason,
.anime-comments-report-details {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--ac-bg-alt);
    border: 1px solid black;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    color: var(--ac-text-primary);
}
.anime-comments-report-reason::placeholder,
.anime-comments-report-details::placeholder {
    color: var(--ac-text-secondary);
}

.anime-comments-report-reason:focus,
.anime-comments-report-details:focus {
    border-color: var(--ac-plugin-primary-color);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac-plugin-primary-color) 20%, transparent);
}

.anime-comments-report-submit {
    display: block;
    width: 100%;
    padding: 0.8rem;
    background-color: var(--ac-plugin-primary-color);
    color: #323232;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.anime-comments-report-submit:hover {
    background-color: color-mix(in srgb, var(--ac-plugin-primary-color) 85%, black);
}

/* Responsive Design */
@media (max-width: 768px) {
    .anime-comments-container {
        padding: 1rem;
    }
    .anime-comments-header {
        flex-wrap: wrap;
    }
    .anime-comments-timestamp {
        margin-left: 0;
        width: 100%;
        margin-top: 0.5rem;
        text-align: right;
    }
    .anime-comments-guest-fields {
        flex-direction: column;
        gap: 0.5rem;
    }
    .anime-comments-form-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    .anime-comments-submit,
    .anime-comments-gif-btn,
    .anime-comments-cancel-reply {
        width: 100%;
    }
    .anime-comments-gif-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Moderation Queue (if displayed on frontend for moderators) */
.anime-comments-moderation-queue {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--ac-bg-main);
    border-radius: 8px;
    box-shadow: var(--ac-shadow);
    border: 1px solid var(--ac-border-color);
}

.anime-comments-moderation-title {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--ac-text-primary);
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.anime-comments-moderation-title span {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--ac-warning-border);
    color: var(--ac-bg-main); /* Text to contrast with warning border */
}
body.dark-mode .anime-comments-moderation-title span {
    color: var(--mv-dark-background, #1e1e1e); /* Ensure contrast on dark mode */
}


.anime-comments-moderation-item {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--ac-warning-bg);
    border-left: 4px solid var(--ac-warning-border);
    border-radius: 0 8px 8px 0;
    color: var(--ac-warning-text);
}
.anime-comments-moderation-item .anime-comments-username,
.anime-comments-moderation-item .anime-comments-content,
.anime-comments-moderation-item .anime-comments-moderation-meta {
    color: var(--ac-warning-text);
}
.anime-comments-moderation-item .anime-comments-timestamp,
.anime-comments-moderation-item .anime-comments-moderation-meta small {
    color: color-mix(in srgb, var(--ac-warning-text) 70%, var(--ac-warning-bg));
}

.anime-comments-moderation-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.anime-comments-approve-btn,
.anime-comments-reject-btn,
.anime-comments-delete-btn {
    padding: 0.5rem 1rem;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.anime-comments-approve-btn { background-color: var(--ac-success-border); }
.anime-comments-reject-btn { background-color: var(--ac-error-border); }
.anime-comments-delete-btn { background-color: var(--ac-text-secondary); }

.anime-comments-approve-btn:hover { background-color: color-mix(in srgb, var(--ac-success-border) 85%, black); }
.anime-comments-reject-btn:hover { background-color: color-mix(in srgb, var(--ac-error-border) 85%, black); }
.anime-comments-delete-btn:hover { background-color: color-mix(in srgb, var(--ac-text-secondary) 85%, black); }

/* No comments message */
.anime-comments-no-comments {
    padding: 2rem;
    text-align: center;
    background-color: var(--ac-bg-alt);
    border-radius: 8px;
    font-size: 1.1rem;
    color: var(--ac-text-secondary);
    border: 1px dashed var(--ac-border-color);
}


/* ... (existing styles) ... */

/* Auth Links */
.anime-comments-auth-links {
    text-align: right;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--ac-text-secondary);
}
.anime-comments-auth-links a {
    color: var(--ac-plugin-primary-color);
    text-decoration: none;
    margin: 0 0.25rem;
}
.anime-comments-auth-links a:hover {
    text-decoration: underline;
}
.anime-comments-auth-links .logged-in-as {
    margin-right: 0.5rem;
}
.anime-comments-auth-links .logged-in-as strong {
    color: var(--ac-text-primary);
}


/* Modal General (used for report and auth) */
.anime-comments-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
    z-index: 10000; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s linear;
    padding: 1rem; /* Padding for smaller screens */
}

.anime-comments-modal.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s linear;
}

.anime-comments-modal-content {
    width: 90%;
    max-width: 450px; /* Slightly smaller for auth forms */
    padding: 1.5rem 2rem; /* Adjust padding */
    background-color: #e5e5e5; /* Use themed background */
    color: var(--ac-text-primary); /* Use themed text color */
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.anime-comments-modal.show .anime-comments-modal-content {
    transform: scale(1) translateY(0);
}

.anime-comments-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.8rem; /* Larger close button */
    font-weight: bold;
    cursor: pointer;
    color: var(--ac-text-secondary);
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
}

.anime-comments-modal-close:hover {
    color: var(--ac-error-border);
    transform: rotate(90deg);
}

/* Auth Form Specifics (inside modal) */
.anime-comments-auth-form h3 {
    margin-top: 0;
    margin-bottom: 1.5rem; /* More space */
    color: var(--ac-text-primary);
    font-size: 1.4rem; /* Slightly larger title */
    font-weight: 700;
    text-align: center;
}
.anime-comments-auth-form .form-field {
    margin-bottom: 1rem;
}
.anime-comments-auth-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ac-text-secondary);
}
.anime-comments-auth-form input[type="text"],
.anime-comments-auth-form input[type="email"],
.anime-comments-auth-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem; /* Consistent padding */
    background-color: var(--ac-bg-alt);
    border: 1px solid #727272;
    border-radius: 6px; /* Slightly softer radius */
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    color: var(--ac-text-primary);
    box-sizing: border-box; /* Important for width 100% */
}
.anime-comments-auth-form input::placeholder {
    color: var(--ac-text-secondary);
    opacity: 0.7;
}
.anime-comments-auth-form input:focus {
    border-color: var(--ac-plugin-primary-color);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-plugin-primary-color) 25%, transparent);
}
.anime-comments-auth-form input.invalid {
    border-color: var(--ac-error-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-error-border) 25%, transparent);
}

.g-recaptcha-container {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}

.anime-comments-auth-submit {
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem; /* Larger button */
    background-color: var(--ac-plugin-primary-color);
    color: white; /* Ensure contrast */
    border: 1px solid #727272;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.5rem; /* Space above button */
}
.anime-comments-auth-submit:hover {
    background-color: color-mix(in srgb, var(--ac-plugin-primary-color) 85%, black);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.anime-comments-auth-submit:disabled {
    background-color: var(--ac-text-secondary);
    cursor: not-allowed;
}

.anime-comments-auth-form .auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--ac-text-secondary);
}
.anime-comments-auth-form .auth-switch a {
    color: var(--ac-plugin-primary-color);
    font-weight: 600;
}


/* Report Form (re-styling to match auth form for consistency if desired) */
.anime-comments-report-form h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--ac-text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}

.anime-comments-report-reason,
.anime-comments-report-details {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--ac-bg-alt);
    border: 1px solid var(--ac-border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    color: var(--ac-text-primary);
    box-sizing: border-box;
}
.anime-comments-report-reason:focus,
.anime-comments-report-details:focus {
    border-color: var(--ac-plugin-primary-color);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-plugin-primary-color) 25%, transparent);
}

.anime-comments-report-submit {
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background-color: var(--ac-plugin-primary-color); /* Or a warning color like var(--ac-warning-border) */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.anime-comments-report-submit:hover {
    background-color: color-mix(in srgb, var(--ac-plugin-primary-color) 85%, black); /* Adjust if using warning color */
}
.anime-comments-report-submit:disabled {
    background-color: var(--ac-text-secondary);
}


/* ... (rest of existing styles) ... */