/* ==========================================================
   CocoaFlow IA
   LAYOUT
   ========================================================== */

/* ---------- RESET BÁSICO ---------- */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:#F5F7FA;

}

/* ---------- APP ---------- */

.app{

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:#F5F7FA;

}

/* ==========================================================
   HERO
   ========================================================== */

.hero{

    flex-shrink:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:

        28px
        24px
        20px;

    transition:.25s;

}

.hero-logo{

    width:78px;
    height:78px;

    object-fit:contain;

    margin-bottom:18px;

}

.hero h1{

    font-size:30px;
    font-weight:700;

    color:#1F2937;

    margin-bottom:8px;

}

.hero p{

    font-size:15px;

    color:#6B7280;

    margin-bottom:22px;

}

/* ==========================================================
   SUGESTÕES
   ========================================================== */

.hero-suggestions{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    max-width:900px;

}

/* ==========================================================
   CONVERSA
   ========================================================== */

.conversation{

    flex:1;

    overflow-y:auto;
    overflow-x:hidden;

    padding:

        24px;

    scroll-behavior:smooth;

}

/* ==========================================================
   FOOTER
   ========================================================== */

.chat-footer{

    flex-shrink:0;

    width:100%;

    padding:

        16px
        22px
        22px;

    background:#FFFFFF;

    border-top:

        1px solid #E5E7EB;

}

/* ==========================================================
   INPUT
   ========================================================== */

.chat-input{

    width:100%;

    max-width:980px;

    margin:auto;

    display:flex;

    align-items:flex-end;

    gap:12px;

}

/* ==========================================================
   SCROLL
   ========================================================== */

.conversation::-webkit-scrollbar{

    width:8px;

}

.conversation::-webkit-scrollbar-thumb{

    background:#D1D5DB;

    border-radius:20px;

}

/* ==========================================================
   QUANDO A CONVERSA COMEÇA
   ========================================================== */

.app.chat-started .hero{

    display:none;

}

.app.chat-started .conversation{

    padding-top:28px;

}