@import url("https://fonts.googleapis.com/css?family=Roboto:300,400");
@font-face {
  font-family: "Circular" !important;
  src: url("fonts/CircularStd-Medium.otf");
}

/* --------------------------------------------------
   BASE
-------------------------------------------------- */
.leanbot_btn_small{
  font-size:13px;text-decoration:none;color:#fff;background-color:#26a69a;text-align:center;letter-spacing:.5px;
  transition:background-color .2s ease-out;cursor:pointer;outline:0;border:none;border-radius:2px;display:inline-block;
  height:36px;line-height:36px;padding:0 16px;text-transform:uppercase;width:280px !important;vertical-align:middle;
  -webkit-tap-highlight-color:transparent;
}

.leanbot_botao_chat{
  width:7%;color:#fff;border:none;cursor:pointer;opacity:1;position:fixed;bottom:0;right:11px;
}
.leanbot_botao_chat img{width:100%;height:100%;}

.leanbot_fecha_chat{
  position:absolute;right:11px;color:#fff;cursor:pointer;display:flex;align-items:center;
}

/* --------------------------------------------------
   BALÕES
-------------------------------------------------- */
.leanbot_balao{
  background-color:#f2f2f2;color:#000;border-radius:20px;box-shadow:0 0 2px #c0c0c0;display:inline-block;
  padding:10px 15px;position:relative;vertical-align:top;
}

/* ATENDENTE (ESQUERDA) */
.leanbot_atendente{
  float:left;margin:10px 10px 5px 10px;color:#000;clear:both;font-weight:300;font-size:14px;
}
.leanbot_atendente::before{
  box-shadow:-1px 1px 0 0 rgba(178,178,178,.3);left:-7px;
}

/* CLIENTE (DIREITA)  – versão original, mas será sobreposta no bloco OVERRIDES */
.leanbot_cliente{
  float:right;margin:5px 0 5px 45px;clear:both;font-weight:300;font-size:14px;
  align-items:end;display:flex;flex-direction:column;
}
.leanbot_cliente_balao{background-color:#CCCFD2;color:#050505;}
.leanbot_cliente::before{
  background-color:#1c4b82;box-shadow:1px -1px 0 0 rgba(178,178,178,.4);right:-7px;
}

/* --------------------------------------------------
   JANELA
-------------------------------------------------- */
.leanbot_chat_popup{
  background:#fff;box-shadow:0 1px 10px rgba(167,167,167,.28);bottom:40px;display:flex;flex-direction:column;
  font-family:"Circular","Roboto",sans-serif !important;height:100%;max-height:560px;max-width:364px;overflow:hidden;
  position:fixed;right:15px;width:100%;z-index:9999;border-radius:10px;
}

.leanbot_chat_titulo_container{
  background-color:#0070b8;width:100%;display:flex;align-items:center;height:50px;
}

.leanbot_chat_bodyt_container{
  height:calc(100% - 100px);
}

.leanbot_div_chat_messages{
  padding:0 10px;overflow:auto;height:100%;
}

.leanbot_chat_field_control{
  align-items:center;display:flex;width:100%;height:50px;overflow:hidden;border-top:1px solid rgba(0,0,0,.1);
}

.leanbot_archive_chatbot_container{margin-bottom:10px;padding-left:6px;}
.leanbot_chat_field_control .leanbot_archive_chatbot_container>input[type="file"]{display:none;}

.leanbot_box_chatbot_container{
  width:89%;display:flex;justify-content:end;margin-bottom:5px;margin-right:4px;margin-left:5px;
}

.leanbot_campo_texto{
  border-radius:14px;margin-top:3px;overflow:hidden;padding:8px;border:0;outline:0;width:100%;font-size:15px;
  resize:none;box-sizing:content-box;line-height:initial;font-family:"Circular","Roboto",sans-serif !important;
}
.leanbot_campo_texto__disabled{pointer-events:none;background:#ffffffbd;}

.leanbot_send_box_chatbot_container{width:10%;margin-bottom:1px;}
.leanbot_botao_enviar{
  outline:none;height:36px;border-top-right-radius:0;border-bottom-right-radius:0;line-height:1;color:#827b75;
  border:none;background-color:transparent;text-align:center;cursor:pointer;font-size:14px;
}

.leanbot_chat_titulo{margin:0 0 0 15px;vertical-align:middle;font-size:18px;}
.leanbot_icon_title{height:32px;margin-left:9px;}
.leanbot_chat_image{width:100%;}

.leanbot_chat_typing{
  width:11%;float:right;margin:5px 5px 0 0;clear:both;padding:2px 0 9px 0;
}

.leanbot_chat_field_control .box{
  background:#fff;height:36px;border-radius:30px;padding:8px;
}

.leanbot_cliente,.leanbot_atendente{font-size:1rem;word-break:break-word;}

.leanbot_chat_time{font-size:11px;opacity:.5;font-weight:400;}
.leanbot_chat_time_client{margin:5px 10px 0 0;}
.leanbot_chat_time_atendente{margin:5px 0 0 10px;}

.leanbot_container_button{
  width:100%;float:left;text-align:center;margin-bottom:20px;display:flex;overflow-x:scroll;white-space:nowrap;resize:none;
}
.leanbot_container_button::-webkit-scrollbar{
  overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;
}

.leanbot-glider-next,.leanbot-glider-prev{
  border:0;padding:0;user-select:none;outline:0;width:16px !important;position:sticky;background:0 0;z-index:2;font-size:40px;
  text-decoration:none;left:0;top:13%;cursor:pointer;color:#666;opacity:1;line-height:1;
  transition:opacity .5s cubic-bezier(.17,.67,.83,.67),color .5s cubic-bezier(.17,.67,.83,.67);
}
.leanbot-glider-next:focus,
.leanbot-glider-next:hover,
.leanbot-glider-prev:focus,
.leanbot-glider-prev:hover{color:#ccc;}
.leanbot-glider-next{right:0;left:auto;}
.leanbot-glider-next.disabled,
.leanbot-glider-prev.disabled{opacity:.25;color:#666;cursor:default;}
.leanbot_glider-prev{right:95%;}

.leanbot_loader{
  animation:is-rotating 1s infinite;border:6px solid #e5e5e5;border-radius:50%;border-top-color:#464646;height:28px;width:28px;
  margin-top:2px;margin-left:5px;pointer-events:none;display:flex;background-color:transparent;
}
@keyframes is-rotating{to{transform:rotate(1turn);}}

.leanbot_div_chat_messages::-webkit-scrollbar{
  box-shadow:inset 0 0 6px rgb(148 148 148 / 30%);width:9px;
}
.leanbot_div_chat_messages::-webkit-scrollbar-thumb{
  background-color:#c1c1c1;border-radius:10px;
}

.leanbot-dot{
  fill:rgb(60 60 60 / 70%);transform-origin:50% 50%;
  animation:ball-beat 1.1s 0s infinite cubic-bezier(.445,.050,.550,.950);
}
.leanbot-dot:nth-child(2){animation-delay:.3s !important;}
.leanbot-dot:nth-child(3){animation-delay:.6s !important;}
@keyframes ball-beat{
  0%{opacity:.7;}33.33%{opacity:.55;}66.67%{opacity:.4;}100%{opacity:1;}
}

/* --------------------------------------------------
   RESPONSIVO
-------------------------------------------------- */
@media screen and (max-device-width:1024px){
  .leanbot_titulo{height:45px;position:relative;border-top-left-radius:0;border-top-right-radius:0;}
  .leanbot_botao_chat{width:20%;}
  .leanbot_chat_popup{border:none;bottom:10;max-height:760px;max-width:564px;right:10;}
}
@media screen and (max-device-width:600px){
  .leanbot_botao_chat{width:20%;}
  .leanbot_chat_popup{border:none;bottom:0;max-height:unset;max-width:unset;right:0;}
  .leanbot_chat_titulo_container{border-top-left-radius:unset;border-top-right-radius:unset;}
  .leanbot_fecha_chat{position:absolute;right:10px;color:#fff;cursor:pointer;height:40px;width:40px;}
  .leanbot_fecha_chat .material-icons{color:#fff;font-size:36px;}
  .leanbot_chat_bodyt_container{height:calc(100% - 100px);}
  .leanbot_chat_field_control{height:50px;}
}

/* --------------------------------------------------
   MIC / RECORD INDICATOR
-------------------------------------------------- */
.leanbot_mic_container{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:4px;
  transition:background-color .2s ease;outline:none;background:transparent !important;border:none !important;
}
.leanbot_mic_container.habilitado{background-color:#1a73e8 !important;cursor:pointer;}
.leanbot_mic_container.habilitado:hover{background-color:#1b66c9 !important;}
.leanbot_mic_container.desabilitado{background-color:transparent !important;cursor:not-allowed;}
.leanbot_mic_container svg{width:20px;height:20px;}

#leanbot_audio_recording{
  display:flex;align-items:flex-end;height:24px;margin-left:8px;
}
#leanbot_audio_recording .rec-bars{display:flex;}
#leanbot_audio_recording .rec-bars div{
  width:4px;margin:0 2px;background:#4a7;animation:rec-wave 1s infinite ease-in-out;
}
#leanbot_audio_recording .rec-bars div:nth-child(2){animation-delay:.2s;}
#leanbot_audio_recording .rec-bars div:nth-child(3){animation-delay:.4s;}
#leanbot_audio_recording .rec-bars div:nth-child(4){animation-delay:.6s;}
@keyframes rec-wave{
  0%,100%{height:5px;}50%{height:20px;}
}

/* --------------------------------------------------
   ÁUDIO ENVIADO
-------------------------------------------------- */
.leanbot_balao.audio-sent{
  background:#e1e5eb;
  max-width:80%;
  padding:8px 12px;
  border-radius:20px;
  box-sizing:border-box;
}
.leanbot_balao.audio-sent audio{
  display:block;
  width:100%;
  border-radius:12px;
}
.leanbot_balao.audio-sent p{
  margin:4px 0 0;
  font-size:12px;
  color:#555;
}
.leanbot-audio-player{
  display:block;
  width:100%;
  min-width:220px;
  border-radius:12px;
}

/* --------------------------------------------------
   OVERRIDES – IMPORTANTE: mantém os lados corretos
-------------------------------------------------- */
.leanbot_atendente{
  float:left;
  clear:both;
}

.leanbot_cliente{
  float:right;
  clear:both;
  margin:5px 0 5px 45px;
  display:block;        /* substitui flex para não distorcer */
  text-align:right;     /* opcional */
}

/* Garante que o balão de áudio continue no padrão do cliente (direita) */
.leanbot_cliente .leanbot_balao.audio-sent{
  background:#e1e5eb;
}