body{

margin:0;
background:#0f172a;
font-family:system-ui;
color:white;
display:flex;
justify-content:center;
align-items:center;
height:100vh;

}

.app{

width:650px;
background:#1e293b;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
display:flex;
flex-direction:column;
overflow:hidden;

}

header{

background:#111827;
padding:15px;
display:flex;
justify-content:space-between;
align-items:center;

}

h1{

margin:0;
font-size:22px;

}

#status{

font-size:14px;
color:#9ca3af;

}

#chat{

flex:1;
padding:15px;
overflow-y:auto;
background:#020617;

}

.message{

margin-bottom:10px;
max-width:70%;
padding:10px;
border-radius:10px;

}

.you{

background:#2563eb;
align-self:flex-end;

}

.stranger{

background:#374151;

}

.messageBox{

display:flex;
padding:10px;
background:#111827;

}

input{

flex:1;
padding:12px;
border:none;
border-radius:8px;
margin-right:10px;

}

button{

border:none;
padding:12px 16px;
border-radius:8px;
cursor:pointer;

}

#send{

background:#22c55e;
color:white;

}

.controls{

display:flex;
justify-content:center;
gap:10px;
padding:12px;
background:#020617;

}

#start{

background:#3b82f6;
color:white;

}

#next{

background:#ef4444;
color:white;

}

@media (max-width: 700px){

body{

padding:10px;
align-items:flex-start;

}

.app{

width:100%;
height:100vh;
border-radius:0;

}

#chat{

height:60vh;

}

.messageBox{

flex-direction:column;
gap:10px;

}

input{

width:100%;
margin:0;

}

button{

width:100%;

}

.controls{

flex-direction:column;

}

}