*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Roboto,sans-serif;
}

body{
background:#eef2ff;
padding:15px;
color:#111827;
}

.app{
max-width:1000px;
margin:auto;
}

.topbar{
background:linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

padding:25px;
border-radius:28px;
color:white;
margin-bottom:20px;

box-shadow:
0 10px 30px rgba(37,99,235,0.25);
}

.card{
background:white;

padding:20px;

border-radius:28px;

margin-bottom:20px;

box-shadow:
0 4px 20px rgba(0,0,0,0.06);
}

.peer-box{
background:#eff6ff;

padding:15px;

border-radius:18px;

margin-top:10px;

word-break:break-all;

font-size:14px;
}

input{
width:100%;

padding:14px;

border-radius:16px;

border:1px solid #dbeafe;

margin-top:10px;

font-size:15px;
}

button{
background:#2563eb;

color:white;

border:none;

padding:14px 18px;

border-radius:18px;

cursor:pointer;

font-weight:500;

transition:0.2s;
}

button:hover{
transform:scale(1.02);
}

.btns{
display:flex;
gap:10px;
margin-top:12px;
flex-wrap:wrap;
}

#messages{
height:300px;

overflow-y:auto;

margin-top:15px;

border-radius:20px;

padding:12px;

background:#f8fafc;
}

.message{
background:#dbeafe;

padding:12px;

border-radius:16px;

margin-bottom:10px;

word-wrap:break-word;
}

.self{
background:#bfdbfe;
}

.chat-box{
display:flex;
gap:10px;
margin-top:15px;
}

.chat-box input{
flex:1;
}

#dropzone{
margin-top:15px;

padding:50px;

border:3px dashed #93c5fd;

border-radius:24px;

text-align:center;

background:#eff6ff;

font-size:18px;

color:#2563eb;
}

.progress-wrap{
margin-top:15px;
}

.progress{
width:100%;
height:14px;
background:#dbeafe;
border-radius:20px;
overflow:hidden;
margin-top:6px;
}

.progress-bar{
height:100%;
width:0%;
background:#2563eb;
transition:0.2s;
}

.download-item{
background:#f8fafc;

padding:16px;

border-radius:18px;

margin-top:15px;
}

.download-item img,
.download-item video{
max-width:100%;
margin-top:10px;
border-radius:18px;
}

a{
color:#2563eb;
text-decoration:none;
font-weight:500;
}

#status{
font-weight:700;
font-size:18px;
}

#reader{
margin-top:15px;
overflow:hidden;
border-radius:20px;
}

@media(max-width:700px){

body{
padding:10px;
}

.card{
padding:15px;
border-radius:22px;
}

.topbar{
border-radius:22px;
padding:20px;
}

.chat-box{
flex-direction:column;
}

button{
width:100%;
}

.btns{
flex-direction:column;
}

#dropzone{
padding:30px;
font-size:16px;
}

}