:root {
    --text-color: #fff;
    --glass: rgba(255, 255, 255, 0.15);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 0;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(16px, 4vw, 32px);
    background: linear-gradient(135deg, #1e3c72, #2a5298); /* Default Blue */
    color: var(--text-color);
    transition: background 0.8s ease;
    overflow-x: hidden;
}

/* Background States for Indian Weather */
body.sunny   { background: linear-gradient(135deg, #FF4E50, #F9D423); }
body.rainy   { background: linear-gradient(135deg, #203A43, #2C5364); }
body.haze    { background: linear-gradient(135deg, #3E5151, #DECBA4); } /* For Smoke/Fog */

.weather-app {
    background: var(--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: clamp(20px, 5vw, 30px);
    width: min(100%, 400px);
    max-width: 400px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Chips for Cities */
.city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.city-chips button {
    background: rgba(0,0,0,0.2);
    border: none;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.3s;
    white-space: nowrap;
}

.city-chips button:hover { background: rgba(0,0,0,0.4); }

/* Search & Layout (Same as before) */
.search-container { display: flex; gap: 10px; margin-bottom: 20px; min-width: 0; }
input { flex: 1 1 auto; min-width: 0; padding: 10px; border-radius: 10px; border: none; outline: none; font: inherit; }
button { padding: 10px; border-radius: 10px; border: none; cursor: pointer; font: inherit; }
.main-info { text-align: center; margin-bottom: 30px; }
#weather-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
}
#temp { font-size: clamp(3rem, 14vw, 4rem); margin: 0; line-height: 1; }
#condition,
#location {
    overflow-wrap: anywhere;
}
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    min-width: 0;
}

.label,
.value {
    display: block;
    overflow-wrap: anywhere;
}

.label {
    font-size: 0.78rem;
    opacity: 0.85;
}

.value {
    margin-top: 4px;
    font-weight: 600;
}

/* AQI Color Codes */
.aqi-good { background: rgba(46, 204, 113, 0.4) !important; }   /* Green */
.aqi-mid  { background: rgba(241, 196, 15, 0.4) !important; }   /* Yellow */
.aqi-bad  { background: rgba(231, 76, 60, 0.4) !important; }    /* Red */

@media (max-width: 480px) {
    body {
        align-items: flex-start;
        padding: 12px;
    }

    .weather-app {
        border-radius: 16px;
    }

    .search-container {
        gap: 8px;
    }

    .search-container button {
        flex: 0 0 42px;
        min-width: 42px;
        padding: 10px 8px;
    }

    .city-chips {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .city-chips button {
        flex: 0 0 auto;
    }

    .main-info {
        margin-bottom: 22px;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }
}