/* RAGHBA social interaction: compact emoji reactions and nested replies */
#socialThread{direction:rtl;text-align:right;color:#f7e7f1;max-width:880px;margin:23px auto 28px;padding:clamp(16px,3vw,28px);background:linear-gradient(140deg,#3e2538,#241924);border:1px solid #825169;border-radius:18px;min-width:0;box-sizing:border-box}
#socialThread *{box-sizing:border-box}
#socialThread .st-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:18px;border-bottom:1px solid #69445c}
#socialThread .st-title{font-size:21px;font-weight:800}
#socialThread .st-total{background:#643650;border:1px solid #9a607f;border-radius:20px;padding:5px 11px;color:#ffd7ea;font-size:12px}
#socialThread .st-post-panel{margin:16px 0 5px;padding:13px;border-radius:13px;background:#251827;border:1px solid #65435a}
#socialThread .st-panel-subtitle{font-size:12px;font-weight:700;color:#dfaec6;margin-bottom:9px}
#socialThread .st-reaction-bar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:8px 0}
#socialThread .st-reaction-label{font-size:12px;color:#f2cadf;margin-inline-end:9px}
#socialThread .st-reaction{display:inline-flex;justify-content:center;align-items:center;gap:6px;background:#291d2b;border:1px solid #76556a;min-width:38px;min-height:34px;padding:5px 9px;border-radius:22px;cursor:pointer;font-size:17px;transition:background .16s,border-color .16s,transform .16s;line-height:1}
#socialThread .st-reaction:hover{background:#59314a;transform:translateY(-1px)}
#socialThread .st-reaction.active{background:#753350;border-color:#f69abf;box-shadow:0 0 0 1px #df79ab33}
#socialThread .st-count{font-size:11px;color:#fff3fa;font-weight:700}
#socialThread .st-status{min-height:21px;margin:8px 0 10px;font-size:12px;color:#ffbed7}
#socialThread .st-list{display:grid;gap:14px}
#socialThread .st-thread-item{background:#271b29;border:1px solid #624255;border-radius:15px;padding:15px}
#socialThread .st-comment{min-width:0;overflow-wrap:anywhere}
#socialThread .st-comment-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#socialThread .st-avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#a74673,#5b2d4c);color:#fff;font-size:17px;font-weight:bold}
#socialThread .st-author{color:#ffbfd9!important;font-weight:700;font-size:13px;text-decoration:none}
#socialThread .st-author:hover{text-decoration:underline}
#socialThread .st-time{font-size:11px;color:#c3a3b5;margin-inline-start:auto;direction:ltr}
#socialThread .st-text{margin:10px 0 9px;font-size:14px;line-height:1.9;color:#f8ecf4;white-space:pre-wrap;overflow-wrap:anywhere}
#socialThread .st-comment-actions{display:flex;align-items:center;gap:12px;margin-bottom:6px}
#socialThread .st-comment-actions button{border:0;background:transparent;color:#f2b0cd;font:inherit;font-weight:700;font-size:12px;padding:4px 2px;cursor:pointer}
#socialThread .st-comment-actions .st-delete{color:#bd9aa9}
#socialThread .st-comment-actions button:hover{text-decoration:underline}
#socialThread .st-nested{display:grid;gap:12px;border-inline-start:2px solid #a45a83;margin:12px 27px 0 0;padding-inline-start:12px}
#socialThread .st-nested .st-comment{padding:11px;background:#372139;border-radius:11px}
#socialThread .st-empty,#socialThread .st-error{font-size:13px;color:#e4bcd1;text-align:center;padding:24px;border:1px dashed #6c4b5e;border-radius:13px}
#socialThread .st-compose{margin-top:20px;padding-top:17px;border-top:1px solid #6e485f}
#socialThread .st-main-form,#socialThread .st-reply-form{display:grid;gap:10px}
#socialThread .st-form-title{color:#fff;font-weight:800;font-size:14px}
#socialThread .st-textarea{display:block;width:100%;min-height:75px;resize:vertical;background:#19131c;color:#fff;border:1px solid #80556f;border-radius:11px;padding:12px 14px;font:inherit;line-height:1.8;outline:none;direction:rtl}
#socialThread .st-textarea:focus{border-color:#f08db8;box-shadow:0 0 0 2px #ce5f9344}
#socialThread .st-textarea::placeholder{color:#bfa9b8}
#socialThread .st-emoji-bar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px 1px}
#socialThread .st-emoji{background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;padding:4px;font-size:20px;line-height:1.1}
#socialThread .st-emoji:hover{background:#59364b;border-color:#986783}
#socialThread .st-compose-bottom,#socialThread .st-reply-buttons{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#socialThread .st-hint{color:#bfa0b4;font-size:11px}
#socialThread .st-send{background:linear-gradient(105deg,#e7518d,#a92b68);color:#fff;border:1px solid #f482b0;border-radius:10px;cursor:pointer;padding:11px 22px;font-size:13px;font-weight:700}
#socialThread .st-send:hover{filter:brightness(1.13)}
#socialThread .st-send:disabled,#socialThread .st-reaction:disabled{opacity:.55;cursor:wait}
#socialThread .st-reply-form{margin-top:13px;padding:12px;background:#301d2d;border:1px solid #82536e;border-radius:12px}
#socialThread .st-reply-heading{font-size:12px;color:#ffb7d7;font-weight:700}
#socialThread .st-reply-form .st-textarea{min-height:64px}
#socialThread .st-cancel{background:transparent;color:#f8d5e7;border:1px solid #785368;border-radius:9px;padding:9px 14px;cursor:pointer}
#socialThread .st-signin-text{color:#eac8d8;font-size:13px;line-height:1.8}
#socialThread .st-signin-link{display:inline-flex;margin-top:5px;color:#fff;text-decoration:none;background:#983562;border:1px solid #d66c99;padding:10px 17px;border-radius:10px;font-weight:700;font-size:13px}
@media(max-width:640px){
 #socialThread{margin:15px auto 20px;padding:13px;border-radius:14px}
 #socialThread .st-heading .st-title{font-size:18px}
 #socialThread .st-thread-item{padding:11px}
 #socialThread .st-nested{margin-right:12px;padding-inline-start:9px}
 #socialThread .st-reaction{padding:5px 7px;min-height:32px;font-size:16px}
 #socialThread .st-reaction-bar{gap:5px}
 #socialThread .st-emoji{font-size:19px;padding:3px}
 #socialThread .st-text{font-size:13px}
 #socialThread .st-post-panel{padding:10px}
}

/* Post reactions live with post content, not inside the comments section. */
#postReactionMount{direction:rtl;margin:19px 0 14px;min-width:0}
#postReactionMount .st-post-panel{background:#2d1b2c;border:1px solid #705069;border-radius:13px;padding:13px 15px}
#postReactionMount .st-panel-subtitle{font-size:13px;font-weight:700;color:#f6c4da;margin:0 0 9px}
#postReactionMount .st-reaction-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#postReactionMount .st-reaction-label{font-size:12px;color:#e5bfd4;margin-inline-end:8px}
#postReactionMount .st-reaction{display:inline-flex;align-items:center;gap:5px;justify-content:center;background:#2e202e;border:1px solid #85546e;border-radius:22px;min-width:40px;min-height:35px;padding:6px 9px;font-size:18px;cursor:pointer;color:#fff;transition:background .15s}
#postReactionMount .st-reaction.active{background:#853b5c;border-color:#ff9cc8;box-shadow:0 0 0 1px #e77aa744}
#postReactionMount .st-reaction:hover{background:#65334e}
#postReactionMount .st-reaction:disabled{opacity:.55;cursor:wait}
#postReactionMount .st-count{font-size:11px;font-weight:bold}
@media(max-width:600px){#postReactionMount{margin:14px 0}#postReactionMount .st-post-panel{padding:11px}#postReactionMount .st-reaction{min-width:34px;padding:5px 7px;font-size:16px}}

.st-avatar{position:relative;overflow:hidden}.st-avatar>.rb-comment-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}