*{
  padding: 0px;
  margin: 0px;
  outline: none;
  box-sizing: border-box;
  background: var(--bg);
  font-family: "Urbanist", serif;
}

@font-face {
    font-family: 'Urbanist';
    src: url('assets/Urbanist.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Melhora o carregamento, mostrando uma fonte padrão enquanto carrega */
}

canvas {
  width: 100%;
  max-width: 640px;
  border: 1px solid #333;
  background: #111111;
}


::-webkit-scrollbar {
  width: 0px;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


.center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.anton {
  font-family: "Anton SC", serif;
  font-weight: 400;
  font-style: normal;
}

.urbanist {
  font-family: "Urbanist", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.none{
  display: none !important;
}

.hidden{
  visibility: hidden; /* Em vez de display: none */
  pointer-events: none;
}

.noSelect {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.flex{
  display: flex;
  grid-gap: 16px;
}

.full{
  padding: 0px !important;
}

.noEvents {
  pointer-events: none;
}


:root{
  --bg: #000;

  --height: 60px;

  --grey-8: #141414;
  --grey-10: #1A1A1A;
  --grey-15: #262626;
  --stroke: #545fab45;
  --grey-60: #999999;
  --blue: #5a6ad7;

  --dark-0: #0c0c0c;
  --dark-1: #101214;
  --dark-2: #181a1f;


  --dark-0: #060709;
  --dark-1: #0e1014;

  --one: #070707;  
  --two: #0e1014;
  --three: #212328;

  --white: #8f919e;
  --border:  #181f33;
  --border:  #212328;

  --theme: #a17d70;
}

.blue{
  color: var(--blue);
}

.pink{
  color:#bd5ad7;
}

.one{
  background: var(--one);
}

.two{
  background: var(--two);
}


/* Classe base para todos os avatares */
.avatar-image {
  width: 40px;           /* Largura desejada */
  height: 40px;          /* Altura desejada */
  border-radius: 50%;    /* Círculo perfeito */
  background-image: url('assets/css_sprites.png');
  background-repeat: no-repeat;

  /* Redimensiona a folha de sprite para que cada ícone de 257px passe a ter 40px */
  background-size: 212px; 

  display: inline-block;
  flex-shrink: 0;        /* Impede que o flexbox amasse o círculo */
  border: 2px solid #5c595e;
}

/* Posições recalculadas (Posição Original * 40 / 257) */
/* Linha 1 */
.bg-f01 { background-position: -1.5px -1.5px; }
.bg-f02 { background-position: -44.6px -1.5px; }
.bg-f04 { background-position: -87.8px -1.5px; }
.bg-f03 { background-position: -130.9px -1.5px; }
.bg-m05 { background-position: -174px -1.5px; }

/* Linha 2 */
.bg-f07 { background-position: -1.5px -44.6px; }
.bg-f10 { background-position: -44.6px -44.6px; }
.bg-m02 { background-position: -87.8px -44.6px; }
.bg-m04 { background-position: -130.9px -44.6px; }
.bg-m10 { background-position: -174px -44.6px; }

/* Linha 3 */
.bg-m01 { background-position: -1.5px -87.8px; }
.bg-f06 { background-position: -44.6px -87.8px; }
.bg-f05 { background-position: -87.8px -87.8px; }
.bg-f08 { background-position: -130.9px -87.8px; }
.bg-f09 { background-position: -174px -87.8px; }

/* Linha 4 */
.bg-f12 { background-position: -1.5px -130.9px; }
.bg-m03 { background-position: -44.6px -130.9px; }
.bg-m11 { background-position: -87.8px -130.9px; }
.bg-m07 { background-position: -130.9px -130.9px; }
.bg-m08 { background-position: -174px -130.9px; }

/* Linha 5 */
.bg-m06 { background-position: -1.5px -174px; }
.bg-f11 { background-position: -44.6px -174px; }
.bg-m09 { background-position: -87.8px -174px; }
.bg-m12 { background-position: -130.9px -174px; }



@keyframes pulse-ring {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.calling {
  animation-name: pulse-ring;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite; /* Makes the animation loop continuously */
  position:absolute
}

.header{
  border-top: 8px solid var(--border);
  background: var(--one);
  display: grid;
  grid-template-columns: 1fr 34px 34px 34px;
  grid-template-rows: 1fr; 
  align-items: center;
  font-size: 18px;
  font-weight: 800;
  font-family: "Urbanist", serif;
  padding-left: 16px;
}

.header span{
  color: #604738;
  font-size: 22px;
  padding-left: 16px;
  padding-top: 4px;
}

.config-icon{
  font-size: 22px;
  cursor: pointer;
  padding-top: 4px;
}

.header .logo{ 
  font-size: 12px;
  font-family: "Urbanist", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  cursor: pointer;
}

.icon{
  cursor: pointer;
  width:28px;
  height:28px;
  line-height: 28px; 
  text-align: center;  
}


.canvas-container {
  position: relative;
  width: 100%;
  max-width: 530px; /* Ou o tamanho que desejar */
  aspect-ratio: 1 / 1; /* Mantém o quadrado 1:1 */
    border-bottom: 2px solid var(--border);
}

.canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.canvas-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Cria os 4 quadrantes */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Centraliza os botões dentro de cada quadrante */
.canvas-buttons div {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  margin: 4px;
  font-size: 14px;
  font-family: "Urbanist", serif;
  text-align: center;
  line-height: 22px;
  text-transform: uppercase;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.canvas-buttons div:hover {
  opacity: 0.5
}

.canvas-buttons div:active {
  opacity: 0.8
}

/* Estilo básico para os botões */
.canvas-buttons div[class^="btn-"] {
  padding: 10px 20px;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #373737;
}


.transparent{
  background: #3d7c3d00 !important;
  border: 0 !important;
}


.btn-call{
  display: flex;
  flex-direction: column;
  position: relative;

}

.btn-call span{
 background: #42af4200;
}


.icon-call{
  color: white;
  background: #3d7c3d;
  height: 64px;
  width: 64px;
  border-radius: 64px;
  font-size: 12px;
}
.icon-call svg{
  height: 32px;
  width: 32px;
  background: #3d7c3d;
}




.icon-callof{
  color: white;
  background: #b14350;
  height: 42px;
  width: 42px;
  border-radius: 42px;
  font-size: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.icon-callof svg{
  height: 24px;
  width: 24px;
  background: #b14350;
  transform: rotate(135deg);
}
.icon-callof:hover{
  opacity: 0.5
}
.icon-callof:active{
  opacity: 0.8
}


.messages {
  display: flex;
  flex-direction: column; 
  overflow: auto;
  gap: 8px;
  padding: 12px;
  font-family: "Urbanist", serif;

  color: var(--white);
}

.message-avatar img{
  width: 42px;
  height: 42px;
  border: 4px solid #212328;
  margin-top: -6px
}

.message{
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: 1fr;
}

.message-date{
  font-size: 11px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; /* Para navegadores baseados em WebKit (Chrome, Safari) */
  -moz-osx-font-smoothing: grayscale; /* Para Firefox */
}

.message-username{
  color: var(--theme);
}


.message-top{
  display: grid;
  grid-template-columns:  1fr 84px;
  grid-template-rows: 1fr;
  font-size: 14px;
}

.message-text{
  padding-bottom: 8px;
  border-bottom: 1px solid #212328;
  padding-top: 4px;
  line-height: 16px;
  word-break: break-word;
  letter-spacing: 1px;
  padding-right: 8px;
}


.avatars {
  display: flex;
  gap: 12px;
  padding: 30px 16px 30px 16px; 
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #070707;
  border-top: 8px solid var(--border);
  padding-left: 32px;
  padding-right: 32px;
}
.avatars::-webkit-scrollbar { 
  display: none; 
}

.avatar {
  flex-shrink: 0;
  width: 48px; 
  scroll-snap-align: center;
  position: relative; 
  height: 48px; 
}

.avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: absolute;
  top: 0; 
  left: 0;
  border: 2px solid #000;
  box-shadow: 0 0 0 2px #656565;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s;
}
.avatar-wrap:hover {
  transform: scale(1.1);
}

 
.avatar-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); 
  font-size: 12px;
  color: #ccc;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  z-index: 10;
    font-family: "Urbanist", serif;
   color: var(--theme);
}

.avatar.avatar-label-up .avatar-name {
  bottom: calc(100% + 6px);
  top: auto;
}

.avatar.avatar-label-down .avatar-name {
  top: calc(100% + 6px); 
  bottom: auto;
}


.footer{
  border-top: 2px solid var(--border);

  background: var(--one);
  padding: 10px;
  padding-left: 24px;
  padding-right: 24px;
}

.input::placeholder {
  color: #333b49;
  font-weight: bold;
  font-size: 14px;
}


.input{
  width: 100%;
  color: #8f919e; 
  color: #ffffff;
  padding-left: 22px;
  font-size: 12px;
  background: var(--color-1);
  border: none;  
  border-radius: 16px 16px 16px 16px;
  margin-right: 8px;
  border: 1px solid var(--border);
  padding: 10px;
  padding-left: 24px;
  padding-right: 16px;
  font-size: 14px;
  letter-spacing: 1px;
}


.music-btn{
  width: 32px;
  height: 32px;
  font-size: 24px;
}

.music-btn-active{
  color: #3d7c3d;
}

.music-btn-desactive{
  color: #b14350;
}





.config{  
  color: #373737;
  display: grid;
  grid-template-columns: auto auto 24px;
  grid-template-rows: 1fr;

  -webkit-tap-highlight-color: transparent;
}
.config svg:hover{  
  opacity: 0.5;
  cursor: pointer;
}
.config svg:active{  
  opacity: 0.8
}

.config-cams{
  display: grid;
  grid-template-columns: 32px 32px 32px 32px 32px  ;
  grid-template-rows: 1fr;
  grid-gap: 8px;
  padding-left: 16px;
}

.btnCam{
  border: 1px solid #292929;
  display: grid;
  place-items: center;
  color: white;
  font-size: 11px;
  background: #3d7c3d;
  border-radius: 24px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.cam-active{
  background: #3d7c3d !important;
}

.cam-desactive{
  background: #b14350 !important;
}

.btnCam:not(cam-active):hover{
  opacity: 0.5;
}

.btnCam:active{
  opacity: 0.8;
}


.login{
  width: calc( 100dvw - 8px);
  height: calc( 100dvh - 8px);
  background: #161616;
  position:absolute;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  max-width: 530px;
  padding-top: 32px;
  font-family: "Urbanist", serif;
  background: #121212;
}

.login input{
  border:1px solid #363535;
  background: #000000;
  color: white;
  padding: 16px;  
  min-width: calc( 100% - 32px - 32px  );
  margin: 32px;
  margin-bottom: 16px;
  border-radius: 4px;
  font-size: 14px;
 
}

.btnLogin{
  border:1px solid #363535;
  background: #4b538a;
  color: white;
  padding: 16px;  
  min-width: calc( 100% - 32px - 32px  );
  margin-left: 32px;
  margin-right: 32px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
}

.btnLogin:hover{
  opacity: 0.5
}

.btnLogin:active{
  opacity: 0.8
}


h2{
  background: #121212;
  color: #aeacac;
  text-align: center;
  margin-bottom: 32px;
  font-size: 22px
}

.avatar-login-item{
  cursor: pointer;
  zoom: 1.5;
}


.avatar-login-item:hover{
  border: 2px solid white
}


.avatars-login {
  width: calc(100% - 64px); /* Mantendo sua lógica de margem */
  background: #121212;
  margin: 0 auto;           /* Centraliza o container na tela */
  padding: 10px;            /* Espaçamento interno */
  
  /* Adicione estas linhas: */
  display: flex;
  flex-wrap: wrap;          /* Permite que os avatars pulem para a linha de baixo */
  justify-content: center;  /* Centraliza os itens horizontalmente */
  gap: 5px;                /* Cria um espaço uniforme entre as imagens */
}

.avatars-login img {
  height: 64px;
  width: 64px; 
  border-radius: 50%;
  cursor: pointer;
  border: 4px solid transparent; /* Evita que a imagem "pule" no hover */
  transition: border 0.3s;
}

.avatars-login img:hover {
  border: 4px solid #ffffff;
}

/* Ajuste na classe space para ocupar a linha inteira */
.space {
  width: 100%; 
  height: 32px;
  background: #121212;
}


/* Overlay que escurece o fundo */
.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;  
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

h3{
  font-size: 18px;
  background: rgba(0, 0, 0, 0);
}

.popup {
    background: #1a1a1a;  
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
    color: white;   
}

.popup input {
    width: 100%;
    padding: 12px;
    margin: 20px 0;
    border-radius: 6px;
    border: 1px solid #333;
    background: #222;
    color: white;
  font-size: 14px;
    box-sizing: border-box; /* Garante que o padding não estoure a largura */
}


.popup-actions {
    display: flex;
    gap: 12px;        
    margin-top: 10px;
   background: rgba(0, 0, 0, 0);
}

.popup-actions button {
    flex: 1;             /* Força ambos os botões a terem a mesma largura */
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;

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

/* Cores e efeitos */
.btn-cancel { 
    background: #333; 
    color: #ccc; 
}
.btn-cancel:hover { background: #444; }
.btn-cancel:active { opacity: 0.5}

.btn-confirm { 
    background: #5a6ad7; 
    color: white; 
}
.btn-confirm:hover { background: #545fab; }
.btn-confirm:active { opacity: 0.5}


.popup select {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid #333;
  background: #222;
  color: white;
  font-size: 14px;
  box-sizing: border-box; /* Garante que o padding não estoure a largura */
}

.configPopup h3{
  margin-bottom: 16px;
}

.configPopup h4{
  background: #1a1a1a;
  text-align:left;
  padding-left: 8px;
  font-size: 12px
}



.configPopup-checkbox {
  display: flex;        
  align-items: center;  
  height: 24px;         
  gap: 8px;           
  background: #ff000000;
}

.configPopup-checkbox input[type="checkbox"] {
  margin: 0;        
  height: 16px;       
  width: 16px;
  cursor: pointer;
  background: #ff000000;
}

.configPopup-checkbox div {
  line-height: 24px;   
  font-size: 14px;    
  background: #ff000000;
}



.main {
  /* Substitua o seu bloco por este */
  position: fixed;
  inset: 0; /* Cola em todas as bordas */
  width: 100%;
  max-width: 530px;
  margin: auto;
  
  display: grid;
  grid-template-columns: 1fr;
  /* 1fr no chat garante que ele ocupe o que sobrar */
  grid-template-rows: auto 1fr auto auto; 
  grid-gap: 4px;
  
  /* Proteção para o teclado e barras do sistema */
  padding: 4px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom)); 
  
  box-sizing: border-box; /* Crucial para o grid não vazar */
  font-family: "Urbanist", serif;
 
}

#localVideo{
  width: 256px;
  height: 256px;
  position: absolute;
}

.log{
  position: absolute;
}


.start {
  position: absolute;
  background: #000000;
  width: 100dvw;
  height: 100dvh;
  z-index: 99;

  display: grid;
  place-items: center;
}

.btnStart {
  color: white;
  /* Opcional: estilo para parecer um botão */
  padding: 20px 60px;
  border: 2px solid white;
  cursor: pointer;
  border-radius: 4px;
}
.btnStart:hover {
 opacity: 0.5
}
.btnStart:active {
 opacity: 0.9
}