/* Wire · Album Photo Comments + Reactions · h9313b */

.wire-album-photo-open{
  position:relative;
}

.wire-photo-social-summary{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:3;
  display:flex;
  gap:5px;
  pointer-events:none;
}

.wire-photo-social-summary span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(2,8,13,.78);
  backdrop-filter:blur(5px);
  color:#fff;
  font:800 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
}

.wire-photo-social-panel{
  position:fixed;
  z-index:2147480605;
  top:74px;
  right:18px;
  bottom:18px;
  width:min(350px,31vw);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #29485c;
  border-radius:14px;
  background:#07131e;
  box-shadow:0 18px 60px rgba(0,0,0,.58);
}

.wire-album-lightbox.wire-album-social-open figure{
  max-width:min(1020px,calc(100vw - 430px));
  transform:translateX(-165px);
}

.wire-album-lightbox.wire-album-social-open .wire-album-lightbox-next{
  right:382px;
}

.wire-photo-social-loading,
.wire-photo-social-error{
  display:grid;
  place-items:center;
  min-height:160px;
  padding:20px;
  color:#9fb6c7;
  text-align:center;
}

.wire-photo-social-error{
  color:#ff8da0;
}

.wire-photo-social-header{
  padding:14px 15px 11px;
  border-bottom:1px solid #173348;
}

.wire-photo-social-header > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.wire-photo-social-header strong{
  color:#fff;
  font-size:15px;
}

.wire-photo-social-header span{
  color:#8fa6b7;
  font-size:11px;
}

.wire-photo-social-reactions{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  padding:10px 11px;
  border-bottom:1px solid #173348;
}

.wire-photo-social-reactions button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:0;
  min-height:38px;
  padding:4px;
  border:1px solid #26475d;
  border-radius:9px;
  background:#06101a;
  color:#b8c9d5;
  cursor:pointer;
}

.wire-photo-social-reactions button:hover{
  border-color:#4b7188;
}

.wire-photo-social-reactions button.active{
  border-color:#ed3153;
  background:rgba(237,49,83,.12);
  color:#fff;
}

.wire-photo-social-reactions button:disabled{
  opacity:.55;
  cursor:default;
}

.wire-photo-social-reactions button span{
  font-size:16px;
}

.wire-photo-social-reactions button b{
  font-size:10px;
}

.wire-photo-social-compose{
  display:flex;
  gap:7px;
  padding:10px 11px;
  border-bottom:1px solid #173348;
}

.wire-photo-social-compose textarea{
  flex:1;
  min-width:0;
  min-height:48px;
  max-height:112px;
  resize:vertical;
  border:1px solid #294a60;
  border-radius:9px;
  background:#020a10;
  color:#fff;
  padding:8px 9px;
  font:13px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
}

.wire-photo-social-compose button{
  align-self:flex-end;
  min-height:36px;
  padding:0 11px;
  border:1px solid #ff4664;
  border-radius:9px;
  background:#ed3153;
  color:#fff;
  font-weight:850;
  cursor:pointer;
}

.wire-photo-social-signin{
  padding:11px 13px;
  border-bottom:1px solid #173348;
  color:#8fa6b7;
  font-size:12px;
}

.wire-photo-social-comments{
  flex:1;
  overflow:auto;
  padding:3px 11px 14px;
}

.wire-photo-social-empty{
  padding:25px 8px;
  color:#8299aa;
  text-align:center;
  font-size:12px;
}

.wire-photo-social-comment{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  padding:11px 0;
  border-bottom:1px solid rgba(55,82,101,.42);
}

.wire-photo-social-comment:last-child{
  border-bottom:0;
}

.wire-photo-social-avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #36566b;
  border-radius:50%;
  background:#0b2130;
  color:#d8e9f3;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
}

.wire-photo-social-comment-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.wire-photo-social-comment-head > span{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px;
}

.wire-photo-social-comment-head strong{
  color:#fff;
  font-size:12px;
}

.wire-photo-social-comment-head small,
.wire-photo-social-comment-head time{
  color:#7892a5;
  font-size:10px;
}

.wire-photo-social-comment-head button{
  width:24px;
  height:24px;
  border:0;
  background:transparent;
  color:#718b9c;
  font-size:18px;
  cursor:pointer;
}

.wire-photo-social-comment p{
  margin:4px 0 0;
  color:#d1dde5;
  font-size:12px;
  line-height:1.42;
  overflow-wrap:anywhere;
}

.wire-photo-social-toast{
  position:fixed;
  z-index:2147480705;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  max-width:min(520px,calc(100vw - 30px));
  padding:11px 14px;
  border:1px solid #32546b;
  border-radius:10px;
  background:#081824;
  color:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  font-weight:750;
}

.wire-photo-social-toast.error{
  border-color:#783044;
  color:#ff9caf;
}

@media(max-width:900px){
  .wire-photo-social-panel{
    top:auto;
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    height:min(46vh,410px);
  }

  .wire-album-lightbox.wire-album-social-open figure{
    max-width:94vw;
    max-height:46vh;
    transform:translateY(-23vh);
  }

  .wire-album-lightbox.wire-album-social-open figure img{
    max-height:43vh;
  }

  .wire-album-lightbox.wire-album-social-open .wire-album-lightbox-next{
    right:10px;
  }

  .wire-album-lightbox.wire-album-social-open .wire-album-lightbox-prev,
  .wire-album-lightbox.wire-album-social-open .wire-album-lightbox-next{
    top:28%;
  }
}

@media(max-width:520px){
  .wire-photo-social-panel{
    height:min(49vh,420px);
    border-radius:12px;
  }

  .wire-photo-social-reactions{
    padding:8px;
    gap:3px;
  }

  .wire-photo-social-reactions button{
    min-height:34px;
  }

  .wire-photo-social-compose{
    padding:8px;
  }

  .wire-photo-social-compose textarea{
    min-height:42px;
  }
}