/* =========================================================
   SUPERLIVE V13
   VISUAL DE CHAT DE TEXTO V14
========================================================= */

.v14-text-layer{
  position:absolute;
  inset:0;
  z-index:20;

  display:none;
  flex-direction:column;

  min-width:0;
  min-height:0;

  border-radius:inherit;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 30% 5%,
      rgba(255,102,34,.04),
      transparent 34%
    ),
    radial-gradient(
      circle at 76% 10%,
      rgba(0,99,255,.06),
      transparent 37%
    ),
    #0d0d12;
}

.v14-text-layer.active{
  display:flex;
}

.v14-text-head{
  height:54px;
  flex:none;

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

  padding:0 18px;

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

  background:
    rgba(13,13,18,.76);
}

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

  min-width:0;
}

.chat-view-title .hash{
  color:#00aefa;

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

.chat-view-title strong{
  color:#f3f5f7;

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

.chat-view-title small{
  margin-left:3px;

  color:#727986;

  font-size:9px;
  font-weight:500;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.v14-text-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.v14-text-head-pill{
  height:30px;

  display:flex;
  align-items:center;

  padding:0 10px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:#858d98;

  font-size:9px;
}

.chat-view{
  position:relative;

  flex:1;
  min-height:0;

  display:flex;
  flex-direction:column;

  background:
    rgba(13,13,18,.22);
}

.chat-messages{
  flex:1;
  min-height:0;

  overflow-y:auto;
  overflow-x:hidden;

  scrollbar-width:none;
  -ms-overflow-style:none;

  padding:
    18px
    clamp(18px,3vw,42px)
    26px;

  overscroll-behavior:contain;
}

.chat-messages::-webkit-scrollbar{
  display:none;
}

.chat-day{
  display:flex;
  align-items:center;

  gap:12px;

  margin:
    4px
    0
    18px;

  color:#727985;

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

  text-transform:uppercase;
  letter-spacing:.06em;
}

.chat-day::before,
.chat-day::after{
  content:"";

  height:1px;
  flex:1;

  background:
    rgba(255,255,255,.065);
}

.text-message{
  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr);

  gap:13px;

  padding:
    14px
    4px
    17px;

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

.text-message:last-child{
  border-bottom:0;
}

.text-avatar{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #70bdf1,
      #276ea5
    );

  color:#17324b;

  font-size:12px;
  font-weight:800;
}

.text-avatar.alt1{
  background:
    linear-gradient(
      145deg,
      #d58a65,
      #472a24
    );

  color:#fff;
}

.text-avatar.alt2{
  background:
    linear-gradient(
      145deg,
      #f4d18b,
      #7c3f2e
    );

  color:#fff;
}

.text-avatar.alt3{
  background:
    linear-gradient(
      145deg,
      #b68af4,
      #433170
    );

  color:#fff;
}

.message-body{
  min-width:0;
}

.message-meta{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;

  gap:7px;

  margin-bottom:5px;
}

.message-name{
  color:#f3f5f7;

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

.message-handle{
  color:#7c838e;

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

.message-time{
  color:#6e7480;

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

.message-text{
  max-width:880px;

  color:#aeb4bd;

  font-size:12px;
  line-height:1.55;
  font-weight:400;

  overflow-wrap:anywhere;
}

.reply-box{
  max-width:760px;

  margin-top:12px;

  padding:
    7px
    11px
    8px;

  border-left:
    3px solid
    #3daeff;

  border-radius:
    2px
    8px
    8px
    2px;

  background:
    linear-gradient(
      90deg,
      rgba(61,174,255,.08),
      rgba(61,174,255,0)
    );
}

.reply-box strong{
  display:block;

  margin-bottom:4px;

  color:#dce5ee;

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

.reply-box span{
  display:block;

  color:#8e96a1;

  font-size:10px;
  line-height:1.4;
}

.chat-empty{
  min-height:100%;

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

  padding:28px;

  text-align:center;
}

.chat-empty-hash{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  margin-bottom:14px;

  border-radius:18px;

  background:
    rgba(0,174,250,.08);

  color:#00aefa;

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

.chat-empty strong{
  color:#f3f5f7;

  font-size:15px;
}

.chat-empty span{
  max-width:440px;

  margin-top:7px;

  color:#737986;

  font-size:10px;
  line-height:1.5;
}

.chat-composer-wrap{
  flex:none;

  padding:
    0
    clamp(18px,3vw,42px)
    22px;

  background:
    linear-gradient(
      to bottom,
      rgba(13,13,18,0),
      rgba(13,13,18,.88) 22%,
      rgba(13,13,18,.98) 48%
    );
}

.chat-composer{
  min-height:94px;

  padding:
    13px
    14px
    10px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:13px;

  background:#1a1c22;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 9px 25px rgba(0,0,0,.16);
}

.chat-input{
  width:100%;

  min-height:42px;
  max-height:100px;

  resize:none;

  padding:0;

  border:0;
  outline:0;

  background:transparent;
  color:#eef1f5;

  font-family:var(--superlive-font);
  font-size:12px;
  line-height:1.45;
}

.chat-input::placeholder{
  color:#737a85;
}

.composer-actions{
  display:flex;
  align-items:center;

  gap:5px;

  margin-top:6px;
}

.composer-icon{
  width:30px;
  height:28px;

  display:grid;
  place-items:center;

  padding:0;

  border:0;
  border-radius:8px;

  background:transparent;
  color:#858d98;

  font-size:15px;

  cursor:pointer;
}

.composer-icon:hover{
  background:
    rgba(255,255,255,.055);

  color:#fff;
}

.composer-spacer{
  flex:1;
}

.send-message{
  height:29px;

  padding:0 12px;

  border:0;
  border-radius:9px;

  background:#087fc5;
  color:#fff;

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}

.send-message:hover{
  filter:brightness(1.1);
}

.send-message:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.channel-item.text-channel-v14.active{
  background:
    rgba(255,255,255,.07);
}

@media (max-width:820px){

  .chat-messages{
    padding:
      14px
      13px
      20px;
  }

  .chat-composer-wrap{
    padding:
      0
      12px
      14px;
  }

  .text-message{
    grid-template-columns:
      36px
      minmax(0,1fr);

    gap:10px;

    padding:
      12px
      2px
      14px;
  }

  .text-avatar{
    width:34px;
    height:34px;
  }

  .message-name{
    font-size:12px;
  }

  .message-text{
    font-size:11px;
  }

  .chat-view-title small{
    display:none;
  }
}

/* =========================================================
   CHAT V14 - replies / mentions / edit / delete
========================================================= */

.text-message{
  position:relative;
}

.message-actions{
  display:flex;
  align-items:center;
  gap:4px;

  margin-top:8px;

  opacity:.38;

  transition:opacity .15s ease;
}

.text-message:hover .message-actions{
  opacity:1;
}

.message-action{
  height:25px;

  padding:0 8px;

  border:0;
  border-radius:7px;

  background:
    rgba(255,255,255,.035);

  color:#777f8b;

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

  cursor:pointer;
}

.message-action:hover{
  background:
    rgba(255,255,255,.08);

  color:#fff;
}

.message-action.delete:hover{
  background:
    rgba(255,65,80,.12);

  color:#ff7d88;
}

.message-edited{
  color:#656c76;

  font-size:8px;
  font-weight:500;
}

.text-mention{
  display:inline-block;

  padding:0 3px;

  border-radius:4px;

  background:
    rgba(24,145,235,.13);

  color:#58baff;

  font-weight:650;
}

.text-mention:hover{
  background:
    rgba(24,145,235,.22);
}

.chat-reply-preview{
  margin:
    0
    clamp(18px,3vw,42px);

  padding:
    9px
    12px;

  display:none;
  align-items:center;

  gap:10px;

  border-left:
    3px solid
    #3daeff;

  border-radius:
    5px
    9px
    0
    0;

  background:
    #151820;

  color:#8e96a1;

  font-size:9px;
}

.chat-reply-preview.show{
  display:flex;
}

.chat-reply-preview-copy{
  min-width:0;
  flex:1;
}

.chat-reply-preview-copy strong{
  display:block;

  color:#dce5ee;

  margin-bottom:2px;

  font-size:9px;
}

.chat-reply-preview-copy span{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-reply-cancel{
  width:24px;
  height:24px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#7c838e;

  cursor:pointer;
}

.chat-reply-cancel:hover{
  background:
    rgba(255,255,255,.07);

  color:#fff;
}

.chat-composer-wrap.replying
.chat-composer{
  border-radius:
    0
    0
    13px
    13px;
}

.reply-box.deleted{
  opacity:.65;
  font-style:italic;
}

/* =========================================================
   SUPERLIVE CHAT IMAGE UI V3
========================================================= */

.chat-composer-wrap{
  position:relative;
}

.chat-image-preview{
  display:none;

  margin:
    0
    clamp(18px,3vw,42px);

  padding:
    10px 12px;

  align-items:center;
  gap:10px;

  background:#151820;

  border-left:
    3px solid #3daeff;
}

.chat-image-preview.show{
  display:flex;
}

.chat-image-preview-thumb{
  width:52px;
  height:52px;

  flex:0 0 52px;

  border-radius:9px;

  object-fit:cover;

  background:#0e1015;
}

.chat-image-preview-info{
  min-width:0;
  flex:1;
}

.chat-image-preview-info strong{
  display:block;

  color:#e5edf5;

  font-size:10px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-image-preview-info span{
  display:block;

  margin-top:3px;

  color:#7b8490;

  font-size:9px;
}

.chat-image-preview-remove{
  width:26px;
  height:26px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#7f8791;

  cursor:pointer;
}

.chat-image-preview-remove:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}

.chat-composer.drag-image{
  outline:
    2px dashed
    #3daeff;

  outline-offset:
    -4px;

  background:
    rgba(61,174,255,.035);
}

.chat-image-upload-button{
  font-size:13px;
}

.message-image-wrap{
  margin-top:8px;

  width:min(
    540px,
    100%
  );
}

.message-image{
  display:block;

  max-width:100%;
  max-height:520px;

  border-radius:10px;

  object-fit:contain;

  background:#0c0e12;

  cursor:pointer;
}

.message-image-expired{
  width:min(
    420px,
    100%
  );

  margin-top:8px;

  padding:
    18px
    20px;

  border:
    1px dashed
    rgba(255,255,255,.1);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:#777f8b;

  font-size:10px;
}

.message-image-expired strong{
  display:block;

  margin-bottom:4px;

  color:#a5adb8;
}

.message-image-retention{
  margin-top:5px;

  color:#646c77;

  font-size:8px;
}

.message-image-retention.permanent{
  color:#67b98b;
}

/* =========================================================
   SUPERLIVE MENTION AUTOCOMPLETE V4
========================================================= */

.mention-autocomplete{
  position:absolute;

  left:
    clamp(18px,3vw,42px);

  right:
    clamp(18px,3vw,42px);

  bottom:
    calc(100% - 4px);

  z-index:40;

  display:none;

  max-height:250px;

  overflow-y:auto;

  padding:6px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:11px;

  background:#12151b;

  box-shadow:
    0 14px 35px
    rgba(0,0,0,.38);
}

.mention-autocomplete.show{
  display:block;
}

.mention-option{
  width:100%;

  display:flex;
  align-items:center;

  gap:9px;

  padding:
    7px
    8px;

  border:0;
  border-radius:8px;

  background:transparent;

  text-align:left;

  cursor:pointer;
}

.mention-option:hover,
.mention-option.active{
  background:
    rgba(255,255,255,.065);
}

.mention-option-avatar{
  width:30px;
  height:30px;

  flex:
    0 0 30px;

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

  border:
    2px solid
    transparent;

  border-radius:50%;

  background:#252a33;

  background-size:cover;
  background-position:center;

  color:#fff;

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

.mention-option-copy{
  min-width:0;

  flex:1;
}

.mention-option-name{
  display:flex;
  align-items:center;

  gap:5px;

  color:#e3e9f0;

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

.mention-option-handle{
  display:block;

  margin-top:2px;

  color:#747d89;

  font-size:9px;
}

.mention-option-role{
  padding:
    2px
    5px;

  border-radius:5px;

  background:
    rgba(61,174,255,.12);

  color:#63bcff;

  font-size:7px;
  font-weight:700;

  text-transform:uppercase;
}

.mention-empty{
  padding:
    12px;

  color:#777f8b;

  font-size:9px;
  text-align:center;
}

/* =========================================================
   MENTION TOOLTIP POSITION FIX
========================================================= */

.chat-composer-wrap{
  position:relative;
}

.mention-autocomplete{
  position:absolute;

  left:0;
  right:auto;

  bottom:
    calc(100% + 6px);

  width:
    min(
      360px,
      calc(100% - 8px)
    );

  max-height:220px;

  z-index:200;

  border-radius:10px;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.42);
}

/*
 * Mantém o menu colado visualmente
 * ao campo de digitação.
 */
.chat-composer-wrap
.mention-autocomplete{
  margin-left:4px;
}

/*
 * Em telas menores, ocupa quase
 * toda a largura do composer.
 */
@media (max-width:700px){

  .mention-autocomplete{
    left:0;
    right:0;

    width:auto;

    margin-left:0;
  }
}

/* =========================================================
   SUPERLIVE BADGES EMOJI V5
========================================================= */

.text-channel-v14{
  position:relative;
}

.text-mention-badge{
  min-width:18px;
  height:18px;

  padding:0 5px;

  position:absolute;

  right:8px;
  top:50%;

  transform:
    translateY(-50%);

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

  border:
    2px solid
    #10141a;

  border-radius:999px;

  background:#f02d3a;

  color:#fff;

  font-size:9px;
  font-weight:800;

  line-height:1;
}

.text-mention-badge.show{
  display:flex;
}

.text-channel-v14.has-mentions{
  padding-right:38px;
}

.emoji-picker{
  position:absolute;

  right:0;

  bottom:
    calc(100% + 6px);

  z-index:220;

  display:none;

  width:300px;

  padding:10px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:12px;

  background:#12151b;

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.42);
}

.emoji-picker.show{
  display:block;
}

.emoji-picker-title{
  margin:
    0 0 8px 2px;

  color:#79828e;

  font-size:9px;
  font-weight:700;

  text-transform:uppercase;
}

.emoji-grid{
  display:grid;

  grid-template-columns:
    repeat(8,1fr);

  gap:3px;
}

.emoji-option{
  width:31px;
  height:31px;

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

  border:0;
  border-radius:7px;

  background:transparent;

  font-size:18px;

  cursor:pointer;
}

.emoji-option:hover{
  background:
    rgba(255,255,255,.08);
}

@media (max-width:700px){

  .emoji-picker{
    left:0;
    right:0;

    width:auto;
  }

}

/* =========================================================
   SUPERLIVE GIPHY UI V6
========================================================= */

.gif-picker{
  position:absolute;

  right:0;

  bottom:
    calc(100% + 6px);

  z-index:230;

  display:none;

  width:360px;

  max-height:430px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:12px;

  background:#12151b;

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.45);
}

.gif-picker.show{
  display:block;
}

.gif-picker-head{
  padding:10px;

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

.gif-search{
  width:100%;
  height:34px;

  padding:0 11px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:8px;

  outline:0;

  background:#0d1015;

  color:#e6edf4;

  font-size:10px;
}

.gif-search:focus{
  border-color:
    rgba(61,174,255,.6);
}

.gif-grid{
  max-height:330px;

  overflow-y:auto;

  padding:8px;

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:6px;
}

.gif-item{
  position:relative;

  min-height:90px;

  padding:0;

  overflow:hidden;

  border:0;
  border-radius:8px;

  background:#0d1015;

  cursor:pointer;
}

.gif-item img{
  display:block;

  width:100%;
  height:100%;

  min-height:90px;
  max-height:160px;

  object-fit:cover;
}

.gif-item:hover{
  outline:
    2px solid
    rgba(61,174,255,.8);
}

.gif-status{
  grid-column:
    1 / -1;

  padding:24px 10px;

  color:#7b8490;

  font-size:10px;
  text-align:center;
}

.gif-footer{
  padding:
    7px
    10px;

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

  color:#656e7a;

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

  text-align:right;
}

.message-gif{
  display:block;

  max-width:
    min(
      430px,
      100%
    );

  max-height:420px;

  margin-top:8px;

  border-radius:10px;

  object-fit:contain;

  background:#0c0e12;
}

@media (max-width:700px){

  .gif-picker{
    left:0;
    right:0;

    width:auto;
  }

}

/* =========================================================
   GIPHY POSITION FIX - LEFT SIDE
========================================================= */

.chat-composer-wrap{
  position:relative;
}

.gif-picker{
  left:72px;
  right:auto;

  bottom:
    calc(100% + 6px);

  width:360px;
}

/*
 * Mantém dentro da tela em resoluções menores.
 */
@media (max-width:700px){

  .gif-picker{
    left:0;
    right:0;

    width:auto;
  }

}

/* =========================================================
   SUPERLIVE CHAT FILE UI V8
========================================================= */

.chat-file-preview{
  display:none;

  margin:
    0
    clamp(18px,3vw,42px);

  padding:
    10px 12px;

  align-items:center;

  gap:10px;

  background:#151820;

  border-left:
    3px solid
    #8d7aff;
}

.chat-file-preview.show{
  display:flex;
}

.chat-file-preview-icon{
  width:42px;
  height:42px;

  flex:0 0 42px;

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

  border-radius:9px;

  background:
    rgba(141,122,255,.12);

  color:#b2a7ff;

  font-size:18px;
}

.chat-file-preview-copy{
  min-width:0;
  flex:1;
}

.chat-file-preview-copy strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#e5ecf4;

  font-size:10px;
}

.chat-file-preview-copy span{
  display:block;

  margin-top:3px;

  color:#777f8a;

  font-size:9px;
}

.chat-file-preview-remove{
  width:26px;
  height:26px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#777f89;

  cursor:pointer;
}

.chat-file-preview-remove:hover{
  color:#fff;

  background:
    rgba(255,255,255,.07);
}

.message-file{
  width:
    min(
      470px,
      100%
    );

  margin-top:8px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:
    11px
    12px;

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

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  text-decoration:none;
}

.message-file:hover{
  background:
    rgba(255,255,255,.05);

  border-color:
    rgba(255,255,255,.11);
}

.message-file-icon{
  width:38px;
  height:38px;

  flex:0 0 38px;

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

  border-radius:9px;

  background:
    rgba(141,122,255,.12);

  color:#aa9fff;

  font-size:17px;
}

.message-file-copy{
  min-width:0;

  flex:1;
}

.message-file-copy strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#dfe6ee;

  font-size:10px;
}

.message-file-copy span{
  display:block;

  margin-top:3px;

  color:#747d89;

  font-size:8px;
}

.message-file-download{
  color:#77818d;

  font-size:16px;
}

.message-file-retention{
  margin-top:5px;

  color:#646c77;

  font-size:8px;
}

.message-file-retention.permanent{
  color:#67b98b;
}

.message-text strong{
  font-weight:800;
}

.message-text em{
  font-style:italic;
}

/* =========================================================
   SUPERLIVE LINK STYLE V9
========================================================= */

.message-text .text-link{
  color:#4fb6ff;

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    2px;

  word-break:
    break-word;

  cursor:pointer;
}

.message-text .text-link:hover{
  color:#7ac9ff;
}

/* =========================================================
   SUPERLIVE SOCIAL UI V10
========================================================= */


/* ===== Canal com mensagens novas ===== */

.text-channel-v14{
  position:relative;
}

.text-channel-v14.has-unread
.channel-name{
  color:#fff;
  font-weight:800;
}

.text-channel-v14.has-unread::after{
  content:"";

  position:absolute;

  left:-4px;
  top:50%;

  width:4px;
  height:18px;

  transform:
    translateY(-50%);

  border-radius:
    0 4px 4px 0;

  background:#d7dde6;
}

.text-channel-v14.has-mention::after{
  background:#ef4655;
}

.text-unread-badge{
  margin-left:auto;

  min-width:17px;
  height:17px;

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

  padding:0 5px;

  border-radius:9px;

  background:#4e5661;

  color:#fff;

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

  line-height:1;
}

/*
 * Se há menção, o badge vermelho já existente
 * é prioritário.
 */
.text-channel-v14.has-mention
.text-unread-badge{
  display:none;
}


/* ===== Separador NOVAS MENSAGENS ===== */

.text-new-messages-separator{
  position:relative;

  width:100%;

  display:flex;
  align-items:center;

  gap:10px;

  margin:
    13px 0
    10px;

  color:#ef5664;

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

  letter-spacing:.04em;

  text-transform:uppercase;
}

.text-new-messages-separator::before,
.text-new-messages-separator::after{
  content:"";

  height:1px;

  flex:1;

  background:
    rgba(239,86,100,.52);
}


/* ===== Curtidas ===== */

.text-like-row{
  display:flex;

  align-items:center;

  gap:6px;

  margin-top:6px;
}

.text-like-button{
  min-width:31px;
  height:25px;

  display:inline-flex;

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

  gap:5px;

  padding:0 8px;

  border:
    1px solid
    transparent;

  border-radius:8px;

  background:
    transparent;

  color:#8c95a1;

  cursor:pointer;

  font-size:10px;

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

.text-like-button:hover{
  background:
    rgba(255,255,255,.055);

  border-color:
    rgba(255,255,255,.08);

  color:#cdd4dc;
}

.text-like-button .heart{
  font-size:16px;

  line-height:1;
}

.text-like-button.liked{
  color:#ef4b5a;

  background:
    rgba(239,75,90,.09);

  border-color:
    rgba(239,75,90,.18);
}

.text-like-button:disabled{
  cursor:default;

  opacity:.48;
}

.text-like-button:disabled:hover{
  background:transparent;
  border-color:transparent;
}


/* ===== Há mensagens novas abaixo ===== */

.text-new-below-button{
  position:fixed;

  left:50%;
  bottom:105px;

  transform:
    translateX(-50%);

  z-index:200;

  display:none;

  align-items:center;

  gap:7px;

  height:31px;

  padding:0 13px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:16px;

  background:
    rgba(18,22,29,.96);

  box-shadow:
    0 8px 26px
    rgba(0,0,0,.34);

  color:#e7ebf0;

  cursor:pointer;

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

.text-new-below-button.show{
  display:inline-flex;
}

.text-new-below-button:hover{
  background:#252a33;
}


/* =========================================================
   SUPERLIVE COMMUNITY SIDEBAR UI V11
========================================================= */

.leaderboard-dynamic-list{
  min-height:76px;
}

.leaderboard-dynamic-list
.leader-row{
  min-width:0;
}

.leaderboard-user-copy{
  min-width:0;

  display:flex;
  flex-direction:column;

  justify-content:center;

  line-height:1.15;
}

.leaderboard-user-copy strong{
  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  color:#e8edf3;

  font-size:10px;
  font-weight:600;
}

.leaderboard-user-copy small{
  display:block;

  margin-top:2px;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  color:#66717e;

  font-size:7px;
  font-weight:500;
}

.leader-row
.leader-value{
  margin-left:auto;

  color:#697480;

  font-size:7px;

  white-space:nowrap;
}


/* ===== membros ===== */

#superliveMemberList{
  padding-bottom:22px;
}

#superliveMemberList
.member-row{
  min-width:0;

  display:flex;
  align-items:center;

  gap:8px;
}

.superlive-member-avatar{
  width:19px;
  height:19px;

  flex:0 0 19px;

  overflow:hidden;

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

  border-radius:50%;

  background:
    rgba(255,255,255,.08);

  background-size:cover;
  background-position:center;

  color:#fff;

  border:
    1px solid
    rgba(255,255,255,.18);

  font-size:7px;
  font-weight:800;
}

.superlive-member-copy{
  min-width:0;

  flex:1;

  display:flex;
  flex-direction:column;

  justify-content:center;

  line-height:1.12;
}

.superlive-member-copy strong{
  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  color:#dce2e9;

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

.superlive-member-copy small{
  display:block;

  margin-top:2px;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  color:#68737f;

  font-size:7px;
  font-weight:500;
}

.superlive-member-role{
  flex:0 0 auto;

  color:#51b6ff;

  font-size:6px;
  font-weight:800;

  text-transform:uppercase;
}


/* ===== loading / vazio ===== */

.superlive-sidebar-empty{
  padding:
    8px 0;

  color:#68727e;

  font-size:8px;
}


/* =========================================================
   SUPERLIVE MEMBER STATIC GUARD V12
========================================================= */

/*
 * A única lista válida de membros da sidebar
 * é a lista alimentada pela API.
 */
.sidebar-right
.member-list:not(#superliveMemberList){
  display:none !important;
}

#superliveMemberList{
  display:flex;
  flex-direction:column;
}

#superliveMemberList
.member-row{
  display:flex;
}


/* =========================================================
   SUPERLIVE DIRECT MESSAGE UI V13
========================================================= */

.rail-btn[title="Inbox"]{
  position:relative;
}

.dm-inbox-badge{
  position:absolute;

  top:-4px;
  right:-4px;

  min-width:16px;
  height:16px;

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

  padding:0 4px;

  border-radius:9px;

  background:#ef4054;

  color:#fff;

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

  line-height:1;

  box-shadow:
    0 0 0 2px #11151b;
}

.dm-inbox-badge.show{
  display:flex;
}


/* ===== lista Inbox na sidebar ===== */

.dm-sidebar-view{
  display:none;
}

.dm-sidebar-view.show{
  display:block;
}

.dm-sidebar-title{
  padding:
    15px
    8px
    8px;

  color:#fff;

  font-size:13px;
  font-weight:800;
}

.dm-sidebar-subtitle{
  padding:
    0
    8px
    11px;

  color:#66717e;

  font-size:8px;

  text-transform:uppercase;
}

.dm-thread-list{
  display:flex;
  flex-direction:column;

  gap:2px;
}

.dm-thread-item{
  width:100%;

  min-width:0;

  display:flex;
  align-items:center;

  gap:8px;

  padding:
    7px
    8px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#d9dfe6;

  text-align:left;

  cursor:pointer;
}

.dm-thread-item:hover,
.dm-thread-item.active{
  background:
    rgba(255,255,255,.055);
}

.dm-thread-avatar{
  width:27px;
  height:27px;

  flex:0 0 27px;

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

  overflow:hidden;

  border-radius:50%;

  background-size:cover;
  background-position:center;

  color:#fff;

  font-size:8px;
  font-weight:900;
}

.dm-thread-copy{
  min-width:0;
  flex:1;
}

.dm-thread-copy strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#e7ebf0;

  font-size:9px;
}

.dm-thread-copy small{
  display:block;

  margin-top:2px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#68727e;

  font-size:7px;
}

.dm-thread-badge{
  min-width:17px;
  height:17px;

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

  padding:0 5px;

  border-radius:9px;

  background:#ef4054;

  color:#fff;

  font-size:8px;
  font-weight:900;
}


/* ===== DM na área central ===== */

.superlive-dm-view{
  position:absolute;

  inset:0;

  z-index:150;

  display:none;

  flex-direction:column;

  background:#0c121b;

  color:#fff;
}

.superlive-dm-view.show{
  display:flex;
}

.superlive-dm-header{
  height:48px;

  flex:0 0 48px;

  display:flex;
  align-items:center;

  gap:9px;

  padding:
    0 16px;

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

.superlive-dm-header-avatar{
  width:27px;
  height:27px;

  flex:0 0 27px;

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

  overflow:hidden;

  border-radius:50%;

  background-size:cover;
  background-position:center;

  color:#fff;

  font-size:8px;
  font-weight:900;
}

.superlive-dm-header-copy{
  min-width:0;
}

.superlive-dm-header-copy strong{
  display:block;

  font-size:11px;
  color:#f0f3f6;
}

.superlive-dm-header-copy small{
  display:block;

  margin-top:2px;

  color:#697480;

  font-size:8px;
}

.superlive-dm-messages{
  flex:1;

  min-height:0;

  overflow-y:auto;

  padding:
    15px
    18px;

  scrollbar-width:thin;
}

.dm-message{
  display:flex;

  gap:9px;

  padding:
    6px
    4px;

  border-radius:7px;
}

.dm-message:hover{
  background:
    rgba(255,255,255,.018);
}

.dm-message-avatar{
  width:29px;
  height:29px;

  flex:0 0 29px;

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

  overflow:hidden;

  border-radius:50%;

  background-size:cover;
  background-position:center;

  color:#fff;

  font-size:8px;
  font-weight:900;
}

.dm-message-body{
  min-width:0;

  flex:1;
}

.dm-message-meta{
  display:flex;
  align-items:baseline;

  gap:7px;

  margin-bottom:3px;
}

.dm-message-name{
  color:#e8edf2;

  font-size:9px;
  font-weight:800;

  cursor:pointer;
}

.dm-message-name:hover{
  text-decoration:underline;
}

.dm-message-time{
  color:#596472;

  font-size:7px;
}

.dm-message-text{
  color:#cbd1d8;

  font-size:10px;

  line-height:1.45;

  word-break:break-word;
}

.dm-message-text a{
  color:#4fb6ff;

  text-decoration:underline;
}

.dm-empty{
  height:100%;

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

  color:#65717d;

  text-align:center;
}

.dm-empty strong{
  margin-bottom:5px;

  color:#e8edf2;

  font-size:13px;
}


/* ===== composer DM ===== */

.superlive-dm-composer-wrap{
  flex:0 0 auto;

  padding:
    8px
    16px
    14px;
}

.superlive-dm-composer{
  min-height:44px;

  display:flex;
  align-items:flex-end;

  gap:8px;

  padding:
    7px
    8px
    7px
    11px;

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

  border-radius:10px;

  background:#171c24;
}

.superlive-dm-input{
  flex:1;

  min-width:0;
  min-height:29px;
  max-height:120px;

  resize:none;

  padding:
    6px 0;

  border:0;
  outline:0;

  background:transparent;

  color:#e7ecf1;

  font:inherit;
  font-size:10px;

  line-height:1.4;
}

.superlive-dm-send{
  height:30px;

  padding:
    0 13px;

  border:0;
  border-radius:7px;

  background:#198ee7;

  color:#fff;

  cursor:pointer;

  font-size:8px;
  font-weight:900;
}


/* ===== card "Enviar mensagem" ===== */

.dm-profile-action{
  position:fixed;

  z-index:9999;

  display:none;

  min-width:174px;

  padding:7px;

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

  border-radius:10px;

  background:#171c24;

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.42);
}

.dm-profile-action.show{
  display:block;
}

.dm-profile-action-name{
  padding:
    5px
    7px
    2px;

  color:#eef2f6;

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

.dm-profile-action-user{
  padding:
    0
    7px
    7px;

  color:#687480;

  font-size:7px;
}

.dm-profile-action button{
  width:100%;

  height:30px;

  border:0;
  border-radius:7px;

  background:#208ee5;

  color:#fff;

  cursor:pointer;

  font-size:8px;
  font-weight:900;
}

.dm-profile-action button:hover{
  background:#31a0f2;
}


/* elementos que podem abrir DM */

[data-dm-user-id]{
  cursor:pointer;
}


/* =========================================================
   SUPERLIVE GLOBAL NOTIFICATION BADGES V14

   IMPORTANTE:
   z-index não vence overflow:hidden.
   Então:
   1. liberamos overflow nos hosts;
   2. colocamos badges acima da interface.
========================================================= */


/* =========================================================
   HOSTS QUE PODEM CONTER BOLINHAS
========================================================= */

.rail-btn,
.menu-icon-btn,
.rail-btn[title="Inbox"],
.rail-btn[aria-label="Inbox"],

.channel-item,
.text-channel-v14,

.dm-thread-item{
  overflow:visible !important;
}


/*
 * O menu vertical também não pode recortar
 * badge que ultrapassa alguns pixels do botão.
 */
nav,
.rail,
.sidebar-rail,
.left-rail,
.app-rail{
  overflow:visible;
}


/* =========================================================
   CAMADA GLOBAL DE NOTIFICAÇÕES
========================================================= */

.dm-inbox-badge,

.text-mention-badge,
.text-unread-badge,

.dynamic-badge,
.channel-badge,

.dm-thread-badge,

[class*="notification-badge"]{
  position:relative;

  z-index:999999 !important;

  isolation:auto;
}


/* =========================================================
   INBOX
========================================================= */

.rail-btn[title="Inbox"],
.rail-btn[aria-label="Inbox"]{
  position:relative;

  z-index:20;
}

.dm-inbox-badge{
  position:absolute !important;

  z-index:1000000 !important;

  /*
   * Mantém o badge levemente para fora
   * do canto superior direito.
   */
  top:-5px;
  right:-5px;

  pointer-events:none;
}


/* =========================================================
   CANAIS / MENÇÕES
========================================================= */

.text-channel-v14{
  position:relative;
}

.text-channel-v14
.text-mention-badge,

.text-channel-v14
.text-unread-badge{
  z-index:1000000 !important;
}


/* =========================================================
   THREADS DO INBOX
========================================================= */

.dm-thread-item{
  position:relative;
}

.dm-thread-badge{
  z-index:1000000 !important;
}


/* =========================================================
   SUPERLIVE DM PUBLIC USER LINK V14
========================================================= */

.message-name.dm-user-link,
.message-author.dm-user-link,
.message-author-button.dm-user-link{
  cursor:pointer;

  text-decoration:none;
}

.message-name.dm-user-link:hover,
.message-author.dm-user-link:hover,
.message-author-button.dm-user-link:hover{
  text-decoration:underline;

  text-underline-offset:2px;
}


/*
 * Avatar do autor também pode abrir o mesmo card
 * quando receber data-dm-user-id.
 */
.text-avatar[data-dm-user-id],
.message-avatar[data-dm-user-id],
.avatar[data-dm-user-id]{
  cursor:pointer;
}


/* =========================================================
   SUPERLIVE BRAND HOME V1
========================================================= */

.brand-mark{
  cursor:pointer;

  transition:
    transform .15s ease,
    filter .15s ease;
}

.brand-mark:hover{
  transform:
    scale(1.04);

  filter:
    brightness(1.12);
}

.brand-mark:active{
  transform:
    scale(.97);
}

.brand-mark:focus-visible{
  outline:
    2px solid
    #2d8cff;

  outline-offset:
    4px;

  border-radius:
    8px;
}


/* =========================================================
   SUPERLIVE TEACHER BROADCAST UI V16
========================================================= */

@property --broadcast-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@keyframes superliveBroadcastSpin{
  to{
    --broadcast-angle:360deg;
  }
}

.teacher-broadcast-message{
  position:relative !important;

  isolation:isolate;

  margin:
    7px 3px !important;

  padding:
    9px 10px !important;

  border-radius:
    12px !important;

  background:
    rgba(255,255,255,.025);
}

.teacher-broadcast-message::before{
  content:"";

  position:absolute;

  inset:-3px;

  z-index:-1;

  pointer-events:none;

  border-radius:
    15px;

  padding:3px;

  background:
    conic-gradient(
      from var(--broadcast-angle),

      #ff3d67,
      #ff8a25,
      #ffe033,
      #43e36a,
      #18d8ff,
      #5275ff,
      #a54cff,
      #ff41c4,
      #ff3d67
    );

  -webkit-mask:
    linear-gradient(#000 0 0)
      content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:
    xor;

  mask-composite:
    exclude;

  animation:
    superliveBroadcastSpin
    2.5s
    linear
    infinite;
}

.teacher-broadcast-message::after{
  content:"";

  position:absolute;

  inset:-5px;

  z-index:-2;

  pointer-events:none;

  border-radius:17px;

  background:
    conic-gradient(
      from var(--broadcast-angle),
      rgba(255,61,103,.18),
      rgba(255,224,51,.15),
      rgba(24,216,255,.17),
      rgba(165,76,255,.17),
      rgba(255,61,103,.18)
    );

  filter:
    blur(7px);

  opacity:.55;

  animation:
    superliveBroadcastSpin
    2.5s
    linear
    infinite;
}

.broadcast-mention{
  color:#ffd84d !important;

  font-weight:900;
}


/* ===== badge vermelho ===== */

.text-broadcast-badge{
  position:relative;

  z-index:1000000 !important;

  min-width:17px;
  height:17px;

  display:none;

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

  margin-left:auto;

  padding:0 5px;

  border-radius:9px;

  background:#ef4054;

  color:#fff;

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

  overflow:visible !important;
}

.text-broadcast-badge.show{
  display:inline-flex;
}

.text-channel-v14.has-broadcast
.text-unread-badge{
  display:none !important;
}


/* =========================================================
   SUPERLIVE PINNED BROADCAST UI V17
========================================================= */

.pinned-broadcast-wrap{
  flex:0 0 auto;

  display:none;

  padding:
    8px
    16px
    7px;

  background:
    linear-gradient(
      to bottom,
      rgba(10,14,20,0),
      rgba(10,14,20,.96)
    );
}

.pinned-broadcast-wrap.show{
  display:block;
}

.pinned-broadcast{
  position:relative;

  isolation:isolate;

  padding:
    10px
    12px;

  border-radius:
    11px;

  background:#151a22;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.28);
}

.pinned-broadcast::before{
  content:"";

  position:absolute;

  inset:-3px;

  z-index:-1;

  border-radius:
    14px;

  padding:3px;

  background:
    conic-gradient(
      from var(--broadcast-angle),

      #ff3d67,
      #ff8a25,
      #ffe033,
      #43e36a,
      #18d8ff,
      #5275ff,
      #a54cff,
      #ff41c4,
      #ff3d67
    );

  -webkit-mask:
    linear-gradient(#000 0 0)
      content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:
    xor;

  mask-composite:
    exclude;

  animation:
    superliveBroadcastSpin
    2.5s
    linear
    infinite;
}

.pinned-broadcast-kicker{
  margin-bottom:5px;

  color:#ffdf4d;

  font-size:7px;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.pinned-broadcast-author{
  display:flex;

  align-items:center;

  gap:7px;

  margin-bottom:5px;
}

.pinned-broadcast-avatar{
  width:24px;
  height:24px;

  flex:0 0 24px;

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

  overflow:hidden;

  border-radius:50%;

  background-size:cover;
  background-position:center;

  color:#fff;

  font-size:7px;
  font-weight:900;
}

.pinned-broadcast-copy{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.pinned-broadcast-copy strong{
  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  color:#f1f4f7;

  font-size:9px;
}

.pinned-broadcast-copy small{
  margin-top:1px;

  color:#697480;

  font-size:7px;
}

.pinned-broadcast-text{
  color:#d8dee5;

  font-size:9px;

  line-height:1.45;

  word-break:break-word;
}

.pinned-broadcast-text
.broadcast-mention{
  color:#ffdf4d;

  font-weight:900;
}


/* =========================================================
   SUPERLIVE PINNED BROADCAST CLOSE V18
========================================================= */

.pinned-broadcast{
  padding-top:12px !important;
}

.pinned-broadcast-close{
  position:absolute;

  z-index:10;

  top:7px;
  right:8px;

  display:flex;
  align-items:center;

  gap:5px;

  height:24px;

  padding:
    0 7px
    0 5px;

  border:0;
  border-radius:12px;

  background:
    rgba(255,255,255,.055);

  color:#aeb6c0;

  cursor:pointer;

  font-size:7px;
  font-weight:700;

  white-space:nowrap;
}

.pinned-broadcast-close:hover{
  background:
    rgba(255,255,255,.10);

  color:#fff;
}

.pinned-broadcast-close-icon{
  width:14px;
  height:14px;

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

  border-radius:50%;

  background:
    rgba(255,255,255,.10);

  color:#fff;

  font-size:10px;
  line-height:1;
}

.pinned-broadcast-kicker{
  padding-right:105px;
}


/* =========================================================
   SUPERLIVE INLINE LIKE V24
========================================================= */

.superlive-inline-actions-v24{
  display:flex !important;

  flex-direction:row !important;
  flex-wrap:wrap !important;

  align-items:center !important;

  gap:5px !important;
}


/*
 * O coração passa a ser só mais uma ação.
 */
.superlive-inline-like-v24{
  position:static !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:28px !important;
  height:26px !important;

  margin:
    0 !important;

  padding:
    0 8px !important;

  border-radius:
    6px !important;

  vertical-align:
    middle !important;
}


/*
 * Não deixa margens antigas da barra de reação
 * criarem uma segunda linha vazia.
 */
.superlive-inline-actions-v24
.superlive-inline-like-v24{
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/* =========================================================
   SUPERLIVE REAL INLINE LIKE V25
========================================================= */


/*
 * Esconde qualquer resto visual do botão obsoleto
 * que o V24 tenha deixado.
 */
.superlive-inline-like-v24:not(
  .superlive-real-like-v25
){
  display:none !important;
}


/*
 * Uma única linha:
 * Responder | Editar | Apagar | Like
 */
.superlive-actions-v25{
  display:flex !important;

  flex-direction:row !important;
  flex-wrap:nowrap !important;

  align-items:center !important;

  gap:5px !important;
}


/*
 * Wrapper real do like deixa de ocupar
 * uma linha inteira.
 */
.superlive-real-like-wrap-v25{
  display:inline-flex !important;

  width:auto !important;
  height:auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  flex:
    0 0 auto !important;

  align-items:center !important;
}


/*
 * Mantém o MESMO botão funcional,
 * apenas em formato compacto.
 */
.superlive-real-like-v25{
  position:static !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  width:auto !important;

  min-width:27px !important;
  height:26px !important;

  margin:
    0 !important;

  padding:
    0 8px !important;

  flex:
    0 0 auto !important;

  vertical-align:middle !important;
}


/*
 * Qualquer margem antiga da área de reação
 * não pode abrir espaço vertical.
 */
.superlive-actions-v25
.superlive-real-like-wrap-v25,

.superlive-actions-v25
.superlive-real-like-v25{
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/*
 * Se o wrapper original tinha min-height,
 * zeramos ao colocá-lo dentro das ações.
 */
.superlive-actions-v25
.superlive-real-like-wrap-v25{
  min-height:0 !important;
}


/*
 * Evita aquele buraco abaixo da mensagem.
 */
#v14ChatMessages
[data-message-id]
> :empty{
  min-height:0;
}


/* =========================================================
   SUPERLIVE INBOX TYPOGRAPHY V28

   Escala somente a tipografia do sistema de DM.
   Não interfere no chat público nem nos canais.
========================================================= */


/* =========================================================
   COLUNA ESQUERDA DO INBOX
========================================================= */

/* Título "Inbox" */
.dm-inbox-title,
.dm-sidebar-title,
.inbox-title,
#superliveDmSidebar h2,
#superliveDmSidebar .title{
  font-size:20px !important;
  line-height:1.2 !important;
}


/* "MENSAGENS DIRETAS" */
.dm-inbox-subtitle,
.dm-sidebar-subtitle,
.inbox-subtitle,
#superliveDmSidebar .subtitle,
#superliveDmSidebar small.section-label{
  font-size:10px !important;
  line-height:1.3 !important;

  letter-spacing:.07em !important;
}


/* Nome da pessoa na lista */
.dm-thread-name,
.dm-user-name,
.dm-thread-item strong,
.dm-thread strong,
#superliveDmThreadList strong,
#superliveDmThreads strong{
  font-size:14px !important;
  line-height:1.25 !important;
}


/* @username da pessoa na lista */
.dm-thread-username,
.dm-user-username,
.dm-thread-item small,
.dm-thread small,
#superliveDmThreadList small,
#superliveDmThreads small{
  font-size:10px !important;
  line-height:1.25 !important;
}


/*
 * Como a fonte cresceu, damos um pouco mais
 * de altura à linha sem exagerar.
 */
.dm-thread-item,
.dm-thread,
[data-dm-thread-id]{
  min-height:54px !important;
}


/* =========================================================
   CABEÇALHO DA CONVERSA
========================================================= */

.dm-chat-header strong,
.dm-conversation-header strong,
.dm-header-name,
#superliveDmHeader strong,
#superliveDmConversationHeader strong{
  font-size:15px !important;
  line-height:1.25 !important;
}


.dm-chat-header small,
.dm-conversation-header small,
.dm-header-username,
#superliveDmHeader small,
#superliveDmConversationHeader small{
  font-size:10px !important;
  line-height:1.25 !important;
}


/* =========================================================
   MENSAGENS DIRETAS
========================================================= */

/* Nome do autor */
.dm-message-name,
.dm-message-author,
.dm-message .message-name,
#superliveDmMessages .message-name,
#superliveDmMessages strong{
  font-size:14px !important;

  line-height:1.25 !important;

  font-weight:700 !important;
}


/* Hora */
.dm-message-time,
.dm-message .message-time,
#superliveDmMessages .message-time,
#superliveDmMessages time{
  font-size:9.5px !important;

  line-height:1.25 !important;
}


/* Texto efetivo da DM */
.dm-message-text,
.dm-message .message-text,
#superliveDmMessages .message-text,
#superliveDmMessages .dm-text{
  font-size:14px !important;

  line-height:1.55 !important;
}


/*
 * Caso o renderer da DM use o mesmo nome estrutural
 * message-body, mas dentro do host de Inbox.
 */
#superliveDmMessages .message-body{
  font-size:14px !important;
}


/* Links dentro da DM seguem o texto */
#superliveDmMessages a,
.dm-message-text a{
  font-size:inherit !important;
}


/* =========================================================
   COMPOSER DA DM
========================================================= */

.dm-composer textarea,
.dm-composer input[type="text"],
.dm-chat-input,
#superliveDmInput,
#superliveDmComposer textarea{
  font-size:13px !important;

  line-height:1.45 !important;
}


/* placeholder proporcional */
.dm-composer textarea::placeholder,
.dm-chat-input::placeholder,
#superliveDmInput::placeholder,
#superliveDmComposer textarea::placeholder{
  font-size:13px !important;
}


/* =========================================================
   REPLY / PREVIEW DENTRO DE DM
========================================================= */

.dm-reply-preview,
.dm-reply-preview strong,
.dm-reply-preview span,
.dm-message-reply,
.dm-message-reply strong,
.dm-message-reply span{
  font-size:11px !important;

  line-height:1.4 !important;
}


/* =========================================================
   SEGURANÇA:
   NÃO AUMENTAR ÍCONES / BOTÕES
========================================================= */

.dm-composer button,
.dm-chat-header button,
.dm-conversation-header button,
#superliveDmHeader button,
#superliveDmComposer button{
  font-size:inherit;
}


/* =========================================================
   SUPERLIVE CHAT TYPOGRAPHY V29

   Aumenta somente o chat de texto.
   Não altera canais, leaderboard ou barra lateral.
========================================================= */


/* =========================================================
   CABEÇALHO DA MENSAGEM
========================================================= */

/* Nome de exibição */
#v14ChatMessages
.message-name{
  font-size:14px !important;

  line-height:1.3 !important;

  font-weight:700 !important;
}


/* @username */
#v14ChatMessages
.message-username,

#v14ChatMessages
.message-user,

#v14ChatMessages
[data-message-username]{
  font-size:10px !important;

  line-height:1.3 !important;
}


/* DD/MM/AAAA HH:MM */
#v14ChatMessages
.message-time{
  font-size:10px !important;

  line-height:1.3 !important;

  white-space:nowrap !important;

  margin-left:5px !important;
}


/*
 * Linha inteira:
 * nome + @usuario + data + hora
 */
#v14ChatMessages
.message-meta{
  display:flex !important;

  align-items:baseline !important;

  flex-wrap:wrap !important;

  column-gap:5px !important;

  row-gap:2px !important;

  line-height:1.3 !important;
}


/* =========================================================
   CORPO DA MENSAGEM
========================================================= */

#v14ChatMessages
.message-text{
  font-size:14px !important;

  line-height:1.55 !important;
}


/* Links */
#v14ChatMessages
.message-text a,
#v14ChatMessages
.chat-link{
  font-size:inherit !important;
}


/* Menções */
#v14ChatMessages
.mention,
#v14ChatMessages
.broadcast-mention{
  font-size:inherit !important;
}


/* =========================================================
   RESPOSTAS
========================================================= */

#v14ChatMessages
.reply-box{
  font-size:11px !important;

  line-height:1.45 !important;
}


#v14ChatMessages
.reply-box strong{
  font-size:11px !important;

  line-height:1.4 !important;
}


#v14ChatMessages
.reply-box span{
  font-size:11px !important;

  line-height:1.45 !important;
}


/* =========================================================
   AÇÕES DA MENSAGEM
========================================================= */

#v14ChatMessages
[data-message-action]{
  font-size:10px !important;
}


/* Like */
#v14ChatMessages
.superlive-real-like-v25,
#v14ChatMessages
.like-button{
  font-size:10px !important;
}


#v14ChatMessages
.like-heart{
  font-size:15px !important;
}


#v14ChatMessages
.like-count{
  font-size:10px !important;
}


/* =========================================================
   ARQUIVOS
========================================================= */

#v14ChatMessages
.file-message-name{
  font-size:13px !important;
}


#v14ChatMessages
.file-message-size{
  font-size:10px !important;
}


#v14ChatMessages
.file-download-button{
  font-size:10px !important;
}


/* =========================================================
   AVISO @TODOS
========================================================= */

#v14ChatMessages
.teacher-broadcast-message
.message-text{
  font-size:14px !important;
}


/* =========================================================
   COMPOSER
========================================================= */

/*
 * Texto que o aluno digita.
 */
#v14ChatInput{
  font-size:13px !important;

  line-height:1.5 !important;
}


#v14ChatInput::placeholder{
  font-size:13px !important;
}


/*
 * IMPORTANTE:
 * mantém ENVIAR no tamanho pequeno original.
 */
#v14ComposerWrap
.send-message,

#v14ComposerWrap
#sendMessage,

#v14ComposerWrap
#v14SendMessage{
  font-size:10px !important;

  line-height:1 !important;
}


/*
 * Ícones do composer também não aumentam
 * junto com o texto.
 */
#v14ComposerWrap
.composer-icon{
  font-size:inherit;
}


/* =========================================================
   SUPERLIVE PRIVATE SERVERS UI V30
========================================================= */

.superlive-servers-view{
  width:100%;
  min-height:100%;

  position:relative;

  padding:
    10px
    4px
    30px;
}


.superlive-servers-head{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:24px;
}


.superlive-servers-title{
  margin:0;

  color:#f4f6fa;

  font-size:
    clamp(
      24px,
      2.2vw,
      34px
    );

  line-height:1.1;

  font-weight:850;
}


.superlive-servers-subtitle{
  margin:
    8px
    0
    0;

  max-width:660px;

  color:#8d96a4;

  font-size:12px;

  line-height:1.5;
}


/* =========================================================
   ENGRENAGEM PROFESSOR
========================================================= */

.superlive-servers-manage{
  width:38px;
  height:38px;

  flex:
    0 0 38px;

  display:none;

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

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:12px;

  background:
    rgba(255,255,255,.045);

  color:#d7dde6;

  cursor:pointer;

  font-size:18px;

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


.superlive-servers-manage.show{
  display:flex;
}


.superlive-servers-manage:hover{
  transform:
    rotate(12deg)
    scale(1.06);

  background:
    rgba(255,255,255,.085);

  border-color:
    rgba(255,255,255,.20);
}


/* =========================================================
   GRID
========================================================= */

.superlive-servers-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:14px;
}


@media (max-width:1450px){

  .superlive-servers-grid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }
}


@media (max-width:880px){

  .superlive-servers-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:10px;
  }

}


/* =========================================================
   CARD
========================================================= */

.superlive-server-card{
  min-width:0;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  border:
    1px solid
    rgba(255,255,255,.095);

  border-radius:15px;

  background:
    #17191f;

  color:#fff;

  text-decoration:none;

  cursor:pointer;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.superlive-server-card:hover{
  transform:
    translateY(-3px)
    scale(1.018);

  border-color:
    rgba(255,255,255,.22);

  background:
    #1c1f27;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.24);
}


.superlive-server-banner{
  min-height:112px;

  display:flex;

  align-items:center;

  padding:
    18px;

  background:
    linear-gradient(
      135deg,
      #092b24,
      #0d5545
    );
}


.superlive-server-card:nth-child(6n + 2)
.superlive-server-banner{
  background:
    linear-gradient(
      135deg,
      #25244d,
      #243f91
    );
}


.superlive-server-card:nth-child(6n + 3)
.superlive-server-banner{
  background:
    linear-gradient(
      135deg,
      #49234a,
      #712670
    );
}


.superlive-server-card:nth-child(6n + 4)
.superlive-server-banner{
  background:
    linear-gradient(
      135deg,
      #51331e,
      #8b5427
    );
}


.superlive-server-card:nth-child(6n + 5)
.superlive-server-banner{
  background:
    linear-gradient(
      135deg,
      #193b59,
      #166c83
    );
}


.superlive-server-card:nth-child(6n)
.superlive-server-banner{
  background:
    linear-gradient(
      135deg,
      #43201f,
      #832e39
    );
}


.superlive-server-name{
  max-width:100%;

  color:#fff;

  font-size:
    clamp(
      19px,
      1.6vw,
      27px
    );

  line-height:1.05;

  font-weight:900;

  letter-spacing:
    -.025em;

  text-shadow:
    0 2px 10px
    rgba(0,0,0,.18);
}


.superlive-server-foot{
  min-height:54px;

  display:flex;

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

  gap:10px;

  padding:
    10px
    13px;
}


.superlive-server-foot span{
  min-width:0;

  overflow:hidden;

  color:#929aa7;

  font-size:10px;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.superlive-server-foot strong{
  flex:0 0 auto;

  color:#4db5ff;

  font-size:10px;

  font-weight:750;
}


.superlive-servers-empty{
  grid-column:
    1 / -1;

  padding:
    42px 20px;

  border:
    1px dashed
    rgba(255,255,255,.12);

  border-radius:15px;

  color:#828c99;

  text-align:center;

  font-size:13px;
}


/* =========================================================
   ADMIN MODAL
========================================================= */

.superlive-server-modal-layer{
  position:fixed;

  inset:0;

  z-index:10000000;

  display:none;

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

  padding:20px;

  background:
    rgba(3,5,9,.72);

  backdrop-filter:
    blur(5px);
}


.superlive-server-modal-layer.show{
  display:flex;
}


.superlive-server-modal{
  width:
    min(
      620px,
      100%
    );

  max-height:
    min(
      720px,
      calc(100vh - 40px)
    );

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:18px;

  background:#12151b;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.55);
}


.superlive-server-modal-head{
  min-height:58px;

  display:flex;

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

  gap:14px;

  padding:
    0 16px;

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


.superlive-server-modal-head strong{
  font-size:15px;
}


.superlive-server-modal-close{
  width:34px;
  height:34px;

  border:0;

  border-radius:10px;

  background:
    rgba(255,255,255,.055);

  color:#cdd3db;

  cursor:pointer;

  font-size:20px;
}


.superlive-server-modal-body{
  min-height:0;

  overflow:auto;

  padding:16px;
}


.superlive-server-admin-form{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1.4fr)
    auto;

  align-items:end;

  gap:9px;

  margin-bottom:18px;

  padding-bottom:17px;

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


.superlive-server-field{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:6px;
}


.superlive-server-field label{
  color:#9ba4b0;

  font-size:9px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.04em;
}


.superlive-server-field input{
  width:100%;
  height:37px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:9px;

  outline:none;

  background:#0b0d12;

  color:#fff;

  font-size:11px;
}


.superlive-server-field input:focus{
  border-color:#198fdc;
}


.superlive-server-save{
  height:37px;

  padding:
    0 14px;

  border:0;

  border-radius:9px;

  background:#087fc8;

  color:#fff;

  cursor:pointer;

  font-size:10px;

  font-weight:750;
}


.superlive-server-save:hover{
  background:#1195e7;
}


.superlive-server-admin-error{
  grid-column:
    1 / -1;

  min-height:0;

  color:#ff6c76;

  font-size:9px;
}


.superlive-server-admin-list{
  display:flex;
  flex-direction:column;

  gap:7px;
}


.superlive-server-admin-row{
  min-width:0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:10px;

  padding:
    10px;

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

  border-radius:11px;

  background:
    rgba(255,255,255,.025);
}


.superlive-server-admin-copy{
  min-width:0;
}


.superlive-server-admin-copy strong{
  display:block;

  overflow:hidden;

  color:#e9edf2;

  font-size:11px;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.superlive-server-admin-copy small{
  display:block;

  overflow:hidden;

  margin-top:3px;

  color:#727c89;

  font-size:8px;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.superlive-server-admin-actions{
  display:flex;

  gap:5px;
}


.superlive-server-admin-actions button{
  height:28px;

  padding:
    0 9px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:8px;

  background:
    rgba(255,255,255,.045);

  color:#bbc3cd;

  cursor:pointer;

  font-size:9px;
}


.superlive-server-admin-actions
.server-delete{
  color:#ff7e88;
}


@media (max-width:650px){

  .superlive-server-admin-form{
    grid-template-columns:1fr;
  }

  .superlive-server-save{
    width:100%;
  }

}


/* =========================================================
   SUPERLIVE SERVERS PADDING V31
========================================================= */

.superlive-servers-view{
  padding:20px !important;
  box-sizing:border-box !important;
}



/* =========================================================
   SUPERLIVE TOOLBAR V31
========================================================= */


/*
 * Curtida antiga não aparece.
 */

.text-like-row,
.text-like-button,
.superlive-inline-like-v24,
.superlive-real-like-v25,
.superlive-stale-like-v24{

  display:none !important;
}



/* ---------------------------------------------------------
   TOOLBAR
--------------------------------------------------------- */

.text-message{

  position:relative !important;
}


.superlive-toolbar-v31{

  position:absolute;

  top:-17px;
  right:16px;

  height:48px;

  display:flex;
  align-items:center;

  gap:3px;

  padding:5px 8px;

  box-sizing:border-box;

  background:#17181d;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:10px;

  box-shadow:
    0 8px 22px rgba(0,0,0,.38);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transform:
    translateY(4px);

  transition:
    opacity .13s ease,
    visibility .13s ease,
    transform .13s ease;

  z-index:500;
}


.text-message:hover
.superlive-toolbar-v31,

.superlive-toolbar-v31:hover{

  opacity:1;
  visibility:visible;

  pointer-events:auto;

  transform:
    translateY(0);
}



/* ---------------------------------------------------------
   BOTÕES
--------------------------------------------------------- */

.superlive-toolbar-v31 button{

  width:36px;
  height:36px;

  min-width:36px;

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

  padding:0;
  margin:0;

  border:0;
  border-radius:7px;

  background:transparent;

  cursor:pointer;

  box-shadow:none;

  transition:
    background .12s ease,
    transform .12s ease;
}


.superlive-toolbar-v31 button:hover{

  background:
    rgba(255,255,255,.07);

  transform:
    translateY(-1px);
}



/* dois emojis recentes */

.superlive-v31-emoji{

  font-size:23px !important;

  line-height:1 !important;
}



/* ---------------------------------------------------------
   ÍCONES
--------------------------------------------------------- */

.superlive-v31-icon{

  display:block;

  width:24px;
  height:24px;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  pointer-events:none;
}



/* coração */

.superlive-v31-icon.like{

  background-image:
    url("/superlive/icones/bar_like.png");
}


.superlive-v31-icon-button:hover
.superlive-v31-icon.like{

  background-image:
    url("/superlive/icones/bar_like_hover.png");
}



/* seletor */

.superlive-v31-icon.emoji{

  background-image:
    url("/superlive/icones/bar_emoji.png");
}


.superlive-v31-icon-button:hover
.superlive-v31-icon.emoji{

  background-image:
    url("/superlive/icones/bar_emoji_hover.png");
}



/* editar */

.superlive-v31-icon.edit{

  background-image:
    url("/superlive/icones/bar_edit.png");
}


.superlive-v31-icon-button:hover
.superlive-v31-icon.edit{

  background-image:
    url("/superlive/icones/bar_edit_hover.png");
}



/* responder */

.superlive-v31-icon.reply{

  background-image:
    url("/superlive/icones/bar_responder.png");
}


.superlive-v31-icon-button:hover
.superlive-v31-icon.reply{

  background-image:
    url("/superlive/icones/bar_responder_hover.png");
}



/* excluir */

.superlive-v31-icon.delete{

  width:25px;
  height:25px;

  background-image:
    url("/superlive/icones/bar_lixeira.png");
}


.superlive-v31-icon-button:hover
.superlive-v31-icon.delete{

  background-image:
    url("/superlive/icones/bar_lixeira_hover.png");
}



/* divisor */

.superlive-v31-divider{

  width:1px;
  height:27px;

  flex:
    0 0 1px;

  margin:
    0 6px;

  background:
    rgba(255,255,255,.11);
}



/* ---------------------------------------------------------
   REAÇÕES ABAIXO
--------------------------------------------------------- */

.superlive-reaction-row-v31{

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

  gap:5px;

  min-height:28px;

  margin-top:7px;

  padding:0;
}


.superlive-reaction-row-v31.empty{

  display:none;
}


.superlive-reaction-v31{

  height:28px;
  min-width:42px;

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

  gap:5px;

  margin:0;
  padding:0 8px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:8px;

  background:#1d1f24;

  color:#d9dce1;

  font-family:inherit;

  cursor:pointer;

  box-shadow:none;
}


.superlive-reaction-v31:hover{

  background:#27292f;

  border-color:
    rgba(255,255,255,.18);
}


.superlive-reaction-v31.mine{

  background:
    rgba(88,101,242,.14);

  border-color:
    rgba(88,101,242,.80);
}


.superlive-reaction-v31 span{

  font-size:17px;

  line-height:1;
}


.superlive-reaction-v31 b{

  font-size:12px;

  font-weight:600;

  line-height:1;
}



/* ---------------------------------------------------------
   PICKER
--------------------------------------------------------- */

.superlive-picker-v31{

  position:fixed;

  width:310px;
  max-height:330px;

  display:none;

  grid-template-columns:
    repeat(8,1fr);

  gap:4px;

  padding:10px;

  overflow-y:auto;

  box-sizing:border-box;

  background:#18191f;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:11px;

  box-shadow:
    0 14px 40px rgba(0,0,0,.50);

  z-index:999999;
}


.superlive-picker-v31.open{

  display:grid;
}


.superlive-picker-v31 button{

  width:32px;
  height:32px;

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

  padding:0;

  border:0;
  border-radius:6px;

  background:transparent;

  font-size:20px;

  cursor:pointer;
}


.superlive-picker-v31 button:hover{

  background:
    rgba(255,255,255,.08);

  transform:
    scale(1.08);
}



@media(max-width:700px){

  .superlive-toolbar-v31{

    right:6px;
  }


  .superlive-picker-v31{

    width:280px;

    grid-template-columns:
      repeat(7,1fr);
  }
}




/* =========================================================
   SUPERLIVE REACTION FIX V32
========================================================= */


/*
 * Chips V31 nunca podem assumir características
 * das antigas message-actions.
 */

.superlive-reaction-row-v31{

  position:static !important;

  transform:none !important;

  opacity:1 !important;
  visibility:visible !important;

  pointer-events:auto !important;

  background:transparent !important;

  border:0 !important;
  box-shadow:none !important;
}


.superlive-reaction-row-v31
.superlive-reaction-v31{

  position:static !important;

  float:none !important;

  transform:none !important;

  opacity:1 !important;
  visibility:visible !important;

  pointer-events:auto !important;
}


/*
 * Nenhum botão de reação V31 poderá visualmente
 * virar botão de message-actions.
 */

.message-actions
.superlive-reaction-v31{

  display:none !important;
}


/*
 * Oculta os elementos legados restantes,
 * sem afetar a V31.
 */

.text-message
.text-like-row,

.text-message
.text-like-button,

.text-message
.superlive-inline-like-v24,

.text-message
.superlive-real-like-v25,

.text-message
.superlive-stale-like-v24{

  display:none !important;
}




/* =========================================================
   SUPERLIVE CONTEXT PANEL V33
========================================================= */


/* ---------------------------------------------------------
   VIEW DE CHAMADA
--------------------------------------------------------- */

.superlive-call-context-v33{

  display:none;

  height:100%;
  min-height:0;

  padding:
    66px 10px 10px;

  box-sizing:border-box;

  flex-direction:column;

  overflow:hidden;
}


/*
 * Quando a chamada assumir o painel,
 * escondemos o conteúdo normal da direita.
 *
 * Não removemos nada do DOM.
 * Assim o leaderboard volta intacto depois.
 */

#rightDrawer.superlive-context-call-active-v33
> *:not(
  .close-drawer
):not(
  #superliveCallContextView
){

  display:none !important;
}


#rightDrawer.superlive-context-call-active-v33
#superliveCallContextView{

  display:flex !important;
}



/* ---------------------------------------------------------
   CARD VERMELHO
--------------------------------------------------------- */

.superlive-call-alert-v33{

  flex:0 0 auto;

  min-height:230px;

  padding:
    28px 18px 24px;

  box-sizing:border-box;

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

  text-align:center;

  background:#ff003d;

  border-radius:17px;

  box-shadow:
    0 0 0 rgba(255,0,61,0);

  animation:
    superliveCallPulseV33
    1.8s
    ease-in-out
    infinite;
}


@keyframes superliveCallPulseV33{

  0%,
  100%{

    box-shadow:
      0 0 7px rgba(255,0,61,.18);
  }

  50%{

    box-shadow:
      0 0 28px rgba(255,0,61,.72);
  }
}


.superlive-call-broadcast-icon-v33{

  width:74px;
  height:74px;

  object-fit:contain;

  margin-bottom:17px;
}


.superlive-call-alert-title-v33{

  color:#fff;

  font-size:
    clamp(20px,1.5vw,30px);

  line-height:.96;

  font-weight:500;

  letter-spacing:-.03em;
}


.superlive-call-channel-v33{

  margin-top:19px;

  color:#f8ed00;

  font-size:
    clamp(14px,1vw,19px);

  line-height:1.1;

  font-weight:800;
}



/* ---------------------------------------------------------
   VOLTAR / DESLIGAR
--------------------------------------------------------- */

.superlive-call-actions-v33{

  flex:0 0 auto;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(76px,.82fr);

  gap:8px;

  margin-top:10px;
}


.superlive-call-actions-v33 button{

  height:48px;

  border:0;

  border-radius:10px;

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

  cursor:pointer;

  transition:
    transform .13s ease,
    filter .13s ease;
}


.superlive-call-actions-v33 button:hover{

  transform:
    translateY(-1px);

  filter:
    brightness(1.08);
}


.superlive-call-return-v33{

  gap:10px;

  background:#05c892;

  color:#fff;

  font-family:inherit;

  font-size:14px;

  font-weight:700;
}


.superlive-call-leave-v33{

  background:#ff174f;
}


.superlive-call-return-v33 img{

  width:21px;
  height:21px;

  object-fit:contain;
}


.superlive-call-leave-v33 img{

  width:27px;
  height:27px;

  object-fit:contain;
}



/* ---------------------------------------------------------
   LISTA DE PARTICIPANTES
--------------------------------------------------------- */

.superlive-call-members-shell-v33{

  position:relative;

  flex:1 1 auto;

  min-height:0;

  margin-top:18px;

  overflow:hidden;
}


.superlive-call-members-v33{

  height:100%;

  overflow-y:auto;
  overflow-x:hidden;

  padding-bottom:52px;

  box-sizing:border-box;

  scrollbar-width:none;
}


.superlive-call-members-v33::-webkit-scrollbar{

  display:none;
}


.superlive-call-member-v33{

  min-height:88px;

  margin-bottom:7px;

  padding:11px 13px;

  box-sizing:border-box;

  display:flex;
  align-items:center;

  gap:12px;

  background:#1b2024;

  border:
    1px solid rgba(255,255,255,.025);

  border-radius:7px;
}


.superlive-call-member-avatar-v33{

  width:55px;
  height:55px;

  flex:0 0 55px;

  border-radius:50%;

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

  background:
    #282b31
    center/cover
    no-repeat;

  color:#fff;

  font-size:18px;

  font-weight:700;

  overflow:hidden;
}


.superlive-call-member-copy-v33{

  min-width:0;

  display:flex;
  flex-direction:column;

  gap:3px;
}


.superlive-call-member-copy-v33 strong{

  overflow:hidden;

  color:#fff;

  font-size:13px;

  font-weight:650;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.superlive-call-member-copy-v33 span{

  overflow:hidden;

  color:#727985;

  font-size:10px;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/*
 * Fade da base da lista
 */

.superlive-call-members-fade-v33{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:80px;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(2,18,31,0),
      rgba(2,18,31,.92) 72%,
      #02121f 100%
    );
}



/* =========================================================
   MOBILE CALL CONTROLS
========================================================= */

.superlive-mobile-call-controls-v33{

  display:none;
}


@media(max-width:900px){

  /*
   * Só será ativado quando existir
   * uma chamada minimizada.
   */

  .superlive-mobile-call-controls-v33.active{

    position:fixed;

    right:13px;
    bottom:74px;

    z-index:99999;

    display:flex;

    gap:7px;
  }


  .superlive-mobile-call-controls-v33 button{

    width:52px;
    height:46px;

    padding:0;

    border:0;

    border-radius:12px;

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

    box-shadow:
      0 7px 20px rgba(0,0,0,.30);

    cursor:pointer;
  }


  .superlive-mobile-call-return-v33{

    background:#f39b19;
  }


  .superlive-mobile-call-leave-v33{

    background:#ff174f;
  }


  .superlive-mobile-call-controls-v33 img{

    width:25px;
    height:25px;

    object-fit:contain;
  }

}




/* =========================================================
   SUPERLIVE CALL PARTICIPANTS - FADE REAL DE OPACIDADE

   Substitui a faixa sólida anterior.
   Agora o próprio conteúdo da lista desaparece
   progressivamente até ficar 100% transparente.
========================================================= */


/*
 * Neutraliza completamente a antiga camada escura.
 */

.superlive-call-members-fade-v33{
  display:none !important;
  background:none !important;
}


/*
 * Fade aplicado NA PRÓPRIA LISTA.
 *
 * Preto na máscara = totalmente visível.
 * Transparente = invisível.
 *
 * Portanto nenhum fundo/colorido é criado.
 */

.superlive-call-members-v33{

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 calc(100% - 105px),
      rgba(0,0,0,.92) calc(100% - 90px),
      rgba(0,0,0,.68) calc(100% - 65px),
      rgba(0,0,0,.32) calc(100% - 35px),
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 calc(100% - 105px),
      rgba(0,0,0,.92) calc(100% - 90px),
      rgba(0,0,0,.68) calc(100% - 65px),
      rgba(0,0,0,.32) calc(100% - 35px),
      transparent 100%
    );

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;

  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}




/* =========================================================
   SUPERLIVE MOBILE CALL BAR V35
========================================================= */

@media(max-width:900px){

  /*
   * Substitui o aspecto de dois botões flutuantes
   * por uma pequena barra persistente na base.
   */

  .superlive-mobile-call-controls-v33.active{

    left:50% !important;
    right:auto !important;

    bottom:12px !important;

    transform:
      translateX(-50%);

    width:
      calc(100% - 24px);

    max-width:420px;

    height:58px;

    padding:6px;

    box-sizing:border-box;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      64px;

    gap:7px;

    background:
      rgba(10,13,18,.96);

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

    border-radius:17px;

    box-shadow:
      0 10px 32px rgba(0,0,0,.42);

    backdrop-filter:
      blur(12px);

    -webkit-backdrop-filter:
      blur(12px);
  }


  .superlive-mobile-call-controls-v33 button{

    width:100% !important;
    height:46px !important;

    border-radius:12px !important;
  }


  /*
   * Botão VOLTAR:
   * ícone + indicação textual.
   */

  .superlive-mobile-call-return-v33{

    position:relative;

    gap:9px;

    background:
      #f39a18 !important;
  }


  .superlive-mobile-call-return-v33::after{

    content:"VOLTAR PARA A CHAMADA";

    color:#fff;

    font-family:inherit;

    font-size:11px;

    font-weight:750;

    white-space:nowrap;
  }


  .superlive-mobile-call-return-v33 img{

    width:23px !important;
    height:23px !important;
  }


  .superlive-mobile-call-leave-v33{

    background:
      #ff174f !important;
  }


  .superlive-mobile-call-leave-v33 img{

    width:27px !important;
    height:27px !important;
  }

}




/* =========================================================
   SUPERLIVE_TEXT_AUDIO_PLAYER_V38
========================================================= */

.superlive-audio-card-v38{
  width:min(100%,430px);
  box-sizing:border-box;
  margin-top:8px;
  padding:11px 12px 12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:13px;
  background:rgba(13,16,21,.82);
}

.superlive-audio-head-v38{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin-bottom:9px;
}

.superlive-audio-icon-v38{
  flex:0 0 37px;
  width:37px;
  height:37px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(124,108,255,.14);
  color:#aaa0ff;
  font-size:20px;
  font-weight:800;
}

.superlive-audio-info-v38{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.superlive-audio-info-v38 strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f2f3f5;
  font-size:13px;
  font-weight:650;
}

.superlive-audio-info-v38 span{
  color:#858b95;
  font-size:10px;
}

.superlive-audio-download-v38{
  flex:0 0 auto;
  height:32px;
  box-sizing:border-box;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:#22262d;
  color:#eef0f3;
  font-size:11px;
  font-weight:650;
  text-decoration:none;
  transition:
    transform .12s ease,
    background .12s ease;
}

.superlive-audio-download-v38:hover{
  background:#2d323b;
  transform:translateY(-1px);
}

.superlive-audio-player-v38{
  display:block;
  width:100%;
  height:42px;
  margin:0;
}


/* MOBILE */

@media(max-width:700px){

  .superlive-audio-card-v38{
    width:100%;
    max-width:100%;
  }

  .superlive-audio-download-v38 span{
    display:none;
  }

  .superlive-audio-download-v38{
    width:34px;
    padding:0;
    font-size:17px;
  }

  .superlive-audio-player-v38{
    height:40px;
  }

}




/* =========================================================
   SUPERLIVE_TEXT_AUDIO_STYLE_V381
========================================================= */

.superlive-audio-card-v381{
  width:min(100%,520px);
  margin-top:8px;
  padding:12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:#171c24;
  box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.superlive-audio-top-v381{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin-bottom:10px;
}

.superlive-audio-note-v381{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#202734;
  color:#f1f3f8;
  font-size:18px;
  font-weight:700;
  flex:0 0 34px;
}

.superlive-audio-meta-v381{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.superlive-audio-meta-v381 strong{
  color:#f2f4f8;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  word-break:break-word;
}

.superlive-audio-meta-v381 span{
  color:#98a1b2;
  font-size:12px;
  line-height:1.2;
}

.superlive-audio-bottom-v381{
  display:flex;
  align-items:center;
  gap:10px;
}

.superlive-audio-player-v381{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  height:46px;
  display:block;
  border-radius:12px;
  overflow:hidden;
  background:#202734;
  color-scheme:dark;
  accent-color:#f0b233;
}

.superlive-audio-player-v381::-webkit-media-controls-enclosure{
  border-radius:12px;
  background:#202734;
}

.superlive-audio-player-v381::-webkit-media-controls-panel{
  background:#202734;
}

.superlive-audio-player-v381::-webkit-media-controls-current-time-display,
.superlive-audio-player-v381::-webkit-media-controls-time-remaining-display{
  color:#eef1f6;
}

.superlive-audio-download-v381{
  height:46px;
  min-width:108px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:#202734;
  color:#f2f4f8;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  box-sizing:border-box;
  transition:
    background .14s ease,
    transform .14s ease,
    border-color .14s ease;
}

.superlive-audio-download-v381:hover{
  background:#262f3d;
  border-color:rgba(255,255,255,.11);
  transform:translateY(-1px);
}

.superlive-audio-download-icon-v381{
  font-size:16px;
  line-height:1;
}

.superlive-audio-download-text-v381{
  line-height:1;
}

@media(max-width:700px){

  .superlive-audio-card-v381{
    width:100%;
    max-width:100%;
  }

  .superlive-audio-bottom-v381{
    flex-direction:column;
    align-items:stretch;
  }

  .superlive-audio-download-v381{
    width:100%;
    min-width:0;
  }
}



/* =========================================================
   SUPERLIVE_TEXT_AUDIO_CUSTOM_V382
========================================================= */

.superlive-audio-card-v382{
  width:min(100%,560px);
  margin-top:8px;
  padding:12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:#171c24;
  box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.superlive-audio-top-v382{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  min-width:0;
}

.superlive-audio-note-v382{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#202734;
  color:#eef1f6;
  font-size:18px;
  font-weight:700;
}

.superlive-audio-meta-v382{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.superlive-audio-meta-v382 strong{
  color:#f2f4f8;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  word-break:break-word;
}

.superlive-audio-meta-v382 span{
  color:#98a1b2;
  font-size:12px;
  line-height:1.2;
}

.superlive-audio-download-v382{
  flex:0 0 auto;
  height:38px;
  min-width:108px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:#202734;
  color:#eef1f6;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  box-sizing:border-box;
  transition:
    background .14s ease,
    transform .14s ease,
    border-color .14s ease;
}

.superlive-audio-download-v382:hover{
  background:#262f3d;
  border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.superlive-audio-player-shell-v382{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
  background:#1b212b;
  box-sizing:border-box;
}

.superlive-audio-play-v382,
.superlive-audio-mute-v382{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:0;
  border-radius:10px;
  background:#252d3a;
  color:#f2f4f8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  cursor:pointer;
  transition:
    background .14s ease,
    transform .14s ease;
}

.superlive-audio-play-v382:hover,
.superlive-audio-mute-v382:hover{
  background:#2d3745;
  transform:translateY(-1px);
}

.superlive-audio-center-v382{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.superlive-audio-times-v382{
  display:flex;
  align-items:center;
  gap:4px;
  color:#eef1f6;
  font-size:12px;
  font-weight:600;
  line-height:1;
}

.superlive-audio-sep-v382{
  color:#7e8797;
}

.superlive-audio-seek-v382{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:999px;
  background:#303847;
  outline:none;
  margin:0;
}

.superlive-audio-seek-v382::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:#303847;
}

.superlive-audio-seek-v382::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f0b233;
  border:0;
  margin-top:-4px;
  cursor:pointer;
}

.superlive-audio-seek-v382::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:#303847;
}

.superlive-audio-seek-v382::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f0b233;
  border:0;
  cursor:pointer;
}

.superlive-audio-element-v382{
  display:none;
}

@media(max-width:700px){

  .superlive-audio-top-v382{
    flex-wrap:wrap;
  }

  .superlive-audio-download-v382{
    min-width:0;
    height:34px;
    padding:0 12px;
  }

  .superlive-audio-player-shell-v382{
    padding:10px;
    gap:8px;
  }

  .superlive-audio-play-v382,
  .superlive-audio-mute-v382{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
}



/* =========================================================
   SUPERLIVE_CHAT_VISUAL_ENHANCEMENTS_V1
========================================================= */

/* Bolinha da lista sempre acima do frame */
.superlive-member-presence{
  z-index:9999 !important;
}

/* Avatar do Message Core vira referencia da bolinha */
#v14ChatMessages .slmc-avatar{
  position:relative;
}

/* Presenca online dentro das mensagens */
#v14ChatMessages .superlive-chat-presence-v1{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#39d98a;
  border:2px solid #111318;
  box-sizing:content-box;
  pointer-events:none;
  z-index:9999;
}

/* Mensagem composta somente por emoji */
#v14ChatMessages .slmc-text.superlive-chat-emoji-only-v1{
  font-size:30px;
  line-height:1.25;
  margin-top:3px;
}



/* =========================================================
   SUPERLIVE_EMOJI_ONLY_V37_FINAL
   Regra no CSS principal da interface.
========================================================= */

#v14ChatMessages .slmc-text.slmc-emoji-only-v37{
  font-size:32px !important;
  line-height:1.2 !important;
  margin-top:3px !important;
}



/* =========================================================
   SUPERLIVE_MENTION_RENDER_V45
========================================================= */

#v14ChatMessages .superlive-text-mention-v45{
  color:#6fb4ff !important;
  font-weight:700 !important;
  cursor:pointer !important;
  text-decoration:none !important;
  font-size:inherit !important;
}

#v14ChatMessages .superlive-text-mention-v45:hover{
  color:#9bcdff !important;
  text-decoration:underline !important;
}


/*
 * A classe de broadcast pertence ao ARTICLE da mensagem.
 * Nunca aos botoes da toolbar.
 */
#v14ChatMessages
.slmc-toolbar
.teacher-broadcast-message{
  animation:none !important;
  box-shadow:none !important;
}



/* =========================================================
   SUPERLIVE_GLOBAL_DM_USERS_CSS_V1
========================================================= */

.dm-new-conversation-button{
  width:calc(100% - 20px);
  min-height:38px;
  margin:8px 10px 10px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.dm-new-conversation-button:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.14);
}

.dm-new-conversation-plus{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  font-size:18px;
  line-height:1;
}

.dm-global-user-picker{
  display:none;
  margin:0 10px 10px;
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(0,0,0,.18);
}

.dm-global-user-picker.show{
  display:block;
}

.dm-global-user-search{
  box-sizing:border-box;
  width:100%;
  height:34px;
  margin:0 0 7px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:7px;
  outline:none;
  background:rgba(255,255,255,.05);
  color:#fff;
  font:inherit;
  font-size:12px;
}

.dm-global-user-search:focus{
  border-color:rgba(255,255,255,.20);
}

.dm-global-user-search::placeholder{
  color:rgba(255,255,255,.42);
}

.dm-global-user-list{
  max-height:270px;
  overflow-y:auto;
}

.dm-global-user-item{
  box-sizing:border-box;
  width:100%;
  min-height:48px;
  padding:6px 7px;
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#fff;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.dm-global-user-item:hover{
  background:rgba(255,255,255,.07);
}

.dm-global-user-item:disabled{
  opacity:.55;
  cursor:wait;
}

.dm-global-user-avatar{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.dm-global-user-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.dm-global-user-copy strong{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.dm-global-user-copy small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.48);
  font-size:10px;
}

.dm-global-user-state{
  padding:14px 8px;
  color:rgba(255,255,255,.48);
  font-size:11px;
  text-align:center;
}



/* =========================================================
   SUPERLIVE_INBOX_SCROLL_FIX_V1

   Inbox:
   - permite rolagem somente vertical;
   - bloqueia overflow horizontal;
   - scrollbar visualmente oculta;
   - lista ocupa apenas o espaco disponivel.
========================================================= */

.dm-sidebar-view{
  min-height:0 !important;
  height:100% !important;
  max-height:100% !important;

  overflow:hidden !important;

  display:flex !important;
  flex-direction:column !important;
}

.dm-thread-list{
  flex:1 1 auto !important;

  min-height:0 !important;
  min-width:0 !important;

  width:100% !important;
  max-width:100% !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  overscroll-behavior-y:contain;

  scrollbar-width:none;
  -ms-overflow-style:none;
}

.dm-thread-list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.dm-thread-item{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.dm-thread-copy{
  min-width:0 !important;
  overflow:hidden !important;
}

.dm-thread-copy strong,
.dm-thread-copy small{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}



/* =========================================================
   SUPERLIVE_INBOX_SCROLL_FIX_V2

   O Inbox substitui visualmente .channels-scroll,
   portanto precisa ocupar o mesmo slot flexivel
   dentro de #leftDrawer.

   A rolagem ocorre no proprio Inbox.
========================================================= */

#leftDrawer > .dm-sidebar-view{
  flex:1 1 auto !important;

  min-height:0 !important;
  min-width:0 !important;

  height:auto !important;
  max-height:none !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  display:flex !important;
  flex-direction:column !important;

  overscroll-behavior:contain;

  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

#leftDrawer > .dm-sidebar-view::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}


/*
 * A lista interna não deve criar uma segunda
 * área de scroll. Quem rola é o Inbox inteiro.
 */
#leftDrawer > .dm-sidebar-view > .dm-thread-list{
  flex:0 0 auto !important;

  min-height:0 !important;
  min-width:0 !important;

  width:100% !important;
  max-width:100% !important;

  overflow:visible !important;
  overflow-x:hidden !important;
}


/*
 * Nunca permitir largura horizontal extra.
 */
#leftDrawer > .dm-sidebar-view,
#leftDrawer > .dm-sidebar-view *{
  box-sizing:border-box;
  max-width:100%;
}

#leftDrawer > .dm-sidebar-view .dm-thread-item{
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

#leftDrawer > .dm-sidebar-view .dm-thread-copy{
  min-width:0 !important;
  overflow:hidden !important;
}

#leftDrawer > .dm-sidebar-view .dm-thread-copy strong,
#leftDrawer > .dm-sidebar-view .dm-thread-copy small{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}



/* =========================================================
   SUPERLIVE_INBOX_VISIBILITY_SCROLL_CSS_V4

   REGRA ABSOLUTA:
   Inbox SEM .show = inexistente no layout.
   Inbox COM .show = coluna flex.

   Esta regra corrige os antigos V1/V2,
   que forçavam display:flex o tempo inteiro.
========================================================= */


/* ---------------------------------------------------------
   FORA DO INBOX
--------------------------------------------------------- */

#leftDrawer > #superliveDmSidebar.dm-sidebar-view:not(.show){
  display:none !important;

  visibility:hidden !important;

  pointer-events:none !important;

  width:0 !important;
  height:0 !important;
  max-height:0 !important;

  flex:0 0 0 !important;

  overflow:hidden !important;
}


/* ---------------------------------------------------------
   DENTRO DO INBOX
--------------------------------------------------------- */

#leftDrawer > #superliveDmSidebar.dm-sidebar-view.show{
  display:flex !important;

  visibility:visible !important;

  pointer-events:auto !important;

  flex:
    0
    0
    var(
      --dm-sidebar-height,
      auto
    ) !important;

  min-width:0 !important;
  min-height:0 !important;

  width:100% !important;

  height:
    var(
      --dm-sidebar-height,
      auto
    ) !important;

  max-height:
    var(
      --dm-sidebar-height,
      none
    ) !important;

  flex-direction:
    column !important;

  overflow:
    hidden !important;

  overflow-x:
    hidden !important;
}


/* ---------------------------------------------------------
   CABECALHO FIXO
--------------------------------------------------------- */

#superliveDmSidebar.show
> .dm-sidebar-title,

#superliveDmSidebar.show
> .dm-sidebar-subtitle,

#superliveDmSidebar.show
> .dm-new-conversation-button,

#superliveDmSidebar.show
> .dm-global-user-picker{

  flex:
    0
    0
    auto !important;

  min-width:
    0 !important;

  max-width:
    100% !important;
}


/* ---------------------------------------------------------
   LISTA = UNICA AREA ROLAVEL
--------------------------------------------------------- */

#superliveDmSidebar.show
> #superliveDmThreadList.dm-thread-list{

  flex:
    1
    1
    0 !important;

  min-height:
    0 !important;

  min-width:
    0 !important;

  width:
    100% !important;

  max-width:
    100% !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  overscroll-behavior-y:
    contain !important;

  scrollbar-width:
    none !important;

  -ms-overflow-style:
    none !important;

  padding-bottom:
    20px !important;

  touch-action:
    pan-y !important;
}


/* Chrome / Electron */
#superliveDmSidebar.show
> #superliveDmThreadList.dm-thread-list::-webkit-scrollbar{

  width:
    0 !important;

  height:
    0 !important;
}


/* ---------------------------------------------------------
   ITENS NAO PODEM ENCOLHER VERTICALMENTE
--------------------------------------------------------- */

#superliveDmSidebar.show
#superliveDmThreadList
.dm-thread-item{

  flex:
    0
    0
    auto !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/* ---------------------------------------------------------
   PROIBIDO OVERFLOW X
--------------------------------------------------------- */

#superliveDmSidebar.show,
#superliveDmSidebar.show *{

  box-sizing:
    border-box;
}

#superliveDmSidebar.show
#superliveDmThreadList{

  contain:
    inline-size;
}

#superliveDmSidebar.show
.dm-thread-copy{

  min-width:
    0 !important;

  overflow:
    hidden !important;
}

#superliveDmSidebar.show
.dm-thread-copy strong,

#superliveDmSidebar.show
.dm-thread-copy small{

  max-width:
    100% !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}


/* Inbox uses Message Core and the same composer classes as text channels. */
#superliveDmComposerWrap{position:relative;}
#superliveDmInput{min-height:42px;max-height:120px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;}
#superliveDmInput:empty:before{content:attr(data-placeholder);color:#737a85;pointer-events:none;}
#superliveDmImageButton[hidden]{display:none;}
#superliveDmMessages{overflow-x:hidden;min-width:0;}
#superliveDmMessages .slmc-message{min-width:0;}
#superliveDmMessages .slmc-body{min-width:0;}
#superliveDmMessages .slmc-text{overflow-wrap:anywhere;}
.dm-core-reply{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:#202633;border-left:3px solid #198ee7;border-radius:8px;margin-bottom:6px;}
.dm-core-reply[hidden],.dm-core-gifs[hidden]{display:none;}
.dm-core-reply>div{min-width:0;display:flex;flex-direction:column;gap:4px;}
.dm-core-reply strong{font-size:11px;color:#74c6ff;}
.dm-core-reply span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-core-reply button,.dm-core-gif-search button{border:0;background:transparent;color:#dbe2ed;cursor:pointer;font-size:20px;}
.dm-core-gifs{position:absolute;bottom:100%;left:16px;width:min(370px,calc(100% - 32px));padding:12px;background:#171b24;border:1px solid #343d4c;border-radius:12px;z-index:200;box-shadow:0 12px 35px #0008;}
.dm-core-gif-search{display:flex;gap:8px;margin-bottom:8px;}
.dm-core-gif-search input{width:100%;min-width:0;border:1px solid #343d4c;border-radius:6px;background:#11151b;color:#eee;padding:8px;}
.dm-core-gif-results{max-height:280px;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.dm-core-gif-results button{padding:0;border:0;background:transparent;cursor:pointer;}
.dm-core-gif-results img{width:100%;border-radius:6px;}
.dm-core-gifs small{display:block;text-align:center;color:#8591a4;font-size:9px;margin-top:8px;}

/* SUPERLIVE_IMAGE_MODAL_V1 */
.superlive-image-modal-v1{position:fixed;inset:0;z-index:30000;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(3,5,10,.88);backdrop-filter:blur(5px)}
.superlive-image-modal-v1[hidden]{display:none!important}
.superlive-image-modal-v1 img{display:block;max-width:min(94vw,1600px);max-height:calc(100dvh - 56px);width:auto;height:auto;border-radius:10px;object-fit:contain;box-shadow:0 22px 70px rgba(0,0,0,.65)}
.superlive-image-modal-close-v1{position:fixed;z-index:1;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(20,22,28,.92);color:#fff;cursor:pointer;font:400 30px/1 Arial,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.42)}
.superlive-image-modal-close-v1:hover{background:#343741;transform:scale(1.05)}
@media(max-width:600px){.superlive-image-modal-v1{padding:12px}.superlive-image-modal-v1 img{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.superlive-image-modal-close-v1{top:8px;right:8px}}