/* ====================================
   VOCALAI - RESPONSIVE
==================================== */

/* Large Tablets */

@media (max-width: 1200px){

    .vocalai-wrapper{
        padding:25px;
    }

}

/* Tablets */

@media (max-width: 992px){

    .vocalai-grid{
        grid-template-columns:1fr;
    }

    .voice-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .stats-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

}

/* Mobile */

@media (max-width: 768px){

    .vocalai-wrapper{
        padding:15px;
    }

    .vocalai-title{
        font-size:30px;
    }

    .vocalai-subtitle{
        font-size:14px;
    }

    .voice-grid{
        grid-template-columns:1fr;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
    }

    .history-controls{
        flex-direction:column;
    }

    .history-btn{
        width:100%;
    }

    .vocalai-toolbar{
        flex-direction:column;
    }

    .va-btn{
        width:100%;
    }

    #textInput{
        min-height:140px;
    }

}

/* Small Phones */

@media (max-width: 480px){

    .vocalai-title{
        font-size:24px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stat-number{
        font-size:22px;
    }

    .voice-avatar{
        width:42px;
        height:42px;
    }

    .voice-name{
        font-size:14px;
    }

    .history-text{
        font-size:14px;
    }

}

/* Ultra Small Devices */

@media (max-width: 360px){

    .vocalai-wrapper{
        padding:10px;
    }

    .vocalai-card{
        padding:14px;
    }

}