*{
box-sizing:border-box;
}

html, body{
margin:0;
padding:0;
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;
}

body{
background:linear-gradient(135deg,#ff4d6d,#ff758f,#ff9aa2,#ffc2d1);
background-size:400% 400%;
animation:romanticBg 12s ease infinite;
color:white;
display:flex;
justify-content:center;
align-items:center;
}

@keyframes romanticBg{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

body::before{
content:"💖 💕 💗 💞 💘";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
font-size:40px;
opacity:0.05;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
align-content:space-around;
pointer-events:none;
}

.app{
width:420px;
height:650px;
max-width:100vw;
max-height:100dvh;
background:rgba(2,6,23,0.85);
backdrop-filter:blur(14px);
border-radius:20px;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,0.6);
position:relative;
}

header{
text-align:center;
padding:15px;
border-bottom:1px solid rgba(255,255,255,0.1);
flex-shrink:0;
}

#online{
font-size:13px;
opacity:0.8;
}

.setup{
padding:25px;
display:flex;
flex-direction:column;
gap:12px;
overflow:auto;
}

.setup select{
padding:10px;
border-radius:8px;
border:none;
background:#1e293b;
color:white;
}

.setup button{
padding:12px;
border:none;
border-radius:8px;
background:#ff4d6d;
color:white;
font-weight:bold;
cursor:pointer;
transition:0.2s;
box-shadow:0 0 12px rgba(255,77,109,0.6);
}

.setup button:hover{
background:#ff1f4b;
box-shadow:0 0 20px rgba(255,77,109,1);
}

.chat{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
height:100%;
}

#messages{
flex:1;
min-height:0;
overflow-y:auto;
padding:15px;
padding-bottom:120px;
display:flex;
flex-direction:column;
gap:10px;
-webkit-overflow-scrolling:touch;
}

.me, .stranger{
animation:msgPop 0.25s ease;
}

@keyframes msgPop{
from{
transform:scale(0.8);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

.me{
align-self:flex-end;
background:#ff4d6d;
color:white;
padding:10px 14px;
border-radius:14px;
max-width:78%;
word-wrap:break-word;
cursor:pointer;
}

.stranger{
align-self:flex-start;
background:#1e293b;
padding:10px 14px;
border-radius:14px;
max-width:78%;
word-wrap:break-word;
cursor:pointer;
}

.system{
text-align:center;
font-size:12px;
color:#ffd1dc;
}

.timestamp{
font-size:10px;
opacity:0.6;
margin-top:3px;
}

.reply-preview{
background:rgba(255,255,255,0.15);
border-left:3px solid #ff4d6d;
padding:6px 8px;
margin-bottom:6px;
font-size:12px;
border-radius:6px;
color:white;
}

#typing{
font-size:12px;
color:#ffd1dc;
padding:0 10px 6px 10px;
min-height:16px;
flex-shrink:0;
}

#replyBox{
display:none;
align-items:center;
gap:10px;
padding:10px;
background:#111827;
border-left:4px solid #ff4d6d;
flex-shrink:0;
}

#replyText{
flex:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#cancelReplyBtn{
background:#ff4d6d;
}

.input-bar{
display:flex;
flex-wrap:wrap;
gap:6px;
padding:10px;
border-top:1px solid rgba(255,255,255,0.1);
background:#020617;
flex-shrink:0;
position:relative;
z-index:2;
}

#msg{
flex:1 1 100%;
min-width:0;
padding:12px;
border-radius:10px;
border:none;
background:#1e293b;
color:white;
font-size:16px;
}

#imgInput{
width:100%;
color:white;
font-size:13px;
}

button{
padding:10px 12px;
border:none;
border-radius:8px;
cursor:pointer;
background:#ff4d6d;
color:white;
transition:0.2s;
box-shadow:0 0 10px rgba(255,77,109,0.5);
}

button:hover{
background:#ff1f4b;
box-shadow:0 0 18px rgba(255,77,109,0.9);
}

.next{
background:#ef4444;
}

.next:hover{
background:#dc2626;
}

img{
max-width:180px;
width:100%;
border-radius:10px;
margin-top:4px;
display:block;
}

.protected-image{
-webkit-user-drag:none;
user-select:none;
pointer-events:auto;
}

.image-timer{
font-size:11px;
opacity:0.8;
margin-top:4px;
}

.expired-image{
opacity:0.8;
filter:grayscale(0.3);
}

#messages::-webkit-scrollbar{
width:6px;
}

#messages::-webkit-scrollbar-thumb{
background:#ff758f;
border-radius:10px;
}

@media (max-width: 768px){
body{
align-items:stretch;
justify-content:stretch;
}

.app{
width:100vw;
height:100dvh;
max-width:100vw;
max-height:100dvh;
border-radius:0;
}

header{
padding:18px 12px;
}

#messages{
padding:12px;
padding-bottom:120px;
}

.me, .stranger{
max-width:85%;
}

.input-bar{
padding:8px;
gap:8px;
}

button{
flex:1 1 auto;
min-height:42px;
}

#imgInput{
font-size:12px;
}
}