body {
    font-family: 'Inter', sans-serif;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Style for the generated font output containers */
.font-output-card {
    word-break: break-all; 
}

.copy-button, #aiNicknameButton, #aiStyleButton, .suggested-nickname-button, .ai-styled-copy-button {
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}
.copy-button:active, #aiNicknameButton:active, #aiStyleButton:active, .suggested-nickname-button:active, .ai-styled-copy-button:active {
    transform: scale(0.95);
}

/* Toast Notification */
#toast {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 0;
    transform: translateY(20px);
}
#toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Loading spinner */
.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue for general */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-left: 8px;
}
#aiNicknameButton .loader { 
    border-top: 4px solid #ec4899; /* Pink */
}
#aiStyleButton .loader {
    border-top: 4px solid #3b82f6; /* Blue */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ai-styled-output-item { /* For the list of AI styles */
    word-break: break-all;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Gap between text and its copy button */
}

.ai-styled-text-preview {
    background-color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0; /* slate-200 */
    font-size: 1.1rem; /* Slightly larger for styled text */
    text-align: center;
    width: 100%;
    min-height: 40px; /* Ensure some height even for short names */
}

/* History modal styles */
#historyModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.5);
}

#historyModal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* History item styles */
.history-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    background-color: #f8fafc;
    transition: transform 0.2s;
    margin-bottom: 12px;
}
.history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Filter styles */
.filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* Pagination controls */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}