/* COMMUNITY-CHAT-V2 */

.community-chat-v2{
  margin-top:22px;
  overflow:hidden;
}

.community-chat-v2-head{
  height:43px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 16px;

  border-bottom:1px solid rgba(255,255,255,.055);
}

.community-chat-v2-title{
  display:flex;
  align-items:center;
  gap:8px;

  color:#dbe4e9;

  font-size:11px;
  font-weight:750;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.community-chat-v2-live{
  display:flex;
  align-items:center;
  gap:6px;

  color:#64727c;

  font-size:9px;
  font-weight:650;
  letter-spacing:.04em;
}

.community-chat-v2-live::before{
  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:#53616b;
}

.community-chat-v2-live.is-live{
  color:#7f929d;
}

.community-chat-v2-live.is-live::before{
  background:#38c987;

  box-shadow:0 0 8px rgba(56,201,135,.24);
}

.community-chat-v2-live.is-error{
  color:#d56c6c;
}

.community-chat-v2-live.is-error::before{
  background:#d56c6c;
}


/* messages */

.community-chat-v2-list{
  height:330px;
  overflow-y:auto;

  padding:8px 16px;

  scrollbar-width:thin;
  scrollbar-color:#28343d transparent;
}

.community-chat-v2-row{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);

  gap:10px;

  padding:9px 0;

  border-bottom:1px solid rgba(255,255,255,.038);
}

.community-chat-v2-row:last-child{
  border-bottom:0;
}

.community-chat-v2-avatar{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:6px;

  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);

  color:#60707a;

  font-size:11px;
  font-weight:700;
}

.community-chat-v2-avatar img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}

.community-chat-v2-content{
  min-width:0;
}

.community-chat-v2-meta{
  min-height:17px;

  display:flex;
  align-items:center;

  gap:6px;
}

.community-chat-v2-name{
  min-width:0;

  display:inline-flex;
  align-items:center;

  gap:3px;

  font-size:11px;
  font-weight:700;
}

.community-chat-v2-time{
  margin-left:auto;

  color:#46545e;

  font-size:9px;
  font-weight:550;
}

.community-chat-v2-message{
  margin-top:3px;

  color:#aeb9c1;

  font-size:12px;
  font-weight:450;

  line-height:1.48;

  overflow-wrap:anywhere;
}

.community-chat-v2-gif{
  display:block;

  max-width:min(360px,100%);
  max-height:280px;

  width:auto;
  height:auto;

  margin-top:7px;

  border-radius:6px;
  border:1px solid rgba(255,255,255,.07);

  object-fit:contain;

  background:#05080d;
}


/* empty */

.community-chat-v2-empty{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#53616b;

  font-size:11px;
}


/* composer */

.community-chat-v2-compose{
  display:flex;
  align-items:center;

  gap:8px;

  padding:11px 14px 13px;

  border-top:1px solid rgba(255,255,255,.055);

  background:rgba(0,0,0,.055);
}

.community-chat-v2-input-wrap{
  position:relative;

  min-width:0;
  flex:1;
}

.community-chat-v2-input{
  width:100%;
  height:40px;

  box-sizing:border-box;

  padding:0 50px 0 12px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:6px;

  outline:none;

  background:#080d12;

  color:#d8e1e6;

  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;
  font-weight:450;

  transition:
    border-color .15s ease,
    background .15s ease;
}

.community-chat-v2-input::placeholder{
  color:#53616b;
}

.community-chat-v2-input:focus{
  background:#091017;

  border-color:rgba(93,117,201,.36);
}

.community-chat-v2-counter{
  position:absolute;

  right:10px;
  top:50%;

  transform:translateY(-50%);

  color:#3f4b54;

  font-size:8px;
  font-weight:600;

  pointer-events:none;
}


/* send - palette/logo style */

.community-chat-v2-send{
  position:relative;
  overflow:hidden;

  height:40px;
  min-width:84px;

  padding:0 16px;

  border:1px solid rgba(154,93,219,.50);
  border-radius:6px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.035) 42%,
      rgba(0,0,0,.055)
    ),
    linear-gradient(
      105deg,
      #117c99,
      #4c4eae 34%,
      #783daf 63%,
      #167b9f
    );

  color:#fff;

  font-family:'Inter',system-ui,sans-serif;
  font-size:10px;
  font-weight:750;

  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 12px rgba(0,0,0,.16);

  transition:
    border-color .16s ease,
    filter .16s ease;
}

.community-chat-v2-send:hover{
  border-color:rgba(188,111,231,.72);

  filter:brightness(1.07);
}

.community-chat-v2-send::after{
  content:"";

  position:absolute;

  top:-35%;
  bottom:-35%;
  left:-55%;

  width:34%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035) 28%,
      rgba(255,255,255,.17) 50%,
      rgba(255,255,255,.035) 72%,
      transparent
    );

  transform:skewX(-20deg);

  opacity:0;

  pointer-events:none;
}

.community-chat-v2-send:hover::after{
  animation:communityChatSweepV2 .62s ease-out;
}

@keyframes communityChatSweepV2{
  0%{left:-55%;opacity:0}
  15%{opacity:1}
  80%{opacity:1}
  100%{left:125%;opacity:0}
}

.community-chat-v2-send:disabled{
  opacity:.55;
  cursor:wait;
}


/* feedback */

.community-chat-v2-feedback{
  min-height:15px;

  padding:0 14px 9px;

  color:#687782;

  font-size:9px;
  line-height:15px;
}

.community-chat-v2-feedback:empty{
  display:none;
}

.community-chat-v2-feedback.is-error{
  color:#df7373;
}

@media(max-width:700px){

  .community-chat-v2-list{
    height:290px;

    padding-left:12px;
    padding-right:12px;
  }

  .community-chat-v2-compose{
    padding-left:12px;
    padding-right:12px;
  }

  .community-chat-v2-send{
    min-width:70px;
    padding:0 12px;
  }
}


/* COMMUNITY-CHAT-CS-SOURCE-V1 */

.community-chat-v2-source-cs{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:15px;
  min-width:23px;

  margin-left:6px;
  padding:0 5px;

  border-radius:4px;

  border:1px solid rgba(0,229,255,.12);
  background:rgba(0,229,255,.045);

  color:rgba(125,216,228,.72);

  font-size:8px;
  font-weight:750;
  line-height:1;
  letter-spacing:.055em;

  vertical-align:middle;
}



/* COMMUNITY-CHAT-DC-SOURCE-V2 */

.community-chat-v2-source-dc{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:15px;
  min-width:23px;

  margin-left:6px;
  padding:0 5px;

  border-radius:4px;

  border:1px solid rgba(142,128,255,.14);
  background:rgba(142,128,255,.05);

  color:rgba(178,169,255,.78);

  font-size:8px;
  font-weight:750;
  line-height:1;
  letter-spacing:.055em;

  vertical-align:middle;
}