#comments{--comment-avatar-size:40px;--reply-avatar-size:28px;position:relative;display:flex;flex-direction:column;width:100%;min-width:0;min-height:calc(100dvh - var(--step-14));margin:var(--step-8) 0 0;padding:0 0 calc(var(--step-20) + var(--safe-area-bottom));scroll-margin-top:76px}.container-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--step-3);padding:var(--step-4) 0;border-bottom:var(--border-width) var(--border-style) var(--border-color-default)}.container-header h2{font-size:var(--step-5);font-weight:600;letter-spacing:.02em}.comment-container{margin:0}.comment-status-message{display:flex;align-items:center;justify-content:center;margin:var(--step-3) 0;padding:var(--step-3);background:var(--neutral-200);color:var(--neutral-600);font-size:var(--step-3);text-align:center;text-transform:uppercase}.comment-status-message:empty{display:none}.comment-composer,.reply-composer{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;gap:var(--step-2);width:100%;margin-top:auto;padding:var(--step-4) 0 calc(var(--step-4) + var(--safe-area-bottom));border-top:var(--border-width) var(--border-style) var(--border-color-default);background:var(--body-background)}.reply-composer{display:none;border:0}.reply-composer.active{display:flex}.comment-avatar{flex:0 0 auto;line-height:0}.comment-avatar img{display:block;width:var(--comment-avatar-size);height:var(--comment-avatar-size);border-radius:50%;object-fit:cover}.composer-box{display:flex;flex:1;min-width:0;min-height:calc(var(--comment-avatar-size) + var(--step-1));flex-direction:column;padding:var(--step-2) var(--step-3);border:var(--border-width) var(--border-style) var(--neutral-400);border-radius:var(--step-3)}.composer-box textarea{width:100%;min-height:1.4em;margin:var(--step-1) 0 var(--step-2);line-height:1.4;resize:none;overflow:hidden;outline:0;box-shadow:none}.composer-footer{display:none;align-items:center;justify-content:space-between;font-size:12px;color:var(--neutral-500)}.composer-footer button{display:grid;place-items:center;width:36px;height:36px;margin-bottom:.3rem;border-radius:50%;background:var(--neutral-400);cursor:not-allowed;transition:background .2s ease}.composer-footer button.active{background:#25d366;cursor:pointer}.composer-footer button svg{width:23px;height:23px;fill:var(--neutral-100)}.close-fullscreen{display:none;position:absolute;top:var(--step-3);right:var(--step-3);z-index:2;width:var(--step-11);height:var(--step-11);place-items:center;border-radius:50%;background:var(--neutral-200);color:var(--neutral-800);cursor:pointer}.close-fullscreen svg{width:var(--step-6);height:var(--step-6);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.close-fullscreen:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}html.comment-composer-open,body.comment-composer-open{overflow:hidden;overscroll-behavior:none}body.comment-composer-open::before{content:"";position:fixed;inset:0;z-index:9999;background:color-mix(in srgb,var(--neutral-900) 14%,transparent);backdrop-filter:blur(var(--step-2));-webkit-backdrop-filter:blur(var(--step-2))}.comment-composer.fullscreen-mode,.reply-composer.fullscreen-mode{position:fixed;top:var(--composer-viewport-top,0);right:0;bottom:auto;left:0;z-index:10000;width:100%;height:var(--composer-viewport-height,100dvh);max-height:var(--composer-viewport-height,100dvh);flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--step-12) var(--step-4) max(var(--step-4),var(--safe-area-bottom));border:0;background:var(--neutral-100);background:color-mix(in srgb,var(--neutral-100) 94%,transparent);backdrop-filter:blur(var(--step-1));-webkit-backdrop-filter:blur(var(--step-1));overflow:hidden}.comment-composer.fullscreen-mode .composer-box,.reply-composer.fullscreen-mode .composer-box{flex:1 1 auto;min-height:0}.comment-composer.fullscreen-mode textarea,.reply-composer.fullscreen-mode textarea{flex:1;min-height:0;padding:var(--step-2);font-size:var(--step-4);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.comment-composer.fullscreen-mode .composer-footer,.reply-composer.fullscreen-mode .composer-footer{display:flex;flex:0 0 auto}.comment-composer.fullscreen-mode .close-fullscreen,.reply-composer.fullscreen-mode .close-fullscreen{display:grid}.comment-item{margin:0;border-bottom:var(--border-width) var(--border-style) var(--border-color-default)}.comment-content{position:relative;padding:var(--step-4) 0}.comment-header{display:grid;grid-template-columns:var(--comment-avatar-size) minmax(0,1fr) auto;align-items:center;gap:var(--step-2)}.comment-meta{display:flex;min-width:0;flex-direction:column;line-height:1.3}.comment-author{display:flex;min-width:0;gap:var(--step-1);font:700 var(--step-4)/1.2 var(--font-family-aux)}.comment-author a{overflow-wrap:anywhere}.rank{color:var(--neutral-500);font-size:var(--step-2-5);text-transform:uppercase}.comment-body,.comment-footer{margin-left:calc(var(--comment-avatar-size) + var(--step-2))}.comment-body{margin-top:var(--step-1);overflow-wrap:anywhere}.comment-item .comment-body p{margin:0 0 var(--step-2);letter-spacing:.3px}.comment-actions{display:flex;align-items:center;gap:var(--step-3);margin-top:var(--step-1);color:var(--neutral-600);font-size:var(--step-3-4)}.comment-actions button{display:flex;align-items:center;gap:var(--step-1);cursor:pointer}.comment-like-button{margin-left:auto}.comment-like-button svg,.comment-load-replies-button svg,.comment-hide-replies-button svg{width:var(--step-6);height:var(--step-6)}.liked svg{fill:red}.comment-options{position:relative}.comment-options>button{cursor:pointer}.comment-options>button svg{fill:var(--neutral-800)}.comment-menu{position:absolute;top:100%;right:0;z-index:4;display:flex;width:180px;flex-direction:column;gap:var(--step-2);padding:var(--step-4);border:var(--border-width) var(--border-style) var(--neutral-300);background:var(--neutral-100);box-shadow:0 2px 8px rgb(0 0 0 / .08)}.comment-menu li{display:flex;align-items:center;gap:var(--step-2);cursor:pointer}.replies{margin:var(--step-2) 0 0 calc(var(--comment-avatar-size) + var(--step-2))}.reply{margin:0;padding-left:var(--step-3);border-left:var(--border-width) var(--border-style) var(--neutral-300)}.reply .comment-content{padding:var(--step-3) 0}.reply .comment-header{grid-template-columns:var(--reply-avatar-size) minmax(0,1fr) auto}.reply .comment-avatar img{width:var(--reply-avatar-size);height:var(--reply-avatar-size)}.reply .comment-author{font-size:var(--step-3-4)}.reply .comment-body,.reply .comment-footer{margin-left:calc(var(--reply-avatar-size) + var(--step-2))}.comment-replies-actions{display:flex;align-items:center;margin:var(--step-3) 0 0 calc(var(--comment-avatar-size) + var(--step-2));color:var(--neutral-600);font-size:var(--step-3-4)}.comment-replies-actions::before{content:"";width:24px;height:1px;margin-right:var(--step-2);background:var(--neutral-500)}.comment-load-replies-button,.comment-hide-replies-button{display:flex;align-items:center;gap:var(--step-1);cursor:pointer}.comment-load-replies-button{margin-right:var(--step-3)}.comment-hide-replies-button svg{transform:rotate(180deg)}.select-wrapper{position:relative;display:inline-flex;align-items:center;border:var(--border-width) var(--border-style) var(--neutral-300);border-radius:var(--step-1);background:var(--neutral-200)}.dropdown-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--step-4);padding:var(--step-2) var(--step-3);color:var(--neutral-700);font-size:var(--step-3-4);cursor:pointer}.dropdown-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.select-wrapper .icon{width:var(--step-5);height:var(--step-5);fill:var(--neutral-600);pointer-events:none}.dropdown-menu{position:absolute;top:100%;right:0;z-index:4;display:none;width:220px;min-width:100%;margin-top:var(--step-1);padding:var(--step-1) 0;border:var(--border-width) var(--border-style) var(--neutral-300);border-radius:var(--step-1);background:var(--neutral-100);box-shadow:0 2px 8px rgb(0 0 0 / .1)}.dropdown-menu li{padding:var(--step-2) var(--step-3);cursor:pointer}.dropdown-menu li:hover,.dropdown-menu li.active{background:var(--neutral-200)}.select-wrapper.open .dropdown-menu{display:block}.highlight-comment{background:color-mix(in srgb,#25d366 16%,var(--body-background));animation:fadeHighlight 6s ease-out forwards}@keyframes fadeHighlight{to{background:#fff0}}@media(max-width:405px){.container-header{align-items:flex-start}.select-wrapper,.dropdown-toggle{width:100%}}@media(min-width:700px){#comments{display:grid;min-height:0;padding-bottom:var(--step-8);grid-template-areas:"header" "status" "composer" "comments" "loadmore"}.container-header{grid-area:header}.comment-status-message{grid-area:status}.comment-composer{grid-area:composer}.comment-container{grid-area:comments}.load-more{grid-area:loadmore}.comment-composer,.reply-composer{position:relative;bottom:auto;z-index:auto;margin-top:0;padding:var(--step-4) 0;border-top:0}.composer-footer{display:flex}.close-fullscreen{display:none}}