* {
  box-sizing: border-box;
  }

body {
margin: 0;
font-family: Arial, sans-serif;
background: #0f1117;
color: white;
}

.app {
width: min(900px, 100%);
height: 100vh;
margin: auto;
display: flex;
flex-direction: column;
}

header {
padding: 20px;
border-bottom: 1px solid #2a2d36;
}

header h1 {
margin: 0;
}

header p {
margin: 5px 0 0;
color: #9ca3af;
}

#chat {
flex: 1;
overflow-y: auto;
padding: 25px;
}

.message {
max-width: 75%;
margin-bottom: 20px;
padding: 14px 18px;
border-radius: 14px;
line-height: 1.5;
}

.user {
margin-left: auto;
background: #2563eb;
}

.ai {
margin-right: auto;
background: #1f2937;
}

#chat-form {
display: flex;
gap: 10px;
padding: 20px;
border-top: 1px solid #2a2d36;
}

#message {
flex: 1;
padding: 15px;
border: 1px solid #374151;
border-radius: 10px;
background: #181b23;
color: white;
outline: none;
}

button {
padding: 0 22px;
border: 0;
border-radius: 10px;
background: #2563eb;
color: white;
font-weight: bold;
cursor: pointer;
}

button:hover {
background: #1d4ed8;
}