/* Estilos para caixa de comentários */
.comments-section{margin-top:18px;background:#1e1e1e;border:1px solid rgba(255,255,255,0.04);padding:16px;border-radius:8px}
.comment-form{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
/* Estilo do textarea inspirado em assets/css/auth.css */
.comment-form textarea{
	display:block;
	width:100%;
	flex:1;resize:vertical;min-height:120px;max-height:400px;background:#242424;color:#f1f1f1;border:1px solid #333;padding:12px;border-radius:8px;font-size:14px;line-height:1.4;font-family:inherit
}
.comment-toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.emoji-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:6px 8px;border-radius:6px;cursor:pointer}
.emoji-btn:hover{background:rgba(255,255,255,0.02)}
.emoji-picker{position:absolute;z-index:50;background:#2a2a2a;border:1px solid rgba(255,255,255,0.06);padding:8px;border-radius:8px;display:none;box-shadow:0 8px 20px rgba(0,0,0,0.6);right:0;bottom:calc(100% + 8px);}
.emoji-picker button{background:transparent;border:none;color:#fff;font-size:20px;padding:6px;cursor:pointer;border-radius:6px}
.emoji-picker button:hover{background:rgba(255,255,255,0.03)}
.emoji-picker-grid{display:grid;grid-template-columns:repeat(8,28px);gap:6px}
.comment-input-row textarea{min-height:120px;max-height:400px}
.comment-input-row .btn{white-space:nowrap}
.comment-input-row > div{flex-shrink:0}

@media (max-width: 768px){
	.comment-input-row{flex-direction:column}
	.comment-input-row > div{width:100%}
	.comment-input-row .emoji-btn{order:2}
	.comment-input-row .comment-submit{order:3;width:100%}
}
.comment-form textarea::placeholder{color:rgba(241,241,241,0.5)}
.comment-form .comment-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #111}
.comment-submit{min-width:120px}
.comments-list{display:flex;flex-direction:column;gap:12px}
.comment-item{display:flex;gap:12px;align-items:flex-start;padding:12px;background:#242424;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.comment-item .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.comment-body{flex:1}
.comment-meta{font-size:13px;color:#cfcfcf;margin-bottom:6px}
.comment-message{background:transparent;color:#f1f1f1;white-space:pre-wrap}
.comment-empty{color:#bdbdbd;text-align:center;padding:12px}
.comment-login-note{color:#bdbdbd;text-align:center;padding:8px}

/* Botão primário específico para a seção de comentários, mantendo a identidade visual */
.comments-section .btn-primary{background:#c81616;border-color:#b11111}
.comments-section .btn-primary:hover{background:#b11111;border-color:#971010}

/* Destaque para comentários inativos */
.comment-item.inactive{opacity:0.85;border-color:rgba(200,80,80,0.12);background:linear-gradient(180deg, rgba(36,36,36,0.98), rgba(34,34,34,0.98));}
.comment-item .comment-inactive-banner{background:#3a2b2b;color:#ffdddd;border:1px solid rgba(255,100,100,0.12);padding:6px 8px;border-radius:6px;margin-bottom:8px;font-size:13px}
.comment-item.inactive .comment-message{filter:grayscale(0.02);opacity:0.95}