/* Notification System Styles */
.notification {
    @apply fixed font-medium break-words;
    top: 16px;
    right: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 10000;
    max-width: 300px;
    box-shadow: 0 4px 16px oklch(from var(--color-black) l c h / 0.2);
}

.notification-info {
    background-color: var(--color-blue-500);
    color: var(--color-white);
}

.notification-success {
    background-color: var(--color-green-600);
    color: var(--color-white);
}

.notification-warning {
    background-color: var(--color-amber-400);
    color: var(--color-black);
}

.notification-error {
    background-color: var(--color-red-600);
    color: var(--color-white);
}

/* Character count states */
.char-count-warning {
    color: var(--color-amber-400) !important;
}

.char-count-error {
    color: var(--color-red-600) !important;
}

/* Loading states */
.loading {
    @apply cursor-wait;
}

.textarea-loading {
    opacity: 0.6;
}

/* History empty state */
.history-empty {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--text-tertiary);
}

.history-empty-icon {
    margin-bottom: 8px;
}

.history-empty-subtitle {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.6;
}

/* App name error state */
.app-name-error {
    color: var(--color-red-400) !important;
}

/* App name success state */
.app-name-success {
    color: var(--color-teal-300) !important;
}
