.body-avatar .avatar:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100px;
      height: 100px;
      border-radius: 1000px;
      z-index: 10;
      animation: ripple 0.7s linear infinite;
      box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6),
        -5px -5px 10px rgba(255, 255, 255, 0.5);
    }

    .body-avatar video,
    .body-avatar canvas {
      width: 100%;
      margin-top: 12px;
      transform: scale(1.8);
      border-radius: 20px 0 0 0;
    }

    .body-avatar .avatar {
      height: 100px;
      width: 100px;
      display: block;
      overflow: hidden;
      border-radius: 100%;
      cursor: pointer;
    }

    .body-avatar {
      position: fixed;
      bottom: 0px;
      right: 87px;
      z-index: 9999;
      width: 100px;
    }

    .body-avatar.avatar-modal {
      top: 368px;
      right: 199px;
      height: 94px;
    }

    .body-avatar.avatar-modal.full {
      top: 434px !important;
      right: 184px !important;
    }

    .body-avatar.avatar-modal .avatar {
      overflow: hidden;
      border-radius: 100%;
      border: 1px solid #e5e5e5;
    }

    .body-avatar.avatar-modal #outputCanvas {
      margin-top: 0 !important;
      transform: scale(2);
      object-fit: cover;
      position: absolute;
      height: 100%;
      width: 100%;
    }

    .avatar-fixo-modal {
      position: initial;
    }

    .avatar-modal canvas {
      margin-top: 2px !important;
      width: 100px;
      height: 56px;
    }

    @keyframes ripple {
      0% {
        box-shadow: 0 0 0 0 rgba(163, 177, 198, 0.3), 0 0 0 1em rgba(163, 177, 198, 0.3), 0 0 0 3em rgba(163, 177, 198, 0.03), 0 0 0 5em rgba(163, 177, 198, 0.01);
      }

      100% {
        box-shadow: 0 0 0 1em rgba(163, 177, 198, 0.3), 0 0 0 3em rgba(163, 177, 198, 0.03), 0 0 0 5em rgba(163, 177, 198, 0.03), 0 0 0 8em rgba(163, 177, 198, 0.01);
      }
    }

    /* chat */
    .speech-bubble {
      width: 160px;
      height: auto;
      background: #ffffff;
      position: absolute;
      left: -119px;
      top: -80px;
      margin: auto;
      border: 10px solid #fff;
      border-radius: 200px;
      filter: drop-shadow(4px 7px 0 #e3e3e3);
      border-radius: 200px;
      z-index: 9999;
    }

    .chat-animacao {
      -webkit-animation: hello 2s forwards;
      animation: hello 2s forwards;
    }

    .txt-chat-animacao {
      -webkit-animation: hello 2s forwards;
      animation: hello 2s forwards;
      -webkit-animation-delay: 0.8s;
      animation-delay: 0.8s;
    }

    .speech-bubble:after {
      width: 0;
      height: 0;
      border-left: 40px solid transparent;
      border-right: 0px solid transparent;
      border-top: 19px solid #fff;
      content: "";
      top: 83px;
      position: absolute;
      left: 15px;
      right: -52px;

      margin: auto;
    }

    .speech-bubble:before {
      top: 220px;
      border-top: 55px solid #fff;
      border-left: 44px solid transparent;
      border-right: 44px solid transparent;
    }

    .hello {
      opacity: 0;
      font-size: 13px;
      color: #5b5b5b;
      margin: 7px 0 7px 15px;;
      text-align: left;
      height: 70px;
      display: flex;
      align-items: center;

    }

    .em-hand {
      font-size: 48px;
      text-align: center;
      margin: 0.5em 0.5em 1em;
      -webkit-animation: wave 0.3s alternate infinite;
      animation: wave 0.3s alternate infinite;
      transform-origin: 50% 100%;
    }

    @-webkit-keyframes pop {
      0% {
        width: 100px;
      }

      40% {
        width: 1000px;
      }

      80% {
        width: 600px;
      }
    }

    @keyframes pop {
      0% {
        width: 100px;
      }

      40% {
        width: 1000px;
      }

      80% {
        width: 600px;
      }
    }

    @-webkit-keyframes hello {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes hello {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes move {
      0% {
        top: 50px;
        left: -10px;
      }

      50% {
        left: 50px;
      }

      100% {
        left: 100px;
      }
    }

    @keyframes move {
      0% {
        top: 50px;
        left: -10px;
      }

      50% {
        left: 50px;
      }

      100% {
        left: 100px;
      }
    }

    @-webkit-keyframes wave {
      0% {
        transform: rotate(-30deg);
      }

      100% {
        transform: rotate(10deg);
      }
    }

    @keyframes wave {
      0% {
        transform: rotate(-30deg);
      }

      100% {
        transform: rotate(10deg);
      }
    }


    /* MODAL IA */

    .modal {
      text-align: left;
    }

    .modal-content {
      border: none;
      border-radius: 2px;
      box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
    }

    .modal-header {
      border-bottom: 0;
      padding-top: 15px;
      padding-right: 26px;
      padding-left: 26px;
      padding-bottom: 0px;
    }

    .modal-title {
      font-size: 34px;
    }

    .modal-body {
      border-bottom: 0;
      padding-top: 5px;
      padding-right: 26px;
      padding-left: 26px;
      padding-bottom: 10px;
      font-size: 15px;
    }

    .modal-content {
      overflow: hidden;
    }

    .modal-content #canvas {
      position: absolute;
      filter: grayscale(1);
    }

    .modal-footer {
      border-top: 0;
      padding-top: 0px;
      padding-right: 26px;
      padding-bottom: 26px;
      padding-left: 26px;
    }

    .modal-open {
      padding: 0 !important;
    }

    @media (min-width: 576px) {
      .modal-dialog.modal-ia {
        max-width: 100% !important;
        
        height: 100vh;
      }
    }

    .modal-ia .modal-content {
      /* background-image: url(../img/moked-ia/fundo-avatar-modal.png); */
      /* background-size: 806px;
      background-position: right;
      background-repeat: no-repeat;
      border-radius: 10px;
      -webkit-box-shadow: 0px 0px 10px 1px #000000;
      box-shadow: 0px 0px 10px 1px #000000;
      overflow: hidden; */
    }

    .modal-dialog.modal-ia.fullscreen {
      max-width: 100% !important;
      margin: 0 !important;
      height: 100vh !important;
    }

    .modal-dialog.modal-ia.fullscreen .modal-content {
      height: 100vh !important;
    }

    #costumModal14:has(.fullscreen) {
      padding: 0 !important;
    }

    .fullscreen .modal-body {
      flex: none;
    }

    .modal-dialog.modal-ia .modal-content:before {
      /* content: ""; */
      background: #ffffffd9;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
    }

    .modal-ia .modal-body {
      padding: 20px !important;
      position: relative;
      z-index: 9;
    }

    header.header-modal-ia span {
      cursor: pointer;
    }

    header.header-modal-ia span:first-child {
      margin-right: 10px;
    }

    header.header-modal-ia span:first-child svg {
      width: 17px;
      padding-top: 1px;
    }

    header.header-modal-ia span svg {
      width: 20px;
      height: auto;
    }

    header.header-modal-ia {
      display: flex;
      justify-content: flex-end;
      position: relative;
    }

    .sidebar-modal-ia {
      position: absolute;
      background: #F0F0F0;
      right: 20px;
      border-radius: 10px;
      padding: 25px 15px;
      max-height: 330px;
      overflow-y: scroll;
      max-width: 305px;
      z-index: 3;
      -webkit-box-shadow: 0px 0px 7px 0px #000000;
      box-shadow: 0px 0px 7px 0px #000000;
    }

    header.header-modal-ia span svg path {
      fill: #525252;
    }

    .titulo-modal-ia {
      margin-bottom: 20px;
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: flex-end;
    }

    .titulo-modal-ia .data-historico {
      color: #fff;
      border-radius: 15px;
      padding: 6px;
      font-size: 13px;
    }

    .titulo-modal-ia .data-historico.red {
      background: #ab1815;
    }

    .titulo-modal-ia img {
      width: 50px;
      margin-bottom: -5px;
      margin-right: 5px;
      margin-left: 2px;
    }

    .titulo-modal-ia h3 {
      line-height: 22px;
      position: relative;
      transition: all;
    }

    .pesquisa-modal-ia {
      padding: 56px;
      position: relative;
      height: 100vh;
      z-index: 0;
    }

    .historico-item svg {
      fill: #ab1815;
      height: 18px;
      margin-top: -2px;
    }

    .sidebar-modal-ia div {
      margin-bottom: 15px;
      color: #686868;
    }

    .sidebar-modal-ia div:last-child {
      margin-bottom: 0 !important;
    }

    .sidebar-modal-ia div ul li {
      border-bottom: 1px solid #D8D8D8;
      padding-left: 10px;
      padding-bottom: 5px;
      padding-top: 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .sidebar-modal-ia div ul li:hover {
      cursor: pointer;
      color: #7f0000;
    }

    .sidebar-modal-ia h4 {
      font-weight: 600;
    }

    .campo-pesquisa {
      background: #f0f0f0;
      border-radius: 15px;
      padding: 15px 5px 5px 10px;
      width: 100%;
      z-index: 2;
      position: relative;
    }

    .campo-pesquisa textarea {
      background: none;
      border: none;
      width: 100%;
      color: #0e0e0e;
    }

    .campo-pesquisa textarea:focus {
      outline: none;
    }

    .acoes-ia {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      z-index: 99;
    }

    .acoes-ia span svg {
      width: 20px;
      height: auto;
    }

    svg#icon-play {
      width: 18px;
      height: 18px;
    }

    .acoes-ia span {
      margin-left: 5px;
      cursor: pointer;
    }

    .acoes-ia .send-ia {
      background: #ab1815;
      border-radius: 100%;
      height: 30px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .send-ia:disabled {
      background: #ffb3b1 !important;
      cursor: not-allowed;
    }

    .acoes-ia .send-ia svg path {
      fill: #fff;
    }

    span#start {
      background: #cdcdcd;
      border-radius: 100%;
      height: 30px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #b7b7b7;
      margin-right: 4px;
    }

    .perguntas-frequentes-ia button {
      padding: 10px;
      border-radius: 25px;
      background-color: #FBFBFB;
      border: 1px solid #E8E8E8;
      margin-right: 15px;
      cursor: pointer;
      transition: all 1s;
    }

    .perguntas-frequentes-ia button:hover {
      background: #ab1815;
      color: #ffffff;
    }

    .perguntas-frequentes-ia {
      padding: 15px 10px;
    }

    .perguntas-frequentes-ia button {
      font-weight: bold;
    }

    .perguntas-frequentes-ia .pergunta-destaque {
      background: #ab1815;
      color: #fff;
    }

    [data-pergunta]:disabled {
      cursor: not-allowed;
    }

    .pergunta-destaque:disabled {
      background: #ffb3b1 !important;
      cursor: not-allowed;
    }

    .lista-pesquisa-ia {
      background: #f7f7f7;
      width: 100%;
      position: relative;
      padding: 15px;
      border-radius: 15px;
      overflow-y: scroll;
      max-height: 300px;

    }

    .lista-pesquisa-ia ul {
      max-height: 300px;
    }

    .lista-pesquisa-ia:after {
      /* content: ""; */
      height: 30px;
      left: 0;
      right: 0;
      background: #f7f7f7;
      display: block;
      position: absolute;
      bottom: -16px;
    }

    .lista-pesquisa-ia ul li {
      background: #f0f0f0;
      padding: 8px 10px 10px;
      margin-bottom: 10px;
      border-radius: 25px;
    }


    .lista-pesquisa-ia li.pergunta-feita-ia {
      float: right;
    }

    li.pergunta-feita-ia span {
      margin-top: 3px;
      color: #9b9b9b;
      font-size: 12px;
    }

    li.pergunta-feita-ia {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .lista-pesquisa-ia li.resposta-ia {
      float: left;
    }

    .lista-pesquisa-ia ul {
      /* display: flex;
      flex-direction: column;
      align-items: flex-end; */
    }

    .lista-pesquisa-ia li.resposta-ia {
      background: none !important;
    }

    .lista-pesquisa-ia li.resposta-ia {
      display: flex;
      width: 100%;
    }

    .lista-pesquisa-ia li.resposta-ia img {
      width: 30px;
      margin-right: 10px;
    }

    .line {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 15px;
      background-color: #ab1815;
    }

    .load-3 .line:nth-last-child(1) {
      animation: loadingC 0.6s 0.1s linear infinite;
    }

    .load-3 .line:nth-last-child(2) {
      animation: loadingC 0.6s 0.2s linear infinite;
    }

    .load-3 .line:nth-last-child(3) {
      animation: loadingC 0.6s 0.3s linear infinite;
    }

    .loading-ia {
      display: flex;
      justify-content: flex-start;
      background: none !important;
      margin-bottom: 21px !important;
    }

    @keyframes loadingC {
      0% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(0, 15px);
      }

      100% {
        transform: translate(0, 0);
      }
    }

    .scrollbar::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
    }

    .scrollbar::-webkit-scrollbar {
      width: 12px;
      background-color: #F5F5F5;
    }

    .scrollbar::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #555;
    }


    /*REMOVER ANIMACAO*/

    @keyframes ocultar {
      0% {
        border-radius: 100%
      }

      25% {
        border-radius: 100%
      }

      50% {
        border-radius: 100%
      }

      100% {
        opacity: 1;
        border-radius: 0 !important;
      }

    }

    @keyframes ocultar-efeito {
      0% {
        opacity: 1;
      }

      25% {
        opacity: 1;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    .avatar.remover-circle {
      transition: all 1s;
      border-radius: 0;
      overflow: unset;

    }

    .avatar.remover-circle canvas {
      margin-top: 14px;
    }

    .avatar.remover-circle::after {
      transition: all 1s;
      opacity: 0;
    }

    .avatar-modal:before {
      content: "";
      position: absolute !important;
      background-image: url(../img/moked-ia/borda-footer-avatar-3.png);
      background-position: center bottom;
      background-size: 265px 147px;
      background-repeat: no-repeat;
      z-index: 99999;
      left: 0 !important;
      bottom: 0 !important;
      right: 0 !important;
      top: 0 !important;
    }

    /* .body-avatar.avatar-modal:after
 {
    content: "";
    position: absolute;
    background-image: url(../img/moked-ia/borda-footer-avatar-2.png);
    background-size: 100%;
    z-index: 99999;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
} */

    .avatar-modal canvas {
      width: 100%;
      height: auto;
      border-radius: 92px 0 0 0;
    }


    .avatar-fixo-modal {
      background-image: url(../img/moked-ia/fundo-avatar-modal-5.png);
      background-position: center center;
      background-repeat: no-repeat;
      height: 400px;
      background-size: 398px;
      display: flex;
      justify-content: center;
      align-items: center;
    }


    /*HOME E MENU*/
    ul.sub_menu {
      height: 0px;
      overflow: hidden;
      transition: All 1s;
      height: auto;
      padding-left: 10px;
    }

    ul.sub_menu li a {
      font-size: .8em !important;
    }

    nav.menu-navegacao ul li {
      background: #AB1815;
      padding: 10px 30px;
      font-weight: 600;
      font-size: 20px;
    }

    nav.menu-navegacao ul li a {
      color: #ffffff;
      position: unset;
    }

    .menu {
      z-index: 10;
      background: #ffffffd3 !important;
    }

    nav.menu-navegacao {
      display: flex;
      float: none;
      justify-content: flex-end;
    }

    .menu-efeito header {
      overflow: unset !important;
    }

    /* MENU TOGLE */

    #toggle {
      width: 28px;
      height: 30px;
      margin: 27px 0px 27px 40px;
      cursor: pointer;
    }

    #toggle div {
      width: 100%;
      height: 5px;
      background: rgb(63, 63, 63);
      margin: 4px auto;
      transition: all 0.3s;
      backface-visibility: hidden;
    }

    #toggle.on .one {
      transform: rotate(45deg) translate(5px, 5px);
    }

    #toggle.on .two {
      opacity: 0;
    }

    #toggle.on .three {
      transform: rotate(-45deg) translate(7px, -8px);
    }

    #menu1 {
      color: #696969;
      width: 253px;
      height: auto;
      padding: 10px 20px;
      line-height: 30px;
      text-align: center;
      font-weight: normal;
      margin: auto;
      display: none;
      background: #D8D8D8;
      position: absolute;
      right: -50px;
      top: 70px;
      -webkit-box-shadow: 0px 0px 6px 3px #878787;
      box-shadow: 0px 0px 6px 3px #878787;
    }

    div#menu1 ul {
      display: block;
    }

    div#menu1 ul li {
      background: none;
      padding: 0;
      margin: 0;
      font-size: 16px;
      text-align: left;
    }

    div#menu1 li a {
      color: #696969;
    }

    ul.media-social-menu {
      display: flex !important;
      justify-content: flex-start;
    }

    .media-social-menu a {
      display: flex;
      justify-content: center;
      align-items: center;
    }


    ul.media-social-menu li {

      background: #ffffff !important;
      width: 25px;
      height: 25px;
      border: 1px solid #929292;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    ul.media-social-menu li:last-child {
      margin-left: 10px !important;
    }

    .logo h1 {
      background-size: 82% !important
    }

    .rolagem~.sem-pad {
      margin: 0 !important;
    }


    /* BANNER */
    section.banner-home-1 video {
      width: 100%;
      margin-bottom: -3px;
    }

    section.banner-home-1 {
      position: relative;
    }

    section.banner-home-1:after {
      content: "";
      background-image: url(../img/moked-ia/banner5.png);
      background-size: cover;
      opacity: 0.8;
      right: 0;
      top: 0;
      left: 0;
      bottom: 0;
      position: absolute;
    }

    .descricao-banner {
      position: absolute;
      z-index: 9;
      margin-top: 180px;
    }

    .descricao-banner h3 {
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 9px;
    }

    .descricao-banner p {
      font-size: 1.4rem;
    }


    /* ANIMACAO CUBOS*/
    .cubos-rigt {
      z-index: 99;
    }

    .cubos-rigt img {
      width: 100px;
      position: absolute;
      z-index: 1;
      filter: contrast(0.4);
      margin: 0;
    }

    .cubos-rigt img:nth-child(1) {
      animation: animar 2s linear infinite;
      bottom: 0px;
      right: 0px;
    }

    .cubos-rigt img:nth-child(2) {
      animation: animar 4s linear infinite;
      bottom: 0px;
      right: 200px;
    }

    .cubos-rigt img:nth-child(3) {
      animation: animar 5s linear infinite;
      right: 100px;
      bottom: 0px;
      right: 300px;
    }

    .cubos-rigt img:nth-child(4) {
      animation: animar 2s linear infinite;
      right: 100px;
      bottom: 0px;
      right: 400px;
    }

    .cubos-rigt img:nth-child(5) {
      animation: animar 3s linear infinite;
      right: 100px;
      bottom: 0px;
    }


    .cubos-rigt img:nth-child(6) {
      animation: animar 2s linear infinite;
      right: 0px;
      bottom: 100px;
    }

    .cubos-rigt img:nth-child(7) {
      animation: animar 2s linear infinite;
      bottom: 100px;
      right: 100px;
    }

    .cubos-rigt img:nth-child(8) {
      animation: animar 3s linear infinite;
      right: 200px;
      bottom: 100px;
    }

    .cubos-rigt img:nth-child(9) {
      animation: animar 4s linear infinite;
      bottom: 100px;
      right: 300px;
    }


    .cubos-rigt img:nth-child(10) {
      animation: animar 2s linear infinite;
      right: 100px;
      bottom: 200px;
    }

    .cubos-rigt img:nth-child(11) {
      animation: animar 3s linear infinite;
      right: 200px;
      bottom: 200px;
    }

    .cubos-rigt img:nth-child(12) {
      animation: animar 2s linear infinite;
      right: 0px;
      bottom: 200px;
    }

    .cubos-rigt img:nth-child(13) {
      animation: animar 3s linear infinite;
      right: 100px;
      bottom: 300px;
    }

    .cubos-rigt img:nth-child(14) {
      animation: animar 2s linear infinite;
      right: 0px;
      bottom: 300px;
    }

    .cubos-rigt img:nth-child(15) {
      animation: animar 3s linear infinite;
      right: 0px;
      bottom: 400px;
    }

    @keyframes animar {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }

    }

    .cubos-inverse {
      transform: rotateZ(-90deg);
      position: absolute;
      right: 0;
      top: 0;
      filter: opacity(0.3);
      z-index: 0;
    }

    .cubos-inverse-top {
      position: absolute;
      left: 0;
      top: 0;
      filter: opacity(0.3);
      z-index: 0;
      transform: scaleX(-1) rotateZ(-90deg);
    }

    .cubos-horinzontal-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      filter: opacity(0.3);
      z-index: 0;
      transform: scaleX(-1);
    }

    .cubos-rigt-bottom {
      transform: rotateZ(0deg) !important;
      top: auto !important;
      right: 0;
      bottom: 0 !important;
      position: absolute;
      z-index: 0;
      filter: opacity(0.3);
    }

    .cubos-left-inverter-vertical {
      right: auto !important;
      top: auto !important;
      left: 0;
      bottom: 0 !important;
      transform: rotateZ(180deg) scaleY(-1) !important;
      position: absolute;
      z-index: 0;
      filter: opacity(0.3);

    }

    /*EFEITO SOM*/
    .sound-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 38px;
    }

    .sound-wave {
      width: 70%;
      height: 57px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      overflow: hidden;
    }

    .sound-wave .bar {
      display: block;
      width: 2px;
      margin-right: 1px;
      height: 90px;
      background: #808080;
      animation: sound 0ms -800ms linear infinite alternate;
      transition: height 0.8s;
    }

    .sound-wave .bar2 {
      display: block;
      width: 2px;
      margin-right: 1px;
      height: 120px;
      background: #838383;
      animation: sound2 0ms -800ms linear infinite alternate;
      transition: height 0.8s;
    }

    @keyframes sound {
      0% {
        opacity: .35;
        height: 6px;
      }

      100% {
        opacity: 1;
        height: 46px;
      }
    }

    @keyframes sound2 {
      0% {
        opacity: .35;
        height: 6px;
      }

      100% {
        opacity: 1;
        height: 120px;
      }
    }

    .bar:nth-child(1) {
      height: 2px;
      animation-duration: 474ms;
    }

    .bar:nth-child(2) {
      height: 10px;
      animation-duration: 433ms;
    }

    .bar:nth-child(3) {
      height: 18px;
      animation-duration: 407ms;
    }

    .bar:nth-child(4) {
      height: 26px;
      animation-duration: 458ms;
    }

    .bar:nth-child(5) {
      height: 30px;
      animation-duration: 400ms;
    }

    .bar:nth-child(6) {
      height: 32px;
      animation-duration: 427ms;
    }

    .bar:nth-child(7) {
      height: 34px;
      animation-duration: 441ms;
    }

    .bar:nth-child(8) {
      height: 36px;
      animation-duration: 419ms;
    }

    .bar:nth-child(9) {
      height: 40px;
      animation-duration: 487ms;
    }

    .bar:nth-child(10) {
      height: 46px;
      animation-duration: 442ms;
    }

    .bar:nth-child(11) {
      height: 2px;
      animation-duration: 474ms;
    }

    .bar:nth-child(12) {
      height: 10px;
      animation-duration: 433ms;
    }

    .bar:nth-child(13) {
      height: 18px;
      animation-duration: 407ms;
    }

    .bar:nth-child(14) {
      height: 26px;
      animation-duration: 458ms;
    }

    .bar:nth-child(15) {
      height: 30px;
      animation-duration: 400ms;
    }

    .bar:nth-child(16) {
      height: 32px;
      animation-duration: 427ms;
    }

    .bar:nth-child(17) {
      height: 34px;
      animation-duration: 441ms;
    }

    .bar:nth-child(18) {
      height: 36px;
      animation-duration: 419ms;
    }

    .bar:nth-child(19) {
      height: 40px;
      animation-duration: 487ms;
    }

    .bar:nth-child(20) {
      height: 46px;
      animation-duration: 442ms;
    }



    .typing {
      white-space: pre-line;
      position: relative;
    }

    .typing.typing-active::after {
      content: "|";
      margin-left: 2px;
      animation: blink 0.8s infinite;
    }

    @keyframes blink {
      50% {
        opacity: 0;
      }
    }

    /* Esconde o ícone de stop por padrão */
    #icon-stop {
      display: none;
    }

    /* Classe que vamos alternar via jQuery */
    .listening #icon-play {
      display: none;
    }

    .listening #icon-stop {
      display: block;
    }

    /* Estilo para o cursor */
    #start {
      cursor: pointer;
      display: inline-block;
    }

    #onda-audio {
      width: 100%;
      height: 60px;
      background: rgba(255, 255, 255, 0.03);
      /* Fundo quase invisível */
      border-radius: 10px;
      padding: 5px;
    }

    .mic-container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      background: transparent;
    }

    .historico-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #D8D8D8;
    }

    #trash_historic {
      width: 20px;
      cursor: pointer;
      fill: red;
    }

    #trash_historic path {
      fill: red;
    }


    .cubos-direita-inverso {
      position: absolute;
      top: 0;
      right: 0;
      display: grid;
      grid-template-columns: repeat(5, 100px);
      gap: 0;
      justify-content: end;
      transform: scaleX(-1) rotate(180deg);
      contain: paint;
      z-index: -1;
      filter: opacity(0.7);
    }

    .filter-opacity {
      filter: opacity(0.7);
    }

    .cubos-direita-inverso.zindex-0 {
      z-index: 0;
    }

    .cubos-direita.left {
      left: 0 !important;
      right: auto !important;
      rotate: 90deg !important;
    }

    .cubos-direita-inverso.left {
      left: 0 !important;
      right: auto !important;
      rotate: 270deg !important;
    }

    .cubos-direita {
      position: absolute;
      bottom: 0;
      right: 0;
      display: grid;
      grid-template-columns: repeat(5, 100px);
      gap: 0;
      justify-content: end;
      overflow-x: hidden;
      contain: paint;
      filter: opacity(0.7);
    }

    .cubos-direita.zindex-99 {
      z-index: 9;
    }

    .cubos-esquerda {
      overflow-x: hidden;
      position: absolute;
      bottom: 0;
      left: 0;
      display: grid;
      grid-template-columns: repeat(5, 100px);
      gap: 0;
      justify-content: start;
      contain: paint;
      z-index: 99;
      filter: opacity(0.7);
    }

    .square {
      width: 100px;
      height: 100px;

      opacity: 0.5;
      /* Começa fora da tela à direita */
      animation-direction: reverse;

    }

    .cubos-direita.visivel .square {
      animation: entrar 0.8s ease-out forwards;
    }

    .cubos-direita-inverso.visivel .square {
      animation: entrar 0.8s ease-out forwards;
    }

    .cubos-direita .square,
    .cubos-direita-inverso .square {
      transform: translateX(400px);
      animation: sair 0.8s ease-in forwards;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.8s ease-in;
    }

    .cubos-esquerda .square,
    .cubos-esquerda-inverso .square {
      transform: translateX(-400px);
      animation: sairEsquerda 0.8s ease-in forwards;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.8s ease-in;
    }

    /* --- LÓGICA DO GRID (ESCADA) --- */

    /* Linha 1: O 1º quadrado pula 4 colunas para ficar na última (direita) */
    .cubos-direita .square:nth-child(1) {
      grid-column: 5;
    }

    /* Linha 2: O 2º quadrado pula 3 colunas, o 3º segue ele */
    .cubos-direita .square:nth-child(2) {
      grid-column: 4;
    }

    /* Linha 3: O 4º quadrado pula 2 colunas */
    .cubos-direita .square:nth-child(4) {
      grid-column: 3;
    }

    /* Linha 4: O 7º quadrado pula 1 coluna */
    .cubos-direita .square:nth-child(7) {
      grid-column: 2;
    }

    /* Linha 5: Do 11 ao 15 ocupam as 5 colunas naturalmente */
    .cubos-direita .square:nth-child(11) {
      grid-column: 1;
    }

    .cubos-direita-inverso .square:nth-child(1) {
      grid-column: 5;
    }

    /* Linha 2: O 2º quadrado pula 3 colunas, o 3º segue ele */
    .cubos-direita-inverso .square:nth-child(2) {
      grid-column: 4;
    }

    /* Linha 3: O 4º quadrado pula 2 colunas */
    .cubos-direita-inverso .square:nth-child(4) {
      grid-column: 3;
    }

    /* Linha 4: O 7º quadrado pula 1 coluna */
    .cubos-direita-inverso .square:nth-child(7) {
      grid-column: 2;
    }

    /* Linha 5: Do 11 ao 15 ocupam as 5 colunas naturalmente */
    .cubos-direita-inverso .square:nth-child(11) {
      grid-column: 1;
    }


    /* --- LÓGICA DA ANIMAÇÃO CASCATA --- */
    .cubos-direita .square:nth-child(1) {
      animation-delay: .1s;
    }

    .cubos-direita .square:nth-child(2) {
      animation-delay: .15s;
    }

    .cubos-direita .square:nth-child(3) {
      animation-delay: .2s;
    }

    .cubos-direita .square:nth-child(4) {
      animation-delay: .25s;
    }

    .cubos-direita .square:nth-child(5) {
      animation-delay: .3s;
    }

    .cubos-direita .square:nth-child(6) {
      animation-delay: .35s;
    }

    .cubos-direita .square:nth-child(7) {
      animation-delay: .4s;
    }

    .cubos-direita .square:nth-child(8) {
      animation-delay: .45s;
    }

    .cubos-direita .square:nth-child(9) {
      animation-delay: .5s;
    }

    .cubos-direita .square:nth-child(10) {
      animation-delay: .55s;
    }

    .cubos-direita .square:nth-child(11) {
      animation-delay: .6s;
    }

    .cubos-direita .square:nth-child(12) {
      animation-delay: .65s;
    }

    .cubos-direita .square:nth-child(13) {
      animation-delay: .7s;
    }

    .cubos-direita .square:nth-child(14) {
      animation-delay: .75s;
    }

    .cubos-direita .square:nth-child(15) {
      animation-delay: .8s;
    }


    .cubos-direita-inverso .square:nth-child(15) {
      animation-delay: 0.1s;
    }

    .cubos-direita-inverso .square:nth-child(14) {
      animation-delay: 0.15s;
    }

    .cubos-direita-inverso .square:nth-child(13) {
      animation-delay: 0.2s;
    }

    .cubos-direita-inverso .square:nth-child(12) {
      animation-delay: 0.25s;
    }

    .cubos-direita-inverso .square:nth-child(11) {
      animation-delay: 0.3s;
    }

    .cubos-direita-inverso .square:nth-child(10) {
      animation-delay: 0.35s;
    }

    .cubos-direita-inverso .square:nth-child(9) {
      animation-delay: 0.4s;
    }

    .cubos-direita-inverso .square:nth-child(8) {
      animation-delay: 0.45s;
    }

    .cubos-direita-inverso .square:nth-child(7) {
      animation-delay: 0.5s;
    }

    .cubos-direita-inverso .square:nth-child(6) {
      animation-delay: 0.55s;
    }

    .cubos-direita-inverso .square:nth-child(5) {
      animation-delay: 0.6s;
    }

    .cubos-direita-inverso .square:nth-child(4) {
      animation-delay: 0.65s;
    }

    .cubos-direita-inverso .square:nth-child(3) {
      animation-delay: 0.7s;
    }

    .cubos-direita-inverso .square:nth-child(2) {
      animation-delay: 0.75s;
    }

    .cubos-direita-inverso .square:nth-child(1) {
      animation-delay: 0.8s;
    }

    @keyframes entrar {
      from {
        opacity: 0;
        transform: translateX(400px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes sair {
      from {
        opacity: 1;
        transform: translateX(0);
      }

      to {
        opacity: 0;
        transform: translateX(400px);
      }
    }

    @keyframes sairEsquerda {
      from {
        opacity: 1;
        transform: translateX(0);
      }

      to {
        opacity: 0;
        transform: translateX(-400px);
      }
    }

    .cubos-esquerda {
      position: absolute;
      bottom: 0;
      left: 0;

      display: grid;
      grid-template-columns: repeat(5, 100px);
      gap: 0;
      justify-content: start;
    }

    /* --- LÓGICA DA ESCADA À ESQUERDA --- */

    /* Linha 1 (Topo): 1 quadrado na coluna 1 */
    .cubos-esquerda .square:nth-child(1) {
      grid-column: 1;
    }

    /* Linha 2: 2 quadrados começando na coluna 1 */
    .cubos-esquerda .square:nth-child(2) {
      grid-column: 1;
    }

    /* Linha 3: 3 quadrados começando na coluna 1 */
    .cubos-esquerda .square:nth-child(4) {
      grid-column: 1;
    }

    /* Linha 4: 4 quadrados começando na coluna 1 */
    .cubos-esquerda .square:nth-child(7) {
      grid-column: 1;
    }

    /* Linha 5 (Base): 5 quadrados começando na coluna 1 */
    .cubos-esquerda .square:nth-child(11) {
      grid-column: 1;
    }

    /* --- ANIMAÇÃO VINDO DA ESQUERDA --- */


    .cubos-esquerda.visivel .square {
      animation: entrarEsquerda 0.8s ease-out forwards;
    }

    @keyframes entrarEsquerda {
      from {
        opacity: 0;
        transform: translateX(-400px);
      }

      to {
        opacity: 0.1;
        /* Mantendo seu filtro de opacidade */
        transform: translateX(0);
      }
    }


    @media (max-width: 575.98px) {

      .cubos-direita,
      .cubos-direita-inverso,
      .cubos-esquerda,
      .cubos-esquerda-inverso {
        grid-template-columns: repeat(5, 70px);
        filter: opacity(0.7);
      }

      .square {
        width: 70px;
        height: 70px;
      }
    }


    @media (max-width: 950) {

      .cubos-direita,
      .cubos-direita-inverso,
      .cubos-esquerda,
      .cubos-esquerda-inverso {
        grid-template-columns: repeat(5, 80px);
      }

      .square {
        width: 80px;
        height: 80px;
      }
    }

    /* The Modal (background) */
    .modal-exclude {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      z-index: 99999999999;
      /* Sit on top */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-exclude-content {
      background-color: #fefefe;
      margin: 15% auto;
      /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 40%;
      /* Could be more or less, depending on screen size */
    }

    .modal-exclude-content h3 {
      padding: 20px;
    }

    .modal-exclude-content .modal-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    /* The Close Button */
    .close-exclude {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close-exclude:hover,
    .close-exclude:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .modal-exclude-btns {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 10px;
      width: 100%;
    }

    .modal-exclude-btns button[data-confirm] {
      background-color: rgb(205, 205, 205);
      border: 1px solid #b7b7b7;
    }

    .modal-exclude-btns button[data-confirm]:hover {
      background-color: rgb(187, 187, 187);
    }

    .avatar-modal {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 99999999999;
    }

    .avatar-modal img {
      width: 100px !important;
      height: 100px !important;
      border-radius: 100%;
      top: -27px;
    }

    #static-avatar-ios-device {
      border-radius: 100px;
    }
/* Tabelas do chat: scroll horizontal sem quebrar células */
.moked-ia-chat-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 4px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  scrollbar-width: thin;
  scrollbar-color: #ab1815 #eee;
}

.moked-ia-chat-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.moked-ia-chat-table-wrap::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 0 0 10px 10px;
}

.moked-ia-chat-table-wrap::-webkit-scrollbar-thumb {
  background: #ab1815;
  border-radius: 8px;
}

.moked-ia-chat-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.35;
  table-layout: auto;
}

.moked-ia-chat-table th,
.moked-ia-chat-table td {
  padding: 8px 10px;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  max-width: none !important;
  hyphens: none !important;
}

.moked-ia-chat-table th {
  background: #ab1815;
  color: #fff;
  text-align: left;
  font-weight: 600;
}

.moked-ia-chat-table td {
  border-bottom: 1px solid #ececec;
  vertical-align: middle;
}

.moked-ia-chat-table th *,
.moked-ia-chat-table td *,
.moked-ia-chat-table .moked-ia-chat-link {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.moked-ia-chat-table br {
  display: none !important;
}

.moked-ia-chat-table tbody tr:nth-child(even) td {
  background: #f8f8f8;
}

.moked-ia-chat-table tbody tr:last-child td {
  border-bottom: none;
}