/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Enhanced Action Feedback Styles
 * High ROI Improvement - Action Feedback Clarity (ROI: 2.00)
 */

/* ============================================
   FEEDBACK CONTAINER
   ============================================ */

.enhanced-feedback-container {
    position: fixed;
    top: calc(var(--spacing-lg) * 1.25);
    right: calc(var(--spacing-lg) * 1.25);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    pointer-events: none;
    max-width: 400px;

/* ============================================
   FEEDBACK ELEMENTS
   ============================================ */

.enhanced-feedback {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) calc(var(--spacing-lg) * 1.25);
    background: var(--color-bg-card, var(--color-bg-card));
    border: 2px solid;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4);
    min-width: 280px;
    max-width: 400px;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

.enhanced-feedback::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--spacing-sm);
    background: currentColor;
    opacity: 0.8;

.enhanced-feedback.show {
    opacity: 1;
    transform: translateX(0);

.enhanced-feedback.hide {
    opacity: 0;
    transform: translateX(400px);

/* Feedback Types */
.enhanced-feedback-success {
    border-color: var(--color-success, #4caf50);
    color: var(--color-success, #4caf50);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));

.enhanced-feedback-error {
    border-color: var(--color-danger, #f44336);
    color: var(--color-danger, #f44336);
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.05));

.enhanced-feedback-warning {
    border-color: var(--color-warning, #ff9800);
    color: var(--color-warning, #ff9800);
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 152, 0, 0.05));

.enhanced-feedback-info {
    border-color: var(--color-info, #2196f3);
    color: var(--color-info, #2196f3);
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.05));

/* Prominent Feedback */
.enhanced-feedback-prominent {
    min-width: 320px;
    padding: calc(var(--spacing-lg) * 1.25) var(--spacing-xl);
    font-size: 1.1em;
    box-shadow: 0 12px 32px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.5);
    animation: feedbackPulse 2s ease-in-out infinite;

.enhanced-feedback-critical {
    animation: feedbackCritical 1s ease-in-out infinite;
    box-shadow: 0 0 20px currentColor;

/* Feedback Icon */
.enhanced-feedback-icon {
    font-size: 1.8em;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3));

.enhanced-feedback-prominent .enhanced-feedback-icon {
    font-size: 2.2em;

/* Feedback Message */
.enhanced-feedback-message {
    flex: 1;
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.4;
    color: var(--color-text-primary, var(--color-text-primary));

.enhanced-feedback-prominent .enhanced-feedback-message {
    font-size: 1.05em;
    font-weight: 700;

/* Close Button */
.enhanced-feedback-close {
    background: none;
    border: none;
    color: var(--color-text-secondary, var(--color-text-secondary));
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all 0.2s;
    flex-shrink: 0;

.enhanced-feedback-close:hover {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    color: var(--color-text-primary, var(--color-text-primary));
    transform: scale(1.1);

/* Loading Feedback */
.enhanced-feedback-loading {
    border-style: dashed;

.enhanced-feedback-loading .enhanced-feedback-icon {
    animation: spin 1s linear infinite;

/* ============================================
   BUTTON FEEDBACK
   ============================================ */

.action-feedback-active {
    position: relative;
    transform: scale(0.95);
    transition: transform 0.2s;

.action-feedback-active::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid var(--color-info, #2196f3);
    border-radius: inherit;
    animation: buttonPulse 0.5s ease-out;
    pointer-events: none;

.action-feedback-success {
    background-color: rgba(76, 175, 80, 0.2) !important;
    border-color: var(--color-success, #4caf50) !important;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4) !important;
    animation: buttonSuccess 0.6s ease-out;

.action-feedback-error {
    background-color: rgba(244, 67, 54, 0.2) !important;
    border-color: var(--color-danger, #f44336) !important;
    box-shadow: 0 0 12px rgba(244, 67, 54, 0.4) !important;
    animation: buttonError 0.6s ease-out;

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes feedbackPulse {
    0%, 100% {
        box-shadow: 0 12px 32px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.5);

    50% {
        box-shadow: 0 12px 32px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.5), 0 0 20px currentColor;

@keyframes feedbackCritical {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px currentColor;

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 30px currentColor, 0 0 40px currentColor;

@keyframes buttonPulse {
    0% {
        opacity: 1;
        transform: scale(1);

    100% {
        opacity: 0;
        transform: scale(1.2);

@keyframes buttonSuccess {
    0% {
        background-color: rgba(76, 175, 80, 0.4);
        transform: scale(1);

    50% {
        transform: scale(1.05);

    100% {
        background-color: rgba(76, 175, 80, 0.2);
        transform: scale(1);

@keyframes buttonError {
    0% {
        background-color: rgba(244, 67, 54, 0.4);
        transform: scale(1);

    25% {
        transform: translateX(-4px);

    50% {
        transform: translateX(4px);

    75% {
        transform: translateX(-2px);

    100% {
        background-color: rgba(244, 67, 54, 0.2);
        transform: translateX(0);

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }

/* ============================================
   POSITION VARIANTS
   ============================================ */

.enhanced-feedback[data-position="center"] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 10001;

.enhanced-feedback[data-position="center"].show {
    transform: translate(-50%, -50%) scale(1);

.enhanced-feedback[data-position="center"].hide {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .enhanced-feedback-container {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        max-width: none;

    .enhanced-feedback {
        min-width: auto;
        width: 100%;

    .enhanced-feedback-prominent {
        min-width: auto;

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}