/* Chrome Mobile Responsive Fix */
* {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

html {
    -webkit-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
    text-size-adjust: none !important;
    width: 100% !important;
    height: 100% !important;
}

body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: manipulation !important;
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
}

/* Force proper viewport behavior */
@viewport {
    width: device-width;
    initial-scale: 1.0;
    maximum-scale: 1.0;
    user-scalable: no;
}

/* Chrome Mobile Specific Fixes */
@media screen and (max-width: 768px) {
    html {
        font-size: 16px !important;
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
        padding: 10px !important;
        margin: 0 !important;
    }
    
    /* Fix To-Do cards */
    .sticky-note {
        width: calc(100vw - 40px) !important;
        max-width: 380px !important;
        min-width: 280px !important;
        margin: 0 auto !important;
    }
    
    .container {
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Note app fixes */
    .sidebar {
        width: 100% !important;
        max-height: 200px !important;
        overflow-x: hidden !important;
    }
    
    .main-content {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .toolbar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 14px !important;
    }
    
    body {
        padding: 8px !important;
    }
    
    .sticky-note {
        width: calc(100vw - 20px) !important;
        max-width: 340px !important;
        min-width: 260px !important;
    }
    
    .container {
        padding: 5px !important;
    }
    
    /* Toolbar scrolling for small screens */
    .toolbar {
        padding: 6px 8px !important;
        gap: 2px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .toolbar::-webkit-scrollbar {
        display: none !important;
    }
}

/* Chrome Mobile Input Fixes */
input, textarea, select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
}

/* Prevent zoom on input focus */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
textarea, 
select {
    font-size: 16px !important;
}

@media screen and (max-width: 480px) {
    input[type="text"], 
    input[type="email"], 
    input[type="password"], 
    input[type="number"], 
    textarea, 
    select {
        font-size: 16px !important;
    }
}