body { 
    font-family: 'Segoe UI', sans-serif; 
    background-color: #acacac; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh;
     margin: 0; 
     color: #333;
}

.chat-container {
    width: 95%; 
    max-width: 60rem;
    background: #fff; 
    height: 95vh;
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
}

header {
    background: #3d3d3d; 
    color: white; 
    padding: 15px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

#chat-box {
    flex: 1; padding: 10px; 
    overflow-y: auto;
    background: #dfe6e9; 
    display: flex; 
    flex-direction: column; 
    gap: 15px;
}

.message-container {
    display: flex; 
    align-items: flex-end; 
    gap: 10px; 
    max-width: 85%;
}

.my-container { 
    align-self: flex-end; 
    flex-direction: row-reverse; 
}
.other-container { 
    align-self: flex-start; 
}

.avatar {
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    background: #fff; 
    border: 2px solid #fff; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.message-bubble {
    padding: 12px 16px; 
    border-radius: 12px; 
    font-size: 14px;
    line-height: 1.5; 
    word-wrap: break-word; 
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.my-container .message-bubble { 
    background: #67a573; 
    color: white; 
    border-bottom-right-radius: 0;
}

.other-container .message-bubble { 
    background: #fff; 
    color: #2d3436; 
    border-bottom-left-radius: 0;
}
.bot-message { 
    border-left: 4px solid #0984e3; 
}

.username { 
    font-size: 11px; 
    font-weight: bold; 
    margin-bottom: 4px; 
    display: block; 
    opacity: 0.7; 
}

.message-bubble p { 
    margin: 0 0 5px 0; 
}
.message-bubble ul, .message-bubble ol { 
    margin: 5px 0; 
    padding-left: 20px; }
.message-bubble code { 
    font-family: 'Consolas', monospace; 
    background: rgba(0,0,0,0.1); 
    padding: 2px 4px; 
    border-radius: 4px; 
}
.message-bubble pre { 
    margin: 10px 0; 
    border-radius: 6px; 
    overflow: hidden; 
}
.message-bubble pre code { 
    background: #2d2d2d; 
    color: #fff; 
    padding: 10px; 
    display: block; 
    overflow-x: auto; 
}

#input-area { 
    padding: 15px; 
    background: #fff; 
    display: flex; 
    gap: 8px; 
    border-top: 1px solid #eee; 
}

input { 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid #dfe6e9; 
    outline: none; 
}

#message-input { 
    flex: 1; 
}

button { 
    padding: 0 20px; 
    border: none; 
    background: #67a573; 
    color: white; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold; 
    transition: 0.2s;
}

button:hover { 
    background: #67a573; 
}

#clear-btn { 
    background: none; 
    color: #636e72; 
    font-size: 11px; 
    padding: 5px; 
    align-self: center; 
    cursor: pointer; 
    border: none; 
    margin-bottom: 5px;
}