#postCommentsModal {z-index:1550;background:rgba(25,23,32,.48);padding:24px;}
.post-comments-box {display:flex;flex-direction:column;width:min(680px,100%);max-height:calc(100dvh - 48px);background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 20px 80px #17112240;}
.post-comments-header {position:relative;display:flex;align-items:center;justify-content:center;flex:none;min-height:56px;padding:8px 60px;border-bottom:1px solid var(--border);}
#postCommentsTitle {margin:0;font-size:18px;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.post-comments-close {position:absolute;right:16px;top:8px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--bg3);color:var(--text2);font-size:28px;cursor:pointer;}
.post-comments-close:focus-visible {outline:2px solid var(--accent-primary);outline-offset:2px;}
.post-comments-content {overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-gutter:stable;}
#postCommentsModal .post-card {margin:0;border:0;border-radius:0;box-shadow:none;animation:none;transform:none;}
#postCommentsModal .post-image {max-height:360px;overflow:hidden;}
#postCommentsModal .post-image img {max-height:360px;width:100%;object-fit:contain;}
#postCommentsModal .comments-section {display:flex !important;flex-direction:column;min-height:180px;}
#postCommentsModal .comments-section > .comment-input-wrap {order:2;position:sticky !important;top:auto !important;bottom:0;z-index:5;background:var(--bg2) !important;border-top:1px solid var(--border);border-bottom:0 !important;padding:12px 0 4px;margin-bottom:0 !important;}
.post-comments-placeholder {pointer-events:none;margin-bottom:16px;}
@media(max-width:768px){
 #postCommentsModal {padding:8px;align-items:center;}
 .post-comments-box {max-height:calc(100dvh - 16px);border-radius:16px;}
 .post-comments-header {min-height:56px;padding-inline:52px;}
 #postCommentsTitle {font-size:17px;}
 .post-comments-close {top:8px;right:12px;}
 #postCommentsModal .post-card {padding:14px;}
 #postCommentsModal .comment-input {font-size:16px;}
}

/* Open conversation rows: identity and time first, message, then actions. */
:is(.comments-section, #videoComments) .comment-item {gap:10px;margin-bottom:14px;}
:is(.comments-section, #videoComments) .comment-item > .avatar {width:40px;height:40px;flex:0 0 40px;font-size:14px;}
.comment-content {width:100%;max-width:100%;box-sizing:border-box;padding:0;border-radius:0;background:transparent;}
.comment-content .comment-meta {gap:6px;margin:0 0 3px;flex-wrap:wrap;line-height:1.4;}
.comment-content .comment-author {font-size:14px;font-weight:700;color:var(--text);overflow-wrap:anywhere;}
.comment-content .comment-bubble {padding:0;border-radius:0;background:transparent;font-size:15px;line-height:1.5;overflow-wrap:anywhere;}
body.light .comment-content .comment-bubble {background:transparent;}
:is(.comments-section, #videoComments) .comment-actions {gap:10px;margin:4px 0 0;min-height:30px;flex-wrap:wrap;}
:is(.comments-section, #videoComments) .comment-action-btn {min-height:30px;padding:4px 2px;font-size:12px;font-weight:600;line-height:1.4;gap:5px;}
:where(.comments-section, #videoComments) .comment-action-btn {color:var(--text2);}
:is(.comments-section, #videoComments) .comment-action-btn .r-icon,
:is(.comments-section, #videoComments) .comment-action-btn .r-icon svg,
:is(.comments-section, #videoComments) .comment-action-btn .r-icon img {width:14px;height:14px;}
:is(.comments-section, #videoComments) .comment-time {font-size:12px;font-weight:400;color:var(--text3);opacity:1;margin-left:0;white-space:nowrap;}
.comment-meta .comment-time::before {content:'·';margin-right:6px;}
:is(.comments-section, #videoComments) .replies {margin:6px 0 0;padding:0 0 0 12px;border-left:1px solid var(--border);}
:is(.comments-section, #videoComments) .replies:empty {display:none;}
:is(.comments-section, #videoComments) .reply-item {gap:9px;margin:12px 0 0;}
:is(.comments-section, #videoComments) .reply-item > .avatar {width:30px;height:30px;flex:0 0 30px;font-size:11px;}
:is(.comments-section, #videoComments) .comment-view-more,
:is(.comments-section, #videoComments) .comment-view-replies {width:fit-content;min-height:28px;margin:0 0 4px;padding:4px 2px;gap:6px;font-size:12px;font-weight:600;color:var(--text2);}
:is(.comments-section, #videoComments) .comment-view-more::before,
:is(.comments-section, #videoComments) .comment-view-replies::before {display:none;}
:is(.comments-section, #videoComments) .comment-view-replies:hover,
:is(.comments-section, #videoComments) .comment-view-more:hover {text-decoration:underline;background:transparent;}
:is(.comments-section, #videoComments) .comment-image {margin-top:6px;border-radius:12px;overflow:hidden;}
:is(.comments-section, #videoComments) .comment-action-btn:focus-visible,
:is(.comments-section, #videoComments) .comment-view-replies:focus-visible,
:is(.comments-section, #videoComments) .comment-view-more:focus-visible {outline:2px solid var(--purple);outline-offset:2px;}
#postCommentsModal .comment-input-row {gap:8px;}
#postCommentsModal .comment-input-row > .avatar {width:32px;height:32px;flex:0 0 32px;}
#postCommentsModal .comment-input {background:var(--bg3);padding:9px 12px;border-radius:20px;line-height:1.4;min-height:38px;}

/* Mobile gift comments: artwork stands alone beneath any sender message. */
.comment-gift {display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:6px 0 4px 12px;}
.comment-gift img {display:block;width:88px;height:88px;object-fit:contain;}
.comment-gift-fallback {font-size:54px;line-height:88px;}
.comment-gift-caption {font-size:13px;font-weight:500;line-height:1.4;color:var(--text2);overflow-wrap:anywhere;}

/* Shared post/video composer; toolbar stays below the expanding text field. */
:is(.comments-section, #videoComments) .comment-composer-row {gap:10px;align-items:flex-start;}
:is(.comments-section, #videoComments) .comment-composer-row > .avatar {display:flex;width:34px;height:34px;flex:0 0 34px;margin-top:5px;}
.comment-compose-box {flex:1;min-width:0;padding:4px 6px 6px;border:1px solid transparent;border-radius:18px;background:var(--bg3);}
.comment-compose-box:focus-within {border-color:var(--purple);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.08);}
:is(.comments-section, #videoComments) .comment-compose-box .comment-input {display:block;width:100%;min-height:42px;max-height:128px;overflow-y:auto;padding:9px 8px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font-size:15px;line-height:1.5;resize:none;}
.comment-compose-tools {display:flex;align-items:center;gap:8px;min-height:34px;}
:is(.comments-section, #videoComments) .comment-compose-tools .comment-photo-btn {display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--text2);}
:is(.comments-section, #videoComments) .comment-compose-tools .comment-photo-btn:hover {background:var(--bg4);color:var(--purple);}
.comment-compose-hint {font-size:11px;color:var(--text3);}
:is(.comments-section, #videoComments) .comment-compose-tools .btn-send {display:grid;place-items:center;flex:none;margin-left:auto;width:34px;height:34px;min-height:34px;padding:7px;border-radius:10px;}
.comment-compose-tools svg {display:block;width:20px;height:20px;}
:is(.comments-section, #videoComments) .comment-compose-tools .reply-cancel-btn {width:auto;height:34px;padding:4px 8px;font:inherit;font-size:12px;color:var(--text2);}
.comment-compose-tools button:focus-visible {outline:2px solid var(--purple);outline-offset:2px;}
:is(.comments-section, #videoComments) .comment-input-preview {margin-left:44px;}
.comment-input-preview .image-preview {max-height:160px;overflow:hidden;}
.comment-input-preview .image-preview img {max-height:160px;object-fit:contain;}
.comment-gift {margin-left:0;}
@media(max-width:520px){
 :is(.comments-section, #videoComments) .comment-item {gap:10px;}
 :is(.comments-section, #videoComments) .comment-item > .avatar {width:34px;height:34px;flex-basis:34px;}
 :is(.comments-section, #videoComments) .comment-compose-box .comment-input {font-size:16px;}
 .comment-compose-hint {display:none;}
 :is(.comments-section, #videoComments) .reply-input-wrap .comment-composer-row > .avatar {display:none;}
 :is(.comments-section, #videoComments) .reply-input-wrap .comment-input-preview {margin-left:0;}
}

/* Compact rows keep comfortable controls on touch screens. */
@media(pointer:coarse){
 :is(.comments-section, #videoComments) :is(.comment-action-btn,.comment-view-more,.comment-view-replies){min-height:44px;}
 :is(.comments-section, #videoComments) .comment-compose-tools :is(.comment-photo-btn,.btn-send,.reply-cancel-btn){min-width:44px;min-height:44px;}
 :is(.comments-section, #videoComments) .comment-compose-box .comment-input{font-size:16px;}
}
@media(max-height:480px){
 #postCommentsModal{padding:8px;}
 .post-comments-box{max-height:calc(100dvh - 16px);}
 .post-comments-content{scroll-padding-block:8px;}
 #postCommentsModal .comments-section>.comment-input-wrap{position:static!important;}
}
/* Invisible pickers must not widen the scrolling comments sheet. */
#postCommentsModal .reaction-picker:not(.visible){display:none;}