* {

    box-sizing: border-box;

}



body {

    margin: 0;

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

    background: #f4f6f8;

    color: #1f2937;

}



.app {

    max-width: 1000px;

    height: 100vh;

    margin: auto;

    display: flex;

    flex-direction: column;

    background: white;

}



.header {

    padding: 20px 24px;

    border-bottom: 1px solid #e5e7eb;

    background: white;

}



.header h1 {

    margin: 0 0 5px;

    font-size: 22px;

}



.status {

    font-size: 13px;

    color: #16a34a;

}



.dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    background: #16a34a;

    border-radius: 50%;

    margin-right: 5px;

}



.chat {

    flex: 1;

    overflow-y: auto;

    padding: 24px;

}



.message {

    display: flex;

    margin-bottom: 16px;

}



.message.user {

    justify-content: flex-end;

}



.bubble {

    max-width: 75%;

    padding: 12px 16px;

    border-radius: 14px;

    line-height: 1.5;

    white-space: pre-wrap;

}



.message.assistant .bubble {

    background: #f1f5f9;

}



.message.user .bubble {

    background: #2563eb;

    color: white;

}



.input-area {

    display: flex;

    gap: 10px;

    padding: 16px;

    border-top: 1px solid #e5e7eb;

}



.input-area input {

    flex: 1;

    padding: 13px 15px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    font-size: 15px;

    outline: none;

}



.input-area input:focus {

    border-color: #2563eb;

}



.input-area button {

    border: 0;

    background: #2563eb;

    color: white;

    padding: 0 22px;

    border-radius: 10px;

    cursor: pointer;

    font-size: 15px;

}



.input-area button:hover {

    background: #1d4ed8;

}



.input-area button:disabled {

    opacity: .6;

    cursor: not-allowed;

}



@media (max-width: 600px) {

    .bubble {

        max-width: 90%;

    }



    .header {

        padding: 16px;

    }



    .chat {

        padding: 16px;

    }

}