.social-reaction-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  line-height:1;
  flex:0 0 auto;
}
.social-btn,
.social-btn *,
.social-reaction-option,
.social-reaction-option *,
.social-reaction-add,
.social-reaction-add *,
.social-send,
.social-send *,
.social-feed-comment-send,
.social-feed-comment-send *,
.social-modal-close,
.social-modal-close *,
.social-count-link,
.social-count-link *{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.social-reaction-option,
.social-reaction-add,
.social-send,
.social-feed-comment-send,
.social-modal-close,
.social-count-link{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.social-btn,
.social-reaction-option,
.social-reaction-add,
.social-send,
.social-feed-comment-send,
.social-modal-close,
.social-count-link{
  touch-action:manipulation;
}
.social-reaction-svg{
  width:100%;
  height:100%;
  display:block;
}
.social-reaction-pill .social-reaction-icon{
  width:16px;
  height:16px;
}

.social-reaction-option .social-reaction-icon,
.social-reaction-add .social-reaction-icon{
  width:28px;
  height:28px;
}

.social-btn-icon .social-reaction-icon{
  width:22px;
  height:22px;
}

.sr-stroke{
  fill:none;
  stroke:#1b1f23;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sr-eye{ fill:#1b1f23; }
.sr-mouth{ fill:#7a1d1d; }
.sr-mouth-dark{ fill:#1b1f23; }

.sr-fill-like{ fill:#2d88ff; }
.sr-accent-like{ fill:#9ed0ff; }

.sr-fill-love{ fill:#ff4d6d; }
.sr-accent-love{ fill:#ff9db1; }

.sr-fill-haha{ fill:#ffcf33; }
.sr-accent-haha{ fill:#68b7ff; }

.sr-fill-wow{ fill:#ffd54d; }
.sr-accent-wow{ fill:#fff0a6; }

.sr-fill-sad{ fill:#ffd54d; }
.sr-accent-sad{ fill:#68b7ff; }

.sr-fill-fire-outer{ fill:#ff7a00; }
.sr-fill-fire-inner{ fill:#ffd84d; }

.sr-fill-clap{ fill:#ffd7a8; }
.sr-accent-clap-line{ stroke:#ffd54d; }

.sr-bounce{
  transform-origin:50% 50%;
  animation:sr-bounce 1.6s ease-in-out infinite;
}

.sr-heart-beat{
  transform-origin:50% 55%;
  animation:sr-heart-beat 1.2s ease-in-out infinite;
}

.sr-fire-flicker{
  transform-origin:50% 90%;
  animation:sr-fire-flicker 1s ease-in-out infinite;
}

.sr-clap{
  transform-origin:50% 50%;
  animation:sr-clap 1.1s ease-in-out infinite;
}

.sr-spark{
  transform-origin:50% 50%;
  animation:sr-spark 1.8s ease-in-out infinite;
}

.sr-spark-2{ animation-delay:.2s; }
.sr-spark-3{ animation-delay:.4s; }

.sr-tear-drop{
  animation:sr-tear 1.5s ease-in-out infinite;
}

.sr-tear-right{ animation-delay:.2s; }
.sr-sad-tear{ animation-delay:.1s; }

@keyframes sr-bounce{
  0%,100%{ transform:translateY(0) scale(1); }
  25%{ transform:translateY(-2px) scale(1.04); }
  50%{ transform:translateY(0) scale(1); }
  75%{ transform:translateY(-1px) scale(1.02); }
}

@keyframes sr-heart-beat{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.08); }
  28%{ transform:scale(.98); }
  42%{ transform:scale(1.14); }
  70%{ transform:scale(1); }
}

@keyframes sr-fire-flicker{
  0%,100%{ transform:scaleY(1) scaleX(1); }
  25%{ transform:scaleY(1.06) scaleX(.98) translateY(-1px); }
  50%{ transform:scaleY(.97) scaleX(1.03); }
  75%{ transform:scaleY(1.08) scaleX(.96) translateY(-2px); }
}

@keyframes sr-clap{
  0%,100%{ transform:rotate(0deg) scale(1); }
  25%{ transform:rotate(-4deg) scale(1.03); }
  50%{ transform:rotate(3deg) scale(1.05); }
  75%{ transform:rotate(-2deg) scale(1.02); }
}

@keyframes sr-spark{
  0%,100%{ opacity:.4; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.15); }
}

@keyframes sr-tear{
  0%{ transform:translateY(0); opacity:.95; }
  70%{ transform:translateY(4px); opacity:1; }
  100%{ transform:translateY(7px); opacity:0; }
}
/* HAND COLOR — force yellow */
.social-reaction-svg-clap .sr-clap-hand {
  fill: #ffd54f !important;   /* main yellow */
  stroke: #e0a800;            /* darker outline for depth */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* front hand (lighter highlight) */
.social-reaction-svg-clap .sr-clap-right {
  fill: #ffe082 !important;
}

/* back hand (slightly darker) */
.social-reaction-svg-clap .sr-clap-left {
  fill: #ffca28 !important;
}

/* finger separation */
.social-reaction-svg-clap .sr-clap-lines {
  stroke: rgba(0,0,0,0.25);
  stroke-width: 1.3;
  fill: none;
}

/* impact lines */
.social-reaction-svg-clap .sr-clap-impact {
  stroke: #ffb300;
  stroke-width: 2;
  fill: none;
}
.social-reaction-svg-clap{
  animation: wholeClap10 950ms ease-in-out infinite;
}
.social-reaction-svg-clap .sr-clap-left{
  animation: clapLeft10 950ms ease-in-out infinite;
}
.social-reaction-svg-clap .sr-clap-right{
  animation: clapRight10 950ms ease-in-out infinite;
}
.social-reaction-svg-clap .sr-clap-impact{
  animation: clapImpact10 950ms ease-out infinite;
}

@keyframes wholeClap10{
  0%,100%{ transform:translateY(0) scale(1); }
  58%{ transform:translateY(-1px) scale(1.06); }
  74%{ transform:translateY(0) scale(1); }
}
@keyframes clapLeft10{
  0%,100%{ transform:translateX(-8px) rotate(-16deg); }
  34%{ transform:translateX(-15px) rotate(-23deg); }
  57%{ transform:translateX(0) rotate(-7deg); }
  68%{ transform:translateX(2px) rotate(-5deg); }
  80%{ transform:translateX(-4px) rotate(-12deg); }
}
@keyframes clapRight10{
  0%,100%{ transform:translateX(8px) rotate(16deg); }
  34%{ transform:translateX(15px) rotate(23deg); }
  57%{ transform:translateX(0) rotate(7deg); }
  68%{ transform:translateX(-2px) rotate(5deg); }
  80%{ transform:translateX(4px) rotate(12deg); }
}
@keyframes clapImpact10{
  0%,42%,100%{ opacity:0; transform:scale(.3); }
  57%{ opacity:1; transform:scale(1.45); }
  67%{ opacity:0; transform:scale(.8); }
}
.social-reaction-svg-like-blue {
  width: 100% !important;
  height: 100% !important;
  display: block;
  vertical-align: middle;
}

.social-modal-comments{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px 14px 18px;
  -webkit-overflow-scrolling:touch;
}

@media (max-width: 980px){
  .social-modal{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }

  .social-modal-dialog{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }

  .social-modal-header{
    padding-top:max(14px, env(safe-area-inset-top));
  }

  .social-input-wrap{
    padding-bottom:max(14px, env(safe-area-inset-bottom));
  }

  .social-modal-post-content{
    padding:14px 14px 8px;
  }

  .social-modal-post-head{
    padding:12px 14px;
  }

  .social-modal-comments{
    padding:12px 12px 18px;
  }
}
@media (prefers-reduced-motion: reduce){
  .sr-bounce,
  .sr-heart-beat,
  .sr-fire-flicker,
  .sr-clap,
  .sr-spark,
  .sr-tear-drop{
    animation:none !important;
  }
}

.social-ui{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
  color:#dbe4ee;
  font-family:inherit;
}

.social-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  min-height:20px;
}

.social-summary-left,
.social-summary-right{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  min-height:20px;
}

.social-reaction-pill:first-child{
  margin-left:0;
}

.social-reaction-pill:nth-child(1){ z-index:4; }
.social-reaction-pill:nth-child(2){ z-index:3; }
.social-reaction-pill:nth-child(3){ z-index:2; }
.social-reaction-pill:nth-child(4){ z-index:1; }

.social-reaction-pill .sr-bounce,
.social-reaction-pill .sr-heart-beat,
.social-reaction-pill .sr-fire-flicker,
.social-reaction-pill .sr-clap,
.social-reaction-pill .sr-spark,
.social-reaction-pill .sr-tear-drop,
.social-reaction-pill .social-reaction-svg-clap,
.social-reaction-pill .social-reaction-svg-like-blue{
  animation:none !important;
}
.social-reaction-stack{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:20px;
}

.social-reaction-icons{
  display:inline-flex;
  align-items:center;
  position:relative;
  isolation:isolate;
  line-height:1;
  padding-left:0;
}

.social-reaction-pill{
  position:relative;
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  flex:0 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:-8px;
  border-radius:999px;
  background:transparent;
  overflow:visible;
  vertical-align:middle;
}

.social-reaction-pill:first-child{
  margin-left:0;
}

.social-reaction-pill:nth-child(1){ z-index:4; }
.social-reaction-pill:nth-child(2){ z-index:3; }
.social-reaction-pill:nth-child(3){ z-index:2; }
.social-reaction-pill:nth-child(4){ z-index:1; }

.social-reaction-pill .social-reaction-icon{
  position:absolute;
  inset:0;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  line-height:1;
  overflow:visible !important; /* changed */
}

.social-reaction-pill .social-reaction-icon svg,
.social-reaction-pill svg.social-reaction-svg{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  display:block !important;
  overflow:visible !important; /* changed */
  transform-origin:center center !important;
  pointer-events:none;
}
.social-count-link{
  color:#c6d1dd;
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
}
.social-reaction-summary-text{
  cursor:default;
}

.social-reaction-summary-text:hover{
  color:#c6d1dd;
  text-decoration:none;
}
.social-count-link:hover{
  color:#fff;
  text-decoration:underline;
}

.social-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
  padding:14px 0 8px;
  position:relative;
}

.social-actions::before{
  content:"";
  position:absolute;
  top:0;
  left:12px;
  right:12px;
  height:1px;

  background:rgba(0,0,0,.08); /* for light cards */
}
.social-btn{
  appearance:none;
  border:0;
  outline:0;
  cursor:pointer;
  border-radius:12px;
  background:transparent;
  color:#b8c3cf;
  min-height:44px;
  font-size:1rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
  position:relative;

  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.social-btn:hover{
  background:rgba(10, 35, 80, 0.55); /* dark blue glass */
  color:#ffffff;
}
.social-btn.is-active{
  color:#2d88ff;
}

.social-btn svg{
  width:22px;
  height:22px;
  flex:0 0 22px;
}
.social-btn-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.social-btn-icon svg{
  width:22px;
  height:22px;
  display:block;
}

.social-btn-icon-emoji{
  display:none;
  font-size:20px;
  line-height:1;
}

.social-btn.has-user-reaction .social-btn-icon-svg{
  display:none;
}

.social-btn.has-user-reaction .social-btn-icon-emoji{
  display:inline-block;
}
.social-btn-reaction-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
}

.social-reaction-tray{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(25,28,33,.98);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 55px rgba(0,0,0,.38);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease;
  z-index:50;
  max-width:min(92vw, 460px);
}

.social-reaction-tray.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.social-reaction-option,
.social-reaction-add{
  appearance:none;
  border:0;
  cursor:pointer;
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:transparent;
  transition:transform .16s ease, background .16s ease;
}

.social-reaction-option:hover,
.social-reaction-add:hover{
  transform:translateY(-4px) scale(1.08);
  background:rgba(255,255,255,.08);
}

.social-hidden-picker{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

.social-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none !important;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.social-modal.show{
  display:flex !important;
}

.social-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,12,16,.34);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.social-modal-dialog{
  position:relative;
  z-index:2;
  width:min(860px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  margin:auto;
  background:#18191a;
  color:#e8edf3;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 90px rgba(0,0,0,.46);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

.social-modal-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:14px 64px 14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#18191a;
  flex:0 0 auto;
}

.social-modal-title{
  margin:0;
  text-align:center;
  font-size:1.05rem;
  font-weight:800;
  color:#f3f5f7;
}

.social-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  appearance:none;
  border:0;
  background:rgba(255,255,255,.08);
  color:#fff;
  width:42px;
  height:42px;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, transform .18s ease;
}

.social-modal-close:hover{
  background:rgba(255,255,255,.14);
  transform:scale(1.04);
}

.social-modal-close svg{
  width:18px;
  height:18px;
  display:block;
}

.social-modal-post-wrap{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:#18191a;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.social-modal-post-wrap::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.social-modal-post-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.social-modal-post-content{
  width:100%;
  padding:16px 18px 8px;
  background:#18191a;
}

.social-modal-post-content.is-text-only{
  padding:18px;
}

.social-modal-text-only{
  color:#e8edf3;
  font-size:1rem;
  line-height:1.65;
  white-space:pre-wrap;
  word-break:break-word;
}

.social-modal-post-content > *:first-child{
  margin-top:0 !important;
}

.social-modal-post-content > *:last-child{
  margin-bottom:0 !important;
}

.social-modal-placeholder{
  width:100%;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8b97a3;
  font-size:1rem;
  letter-spacing:.02em;
  padding:24px;
  text-align:center;
}

.social-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  object-fit:cover;
  background:#2f3540;
  flex:0 0 42px;
}

.social-post-author{
  min-width:0;
}

.social-post-author a{
  color:#f5f7fa;
  text-decoration:none;
  font-weight:800;
}

.social-post-author a:hover{
  text-decoration:underline;
}

.social-post-sub{
  margin-top:2px;
  font-size:.88rem;
  color:#97a4b3;
}

.social-modal-comments{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px 14px 18px;
  -webkit-overflow-scrolling:touch;
}

.social-comment-item{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.social-comment-item.reply{
  margin-left:34px;
}

.social-comment-body{
  min-width:0;
  flex:1;
}

.social-comment-bubble{
  background:#242526;
  border-radius:18px;
  padding:10px 12px;
  display:inline-block;
  max-width:100%;
}

.social-comment-name{
  color:#f3f5f9;
  font-weight:800;
  font-size:.96rem;
  text-decoration:none;
}

.social-comment-name:hover{
  text-decoration:underline;
}

.social-comment-text{
  margin-top:4px;
  color:#e7edf5;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.38;
}

.social-comment-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
  padding-left:10px;
  font-size:.84rem;
  color:#9aa7b4;
}

.social-comment-meta button{
  appearance:none;
  border:0;
  background:none;
  color:#9aa7b4;
  cursor:pointer;
  font-weight:700;
  padding:0;
}

.social-comment-meta button:hover{
  color:#fff;
}

.social-comment-meta button.is-active{
  color:#2d88ff;
}

.social-comment-reply-box{
  margin:8px 0 0 10px;
  display:none;
}

.social-comment-reply-box.show{
  display:flex;
  gap:8px;
  align-items:flex-end;
}

.social-input-wrap{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#18191a;
}

.social-input-main{
  flex:1;
  min-width:0;
  background:#3a3b3c;
  border-radius:22px;
  padding:10px 14px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.social-textarea{
  width:100%;
  resize:none;
  background:transparent;
  border:0;
  outline:0;
  color:#000;
  -webkit-text-fill-color:#000;
  caret-color:#000;
  min-height:22px;
  max-height:140px;
  font-size:1rem;
  line-height:1.35;
  font-family:inherit;
}

.social-textarea::placeholder{
  color:rgba(0,0,0,.55);
  -webkit-text-fill-color:rgba(0,0,0,.55);
}

.social-send{
  appearance:none;
  border:0;
  background:transparent;
  color:#9eb8da;
  cursor:pointer;
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
}

.social-send:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.social-empty{
  color:#97a4b3;
  padding:12px 6px;
  text-align:center;
}

.social-feed-comment-box{
  margin-top:10px;
  display:none;
  gap:10px;
  align-items:flex-start;
}

.social-feed-comment-box.show{
  display:flex;
}

.social-feed-comment-inner{
  flex:1;
  display:flex;
  align-items:flex-end;
  gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:8px 10px;
}

.social-feed-comment-send{
  appearance:none;
  border:0;
  background:none;
  color:#9eb8da;
  cursor:pointer;
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.social-feed-comment-send:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

@media (max-width: 980px){
  .social-modal{
    padding:0;
  }

  .social-modal-dialog{
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }

  .social-modal-placeholder{
    min-height:240px;
  }

  .social-comment-item.reply{
    margin-left:22px;
  }
}

@media (max-width: 640px){
  .social-actions{
    gap:4px;
  }

  .social-btn{
    min-height:42px;
    font-size:.96rem;
    gap:7px;
  }

  .social-reaction-tray{
    left:0;
    right:auto;
    max-width:calc(100vw - 24px);
    overflow-x:auto;
  }
}

/* Attachment composer and narrow-screen constraints. */
.social-ui, .social-modal { letter-spacing:0; }
.social-ui { color:inherit; }
.social-ui .social-btn:not(.is-active), .social-ui .social-count-link { color:inherit; }
.social-ui .social-btn:hover { background:rgba(115,135,155,.12); }
.social-ui .social-count-link:hover { color:inherit; }
.social-ui *, .social-modal * { box-sizing:border-box; }
.social-ui [hidden], .social-modal [hidden] { display:none !important; }
.social-ui button, .social-modal button { font-family:inherit; }
.social-ui button:focus-visible, .social-modal button:focus-visible,
.social-modal a:focus-visible, .social-composer textarea:focus-visible,
.social-gif-search input:focus-visible { outline:2px solid #63b3ff; outline-offset:2px; }
.social-ui button:disabled, .social-modal button:disabled { cursor:default; opacity:.6; }
.social-summary { min-width:0; flex-wrap:wrap; gap:8px; }
.social-summary-right { flex-wrap:wrap; gap:12px; }
button.social-count-link { appearance:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.social-like-control { display:flex; min-width:0; }
.social-like-control > .social-btn { flex:1; min-width:0; gap:6px; }
.social-reaction-toggle { flex:0 0 24px; border:0; background:none; color:inherit; font-size:20px; cursor:pointer; padding:0; }
.social-reaction-tray { visibility:hidden; width:max-content; gap:4px; padding:6px; max-width:calc(100vw - 32px); }
.social-reaction-tray.show { visibility:visible; }
.social-reaction-option { width:36px; height:40px; flex:0 0 36px; }
.social-error { color:#ffd0c9; background:#542c2b; border-left:3px solid #ef9085; padding:9px 12px; margin:8px 0; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.social-modal .social-action-error { margin:8px 14px; }
.social-input-main.social-composer, .social-feed-comment-inner.social-composer { display:grid; grid-template-columns:minmax(0,1fr) 36px; border-radius:8px; background:#303234; min-width:0; }
.social-composer .social-textarea { color:#f5f7fa; -webkit-text-fill-color:#f5f7fa; caret-color:#fff; font-size:16px; }
.social-composer .social-textarea::placeholder { color:#bcc1c8; -webkit-text-fill-color:#bcc1c8; }
.social-composer-extras { grid-column:1 / -1; min-width:0; }
.social-compose-tools { display:flex; gap:4px; }
.social-compose-tools button { height:32px; min-width:36px; padding:3px 8px; border:0; border-radius:4px; color:#d8e2ec; background:transparent; cursor:pointer; font-size:13px; font-weight:700; }
.social-compose-tools button:hover { background:#44494f; }
.social-compose-tools [data-photos] { display:inline-flex; align-items:center; justify-content:center; }
.social-compose-tools [data-photos] svg { display:block; width:21px; height:21px; }
.social-reply-banner { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:#dce3e8; padding:5px 0; }
.social-reply-banner span { min-width:0; overflow-wrap:anywhere; }
.social-reply-banner button, .social-gif-search [data-gif-close] { border:0; background:none; color:inherit; font-size:22px; cursor:pointer; flex:0 0 28px; }
.social-attachments { display:flex; flex-wrap:wrap; gap:8px; }
.social-attachments figure { position:relative; margin:4px 0; width:96px; min-width:0; }
.social-attachments img { width:96px; height:78px; display:block; object-fit:cover; border-radius:4px; }
.social-attachments [data-remove-attachment] { position:absolute; top:2px; right:2px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:#161718; color:white; cursor:pointer; font-size:20px; }
.social-attachments figcaption { font-size:12px; line-height:1.35; color:#f3d1cb; overflow-wrap:anywhere; padding:3px 0; }
.social-attachments [data-retry-upload] { color:#fff; border:0; background:#535a64; padding:4px 6px; cursor:pointer; }
.social-gif-picker { padding-top:8px; border-top:1px solid #626970; margin-top:6px; }
.social-gif-search { display:flex; gap:4px; min-width:0; }
.social-gif-search input { min-width:0; width:100%; background:#18191a; color:#fff; border:1px solid #7b838b; border-radius:4px; padding:6px; font:inherit; font-size:16px; }
.social-gif-search [data-gif-search] { border:0; border-radius:4px; color:#fff; background:#365b7b; font-size:13px; padding:4px 6px; cursor:pointer; }
.social-gif-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; max-height:180px; overflow:auto; margin:8px 0; color:#e1e6eb; font-size:14px; }
.social-gif-results button { padding:0; border:0; background:#18191a; cursor:pointer; min-width:0; aspect-ratio:4 / 3; overflow:hidden; }
.social-gif-results img { display:block; width:100%; height:100%; object-fit:contain; }
.social-gif-picker small { display:block; color:#bcc7d2; font-size:11px; }
.social-comment-media { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.social-comment-media figure { margin:0; width:min(100%,280px); min-width:0; }
.social-comment-media img, .social-comment-media video { display:block; max-width:100%; max-height:320px; width:auto; height:auto; border-radius:6px; }
.social-comment-media figcaption { font-size:11px; overflow-wrap:anywhere; padding:4px 0; }
.social-comment-media a { color:#b9d9f5; }
.social-comment-bubble { border-radius:8px; overflow-wrap:anywhere; }
.social-comment-name, .social-comment-disclosure, .social-reply-context { overflow-wrap:anywhere; }
.social-comment-disclosure { font-size:12px; color:#d4caa7; }
.social-reply-context { font-size:12px; color:#bbc7d4; margin-bottom:4px; }
.social-comment-meta { gap:6px 12px; padding-left:0; }
.social-comment-meta [data-comment-reaction] { display:inline-flex; align-items:center; gap:4px; min-height:28px; }
.social-comment-meta .social-reaction-icon { width:20px; height:20px; }
.social-load-more { display:block; margin:12px auto; padding:9px 14px; background:#30363d; color:#eff4f8; border:1px solid #636d76; border-radius:6px; cursor:pointer; }
.social-modal-post-content img, .social-modal-post-content video, .social-modal-post-content iframe { max-width:100%; }
.social-modal-dialog { max-height:calc(100dvh - 48px); }
.social-modal-title { overflow-wrap:anywhere; }
.social-input-wrap { max-height:55dvh; overflow-y:auto; }
@media (max-width:640px) {
  .social-actions { gap:2px; }
  .social-btn { font-size:13px; gap:4px; }
  .social-btn svg, .social-btn-icon, .social-btn-icon svg { width:20px; height:20px; flex-basis:20px; }
  .social-reaction-toggle { flex-basis:20px; }
  .social-reaction-tray { max-width:calc(100vw - 24px); }
  .social-reaction-option { width:32px; flex-basis:32px; }
  .social-modal-dialog { width:100%; height:100dvh; max-height:100dvh; }
  .social-modal-post-head, .social-modal-post-content { padding:12px; }
  .social-modal-comments { padding:12px 8px; }
  .social-input-wrap { padding:10px 8px max(10px,env(safe-area-inset-bottom)); gap:6px; }
  .social-input-wrap > .social-avatar { width:28px; height:28px; flex-basis:28px; }
  .social-input-main.social-composer { padding:8px; gap:4px; }
  .social-comment-item { gap:6px; }
  .social-comment-item > .social-avatar { width:28px; height:28px; flex-basis:28px; }
  .social-comment-item.reply { margin-left:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .social-ui *, .social-modal * { animation:none !important; transition:none !important; }
}