@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
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: #25D366;
border: none;
color: white;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
margin-top: 8px;
}
.interactive-button:hover {
background: #128C7E;
}
.interactive-button:active,
.interactive-button.pressing {
transform: scale(0.95);
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;
}