/* ==========================================================
   CocoaFlow IA
   RESPONSIVE
========================================================== */

/* ==========================================================
   NOTEBOOK
========================================================== */

@media (max-width:1440px){

    #messages{

        width:min(900px,96%);

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .hero{

        padding:16px;

    }

    .robot{

        width:48px;
        height:48px;

    }

    .hero h1{

        font-size:22px;

    }

    .hero p{

        font-size:13px;

    }

    .chat-container{

        padding:
            20px
            18px
            110px;

    }

    .quick-actions{

        gap:8px;

        padding:12px;

    }

}

/* ==========================================================
   CELULAR
========================================================== */

@media (max-width:768px){

    .hero{

        padding:14px;

    }

    .robot{

        width:42px;
        height:42px;

        margin-bottom:6px;

    }

    .hero h1{

        font-size:20px;

    }

    .hero p{

        display:none;

    }

    .quick-actions{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding:10px;

        scrollbar-width:none;

    }

    .quick-actions::-webkit-scrollbar{

        display:none;

    }

    .quick-btn{

        white-space:nowrap;

        flex-shrink:0;

        padding:10px 16px;

        font-size:13px;

    }

    .chat-container{

        padding:
            16px
            14px
            110px;

    }

    .chat-input{

        padding:
            12px;

        gap:10px;

    }

    .chat-input textarea{

        min-height:52px;

        font-size:14px;

    }

    #sendButton{

        width:52px;
        height:52px;

        font-size:20px;

    }

}

/* ==========================================================
   CELULAR PEQUENO
========================================================== */

@media (max-width:480px){

    .hero{

        padding:12px;

    }

    .robot{

        width:38px;
        height:38px;

    }

    .hero h1{

        font-size:18px;

    }

    .chat-container{

        padding:
            12px
            12px
            105px;

    }

    .chat-input{

        padding:10px;

    }

    .chat-input textarea{

        padding:14px;

        min-height:48px;

        font-size:14px;

    }

    #sendButton{

        width:48px;
        height:48px;

        font-size:18px;

    }

}

/* ==========================================================
   MODO EMBED (Bubble)
========================================================== */

body.embed{

    overflow:hidden;

}

body.embed .app{

    height:100vh;

}

body.embed .hero{

    padding:
        10px
        18px;

}

body.embed .robot{

    width:38px;

    height:38px;

    margin-bottom:4px;

}

body.embed .hero h1{

    font-size:20px;

}

body.embed .hero p{

    display:none;

}

body.embed .chat-container{

    padding:
        18px
        18px
        105px;

}

body.embed .quick-actions{

    padding:
        10px
        14px;

    gap:8px;

}

body.embed .quick-btn{

    padding:
        10px
        14px;

    font-size:13px;

}

body.embed .chat-input{

    padding:
        12px
        16px
        18px;

}

/* ==========================================================
   TELAS MUITO ALTAS
========================================================== */

@media (min-height:900px){

    .chat-container{

        padding-bottom:150px;

    }

}

/* ==========================================================
   TELAS MUITO BAIXAS
========================================================== */

@media (max-height:700px){

    .hero{

        padding:
            10px;

    }

    .robot{

        width:38px;

        height:38px;

    }

    .hero p{

        display:none;

    }

    .quick-actions{

        display:none;

    }

}