/* ===== TOOLBAR LAYOUT ===== */
/* Bottom toolbar with action buttons and meters */

/* Toolbar */
.window-toolbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-small);
    padding: var(--spacing-medium);
    background: var(--glass-bg-strong);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Tool Item */
.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-small);
    border-radius: var(--radius-card);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.tool-item:hover {
    background: var(--glass-bg);
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.tool-item:active {
    transform: translateY(0);
    box-shadow: var(--elevation-1);
}

.tool-icon {
    font-size: var(--font-size-2xl);
}

/* Meter Colors - Icon Colors */
/* Feed/Food meter - Orange */
#feed-icon,
#feed-icon .material-icons {
    color: var(--color-meter-food);
}

/* Water meter - Blue */
#water-icon,
#water-icon .material-icons {
    color: var(--color-meter-water);
}

/* Play/Energy meter - Green */
#play-icon,
#play-icon .material-icons {
    color: var(--color-meter-energy);
}

/* Pet/Friendship meter - Pink */
#pet-icon,
#pet-icon .material-icons {
    color: var(--color-meter-friendship);
}

/* Progress Track */
.tool-progress-track {
    width: 100%;
    height: 4px;
    background: var(--color-background-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.tool-progress-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

/* Meter-specific progress colors */
#food-progress {
    background: var(--color-meter-food);
}

#water-progress {
    background: var(--color-meter-water);
}

#energy-progress {
    background: var(--color-meter-energy);
}

#friendship-progress {
    background: var(--color-meter-friendship);
}

/* Token Count */
.tool-token-count {
    font-size: 13px; /* Slightly larger than 12px, but not as large as 14px */
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .window-toolbar {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-small); /* Increased from xs */
        padding: var(--spacing-medium); /* Increased from small */
    }
    
    .tool-icon {
        font-size: var(--font-size-2xl); /* Keep larger icons */
    }
    
    .tool-item {
        padding: var(--spacing-small); /* Increased padding */
        min-height: 60px; /* Better touch target */
    }
    
    .tool-token-count {
        font-size: 13px; /* Slightly larger */
    }
}

@media (max-width: 375px) {
    .window-toolbar {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-small); /* Increased from xs */
        padding: var(--spacing-small); /* Increased from 6px */
    }
    
    .tool-icon {
        font-size: var(--font-size-xl); /* Keep readable size */
    }
    
    .tool-progress-track {
        height: 4px; /* Increased from 3px for visibility */
    }
    
    .tool-token-count {
        font-size: 13px; /* Slightly larger than 10px, but not too big */
        margin-top: 2px;
    }
    
    /* Ensure all touch targets are at least 44x44px */
    .tool-item {
        min-width: 50px; /* Increased from 44px */
        min-height: 56px; /* Increased from 44px for better tapping */
        padding: var(--spacing-small);
    }
}