@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #121212; /* Dark background for the overall app */
color: #eee;
margin: 0; padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden; /* Prevent body scroll */
}
/* --- Login Section Styling --- */
#login {
background: linear-gradient(135deg, #2a2a2a, #1a1a1a); /* Subtle dark gradient */
width: 90vw;
max-width: 320px; /* Reduced from 380px */
border-radius: 15px; /* More rounded */
padding: 30px; /* More padding */
border: 1px solid #ff69b4; /* Light pink border */
box-shadow: 0 8px 30px rgba(255, 105, 180, 0.4); /* Pink glow shadow */
animation: fadeIn 0.7s ease-out forwards; /* Slightly slower fade-in */
display: flex; /* Flexbox for better alignment */
flex-direction: column;
align-items: center; /* Center content */
}
#login h2 {
font-size: 1.8em;
font-weight: 700;
color: #f0f0f0; /* Lighter color for contrast */
margin-bottom: 25px; /* More space below title */
text-align: center;
letter-spacing: 0.5px; /* Slight letter spacing for style */
}
#login input {
width: 100%;
padding: 12px 0; /* Adjust padding */
margin: 10px 0;
background: transparent; /* Transparent background */
border: none;
border-bottom: 2px solid #555; /* Clean bottom border */
border-radius: 0; /* No border-radius */
color: #eee;
font-size: 17px;
transition: border-bottom-color 0.3s ease, box-shadow 0.3s ease;
}
#login input::placeholder {
color: #aaa; /* Lighter placeholder color */
}
#login input:focus {
outline: none;
border-bottom-color: #ff69b4; /* Pink border on focus */
box-shadow: 0 1px 0 0 #ff69b4; /* Subtle shadow for depth on focus */
}
#login button {
width: 100%;
background: linear-gradient(45deg, #ff69b4, #e652a2); /* Gradient button */
border: none;
padding: 16px; /* Larger padding */
border-radius: 30px; /* Pill-shaped button */
font-weight: 700; /* Bolder text */
color: #fff;
font-size: 18px; /* Larger font size */
cursor: pointer;
margin-top: 30px; /* More space above button */
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4); /* Pink glow shadow */
letter-spacing: 0.5px;
}
#login button:hover {
background: linear-gradient(45deg, #e652a2, #ff69b4); /* Reverse gradient on hover */
transform: translateY(-2px) scale(1.02); /* Lift and slightly enlarge */
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.6);
}
#login button:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(255, 105, 180, 0.3);
}
#loginError {
color: #ff5255;
text-align: center;
margin-top: 20px; /* More margin */
font-size: 16px;
font-weight: 500;
}
/* --- End Login Section Styling --- */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#chat {
display: none;
flex-direction: column;
width: 100vw; /* Occupy full width on mobile */
height: 100vh; /* Occupy full height on mobile */
max-width: 450px; /* Reduced from 550px */
max-height: 750px; /* Height remains same */
background-color: #1a1a1a; /* Darker background for the chat window itself */
/* --- THESE STYLES ARE NOW APPLIED GLOBALLY FOR ALL SCREEN SIZES --- */
border-radius: 12px;
border: 1px solid #ff69b4; /* Light pink border */
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4); /* Pink glow shadow */
/* --- END GLOBAL STYLES --- */
overflow: hidden; /* Ensure content stays within */
position: relative; /* For emoji picker positioning */
}
/* The media query below is no longer strictly necessary for the border/shadow,
but you can use it if you want different styles *only* for larger screens.
For this solution, we assume you want the border/shadow always. */
/* @media (min-width: 600px) {
#chat {
// Any specific styles for screens >= 600px can go here, if different from above.
}
} */
.chat-header {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 20px;
background-color: #202c33;
border-bottom: 1px solid #333;
}
.glowing-title {
font-size: 1.5em;
font-weight: 700;
color: #ff69b4; /* Pinkish glow for love theme */
text-shadow: 0 0 5px #ff69b4, 0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 40px #ff69b4;
animation: glow 1.8s ease-in-out infinite alternate;
margin: 0;
flex-grow: 1;
text-align: center;
}
@keyframes glow {
from {
text-shadow: 0 0 5px #ff69b4, 0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 40px #ff69b4;
}
to {
text-shadow: 0 0 8px #ff69b4, 0 0 15px #ff69b4, 0 0 30px #ff69b4, 0 0 60px #ff69b4;
}
}
#messages {
flex: 1;
overflow-y: auto;
padding: 15px;
background:
radial-gradient(circle at 20% 80%, rgba(255, 105, 180, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 160, 180, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 192, 203, 0.08) 0%, transparent 60%); /* Multiple subtle radial gradients */
background-size: 300% 300%; /* Large background size for movement */
background-position: 0% 0%; /* Initial position */
animation: moveLoveBackground 25s ease-in-out infinite alternate; /* Slow, gentle animation */
border-radius: 0;
margin-bottom: 0;
position: relative;
overflow-x: hidden;
}
@keyframes moveLoveBackground {
0% { background-position: 0% 0%; }
25% { background-position: 50% 100%; }
50% { background-position: 100% 0%; }
75% { background-position: 50% 0%; }
100% { background-position: 0% 100%; }
}
.msg {
margin-bottom: 8px;
padding: 10px 12px;
border-radius: 10px;
max-width: 80%;
word-wrap: break-word;
font-size: 15px;
line-height: 1.4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.me {
background: #075e54; /* WhatsApp sent message color (dark green) */
color: #fff; /* White text for sent messages */
margin-left: auto;
border-bottom-right-radius: 3px;
}
.other {
background: #262d31; /* WhatsApp received message color (dark gray/blue) */
color: #fff; /* White text for received messages */
margin-right: auto;
border-bottom-left-radius: 3px;
}
#inputArea {
display: flex;
gap: 8px;
align-items: flex-end;
padding: 10px 15px;
background-color: #202c33;
border-top: 1px solid #333;
position: relative;
}
#msgInput {
flex: 1;
padding: 12px 15px;
border-radius: 25px;
background: #2b2b2b;
color: #eee;
font-size: 16px;
box-shadow: none;
min-height: 48px;
resize: none;
overflow-y: auto;
}
#msgInput:focus {
box-shadow: 0 0 0 2px #ff69b4;
}
#sendBtn { /* Only sendBtn, emoji-button removed */
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
margin-top: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
font-size: 0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
cursor: pointer;
background: #ff69b4; /* Pink */
color: #fff;
transition: background 0.2s ease-in-out;
}
#sendBtn:hover {
background: #e652a2; /* Darker pink on hover */
}
#sendBtn::before {
content: '➤';
font-size: 20px;
color: #fff;
line-height: 1;
transform: rotate(45deg) translateY(-2px) translateX(2px);
}
/* Emoji Picker Styles removed */
/* #emojiPickerContainer and .emoji-item styles are no longer needed */