@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Gradient Animation for Try Free Buttons */
@keyframes gradientShift {
  0% {
    background: linear-gradient(90deg, #059669, #128C7E, #25D366);
    background-size: 200% 200%;
    background-position: 0% 50%;
  }
  50% {
    background: linear-gradient(90deg, #128C7E, #25D366, #059669);
    background-size: 200% 200%;
    background-position: 100% 50%;
  }
  100% {
    background: linear-gradient(90deg, #25D366, #059669, #128C7E);
    background-size: 200% 200%;
    background-position: 0% 50%;
  }
}

@keyframes gradientPulse {
  0%, 100% {
    background: linear-gradient(135deg, #059669 0%, #25D366 100%);
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
  }
  50% {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  }
}

.gradient-animate-btn {
  animation: gradientPulse 6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  background-size: 200% 200%;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.gradient-animate-btn:hover {
  animation: gradientShift 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.5) !important;
}

.gradient-animate-btn:active {
  transform: translateY(0);
}

body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.iphone-frame {
position: relative;
width: 300px;
height: 600px;
margin: 0 auto;
background: #000;
border-radius: 40px;
padding: 15px;
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .iphone-frame {
        width: 300px;
        height: 600px;
        border-radius: 40px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .iphone-frame {
        width: 280px;
        height: 560px;
        border-radius: 38px;
        padding: 14px;
    }
}
.iphone-screen {
width: 100%;
height: 100%;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
}
.status-bar {
background: #000;
color: white;
padding: 8px 20px 8px 20px;
font-size: 14px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.status-right {
display: flex;
align-items: center;
gap: 4px;
}
.chat-background {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" opacity="0.05"><g stroke="%23000" stroke-width="0.5" fill="none"><circle cx="20" cy="20" r="2"/><rect x="30" y="15" width="8" height="8"/><path d="M45 25L55 15M55 25L45 15"/><circle cx="70" cy="20" r="3"/><rect x="80" y="15" width="6" height="10"/><path d="M10 40L20 30M20 40L10 30"/><circle cx="35" cy="35" r="2.5"/><rect x="50" y="30" width="7" height="7"/><circle cx="75" cy="35" r="2"/><path d="M5 60L15 50M15 60L5 50"/><rect x="25" y="45" width="9" height="9"/><circle cx="45" cy="55" r="3"/><rect x="60" y="45" width="8" height="12"/><path d="M80 60L90 50M90 60L80 50"/><circle cx="15" cy="75" r="2"/><rect x="30" y="70" width="6" height="8"/><path d="M45 80L55 70M55 80L45 70"/><circle cx="70" cy="75" r="2.5"/><rect x="85" y="70" width="7" height="9"/></g></svg>');
background-size: 80px 80px;
background-repeat: repeat;
}
.quiz-question {
background: #e5e5ea;
padding: 12px 15px;
border-radius: 18px;
border-bottom-left-radius: 5px;
margin: 5px 15px 5px 15px;
max-width: 85%;
align-self: flex-start;
font-size: 14px;
line-height: 1.3;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
margin: 10px 0;
}
.quiz-option {
background: #25D366;
color: white;
padding: 8px 12px;
border-radius: 15px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #25D366;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.quiz-option:hover {
background: #20b454;
transform: scale(1.02);
}
.quiz-option.selected {
background: #fff;
color: #25D366;
border-color: #25D366;
}
.quiz-result {
background: #e5e5ea;
padding: 15px;
border-radius: 18px;
border-bottom-left-radius: 5px;
margin: 10px 15px;
max-width: 90%;
align-self: flex-start;
font-size: 14px;
}
.quiz-result .prediction-time {
font-size: 24px;
font-weight: bold;
color: #25D366;
text-align: center;
margin: 10px 0;
}
.whatsapp-result-btn {
background: #25D366;
color: white;
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
display: inline-block;
margin: 10px auto;
font-weight: 600;
text-align: center;
}
.interactive-message {
background: #e5e5ea;
color: #333;
padding: 10px 15px;
border-radius: 18px;
border-bottom-left-radius: 5px;
margin: 5px 15px;
max-width: 70%;
align-self: flex-start;
position: relative;
animation: fadeIn 0.5s ease-out;
}
.interactive-title {
font-weight: 600;
font-size: 16px;
margin-bottom: 8px;
}
.interactive-subtitle {
font-size: 13px;
color: #666;
margin-bottom: 12px;
line-height: 1.4;
}
.interactive-button {
background: linear-gradient(135deg, #25D366, #128C7E, #075e54);
background-size: 200% 200%;
border: none;
color: white;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
margin-top: 8px;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
animation: pulseGlow 2s ease-in-out infinite;
position: relative;
overflow: hidden;
}

@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
transform: scale(1.02);
}
}

.interactive-button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transform: rotate(45deg);
animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}

.interactive-button:hover {
background: linear-gradient(135deg, #128C7E, #075e54, #054a42);
background-size: 200% 200%;
animation: pulseGlow 1s ease-in-out infinite, gradientShift 2s ease infinite;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.7);
transform: scale(1.05);
}

.interactive-button:active,
.interactive-button.pressing {
transform: scale(0.95);
box-shadow: 0 2px 10px rgba(37, 211, 102, 0.5);
transition: transform 0.1s ease;
}
.chat-input-container {
width: 100%;
}
.quiz-modal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateY(100%);
width: 100%;
height: 100%;
background: white;
border-radius: 20px 20px 0 0;
z-index: 1000;
transition: transform 0.3s ease;
box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
display: none;
}
.quiz-modal.show {
display: block;
transform: translateY(0);
}
.quiz-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.quiz-modal-title {
font-size: 15px;
font-weight: 600;
color: #333;
}
.quiz-close-btn {
background: none;
border: none;
font-size: 24px;
color: #666;
cursor: pointer;
padding: 0;
line-height: 1;
}
.quiz-modal-content {
padding: 15px 20px;
height: calc(100% - 70px);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.quiz-screen {
display: none;
animation: slideIn 0.3s ease;
flex: 1;
overflow-y: auto;
}
.quiz-screen.active {
display: flex;
flex-direction: column;
}
.quiz-question-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
line-height: 1.3;
}
.quiz-progress {
font-size: 13px;
color: #666;
margin-bottom: 12px;
}
.quiz-option {
border: 2px solid #d1d5db;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
transition: all 0.2s ease;
width: 98%;
margin: 0 2px;
box-sizing: border-box;
background: #f9fafb;
color: #374151;
min-height: 35px;
font-size: 12px;
}
.quiz-option:hover {
border-color: #25D366;
background: #ecfdf5;
color: #065f46;
}
.quiz-option.selected {
border-color: #25D366;
background: #25D366;
color: white;
font-weight: 600;
}
.quiz-option-text {
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
.quiz-back-btn {
background: none;
border: none;
font-size: 24px;
color: #666;
cursor: pointer;
padding: 0;
line-height: 1;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.whatsapp-header {
background: #075e54;
color: white;
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.chat-bubble {
max-width: 70%;
padding: 10px 15px;
border-radius: 18px;
margin: 5px 15px;
position: relative;
animation: fadeIn 0.5s ease-out;
}
.received {
background: #e5e5ea;
align-self: flex-start;
border-bottom-left-radius: 5px;
}
.sent {
background: #dcf8c6;
align-self: flex-end;
border-bottom-right-radius: 5px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.typing-indicator {
display: flex;
padding: 10px 15px;
background: #e5e5ea;
border-radius: 18px;
width: fit-content;
margin: 5px 15px;
}
.typing-dot {
width: 8px;
height: 8px;
background: #666;
border-radius: 50%;
margin: 0 2px;
animation: typingAnimation 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingAnimation {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}

/* Dark Mode Overrides for WhatsApp Chat */
body.dark-mode .iphone-screen {
    background: #1f2937;
}

body.dark-mode .chat-background {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" opacity="0.05"><g stroke="%23fff" stroke-width="0.5" fill="none"><circle cx="20" cy="20" r="2"/><rect x="30" y="15" width="8" height="8"/><path d="M45 25L55 15M55 25L45 15"/><circle cx="70" cy="20" r="3"/><rect x="80" y="15" width="6" height="10"/><path d="M10 40L20 30M20 40L10 30"/><circle cx="35" cy="35" r="2.5"/><rect x="50" y="30" width="7" height="7"/><circle cx="75" cy="35" r="2"/><path d="M5 60L15 50M15 60L5 50"/><rect x="25" y="45" width="9" height="9"/><circle cx="45" cy="55" r="3"/><rect x="60" y="45" width="8" height="12"/><path d="M80 60L90 50M90 60L80 50"/><circle cx="15" cy="75" r="2"/><rect x="30" y="70" width="6" height="8"/><path d="M45 80L55 70M55 80L45 70"/><circle cx="70" cy="75" r="2.5"/><rect x="85" y="70" width="7" height="9"/></g></svg>');
}

body.dark-mode .chat-bubble.received {
    background: #374151;
    color: #f9fafb;
}

body.dark-mode .chat-bubble.sent {
    background: #065f46;
    color: #ffffff;
}

body.dark-mode .interactive-message {
    background: #374151;
    color: #f9fafb;
}

body.dark-mode .interactive-title {
    color: #ffffff;
}

body.dark-mode .interactive-subtitle {
    color: #d1d5db;
}

body.dark-mode .quiz-modal {
    background: #1f2937;
}

body.dark-mode .quiz-modal-header {
    border-bottom: 1px solid #374151;
}

body.dark-mode .quiz-modal-title {
    color: #f9fafb;
}

body.dark-mode .quiz-close-btn {
    color: #d1d5db;
}

body.dark-mode .quiz-question-title {
    color: #f9fafb;
}

body.dark-mode .quiz-progress {
    color: #d1d5db;
}

body.dark-mode .quiz-option {
    background: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

body.dark-mode .quiz-option:hover {
    border-color: #25D366;
    background: #065f46;
    color: #ffffff;
}

body.dark-mode .quiz-option.selected {
    border-color: #25D366;
    background: #25D366;
    color: white;
}

body.dark-mode .typing-indicator {
    background: #374151;
}

body.dark-mode .typing-dot {
    background: #9ca3af;
}

body.dark-mode .quiz-modal-content {
    background: #1f2937;
}

body.dark-mode .flow-screen h3 {
    color: #F9FAFB;
}

body.dark-mode .flow-screen p {
    color: #D1D5DB !important;
}

body.dark-mode #photo-upload-btn {
    background: #374151;
    border-color: #4B5563;
}

body.dark-mode #photo-upload-btn p {
    color: #D1D5DB !important;
}

body.dark-mode .flow-screen label {
    color: #F9FAFB;
}

body.dark-mode #gender-male,
body.dark-mode #gender-female {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

body.dark-mode #gallery-popup {
    background: #1f2937 !important;
}

body.dark-mode #gallery-submit-btn {
    border-top-color: #374151 !important;
}