/* ===== COMMENT SECTION ===== */
.ce-v6-comments-section { margin-top: var(--ce-space-lg); }
.ce-v6-comment-form {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ce-space-md);
    
    /* Applying the new slick card style */
    background: var(--ce-glass-bg);
    backdrop-filter: var(--ce-backdrop-blur);
    -webkit-backdrop-filter: var(--ce-backdrop-blur);
    padding: var(--ce-space-md);
    border-radius: var(--ce-radius-xl);
    border: 1px solid var(--ce-glass-border);
    box-shadow: var(--ce-glass-shadow);
    overflow: hidden;
}

/* This is now a simple container for the textarea and actions */
.ce-v6-comment-input-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-sm);
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    transition: none;
}

.ce-v6-comment-input-wrapper:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.ce-v6-comment-form .ce-v6-avatar {
    /* Compact, consistent avatar with image fallback */
    flex-shrink: 0;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    overflow: hidden;
    /* Always show SpongeBud as background fallback */
    background: url('https://pics.bessergrowen.com/meme-spongebud.webp?optimizer=image&format=webp&quality=80&w=80') center/cover no-repeat;
}
.ce-v6-comment-form .ce-v6-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* If the <span> emoji fallback is toggled to block via inline style,
   keep it hidden so our background fallback is used instead */
.ce-v6-comment-form .ce-v6-avatar .ce-v6-avatar-emoji-fallback { display: none !important; }
.ce-v6-comment-form::before {
   display: none; /* Removed pseudo-element */
}
.ce-v6-format-toolbar { 
    display:flex; 
    align-items:center; 
    gap: var(--ce-space-sm); 
    margin-bottom: var(--ce-space-sm); 
    flex-wrap: wrap; 
    padding: 0 var(--ce-space-sm);
}
.ce-v6-format-toolbar .fmt-btn { 
    background: transparent; 
    border: none;
    color: var(--ce-text-secondary); 
    border-radius: var(--ce-radius-sm); 
    padding: var(--ce-space-xs) var(--ce-space-sm); 
    cursor: pointer; 
    transition: var(--ce-transition-fast); 
    font-size: 0.9rem; 
}
.ce-v6-format-toolbar .fmt-btn:hover { 
    background: rgba(0,0,0,0.05); 
    color: var(--ce-text-primary);
}
.ce-v6-format-toolbar .sep { 
    width: 1px; 
    height: 16px; 
    background: rgba(0,0,0,0.1); 
    margin: 0 4px; 
}
.ce-v6-comment-user-info { 
    display: flex; 
    align-items: center; 
    gap: var(--ce-space-sm); 
    margin-bottom: 0; 
}

/* ===== Mobile refinement for compact form ===== */
@media (max-width: 600px) {
    .ce-v6-comment-form {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
        border-radius: var(--ce-radius-lg);
    }
    .ce-v6-comment-user-info { order: 2; gap: 8px; }
    .ce-v6-format-toolbar { order: 3; gap: 6px; margin-bottom: 0; padding: 0; }
}