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

body{

    background:#0f172a;

    color:#fff;

    font-family:Arial, Helvetica, sans-serif;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;
}

.container{

    width:95%;

    max-width:1000px;

    height:95vh;

    background:#111827;

    border-radius:20px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    border:1px solid #1e293b;
}

.topo{

    padding:20px;

    background:#020617;

    border-bottom:1px solid #1e293b;
}

.topo h1{
    font-size:24px;
}

.topo p{

    margin-top:5px;

    color:#94a3b8;
}

.chat-box{

    flex:1;

    overflow-y:auto;

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

.message{

    max-width:85%;

    padding:15px;

    border-radius:15px;

    line-height:1.5;

    white-space:pre-wrap;

    word-break:break-word;
}

.user{

    align-self:flex-end;

    background:#2563eb;
}

.ai{

    align-self:flex-start;

    background:#1e293b;
}

.loading{

    display:none;

    padding:10px 20px;

    color:#94a3b8;
}

.input-area{

    display:flex;

    gap:10px;

    padding:20px;

    background:#020617;

    border-top:1px solid #1e293b;
}

textarea{

    flex:1;

    resize:none;

    height:70px;

    border:none;

    border-radius:10px;

    padding:15px;

    background:#1e293b;

    color:#fff;

    font-size:16px;
}

button{

    width:140px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;
}

button:hover{
    opacity:0.9;
}

.code{

    background:#000;

    padding:15px;

    margin-top:10px;

    border-radius:10px;

    overflow:auto;

    color:#22c55e;
}