:root {
    --primary: #ff4d94;
    --primary-light: #ff85b3;
    --secondary: #c77dff;
    --accent: #ff6b6b;
    --dark: #1a1a2e;
    --darker: #0d0d1a;
    --light: #f8f9fa;
    --user-bubble: #4d79ff;
    --bot-bubble: #ff66a3;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(-45deg, #0d0d1a, #1a1a2e, #2a1a40, #401a30);
    background-size: 400% 400%;
    animation: gradientAnimation 20s ease infinite;
    color: var(--light);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: 
        radial-gradient(circle at 10% 20%, rgba(255, 109, 163, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(199, 125, 255, 0.1) 0%, transparent 25%);
    z-index: 0;
}
.floating-hearts {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.heart {
    position: absolute;
    color: rgba(255, 77, 148, 0.3);
    font-size: 20px;
    animation: float 15s infinite linear;
}
@keyframes float {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* --- Fullscreen Containers & Inputs --- */
.fullscreen-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    padding: 20px;
    z-index: 100;
    background: transparent;
}
.fullscreen-container.active {
    display: flex;
}

/* --- NEW: Entry Animations for First Screen --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fullscreen-container.active > * {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

/* Staggered animation delays */
.fullscreen-container.active h1 { animation-delay: 0.2s; }
.fullscreen-container.active p { animation-delay: 0.4s; }
.fullscreen-container.active .input-group { animation-delay: 0.6s; }
.fullscreen-container.active .navigation-buttons { animation-delay: 0.8s; }

@keyframes glow {
    0%, 100% { text-shadow: 0 0 15px var(--primary), 0 0 5px var(--primary-light); }
    50% { text-shadow: 0 0 25px var(--primary), 0 0 10px var(--primary-light); }
}

.fullscreen-container h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 4rem; /* Increased size */
    margin-bottom: 10px;
    color: var(--primary-light);
    animation: glow 3s ease-in-out infinite; /* Added glow animation */
}
.fullscreen-container h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--primary-light);
}

.fullscreen-container p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 500px;
}
.input-group {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased gap */
    width: 100%;
    max-width: 450px;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.2);
    padding: 35px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 25px rgba(0,0,0,0.2), 0 0 15px rgba(255, 77, 148, 0.1); /* Added subtle glow */
}

/* NEW: Input Wrapper for Icons */
.input-wrapper {
    position: relative;
    width: 100%;
}
.input-wrapper i {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-light);
    opacity: 0.5;
    transition: all 0.3s;
}

.input-field, .textarea-field {
    padding: 16px 25px 16px 60px; /* Adjusted padding for icon */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    background: rgba(26, 26, 46, 0.7);
    color: white;
    font-size: 16px;
    outline: none;
    width: 100%;
    text-align: left; /* Changed alignment for better look with icon */
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}
.textarea-field {
    border-radius: 20px;
    height: 120px;
    resize: none;
    padding: 20px 25px 20px 60px; /* Adjusted padding */
}
.input-wrapper input:focus + i, 
.input-wrapper textarea:focus + i {
    opacity: 1;
    color: var(--primary);
}
.input-field:focus, .textarea-field:focus {
    box-shadow: 0 0 0 3px var(--primary-light);
    background: rgba(26, 26, 46, 0.9);
}
.input-field.invalid, .textarea-field.invalid {
    border-color: var(--accent);
}
.navigation-buttons { display: flex; gap: 15px; }
.btn { padding: 15px 40px; font-size: 18px; color: white; border: none; border-radius: 30px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px; }

/* NEW: Pulsing button animation */
@keyframes pulseButton {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(199, 125, 255, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 6px 25px rgba(199, 125, 255, 0.6); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(199, 125, 255, 0.3); }
}
.btn-primary { 
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    animation: pulseButton 2s infinite;
}
.btn-primary:hover { 
    transform: translateY(-3px) scale(1.05); 
    box-shadow: 0 6px 20px rgba(199, 125, 255, 0.5); 
    animation-play-state: paused; /* Pause animation on hover */
}
.btn-secondary { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }

.persona-options { display: flex; gap: 25px; flex-wrap: wrap; justify-content: center; }
.persona-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 30px; width: 280px; cursor: pointer; transition: all 0.3s ease; }
.persona-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); border-color: var(--primary-light); }
.persona-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 15px; }
.persona-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.persona-card p { font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0; }

.chat-container { display: none; flex-direction: column; max-width: 900px; width: 100%; height: 95vh; max-height: 1000px; background: rgba(26, 26, 46, 0.7); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border-radius: 15px; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); z-index: 50; }
.chat-container.active { display: flex; }
.chat-header{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;padding:15px 25px;display:flex;align-items:center;box-shadow:0 4px 15px rgba(0,0,0,.2);z-index:10;position:relative}
.profile-pic{width:45px;height:45px;border-radius:50%;background:linear-gradient(45deg,#ff85b3,#c77dff);display:flex;align-items:center;justify-content:center;margin-right:15px;border:2px solid #fff;overflow:hidden}.profile-pic i{font-size:24px;color:#fff}.header-content{flex:1}.chat-header h1{font-family:'Dancing Script',cursive;font-size:28px;font-weight:700;margin:0;display:flex;align-items:center}.status{display:flex;align-items:center;font-size:13px;margin-top:3px}.status-dot{width:8px;height:8px;background-color:#4ade80;border-radius:50%;margin-right:6px;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}100%{opacity:.7}}
.logout-button { background: none; border: none; color: white; font-size: 22px; cursor: pointer; margin-left: auto; padding: 5px 10px; opacity: 0.7; transition: opacity 0.3s, transform 0.3s; }
.logout-button:hover { opacity: 1; transform: scale(1.1); }
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px;scroll-behavior:smooth}.message{max-width:80%;padding:15px 20px;border-radius:25px;position:relative;line-height:1.5;box-shadow:0 4px 10px rgba(0,0,0,.1);animation:messageAppear .3s ease-out;word-wrap:break-word;font-size:16px}@keyframes messageAppear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{background:linear-gradient(135deg,var(--user-bubble),#3366ff);color:#fff;align-self:flex-end;border-bottom-right-radius:8px}.message.bot{background:linear-gradient(135deg,var(--bot-bubble),#ff3385);color:#fff;align-self:flex-start;border-bottom-left-radius:8px}.message-time{display:block;font-size:11px;opacity:.8;margin-top:5px;text-align:right}.message.typing{display:flex;align-items:center;padding:15px 20px}.typing-indicator{display:flex;align-items:center;gap:6px}.typing-dot{width:10px;height:10px;background-color:#fff;border-radius:50%;opacity:.6}.typing-dot:nth-child(1){animation:typing 1.2s infinite}.typing-dot:nth-child(2){animation:typing 1.2s infinite .4s}.typing-dot:nth-child(3){animation:typing 1.2s infinite .8s}@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-5px);opacity:1}}.chat-input-area{display:flex;padding:15px;background:rgba(40,40,70,.8);border-top:1px solid rgba(255,255,255,.1)}#userInput{flex:1;padding:16px 20px;border:none;border-radius:30px;background:rgba(255,255,255,.1);color:#fff;font-size:16px;outline:0;transition:all .3s}#userInput:focus{background:rgba(255,255,255,.15);box-shadow:0 0 0 2px var(--primary-light)}#userInput::placeholder{color:rgba(255,255,255,.5)}#sendButton{width:55px;height:55px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;border-radius:50%;cursor:pointer;margin-left:15px;display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 4px 15px rgba(199,125,255,.3)}#sendButton:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(199,125,255,.5)}#sendButton:disabled{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:10px}.chat-messages::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary),var(--secondary));border-radius:10px}.welcome-banner{text-align:center;padding:15px;background:linear-gradient(90deg,rgba(255,77,148,.3),rgba(199,125,255,.3));font-size:14px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:768px){.chat-container{border-radius:0;height:100vh}.chat-header h1{font-size:22px}.message{max-width:90%}.persona-options{flex-direction:column;align-items:center}}