/* Pixel Battle Social Comments — permanent shared owner for Feed/Profile comment primitives. */
:root{
  --pb-comment-gap:10px;
  --pb-comment-avatar:34px;
  --pb-comment-reply-indent:42px;
  --pb-comment-action-h:32px;
}

.pb-comment-thread,.home-comment-thread,.profile-comment-thread{min-width:0;position:relative}
.pb-comment-thread+.pb-comment-thread,.home-comment-thread+.home-comment-thread,.profile-comment-thread+.profile-comment-thread{border-top:1px solid var(--pb-color-border-subtle,var(--pb-color-border-default))}
.pb-comment-list,.home-comments-list,.profile-comments-list{display:flex;flex-direction:column;gap:2px;min-width:0}
.pb-comment-replies,.home-comment-replies,.profile-comment-replies{margin-left:var(--pb-comment-reply-indent);padding-left:12px;border-left:1px solid var(--pb-color-border-subtle,var(--pb-color-border-default));min-width:0}
.pb-comment-item,.home-comment-item,.profile-comment-item{display:grid;grid-template-columns:var(--pb-comment-avatar) minmax(0,1fr);align-items:start;gap:var(--pb-comment-gap);min-width:0;padding:8px 0}
.pb-comment-item.is-reply,.home-comment-item.is-reply,.profile-comment-item.is-reply{margin-left:0}
.pb-comment-avatar-link,.profile-comment-avatar-link{display:block;width:var(--pb-comment-avatar);height:var(--pb-comment-avatar);border-radius:var(--pb-radius-sm);overflow:hidden;flex:0 0 auto}
.pb-comment-avatar,.home-comment-avatar,.profile-comment-avatar{display:block;width:var(--pb-comment-avatar);height:var(--pb-comment-avatar);object-fit:cover;border:0;border-radius:var(--pb-radius-sm);background:var(--pb-color-surface-2)}
.pb-comment-card,.home-comment-card,.profile-comment-body{min-width:0;padding:0;background:transparent;border:0;box-shadow:none}
.pb-comment-head,.home-comment-head,.profile-comment-head{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
.pb-comment-name,.home-comment-name,.profile-comment-name{min-width:0;max-width:min(46vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pb-color-text-primary);font:700 13px/1.25 var(--pb-font-ui,"Onest",sans-serif);text-decoration:none}
.pb-comment-time,.home-comment-time,.profile-comment-time{margin-left:auto;color:var(--pb-color-text-muted);font:600 10px/1.25 var(--pb-font-ui,"Onest",sans-serif);white-space:nowrap}
.pb-comment-author-badge,.home-comment-author-badge{padding:2px 5px;border-radius:var(--pb-radius-xs);background:var(--pb-color-accent-soft);color:var(--pb-color-accent);font:700 9px/1.2 var(--pb-font-ui,"Onest",sans-serif)}
.pb-comment-mention,.home-comment-mention,.profile-comment-mention{margin-top:2px;color:var(--pb-color-text-muted);font:600 10px/1.35 var(--pb-font-ui,"Onest",sans-serif)}
.pb-comment-mention span,.home-comment-mention span,.profile-comment-mention span{color:var(--pb-color-info,var(--pb-color-accent));font-weight:700}
.pb-comment-text,.home-comment-text,.profile-comment-text{margin-top:3px;color:var(--pb-color-text-primary);font:500 13px/1.5 var(--pb-font-ui,"Onest",sans-serif);overflow-wrap:break-word;word-break:normal;white-space:normal}
.pb-comment-actions,.home-comment-actions,.profile-comment-actions{display:flex;align-items:center;gap:2px;margin-top:5px;min-width:0;flex-wrap:wrap}
.pb-comment-action,.home-comment-like-btn,.home-comment-reply-btn,.home-comment-delete-btn,.profile-comment-action{min-height:var(--pb-comment-action-h);padding:0 7px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:var(--pb-radius-sm);background:transparent;color:var(--pb-color-text-muted);font:600 11px/1 var(--pb-font-ui,"Onest",sans-serif);cursor:pointer;transition:background-color var(--pb-motion-fast,140ms),color var(--pb-motion-fast,140ms),transform var(--pb-motion-fast,140ms)}
.pb-comment-action:hover,.home-comment-like-btn:hover,.home-comment-reply-btn:hover,.home-comment-delete-btn:hover,.profile-comment-action:hover{background:var(--pb-color-surface-hover,var(--pb-color-surface-2));color:var(--pb-color-text-secondary)}
.pb-comment-action:active,.home-comment-like-btn:active,.home-comment-reply-btn:active,.home-comment-delete-btn:active,.profile-comment-action:active{transform:scale(.97)}
.pb-comment-action.is-liked,.home-comment-like-btn.is-liked,.profile-comment-action.is-liked{color:var(--pb-color-danger,#ff667a)}
.pb-comment-action.is-danger,.home-comment-delete-btn,.profile-comment-action.is-delete-action{margin-left:0;color:var(--pb-color-text-muted)}
.pb-comment-action>svg,.home-comment-like-btn>svg,.home-comment-reply-btn>svg,.home-comment-delete-btn>svg,.profile-comment-action>.pb-lucide-inline-icon{width:16px;height:16px;min-width:16px;min-height:16px;flex:0 0 16px;margin-right:0}
.pb-comment-action.is-icon-only,.home-comment-delete-btn,.profile-comment-action.is-delete-action{width:32px;min-width:32px;padding:0;gap:0}
.pb-comment-action.is-danger:hover,.home-comment-delete-btn:hover,.profile-comment-action.is-delete-action:hover,.pb-comment-action.is-danger:focus-visible,.home-comment-delete-btn:focus-visible,.profile-comment-action.is-delete-action:focus-visible{background:color-mix(in srgb,var(--pb-color-danger,#ff667a) 9%,transparent);color:var(--pb-color-danger,#ff667a)}
.pb-comment-action:focus-visible,.home-comment-like-btn:focus-visible,.home-comment-reply-btn:focus-visible,.home-comment-delete-btn:focus-visible,.profile-comment-action:focus-visible{outline:2px solid var(--pb-color-focus,var(--pb-color-accent));outline-offset:1px}

.pb-comment-media,.home-comment-gif,.home-comment-attachment,.profile-comment-gif{display:inline-block;max-width:min(280px,72vw);margin-top:7px;padding:0;border:0;border-radius:var(--pb-radius-md);overflow:hidden;background:transparent;cursor:zoom-in;vertical-align:top}
.pb-comment-media img,.home-comment-gif img,.home-comment-attachment img,.profile-comment-gif img{display:block;max-width:100%;width:auto;height:auto;max-height:260px;object-fit:contain;background:transparent;border:0}

.pb-comment-compose,.home-comment-composer,.profile-comment-compose{display:flex;align-items:flex-end;gap:8px;min-width:0}
.pb-comment-input-wrap,.home-comment-input-wrap{min-width:0;flex:1}
.pb-comment-input,.home-comment-input-wrap textarea,.comment-input{width:100%;min-width:0;min-height:42px;max-height:112px;padding:10px 12px;resize:none;border:1px solid var(--pb-color-border-default);border-radius:var(--pb-radius-md);background:var(--pb-color-surface-2);color:var(--pb-color-text-primary);font:500 13px/1.4 var(--pb-font-ui,"Onest",sans-serif);outline:0;box-shadow:none}
.pb-comment-input:focus,.home-comment-input-wrap textarea:focus,.comment-input:focus{border-color:var(--pb-color-border-strong);box-shadow:0 0 0 2px var(--pb-color-accent-soft)}
.pb-comment-reply-bar,.home-comment-reply-strip,.profile-comment-reply-bar{display:flex;align-items:center;gap:7px;min-height:32px;padding:6px 8px;margin-bottom:6px;border-left:2px solid var(--pb-color-accent);border-radius:0 var(--pb-radius-sm) var(--pb-radius-sm) 0;background:var(--pb-color-accent-soft);color:var(--pb-color-text-secondary);font:600 11px/1.3 var(--pb-font-ui,"Onest",sans-serif)}
.pb-comment-reply-bar[hidden],.home-comment-reply-strip[hidden],.profile-comment-reply-bar[hidden]{display:none}
.pb-comment-reply-clear,.home-comment-reply-strip-x,.profile-comment-reply-clear{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:var(--pb-radius-sm);background:transparent;color:var(--pb-color-text-muted);cursor:pointer}

.pb-comments-empty,.home-comments-empty{padding:30px 12px;text-align:center;color:var(--pb-color-text-muted);font:500 13px/1.5 var(--pb-font-ui,"Onest",sans-serif)}

@media (max-width:599px){
  :root{--pb-comment-avatar:32px;--pb-comment-gap:8px;--pb-comment-reply-indent:26px}
  .pb-comment-name,.home-comment-name,.profile-comment-name{max-width:190px}
  .pb-comment-item,.home-comment-item,.profile-comment-item{padding:7px 0}
  .pb-comment-replies,.home-comment-replies,.profile-comment-replies{padding-left:9px}
  .pb-comment-action,.home-comment-like-btn,.home-comment-reply-btn,.home-comment-delete-btn,.profile-comment-action{min-height:42px;padding:0 7px}
  .pb-comment-action.is-icon-only,.home-comment-delete-btn,.profile-comment-action.is-delete-action{width:42px;min-width:42px;padding:0}
}

@media (min-width:900px){
  :root{--pb-comment-avatar:36px;--pb-comment-reply-indent:46px}
  .pb-comment-text,.home-comment-text,.profile-comment-text{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .pb-comment-action,.home-comment-like-btn,.home-comment-reply-btn,.home-comment-delete-btn,.profile-comment-action{transition:none}
}

/* Shared composer controls */
.profile-comment-gif-button,.profile-comment-image-button,.comment-submit-btn,.home-comment-gif-toggle,.home-comment-attach,.home-comment-send{min-width:40px;height:40px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--pb-color-border-default);border-radius:var(--pb-radius-md);background:var(--pb-color-surface-2);color:var(--pb-color-text-secondary);font:700 10px/1 var(--pb-font-ui,"Onest",sans-serif);cursor:pointer}
.profile-comment-gif-button:hover,.profile-comment-image-button:hover,.home-comment-gif-toggle:hover,.home-comment-attach:hover{background:var(--pb-color-surface-hover,var(--pb-color-surface-3));color:var(--pb-color-text-primary)}
.comment-submit-btn,.home-comment-send{border-color:var(--pb-color-accent-border);background:var(--pb-color-accent);color:var(--pb-color-on-accent,#071006)}
.profile-comment-image-button input,.home-comment-attach input{display:none}
.profile-comment-gif-wordmark,.home-comment-gif-wordmark{font:750 9px/1 var(--pb-font-mono,monospace);letter-spacing:.03em}
.profile-comment-photo-preview,.profile-comment-gif-preview,.home-comment-photo-preview,.home-comment-gif-preview{position:relative;width:min(112px,34vw);margin:7px 0}
.profile-comment-photo-preview img,.profile-comment-gif-preview img,.home-comment-photo-preview img,.home-comment-gif-preview img{display:block;width:100%;max-height:94px;object-fit:cover;border-radius:var(--pb-radius-md);background:var(--pb-color-surface-2)}
.profile-comment-photo-preview button,.profile-comment-gif-preview button,.home-comment-photo-preview button,.home-comment-gif-preview button{position:absolute;right:5px;top:5px;width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:var(--pb-radius-round);background:rgba(7,10,8,.72);color:#fff;cursor:pointer}

/* Feed comment sheet uses the same compact composer grammar as Profile. */
.home-comment-composer{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:end;gap:8px}
.home-comment-me-avatar{width:34px;height:34px;border:0;border-radius:var(--pb-radius-sm);background:var(--pb-color-surface-2)}
.home-comment-composer-main{min-width:0;border:0;border-radius:0;background:transparent;overflow:visible}
.home-comment-input-wrap{padding:0}
.home-comment-input-wrap textarea{min-height:42px;padding:10px 12px;border:1px solid var(--pb-color-border-default);border-radius:var(--pb-radius-md);background:var(--pb-color-surface-2);font:500 13px/1.4 var(--pb-font-ui,"Onest",sans-serif)}
.home-comment-composer-tools{min-height:42px;padding:5px 0 0;gap:5px}
.home-comment-composer-spacer{flex:1}
.home-comment-send span:first-child{display:none}

@media (max-width:599px){
  .profile-comment-gif-button,.profile-comment-image-button,.comment-submit-btn,.home-comment-gif-toggle,.home-comment-attach,.home-comment-send{min-width:38px;height:38px}
  .home-comment-composer{grid-template-columns:30px minmax(0,1fr);gap:7px}
  .home-comment-me-avatar{width:30px;height:30px}
}
.comments-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--pb-color-border-subtle,var(--pb-color-border-default))}
.pb-comment-form,.comment-form{margin-top:10px}

/* Shared GIF picker treatment for Feed and Profile comments. */
.home-comment-gif-sheet,.profile-comment-gif-sheet{background:var(--pb-color-surface-1);border-color:var(--pb-color-border-default);box-shadow:var(--pb-shadow-modal,0 18px 48px rgba(0,0,0,.48))}
.home-comment-gif-head,.profile-comment-gif-picker-head{border-bottom-color:var(--pb-color-border-subtle)}
.home-comment-gif-search-wrap,.profile-comment-gif-search{border-color:var(--pb-color-border-default);background:var(--pb-color-surface-2);color:var(--pb-color-text-muted)}
.home-comment-gif-search-wrap input,.profile-comment-gif-search input{color:var(--pb-color-text-primary);font-family:var(--pb-font-ui,"Onest",sans-serif)}
.home-comment-gif-tabs,.profile-comment-gif-tabs{border-bottom-color:var(--pb-color-border-subtle)}
.home-comment-gif-tab,.profile-comment-gif-tab{border-color:var(--pb-color-border-default);background:var(--pb-color-surface-2);color:var(--pb-color-text-secondary)}
.home-comment-gif-tab.is-active,.profile-comment-gif-tab.is-active{border-color:var(--pb-color-accent-border);background:var(--pb-color-accent-soft);color:var(--pb-color-accent)}
.home-comment-gif-card,.profile-comment-gif-card{background:var(--pb-color-surface-2);border-radius:var(--pb-radius-md)}
.home-comment-gif-close,.profile-comment-gif-close{border-color:var(--pb-color-border-default);background:var(--pb-color-surface-2);color:var(--pb-color-text-secondary)}