/* style.css - Professional Styling for Persona Mind */

:root {
    --primary-blue: #38bdf8;
    --secondary-indigo: #818cf8;
    --accent-pink: #f472b6;
    --dark-bg: #0f172a;
    --glass-bg: rgba(30, 41, 59, 0.7);
}

/* 1. මුළු පිටුවටම අදාළ පොදු සැකසුම් */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    background: linear-gradient(-45deg, #0f172a, #1e293b, #0f172a, #111827);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite; /* පසුබිම මෘදු ලෙස චලනය වීම */
}

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

/* 2. Glassmorphism Card එක සඳහා සැකසුම් */
.glass-card {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    background-color: var(--glass-bg);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. ප්‍රශ්න පෙන්වන විට ලැබෙන Animation එක */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 4. බොත්තම් (Buttons) සඳහා සැකසුම් */
button {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent; /* Mobile ස්පර්ශයේදී එන නිල් පැහැය ඉවත් කිරීමට */
}

/* පිළිතුරු බොත්තම් වලට මූසිකය ගෙනගිය විට හෝ ස්පර්ශ කළ විට */
#options-container button:active {
    transform: scale(0.97);
    background-color: rgba(56, 189, 248, 0.2);
}

/* 5. ප්‍රගති බාරය (Progress Bar) සඳහා දීප්තිමත් බවක් එක් කිරීම */
#progress-bar {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
    border-radius: 10px;
}

/* 6. Chart එක ඇති ස්ථානය සඳහා සැකසුම් */
canvas {
    max-width: 100% !important;
    filter: drop-shadow(0 0 10px rgba(129, 140, 248, 0.2));
}

/* 7. Mobile-specific වැඩිදියුණු කිරීම් */
@media (max-width: 640px) {
    h1 { font-size: 2.5rem !important; }
    .glass-card { padding: 1.5rem !important; }
    #main-image { height: 180px !important; }
    
    /* ජංගම දුරකථන වලදී බොත්තම් වල අකුරු ප්‍රමාණය ගැලපීම */
    #options-container button {
        font-size: 0.95rem;
        padding: 1rem 1.25rem !important;
    }
}

/* 8. සිංහල අකුරු සඳහා පේළි පරතරය (Line-height) සකස් කිරීම */
[lang="si"] #question-text, 
[lang="si"] #result-content {
    line-height: 1.8 !important;
}