html, body {
  height: 100%;
  margin: 0;
  background-color: #f8f9fa;
  /* overscroll-behavior-y: none; removido para compatibilidade */
}

.chat-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .chat-container {
    height: 100dvh;
  }
}

.card {
  max-height: 95vh;
  display: flex;
  flex-direction: column;
}

@supports (max-height: 95dvh) {
  .card {
    max-height: 95dvh;
  }
}

.card-body {
  height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#mensagemInput {
  flex-grow: 1;
  resize: none;
  max-height: 100px;
  text-transform: uppercase;
}

#mensagemInput::placeholder {
  text-transform: none;
}

#painel-lateral {
  width: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 150;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: white;
  border-left: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  /* overscroll-behavior-y: contain; removido */
}

#painel-lateral.aberto {
  width: 50%;
  max-width: 400px;
  transform: translateX(0);
}

.autor-msg {
  font-size: 0.60rem;
  color: #6c757d;
  display: block;
  text-align: right;
  padding: 0rem 0.5rem 0.5rem 0.5rem;
  margin: 0;
  z-index: 10;
  background: white;
  position: relative;
  border-radius: 0.2rem;
}

.autor-msg.voce {
  text-align: right;
}

#conteudo-painel {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#resultado-painel {
  flex-grow: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  #painel-lateral.aberto {
    width: 100% !important;
  }
}

.bginfo {
  background-color: #17a2b8;
  color: #FFF;
}

body.painel-aberto {
  /* evitado position: fixed para rolagem em navegadores antigos */
  width: 100%;
  overflow: hidden;
}

#btn-reload {
  transition: opacity 0.3s ease;
}

body.painel-aberto #btn-reload {
  opacity: 0;
  pointer-events: none;
}

.ad-container {
  display: flex;
  align-items: start;
}

.ad-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 4px;
}

.ad-text {
  flex-grow: 1;
}

.titulo-anuncio {
   font-family: 'Roboto', sans-serif;
   font-size: 30px
}