:root {
  --chat--toggle--background: #ff9900 !important;
  --chat--toggle--hover--background: #e68a00 !important;
  --chat--toggle--color: #ffffff !important;
  --chat--toggle--size: 64px;

  /* Contenedor principal */
  --chat--border-radius: 14px;
  --chat--window--width: 380px;
  --chat--window--height: auto;

  /* Cabecera */
  --chat--header--background: #ffffff;
  --chat--header--color: #333333;
  --chat--heading--font-size: 14px;
  --chat--subtitle--font-size: 11px;

  /* Bot */
  --chat--message--bot--background: #ff9900;
  --chat--message--bot--color: #ffffff;

  /* Usuario */
  --chat--message--user--background: #e0e0e0;
  --chat--message--user--color: #333333;

  /* Input */
  --chat--textarea--height: 38px;
}


.chat-header{
    gap:0 !important;
}

.chat-heading h1{
    margin: 0 !important;
}

.chat-header > p {
    margin: 0 !important;
}

.chat-header > p {
  margin: 0 !important;
  position: relative;
  padding-left: 18px; /* espacio para el punto */
  font-size: var(--chat--subtitle--font-size);
  color: var(--chat--header--color);
}

.chat-header > p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #4CAF50;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(76, 175, 80, 0.7);
  animation: chat-pulse 1.5s infinite;
}

@keyframes chat-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}


.chat-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  margin-left: auto;
  padding: 0 8px;
  line-height: 1;
}

.chat-close-btn:hover {
  color: #222;
}

/* Estilo para el contenedor del input de chat */
.chat-input {
  padding: 18px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Estilo para el textarea dentro del contenedor .chat-input */
.chat-input textarea {
  width: 100%; /* Asegura que el textarea ocupe el ancho disponible */
  padding: 10px; /* Añadido para dar espacio interno al texto */
  border-radius: 25px !important;
  border: 1px solid #ccc; /* Borde sutil */
  box-sizing: border-box; /* Garantiza que el padding no afecte el tamaño del textarea */
  font-size: 16px;
  line-height: 1.5;
  resize: vertical; /* Permite cambiar el tamaño solo verticalmente */
  min-height: 60px; /* Establecer una altura mínima */
}

/* Estilo para el placeholder */
.chat-input textarea::placeholder {
  color: #aaa; /* Color suave para el texto del placeholder */
  font-style: italic; /* Estilo de fuente del placeholder */
}

.chat-input-send-button[data-v-de5e7961], .chat-input-file-button[data-v-de5e7961] {
    background: transparent !important;
    color: #ff9900 !important;
}

.chat-layout .chat-body {
  margin-bottom: -3px;
}

/* === TYPING ANIMATION === */
        .chat-message-typing {
            display: flex;
            justify-content: flex-start;
        }

        .chat-message-typing-circle {
            width: 8px;
            height: 8px;
            background-color: #fff !important;
            border-radius: 50%;
            animation: chat-typing-bounce 1.3s infinite ease-in-out;
        }

        .chat-message-typing-circle:nth-child(2) {
            animation-delay: 0.2s;
        }

        .chat-message-typing-circle:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes chat-typing-bounce {
            0%, 80%, 100% {
                transform: scale(0);
                opacity: 0.3;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

.chat-window-wrapper {
    max-height: 70% !important;
}


.chat-window-toggle::before {
    content: '¡Matricúlate ya!';
    background-color: #ff9900;
    background-image: url('/wp-content/plugins/ticnology-chat-loader/assets/img/robo.png');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px 20px; /* ajusta según el tamaño del ícono */
    color: white;
    padding: 10px 20px 10px 40px; /* espacio a la izquierda para el ícono */
    border-radius: 999px;
    font-weight: 900;
    font-size: 17px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
    justify-content: right !important;
}

.chat-window-wrapper .chat-window-toggle {
    flex: none !important;
    background: none !important;
    justify-content: right !important;
}