.sug-wrapper {
    width: 100%;
    margin: 0;
}

.sug-greeting {
    width: 100%;
    background: linear-gradient(135deg, #3a47d5, #111827);
    background-size: 200% 200%;
    animation: sugGradientMove 4s linear infinite;

    color: #fff;
    padding: 6px 0;
    border-radius: 0;
    font-size: 14px;
    font-family: Arial, sans-serif;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);

    position: relative;
    overflow: hidden;
}

/* ✅ INNER CONTENT (FIXED) */
.sug-inner {
    padding: 2px 25px;
    text-align: left;
}

/* ✅ DESKTOP CONTROL */
@media (min-width: 1024px) {
    .sug-inner {
        max-width: 400px;   /* control width */
        margin-left: 300px;  /* 👈 push it inward under logo */
    }
}

/* Background movement */
@keyframes sugGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 🔥 WHITE GLOW */
.sug-greeting::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,0.20),
        rgba(255,255,255,0)
    );

    animation: sugGlowMove 5s linear infinite;
}

/* Glow movement */
@keyframes sugGlowMove {
    0% { left: -30%; }
    100% { left: 100%; }
}

/* Username */
.sug-greeting strong {
    color: #ffffff;
    font-weight: 700;
    margin-left: 4px;
}

/* Hover */
.sug-greeting:hover {
    transform: translateY(-1px);
}