@property --gradient-theme {
    syntax: "<color>";
    initial-value: rgba(0, 0, 0, 0.979);
    inherits: false;
  }


@property --gradient-end {
    syntax: "<color>";
    initial-value: rgb(81, 6, 151);
    inherits: false;

}
@property --speech-theme {
    syntax: "<color>";
    initial-value: rgb(29, 29, 29);
    inherits: false;
  }
  
  #container {
      scrollbar-width: none;
      overflow-y: auto; /* Permite el desplazamiento vertical */
      overflow-x: hidden; /* Oculta el desplazamiento horizontal */
      width: 100%;
      max-height: calc(100% - 100px);
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;

  }
  
  #container::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    display: none; /* Oculta la scrollbar en Webkit */


  }
  
  body {
      background-image: linear-gradient(60deg, var(--gradient-theme), var(--gradient-end)); /* Gradiente inicial */
      transition: --gradient-end 1.2s ease-in-out, --gradient-theme 2s ease-in-out;
      max-height: 100%;
      max-width: 100%;
      overflow-x: hidden;
  }

  #burbuja {
    font-size: clamp(18px, 23px, 2vw);
    background-color: var(--speech-theme); /* Color de fondo del burbuja */
    position: relative;
    left: clamp(9.4vw, 55px, 80px); 
    max-width: calc(90% - 30px); /* Ajusta el ancho máximo del burbuja */
    width: fit-content;   z-index: 1; 
    max-width: 77%;
    overflow-y: none; 
    height: auto;
    margin: 0;
    border-radius: 10px;
    margin-top: 30px;
    padding: 0.4em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    transition:  --speech-theme 2s ease-in-out, opacity 0.6s ease-in-out; /* Transición suave para el gradiente */
    box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.4);
    z-index: 1;
    top: 100px;
    }

    


    #burbuja::before {
        content: '';
        position: absolute;
        top: 0; /* Ajusta la posición vertical del triángulo */
        left: 0; /* Ajusta la posición horizontal del triángulo */
        border-width: 0 10px 10px 10px;
        transform: translate(-34px, 0px); /* Ajusta la posición del triángulo */
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
        width: 80px;
        height: min(55px, 70%);
        background-color: var(--speech-theme); /* Color de fondo del triángulo */
        z-index: -1; /* Asegúrate de que el triángulo esté detrás del burbuja */
        transition:  --speech-theme 2s ease-in-out, background-color 2s ease-in-out, display 1s ease; /* Transición suave para el gradiente */
    }


    #response {

        font-family: 'Nunito', sans-serif;
        font-size: clamp(18px, 22px, 2vw); 
        margin: 0;
        color: white;
        transition: color 1.3s ease-in-out;

    }

    #burbuja.light::before {
        background-color: rgb(250, 250, 238) !important; /* Ensure this uses the CSS property */
        transition: background-color 2s ease-in-out;
    }

#menu.light {
    background-color: rgb(210, 210, 205) !important; /* Ensure this uses the CSS property */
    transition: background-color 2s ease-in-out;
}

button.light, input.light {
    transition: background-color 2s ease-in-out, color 1.3s ease-in-out;
}

button.light {
    color: rgb(240, 240, 230) !important;
    transition: color 2s ease-in-out !important;
}

input.light {
    background-color: rgb(240, 240, 230) !important;
    color: rgb(15, 15, 15) !important;
}
  #toggle-theme {

    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    right: min(0.9vw, 2px);
    position: fixed;
    top: min(4.2vh, 22px);
    color: white;
    z-index: 1000;
  }

    #toggle-theme:active {
        transform: scale(0.9);
        transition: transform 0.1s ease-in-out;
    }


    .fa-paper-plane:active {
        transform: scale(0.9) !important;
        transition: transform 0.1s ease-in-out;
    }

    .fa-paper-plane:hover {
        transform: scale(1.1);
        transition: transform 0.1s ease-in-out;
    }

    #ai-image {
        transition: opacity 0.6s ease-in-out;
        width: clamp(200px, 360px, 55vw);
        height: auto;
    }

    @media (max-height: 600px) {
        #ai-image {
            width: clamp(235px, 55vw, 250px);
            height: auto;
        }
    }

    @media (max-width: 600px) {
        #ai-image {
            width: clamp(235px, 75vw, 300px);
            height: auto;
        }
    }

    #response :last-child {
        margin-bottom: 0;
    }

    #response :first-child {
        margin-top: 0;
    }