/* ==========================================================
   CocoaFlow IA
   COMPONENTES
========================================================== */

/* ==========================================================
   BOTÕES DE SUGESTÃO
========================================================== */

.suggestion{

    appearance:none;

    border:none;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:12px 18px;

    cursor:pointer;

    font-size:14px;

    font-weight:500;

    color:#374151;

    transition:.20s;

    box-shadow:
        0 2px 6px rgba(0,0,0,.04);

}

.suggestion:hover{

    background:#2E7D32;

    color:#FFFFFF;

    border-color:#2E7D32;

    transform:translateY(-2px);

}

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

#message{

    flex:1;

    resize:none;

    border:none;

    outline:none;

    background:#FFFFFF;

    border:1px solid #D1D5DB;

    border-radius:18px;

    padding:15px 18px;

    min-height:56px;

    max-height:180px;

    overflow-y:auto;

    font-size:15px;

    line-height:1.5;

    transition:.20s;

}

#message:focus{

    border-color:#2E7D32;

    box-shadow:
        0 0 0 4px rgba(46,125,50,.12);

}

/* ==========================================================
   BOTÃO ENVIAR
========================================================== */

#sendButton{

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:#2E7D32;

    color:#FFFFFF;

    cursor:pointer;

    font-size:22px;

    flex-shrink:0;

    transition:.20s;

    display:flex;

    align-items:center;

    justify-content:center;

}

#sendButton:hover{

    background:#256628;

    transform:scale(1.05);

}

#sendButton:active{

    transform:scale(.96);

}

#sendButton:disabled{

    background:#9CA3AF;

    cursor:not-allowed;

}

/* ==========================================================
   AVATAR
========================================================== */

.avatar{

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

}

.avatar img{

    width:26px;

    height:26px;

    object-fit:contain;

}

/* ==========================================================
   LOADING
========================================================== */

.typing{

    display:flex;

    align-items:center;

    gap:6px;

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#2E7D32;

    animation:typing 1s infinite;

}

.typing span:nth-child(2){

    animation-delay:.15s;

}

.typing span:nth-child(3){

    animation-delay:.30s;

}

@keyframes typing{

    0%{

        opacity:.25;

        transform:translateY(0);

    }

    50%{

        opacity:1;

        transform:translateY(-4px);

    }

    100%{

        opacity:.25;

        transform:translateY(0);

    }

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:#2E7D32;

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

/* ==========================================================
   TABELAS
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:14px;

}

th{

    background:#F3F4F6;

    padding:12px;

    text-align:left;

    font-weight:600;

}

td{

    padding:12px;

    border-top:1px solid #E5E7EB;

}

/* ==========================================================
   CÓDIGO
========================================================== */

pre{

    background:#111827;

    color:#FFFFFF;

    padding:16px;

    border-radius:12px;

    overflow:auto;

    margin-top:14px;

}

code{

    font-family:
        Consolas,
        monospace;

}