.comments-container{background:var(--card-bg);border-radius:8px;max-height:35vh;overflow-y:auto;width:100%;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}.comments-container::-webkit-scrollbar{width:6px}.comments-container::-webkit-scrollbar-track{background:transparent}.comments-container::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px;opacity:.5}.comments-container::-webkit-scrollbar-thumb:hover{background:var(--accent);opacity:.8}.comment-edit,.reply-input{display:flex;gap:20px;flex-wrap:wrap}textarea{color:#000!important;resize:none;width:100%!important;border-radius:.7em;border:2px solid transparent;outline:none;padding:10px}textarea:focus{border:2px solid #2196f3;outline:none}.createCommentButton{margin-top:15px;padding:12px 24px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:background-color .3s ease;position:relative}.comment,.comments-list{width:100%}.comment{margin:10px 0;padding:10px;border-bottom:1px solid var(--text-muted)}.reply{margin-left:20px;border-left:2px solid var(--accent);padding-left:10px}.comment-header{display:flex;justify-content:space-between;font-size:.8em;color:var(--text-muted);margin-bottom:5px}.comment-text{margin:10px 0;font-size:1.1em;font-weight:500;color:var(--text-primary);line-height:1.4}.comment-actions{display:flex;gap:10px}.comment.reply{overflow:auto}.comment-actions button{background:none;border:none;color:var(--accent);cursor:pointer}.new-comment,.reply-input{margin:10px 0;width:100%}.new-comment textarea,.reply-input textarea{width:100%;min-height:80px;margin-bottom:10px;padding:8px;border:1px solid var(--text-muted);border-radius:4px;color:var(--text-primary)}.error-message{color:var(--error);margin:10px 0}button.loading{cursor:not-allowed;opacity:.7;display:flex;align-items:center;justify-content:center}.spinner{display:inline-block;width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.comments-container{padding:10px;max-height:20vh}.comment{padding:5px}.reply{margin-left:10px}.new-comment textarea,.reply-input textarea{min-height:60px}.comment-text{font-size:1em}.comment-header{font-size:.75em}}@media (max-width:576px){.comments-container{padding:5px}.comment{padding:3px}.reply{margin-left:5px}.new-comment textarea,.reply-input textarea{min-height:50px}.comment-text{font-size:.95em}.comment-header{font-size:.7em}}