/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

body {
    -webkit-tap-highlight-color: transparent;
    font-family: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    background-color: #F0F9FF; /* Light Sky Blue */
    background-image: radial-gradient(#E0F2FE 2px, transparent 2px);
    background-size: 20px 20px;
}

canvas {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
}

#word-list {
    max-height: 100%; /* Changed from 60vh to fill container */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #93C5FD #EFF6FF;
}

/* Custom Scrollbar */
#word-list::-webkit-scrollbar, .history-list::-webkit-scrollbar {
    width: 6px;
}
#word-list::-webkit-scrollbar-track, .history-list::-webkit-scrollbar-track {
    background: #EFF6FF;
    border-radius: 4px;
}
#word-list::-webkit-scrollbar-thumb, .history-list::-webkit-scrollbar-thumb {
    background-color: #93C5FD;
    border-radius: 4px;
}

/* Hide Scrollbar Utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.speak-btn:active {
    transform: scale(0.9);
}

.jelly-btn {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.jelly-btn:active {
    transform: scale(0.95);
}

.card-shadow {
    box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.1);
}

/* History Item Hover */
.history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Text Shimmer Effect for Loading */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.text-shimmer {
    background: linear-gradient(
        90deg, 
        currentColor 0%, 
        #60A5FA 25%, 
        #3B82F6 50%, 
        #60A5FA 75%, 
        currentColor 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 2s linear infinite;
}